了解高级页面 AstroZero前端页面有标准页面、高级页面和表单三种。本节主要带您了解、学习并使用高级页面。 标准页面：对于一般的业务应用系统，其功能主要是针对业务数据的增、删、改、查，前端界面的样式相对简单的页面场景，此时，推荐您使用平台提供的“标准页面”。您可以通过拖、拉、拽页面组件，再加上少量事件代码，即可拼装出所需页面，具体介绍请参见标准页面。 高级页面：对于一些样式比较复杂的页面，例如网站、电商、园区大屏等，您可以使用平台提供的“高级页面”。 高级页面是由一个或者多个Widget（即组件）拼装而成。如图1所示，组件是可复用的页面组成元素，一个页面由一个或多个组件拼装而成。如果将一个页面看成拼图游戏的完整图案，那么组件就相当于拼图的每一小块。 图1 页面与widget（组件）的关系 Widget的运行依赖Library（库），如果缺少相应的Library（库），则Widget不能正常运行。因此在加载widget前，需要先加载必要的Library。 在操作前端页面时，经常会需要调用后台数据，例如即将开发的登录页面，需要获取业务用户信息。这时需要通过桥接器调用后台的服务编排、Script等获取后台数据。因此，在引用widget时，经常需要配置桥接器。 AstroZero高级页面中的组件分为系统预置组件和自定义组件： 系统预置组件，可以直接使用。 登录组件属于自定义组件。本示例中已经为您提供了开发好的组件包，您只需要上传到站点中即可使用。自定义登录组件的开发方法，请参考（可选）开发自定义登录组件。

拖拽组件并关联模型 单击“设计视图”，切换到页面设计视图。 图12 切换到设计视图组件列表 将左侧组件区的“表单”拖拽到右侧“页面内容”中，在“元数据表单配置向导”弹窗底部，单击“取消”，创建一个空的表单控件。 当前不单独定义数据源，因此需要单击“取消”数据绑定。 图13 拖拽表单到页面并取消数据绑定 组装参数区域。 从左侧组件列表中，拖一个“容器”到上一步创建的“表单”。 从左侧组件列表中，拖一个“分栏”到上一步创建的“容器”中。 “分栏”默认有2个“栏”，即当前栅格中包含1行1列的区域。 选中“分栏”，在右侧属性的“行布局”中，单击，将分栏设置为3栏。 图14 设置分栏为3栏 在右侧“属性”页签中，单击“新增行”后面的图标，新增一行，如图15所示。设置后，分栏组件被设置为2行（分栏）3列（栏）。 图15 设置表格内的行列数 从左侧组件区的拖一个“输入框”到分栏组件的第1行（分栏）第1栏，并在右侧“属性”页签中将“标签”修改为“设备编码”。 图16 设备编码 分别向第1行第2栏、第2行第1栏、第2行第3栏中拖一个“输入框”，并设置“标签”为“设备名称”、第2行第1栏“设备型号”、第2行第3栏“详细地址”。 从左侧组件列表中，拖一个“下拉框”到分栏组件的第1行第3栏，并在右侧“属性”页签中将“标签”修改为“设备品牌”。 从左侧组件列表中，拖一个“级联选择框”到分栏组件的第2行第2栏，并将“标签”修改为“省/市/区”。 组装页面标题。 在左侧组件区拖拽一个“标题”组件到上一步创建的“容器”前面，并在右侧“属性”页签中将“标题内容”修改为“设备详情”，并设置“样式”的“高级设置”为“:root{text-align:center;font-size:20px;}”。 组装按钮区域。 在左侧组件区拖拽一个“容器”到3中创建的“容器”后（注意要在表单里面，两个容器在同级），并在右侧“属性”页签中将“水平对齐方式”修改为“中”，即居中对齐。 图17 拖拽容器 图18 设置居中对齐 从左侧组件区拖拽一个“按钮”到刚创建的“容器”中，并在右侧“属性”页签中，将“显示名称”修改为“保存”，将“类型”修改为“主要按钮”。 拖拽一个按钮到“保存”按钮右边，并设置为“取消”按钮，类型设置为“默认按钮”。 单击界面上方的，保存页面，可以在属性面板底部查看组件树。 图19 组装完成后页面的组件树 为页面组件关联模型。 选中“设备名称”输入框。 在右侧“属性”页签中单击，为“设备名称”输入框绑定“equipmentForm”自定义模型中的“name”参数，如图20所示。 数据绑定后，当在前台界面输入内容时，系统就会把输入框中的内容，赋值给“name”。 图20 输入框数据绑定 重复上一步，为“设备编码”、“设备型号”、“详细地址”文本输入框绑定“equipmentForm”自定义模型中的对应参数。 选中“设备品牌”下拉选择框，在右侧“属性”页签中单击，为选择框绑定“equipmentForm”自定义模型中的“HW__equipmentBrand__ CS T”参数。 选中“设备品牌”下拉选择框，在右侧“基本属性”中，单击“选项列表”的，在弹窗中输入“equipmentBrand”，在联想记录中，选择设备对象字段“HW__equipmentBrand__CST”，为选择框添加下拉选项关联的字段，如图21所示。 图21 为下拉选择框定义可选项 图22 输入字段搜索 图23 关联字段 选中“省/市/区”级联框，在右侧“属性”页签中单击，为级联框绑定“equipmentForm”自定义模型中的“cascaderAddress”参数。 单击属性值绑定后的“+”，将“属性”设置为“选择数据”，“模型字段”绑定到“cascaderOptions”，如图24所示。 数据绑定后，级联选择框的选项来自“cascaderOptions”；同时，当在前台界面选择省/市/区时，系统就会把选择结果赋值给“equipmentForm.cascaderAddress”。 图24 级联框数据绑定 单击页面上方的，保存页面。

