设计视图 标准页面中预置了多种组件，在开发页面时，可以直接从左侧组件区域，将这些组件拖拽到右侧“页面内容”中。 图1 标准页面编辑界面（UI Builder） 配置组件属性 了解组件使用场景及配置方法 在配置使用组件前，可以将光标放在每个组件上后，组件右上角将显示帮助信息的问号图标。单击问号图标，即可进入该组件介绍页面，了解并学习AstroZero预置前端组件的使用场景及参数配置方法。 图2 组件帮助信息入口 选中组件，查看组件属性 在“设计视图”中，选中一个页面组件，可以在右侧“属性”页签，设置该组件的绑定数据、样式等属性，如图3所示。在设计视图中选中一个文本框，可以在右侧修改这个文本框的标签名、样式、绑定的数据模型等。 图3 设置组件的属性 页面及组件的事件代码 在“设计视图”中，选中任意组件，可以在右侧“事件”页签，设置组件的关联事件。例如，可以选择一个“按钮”，然后在按钮的“点击”事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。 图4 编辑组件的关联事件 利用组件导航，快速选中组件 当选中某个组件时，页面上方会在组件导航上显示它的html标签层级。因此，在组件数量比较多，位置较为紧密时，可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，在上图的组件导航中单击“页面”，可以直接选中页面上的最外层页面组件。 利用组件树，快速选中组件 在组件数量比较多，位置较为紧密时，也可以单击页面右下角的“组件树”，展开组件树，在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。 图5 利用组件树快速选中组件

模型视图 标准页面是通过数据模型驱动的，页面所有的逻辑都是围绕数据模型展开的。在将模型与前台页面组件或者后台逻辑绑定后，开发者只需要关注模型数据的实例化和处理，不需要关注页面的渲染和展示。 在页面底部，单击“模型视图”，即可从“设计视图”切换到“模型视图”，在模型视图下，可以查看、编辑以及管理数据模型，如图6所示。 图6 模型视图 模型定义 标准页面支持表1中四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前端组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现一定的逻辑。 表1 模型说明 模型分类 模型说明 模型参数的定义 模型方法的定义 API调用方法 自定义模型 自定义模型是由开发者自由定义的模型。 参数由开发者自定义，可以添加子节点。 开发者自定义方法。 $model.ref("modelName").actionName(); 对象模型 对象模型是直接与Object对象表映射生成的。 系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。 平台自动生成查询、保存、删除和统计4个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务模型 服务模型是与后台服务映射生成的，当前支持与服务编排或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组件与值的绑定。 图7 数据绑定

样例代码解读 通过下面详细的脚本代码内容解读，使您对脚本有一个更具体的认识。 一般情况下，编写脚本的大致流程为： 按需引入平台标准库。 图2 引入平台标准库 定义出参、入参结构。 图3 定义入参 图4 定义出参 定义方法以及使用的对象。 图5 定义方法及使用对象 进行数据库操作。 图6 数据库相关操作 下面通过解读以下脚本样例，了解一个脚本的总体结构框架、编写要求。 import * as decimal from 'decimal'; @action.object({type: "param"}) export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject; } @action.object({type: "param"}) export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal; } @action.object({type: "param"}) export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[]; } @action.object({type: "method"}) export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; } } 上述示例脚本包括三部分内容： 导入标准库或其他模块。 示例中第1行，表示将使用平台提供的decimal库。 import * as decimal from 'decimal'; 除了平台预置标准库，还可以声明对其他自定义模块的引用。例如，已经提前开发了一个脚本circle，可以用如下方式加载。 import * as circle from './circle'; 定义输入、输出变量。 脚本可以有多个输入、输出参数，也可以没有。所有的输入或输出参数必须封装在一个class中，作为实例成员。 本例中，脚本有6个输入参数，被封装为ActionInput。每个参数都必须定义其参数类型，同时还可以定义是否必填、标签、最大值、最小值等可选属性。 @action.object({type: "param"}) export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject; } 因为第6个输入参数“obj”的参数类型为自定义对象，所以还需要给出“MyObject”的定义。 @action.object({type: "param"}) export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal; } 脚本有1个输出参数，被封装为ActionOutput。 @action.object({type: "param"}) export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[]; } 定义方法。 样例中，ActionDemo是外部调用的class，使用export导出。ActionDemo定义了一个action method，使用action.method装饰，表明调用脚本时从此方法入口。greet是class的实例方法，其输入、输出参数就是前面定义的ActionInput和ActionOutput。 在一个脚本文件里面，action.method只能使用一次。 @action.object({type: "method"}) export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; } } 脚本编辑页面不支持单步调试，样例里的console.log可实现在日志里打印过程输出，方便代码调试。

公共接口 公共接口是对脚本、服务编排和对象进行再包装的一种方式。将创建的脚本、服务编排、对象包装成一个新公共服务，可以使得接口的URL地址的表达形式更规范，方便让前端页面或第三方系统进行调用。 因此，在创建完后台逻辑后（服务编排、脚本、对象），就需要先将此接口包装成标准的公共接口，才能被调用。本节中创建了2个业务脚本，因此需要对应创建2个公共接口，供前端页面调用。 创建公共接口的入口：在APP视图下，单击下方“服务”，即可进入公共接口创建页面。 图1 创建公共接口入口 图2 公共接口基本信息 图3 公共接口URL 父主题： 背景和原理