标准页面
相对于高级页面，标准页面主要用于对前端页面的样式要求相对简单的场景，这种页面一般只是针对业务数据的增、删、改、查等基础功能。
标准页面主要是通过对前端页面组件的组合编排，以及为组件配置属性、关联事件实现业务功能的，在组装“编辑设备”页面章节，则会详细介绍组件、组件属性以及事件之间的调用及相关配置。
标准页面的编辑环境也称为UI Builder，UI Builder是图形化、无码化的前端页面在线开发工具。借助标准页面，您只需要了解基本前端编码知识，通过将页面组件拖拽至“设计视图”的画布中，再进行必要的属性、事件配置，就可以完成页面的开发。
设计视图
标准页面中预置了多种组件，在开发页面时，可以直接从左侧组件区域，将这些组件拖拽到右侧“页面内容”中。
配置组件属性
- 了解组件使用场景及配置方法
在配置使用组件前，可以将光标放在每个组件上后，组件右上角将显示帮助信息的问号图标。单击问号图标，即可进入该组件介绍页面，了解并学习AstroZero预置前端组件的使用场景及参数配置方法。
图2 组件帮助信息入口
- 选中组件，查看组件属性
- 页面及组件的事件代码
- 利用组件导航，快速选中组件
当选中某个组件时，页面上方会在组件导航上显示它的html标签层级。因此，在组件数量比较多，位置较为紧密时，可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，在上图的组件导航中单击“页面”，可以直接选中页面上的最外层页面组件。
- 利用组件树，快速选中组件
在组件数量比较多，位置较为紧密时，也可以单击页面右下角的“组件树”，展开组件树，在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。
图5 利用组件树快速选中组件
模型视图
标准页面是通过数据模型驱动的，页面所有的逻辑都是围绕数据模型展开的。在将模型与前台页面组件或者后台逻辑绑定后，开发者只需要关注模型数据的实例化和处理，不需要关注页面的渲染和展示。
在页面底部，单击“模型视图”，即可从“设计视图”切换到“模型视图”，在模型视图下，可以查看、编辑以及管理数据模型，如图6所示。
模型定义
标准页面支持表1中四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前端组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现一定的逻辑。
|
模型分类 |
模型说明 |
模型参数的定义 |
模型方法的定义 |
API调用方法 |
|---|---|---|---|---|
|
自定义模型 |
自定义模型是由开发者自由定义的模型。 |
参数由开发者自定义，可以添加子节点。 |
开发者自定义方法。 |
$model.ref("modelName").actionName(); |
|
对象模型 |
对象模型是直接与Object对象表映射生成的。 |
系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。 |
平台自动生成查询、保存、删除和统计4个方法。 |
|
|
服务模型 |
服务模型是与后台服务映射生成的，当前支持与服务编排或Script映射。 |
参数根据后台服务的入参、出参映射生成为inputParam和outputParam节点。 |
平台自动生成了run方法 ，用于执行模型关联的服务编排或者Script。 |
$model.ref("modelName").run(); |
|
事件模型 |
事件模型是与后台事件的字段映射生成的，并且支持websocket刷新模型数据。 |
参数根据后台事件的字段映射生成。 |
平台自动生成了run方法 ，用于执行模型关联的服务编排或者Script。 |
$model.ref("modelName").run(); |
除了在模型中定义的方法，AstroZero还提供了如下标准API：
- 获取模型数据：$model.ref("modelName").getData();
- 设置模型数据：$model.ref("modelName").setData();
- 设置模型字段值：$model.ref("modelName").setValue(key,value);
模型绑定
模型与前端组件的绑定分为值绑定和属性绑定，绑定会在指定组件上创建双向数据绑定。
- 典型的值绑定场景有：表单、表格、列表视图对应的model绑定，以及输入框、下拉框等基础组件对应的value绑定，类似Vue的v-model。
- 典型的属性绑定场景有：下拉框的选项值、步骤条的步骤值等，类似Vue的v-bind。
如图7所示的例子中，实现了表格DataGrid组件与值的绑定。