定义模型 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”中，将鼠标放在“Page”目录上，单击界面上出现的“+”，选择“标准页面”。 在“标签”和“名称”文本框中输入“editEquipment”，单击“添加”。 平台实际创建的页面名称为“HW__editEquipment”，包含前缀“HW__”，对应首次创建应用时定义的命名空间。新建创建的页面，默认是当前用户锁定状态，可以进行编辑保存等操作。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。 定义与“省/市/区”级联框的可选项相关联的自定义模型。 在页面底部单击“模型视图”，进入模型视图页面，单击“新增模型”。 添加自定义模型，模型名称“cascaderOptions”，单击“下一步”，如图4所示。 图4 定义级联框用到的自定义模型 设置保持不变，单击“下一步”。 方法保持不变，单击“确定”。 单击页面上方的，保存设置。 定义与页面上各个输入框、选择框相关联的自定义模型。 在“模型视图”中，单击“新增模型”。 添加自定义模型，模型名称“equipmentForm”，单击“下一步”，如图5所示。 图5 定义页面组件需要关联的自定义模型 单击“新增节点”，逐一添加与页面元素对应的参数（name、HW__equipmentSN__CST、HW__equipmentBrand__CST、HW__equipmentModel__CST、cascaderAddress、HW__installationDetailAddress__CST），单击“下一步”，如图6所示。 为简化后续事件脚本，除cascaderAddress外，请确保其他5个参数的参数名与设备对象（HW__Equipment__CST）的字段名保持一致。注意这里的下划线是两个，要与表1里的字段保持一致，HW__需要修改为实际的命名空间前缀。 图6 添加模型包含的参数 方法保持不变，单击“确定”。 单击页面上方的，保存设置。 定义与API（editEquipment:1.0.0）关联的服务模型。 在“模型视图”中，单击“新增模型”。 添加服务模型，模型名称“editEquipment”，来源选择“服务”，单击“下一步”，如图7所示。 图7 定义服务模型 指定模型与API“editEquipment”关联，单击“下一步”，如图8所示。 关联API后，系统会自动显示API中脚本的输入、输出参数。 图8 为模型关联Script 方法保持不变，单击“确定”。 系统自动添加了执行的方法，如图9所示。未来，将在事件脚本中执行这个方法，即执行模型关联的API中的脚本。 图9 为模型定义方法 单击页面上方的，保存设置。 定义与API（queryEquipmentDetail）关联的服务模型。 在“模型视图”中，单击“新增模型”。 添加服务模型，模型名称“queryEquipmentDetail”，“来源”选择“服务”，单击“下一步”。 指定模型与API“queryEquipmentDetail”，单击“下一步”。 图10 为模型关联Script 方法保持不变，单击“确定”。 单击页面上方的，保存设置。 图11 新增的页面模型

