拖拽组件并关联模型 单击“设计视图”，切换到页面设计视图。 图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 级联框数据绑定 单击页面上方的，保存页面。
