云服务器内容精选

华为云首页用户手册

开发“编辑设备”功能

ASTRO轻应用 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 级联框数据绑定单击页面上方的，保存页面。

ASTRO轻应用 ASTROZERO 开发“编辑设备”功能
ASTRO轻应用 ASTROZERO-组装“编辑设备”页面:定义模型

定义模型进入创建“设备维修管理系统”应用中创建的应用。在“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 新增的页面模型

ASTRO轻应用 ASTROZERO 开发“编辑设备”功能
APPCUBE-组装“编辑设备”页面:定义模型

定义模型进入“设备维修管理系统”应用。在“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 新增的页面模型

APPCUBE 开发“编辑设备”功能
APPCUBE-组装“编辑设备”页面:拖拽组件并关联模型

拖拽组件并关联模型单击“设计视图”切换到页面设计视图。图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__CST”参数。选中“设备品牌”下拉选择框，在右侧“基本属性”中，单击“选项列表”的，在弹窗中输入“equipmentBrand”，在联想记录中，选择设备对象字段“HW__equipmentBrand__CST”，为选择框添加下拉选项关联的字段，如图21所示。图21 为下拉选择框定义可选项图22 输入字段搜索图23 关联字段选中“省/市/区”级联框，在右侧“属性”页签中单击，为级联框绑定“equipmentForm”自定义模型中的“cascaderAddress”参数。单击属性值绑定后的“+”，将“属性”设置为“选择数据”，“模型字段”绑定到“cascaderOptions”，如图24所示。数据绑定后，级联选择框的选项来自“cascaderOptions”；同时，当在前台界面选择省/市/区时，系统就会把选择结果赋值给“equipmentForm.cascaderAddress”。图24 级联框数据绑定单击页面上方的，保存页面。

APPCUBE 开发“编辑设备”功能