操作步骤 在应用中，单击下方“服务”，进入公共接口创建页面。 图1 创建公共接口入口 单击“新建”，进入新建公共接口页面。 图2 公共接口创建 创建“编辑设备”脚本“HW__editEquipment”的公共接口。 设置接口参数信息，设置标签和操作名称为“editEquipment”，版本为“1.0.0”，URL为“/editEquipment”，“类型”选择“脚本”，“资源”为“HW__editEquipment”，方法为“POST”，然后单击“保存”。 如果在“资源”下拉框中，未找到需要关联的脚本，请检查相关脚本是否已启用。 图3 设置“编辑设备”脚本的公共接口参数 在应用开发页面，单击左下角的“服务”，进入公共接口页面，查看上一步中新建的自定义接口URL“/service/HW__MyApp/1.0.0/editEquipment”，后续开发页面时，会使用这个URL。 图4 查看自定义接口URL 参照上一步，创建“按ID查询设备详情”脚本“HW__queryEquipmentDetail”的公共接口，详细接口信息如图5所示。 标签和操作名称为“queryEquipmentDetail”，版本为“1.0.0”，URL为“/queryEquipmentDetail”，“类型”选择“脚本”，“资源”为“HW__queryEquipmentDetail”，“方法”为“GET”。 图5 “HW__queryEquipmentDetail”的公共接口参数

背景信息 工作队列是在业务场景中，用来记录可以受理相同具体业务的用户群体。 这种记录一直保留在队列中，直到用户接受它们并进行处理，或它们被转移到另一个队列。您可以指定每个队列支持的对象集合，以及允许从队列检索记录的用户组（用户、业务用户等）。 创建工作队列主要包含两方面内容： 添加队列的成员。 队列成员可以是单个用户、公共组、单个角色或带有下级角色的角色，以及业务用户；如果队列的成员是角色，此队列将包含角色中所有的用户。 配置队列支持的对象。 配置了支持的对象后，涉及特定数据对象的触发器、待审批任务才能进入该队列。

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”中，将鼠标放在“Script”目录上，单击界面上出现的“+”，选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“queryEquipmentDetail”，单击“添加”。 系统实际创建的脚本名称为“HW__queryEquipmentDetail”，“HW__”前缀由租户命名空间namespace决定。新建创建的脚本，默认是当前用户锁定状态，可以进行编辑保存等操作。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在代码编辑器中插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 /***************************** * 本脚本用于按设备ID查询设备详情 * ***************************/import * as db from 'db';//导入处理object相关的标准库import * as context from 'context';//导入上下文相关的标准库//定义入参结构@action.object({ type: "param" })export class ActionInput { @action.param({ type: 'String', required: true }) equipmentId: string;//设备ID}//定义出参结构@action.object({ type: "param" })export class ActionOutput { @action.param({ type: 'Any', label: 'equipment' }) equipment: object;//设备对象}@useObject(['HW__Equipment__CST'])//使用数据库对象HW__Equipment__CST@action.object({ type: "method" })export class QueryEquipmentDetail { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public queryEquipmentDetail(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { //必填校验 if (!input.equipmentId || input.equipmentId == "") { error.name = "EQM"; error.message = "Equipment id is required."; throw error; } //获取HW__Equipment__CST这个Object的操作实例 let s = db.object('HW__Equipment__CST'); //查询字段(全部) let option = {}; //查询条件 let condition = { "conjunction": "AND", "conditions": [{ "field": "id", "operator": "eq", "value": input.equipmentId }] }; //调用按条件查询Equipment__CST的接口 let record = s.queryByCondition(condition, option); //如果查询到数据 if (record && record[0]) { //拼接前台省市区级联选择器的数据模型 let cascaderAddress = []; if (record[0].HW__installationSiteProvince__CST) { cascaderAddress.push(record[0].HW__installationSiteProvince__CST); if (record[0].HW__installationSiteCity__CST) { cascaderAddress.push(record[0].HW__installationSiteCity__CST); if (record[0].HW__installationSiteArea__CST) { cascaderAddress.push(record[0].HW__installationSiteArea__CST); } } } record[0].cascaderAddress = cascaderAddress; //将结果挂入输出对象中 out.equipment = record[0] } } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; }} 单击编辑器上方的，保存脚本。

