ASTRO轻应用 ASTROZERO-AstroZero高级页面概述:初识高级页面开发界面
初识高级页面开发界面
高级页面开发工作台,功能模块布局说明如下:
- 高级页面工具栏(序号1)
展示页面开发过程中的常用工具,如保存、发布,电脑端或者移动端页面设置等。
- :用于展开、收起高级组件列表。
- /:为了让同一页面能够更好的呈现于电脑端和移动端,低代码平台提供了高级页面的电脑端和移动端两种终端视图,用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL,当电脑端或移动端加载这一URL时,平台会自动检测用户所用的设备类型并加载相应视图页面。
- :保存当前开发页面的修改。
- :发布当前开发的页面,页面发布后可以预览该页面的运行态效果。
页面修改、保存后,需再次执行发布操作,才能在应用和预览页面中体现修改内容。
- :页面发布后,可以预览该页面运行态效果。
- :页面开发完成后,可将该页面发布为模板。
- /:页面开发过程中如果出现误操作,可执行撤销、复原操作。
- :低代码平台支持检查高级页面性能,生成性能报告页供开发者查看。
- /:用于调节页面画布在开发工作台中的大小比例。
- :自动适应页面画布在开发工作台中的大小比例。
- :开启画布网格线功能,用于标定组件在画布中的位置。
- :设置高级页面的分辨率、网格大小、背景颜色和背景图片。
- :设置页面的状态。
- 组件分类列表(序号2)
包含高级组件的功能分类,用于在开发高级页面时对组件进行筛选,方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等,可选择相应的分类来筛选高级组件。
- 高级组件展示、选择区域(序号2、3)
选定序号2的组件分类后,属于该功能分类的组件将显示在序号3的区域。在该区域中,还包含了搜索框、应用场景、预置和自定义多种筛选条件。
- 搜索框:通过组件名称,可快速查询归属于当前选定组件分类中的高级组件。
图2 搜索框
- 应用场景筛选:可快速筛选不同应用场景的高级组件,当前应用场景包含通用、智慧园区、5G消息和其他等。
图3 应用场景筛选
- 预置和自定义筛选:用于筛选当前选定组件分类,包括预置组件和用户自定义组件。
预置组件是低代码平台提供的全局高级组件,详情请参见设置AstroZero高级页面预置组件属性。自定义组件为用户自主开发的高级组件,详情请参见为AstroZero高级页面添加自定义组件。
- 搜索框:通过组件名称,可快速查询归属于当前选定组件分类中的高级组件。
- 画布(序号4)
编辑页面内容及页面视图区域,可将组件从高级组件展示选择区域拖入该区域,快速搭建高级页面。下面以绝对布局方式的高级页面为例进行介绍。
- 定位到所需组件后,便可以将其拖动到画布中,用于构建所需的高级页面。
图4 拖拽组件到画布中
- 在画布中,可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线,帮助布局组件。
图5 调整组件
- 组件的右键设置:在画布中选中组件,单击鼠标右键会弹出删除、复制、粘贴(如果已复制组件)、格式刷、置于顶层、置于底层、高级设置选项。
- 删除:删除当前选中的高级组件,也可通过键盘中BackSpace键(退格键)和Delete键(删除键)实现。
- 复制:复制当前选中的高级组件,也可通过快捷键Ctrl+C实现。
- 粘贴:用于粘贴已复制的高级组件,也可通过快捷键Ctrl+V实现。
- 格式刷:用于复制当前选中组件的属性,应用于其他组件。可选的属性包含样式(边框、背景)、位置(距左、距上、高度、宽度)和其他属性。选定所需格式刷内容后,光标会变成刷子样式,单击所需格式刷组件即可。
图6 格式刷操作示例
- 置于底层/顶层:用于设置当前选中高级组件的堆叠顺序,即 CSS 中的z-index属性。仅绝对布局类型的高级页面,存在该设置选项。
- 高级设置:用于设置当前组件的样式属性,全局高级组件详细介绍,请参见设置AstroZero高级页面预置组件属性。
- 定位到所需组件后,便可以将其拖动到画布中,用于构建所需的高级页面。
- 组件属性设置区域(序号5)
未选中画布中任何组件时,此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件,切换到该组件的“组件属性设置”栏,进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。
- 属性设置:组件基本属性设置,支持在自定义组件中添加自定义属性,详细介绍请参见为AstroZero高级页面添加自定义组件。
- 数据设置:设置组件绑定的桥接器,以实现通过桥接器调用后台接口,获取后台数据,详情请参见使用桥接器为AstroZero高级页面组件绑定数据。
- 事件绑定:设置在运行态,对该组件相关操作的事件触发的具体动作,详情请参见添加事件或宏实现AstroZero高级页面组件交互。
- 路由设置:当前该功能主要用于流式布局类型高级页面中的“路由导航”组件。