了解服务编排 在传统的开发中程序员一般是基于代码进行开发，程序员需要学习内容较多，开发效率相对低一些，开发门槛也高。AstroZero的服务编排功能，类似于编程中一段有流程、条件处理、判断逻辑的程序。这段程序有输入参数和输出参数、可以独立成为一个对外调用的方法。同时，在程序内部，也可以调用其他的方法。 AstroZero中的服务编排是将原来基于代码编程改变为用图形化，拖拉拽的方式去编程。如图1所示，服务编排界面是图形化、模板化的，您甚至不需要任何编程经验，将左侧面板区的组件拖拽到右侧画布、做必要的配置，就可以完成服务编排的开发。 图1 服务编排界面 服务编排界面中，可以编排如下组件： 基本组件：在服务编排引用脚本或者另一个服务编排，增/改/删/查记录，以及发送邮件、发送事件等。 逻辑组件：在服务编排中实现变量赋值Assignment、循环Loop、跳出循环Break、决策Decision和等待Wait。 商业对象：将封装好的BO能力作为服务编排中的一个节点。 连接器：将短信发送、支付等第3方连接器作为当前服务编排中的一个节点。 除了图形化编排，AstroZero也支持服务编排的在线测试验证，以及问题跟踪调试，方便您及时发现并解决问题。 服务编排测试通过、发布后，既可以直接被前端页面调用，也可以作为restful接口被第三方系统调用，也可以包装成公共接口后被调用。本节中主要是将服务编排包装成一个公共接口后，供页面调用，“管理设备”功能中涉及的业务逻辑，以及服务编排与脚本关系如表1下所示，详细操作方式及说明请参见创建业务逻辑。

验证并发布 测试新增逻辑能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部输入测试数据，单击测试窗口右上角执行图标。 测试报文样例如下，equipmentId可参考创建“编辑设备”脚本验证新增设备时生成的设备ID： { "equipmentId": "cQue000000e1qnhgtCng"} 执行成功，会在“输出”页签返回查询结果，返回结果是上一节中新增的设备信息。 图1 查询返回的设备信息 测试成功，单击编辑器上方的，启用脚本。

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“editEquipment”，单击“添加”。 系统实际创建的脚本名称为“HW__editEquipment”，“HW__”前缀由租户命名空间namespace决定。新建创建的脚本，默认是当前用户锁定状态，可以进行编辑保存等操作。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击，进行锁定。 在代码编辑器中，插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 //本脚本用于新增或者修改设备信息import * as db from 'db';//导入处理object相关的标准库import * as context from 'context';//导入上下文相关的标准库//定义入参结构，入参包含1个参数：equipment对象，为必填字段@action.object({ type: "param" })export class ActionInput { @action.param({ type: 'Any', required: true, label: 'equipment' }) equipment: object;}//定义出参结构，出参包含1个参数，记录equipment的id@action.object({ type: "param" })export class ActionOutput { @action.param({ type: 'String' }) equipmentId: string;}//使用数据对象HW__Equipment__CST@useObject(['HW__Equipment__CST'])@action.object({ type: "method" })export class EditEquipment { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public editEquipment(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let equipment = input.equipment; //将入参赋值给equipment变量，方便后面使用 let s = db.object('HW__Equipment__CST'); //获取HW__Equipment__CST这个Object的操作实例 delete equipment['cascaderAddress']; //删除入参中不需要插入HW__Equipment__CST对象的多余属性 //新增设备 if (!equipment['id']) { //必填校验 if (!equipment['HW__equipmentSN__CST']) { error.name = "EQM"; error.message = "Field 'HW__equipmentSN__CST' is required."; throw error; } let equipmentId = s.insert(equipment); //向HW__Equipment__CST插入一条数据，返回数据的唯一标识即设备ID if (equipmentId && equipmentId != "") { out.equipmentId = equipmentId; } else { error.name = "EQM"; error.message = "Equipment Cannot Be Added."; throw error; } } //编辑修改设备 else { let id = equipment['id']; delete equipment['id']; let count = s.update(id, equipment); //根据设备ID，编辑更新HW__Equipment__CST的一条数据 if (count && count == 1) { out.equipmentId = id; } else { error.name = "EQM"; error.message = "Equipment Cannot Be Updated."; throw error; } } } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; }} 单击编辑器上方的，保存脚本。

验证并发布 测试新增逻辑能否正常执行。 单击编辑器上方的，执行脚本。 如图1所示，在界面底部输入测试数据，单击测试窗口右上角执行图标。 图1 测试脚本 测试报文采用json格式，样例如下（报文中加粗斜体内容请替换为实际的字段名）： { "equipment": { "name": "百草园A栋1单元1号", "HW__equipmentSN__CST": "3217890001" } } 执行成功，会在“输出”页签返回equipmentId。请保存这个返回结果，后续的测试中会用到。 { "equipmentId": "cQue000000e1qnhgtCng" } 如果执行失败，请检查之前设备对象、脚本，以及测试报文三者中的对象名、字段名是否一致。 到设备对象布局页面（Equipment Records），预览页面，检查数据是否插入成功。 在“Equipment”目录的“Object”下，单击设备对象“HW__Equipment__CST”，在“布局”页签下，单击“Equipment Records”后的预览图标。 图2 对象布局页面 在页面中，检查设备列表中是否包含刚插入的测试数据。 如果已新增数据，为了后续测试方便，建议多创建几条数据。 测试修改逻辑能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部输入测试数据，单击测试窗口右上角执行图标。 如下样例报文中的加粗id值，请修改为图1的返回结果，加粗斜体字段名请替换为实际的字段名。以下报文是修改name字段。 { "equipment": { "id": "cQuXXXXXXXXng", "name": "百草园B栋2单元2号", "HW__equipmentSN__CST": "3217890001" } } 刷新设备对象布局页面（Equipment Records）的预览页面，查看测试数据是否符合预期。 测试成功，单击编辑器上方的，启用脚本。

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 选中“创建一个新脚本”，在“名称”文本框中输入“deleteEquipment”，单击“添加”。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在代码编辑器中插入如下脚本代码。 脚本中红色内容请替换为实际的对象名、字段名。 //本脚本用于删除设备import * as db from 'db';//导入处理object相关的标准库import * as context from 'context';//导入上下文相关的标准库//定义入参结构，入参包含1个参数：Equipment对象，为必填字段@action.object({ type: "param" })export class ActionInput { @action.param({ type: 'String', required: true, label: 'String' }) id: string;}//定义出参结构，出参包含1个参数，Equipment的记录id@action.object({ type: "param" })export class ActionOutput { @action.param({ type: 'String' }) id: string;}//使用数据对象HW__Equipment__CST@useObject(['HW__Equipment__CST'])@action.object({ type: "method" })export class DeleteEquipment { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public deleteEquipment(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let id = input.id; let s = db.object('HW__Equipment__CST'); //获取HW__Equipment__CST这个Object的操作实例 //查询条件 let condition = { "conjunction": "AND", "conditions": [{ "field": "id", "operator": "eq", "value": id }] }; let isDeleted = s.deleteByCondition(condition); if (isDeleted) { out.id = id; } else { error.name = "EQERROR"; error.message = "删除设备失败！"; throw error; } } catch (error) { console.error(error.name, error.message); error.Error(error.name, error.message); } return out; }} 单击脚本编辑器上方的，保存脚本。

样例代码解读 通过下面详细的脚本代码内容解读，使您对脚本有一个更具体的认识。 一般情况下，编写脚本的大致流程为： 按需引入平台标准库。 图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可实现在日志里打印过程输出，方便代码调试。

了解应用目录及菜单 一个业务系统通常包括前端页面、后台逻辑和数据库表。因此，AstroZero采用类似的结构管理应用程序。 如图1所示，应用管理页面包含三部分（红框1、红框2和红框3）： 红框1中是当前应用的页面、模型和逻辑。在后续章节中，开发的页面、对象及后台逻辑，推荐按以下规划的方式，将应用资源分别放在对应的目录下： Object：数据对象 Script：脚本 Flow：服务编排 Bpm：BPM Page：前端页面 红框2中是应用管理功能，例如预览应用、编译打包、发布应用等。 红框3中是应用设置功能，例如设置应用导航、页面设置等。 红框4中是AstroZero应用开发环境的导航菜单，单击“首页”可返回开发环境首页。 图1 应用的管理目录 父主题： 创建应用

业务场景 设备维修管理系统应用中，包含以下两类用户： 系统管理员用户：管理应用的用户，用于新增业务用户，添加用户权限、添加设备信息、管理工单和监控设备。 本示例以登录AstroZero开发应用的账号，作为管理员账号。 业务用户：使用“设备维修管理系统”应用的用户，分别是客服人员、派单员及维修人员。 设备运维管理和维修场景的业务流程： 系统管理员进行电梯信息的管理和维护，如增加电梯基本信息，修改电梯基本信息等，对业务用户的管理，如新增系统业务用户，并为其分配权限等。 电梯客服人员受理用户投诉，并创建维修单。 派单人员收到客服人员的维修单后，派发给维修工程师。 维修工程师进行现场修理，并在处理完成后关闭维修单。

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