本节中将使用到com.bstek.dorado.sample.standardlesson.entity包下的SlMenu实体对象类。SlMenu.java中通一对多关系配置了它自身存在的父子关系,它所代表的数据关系也是递归关系。
package com.bstek.dorado.sample.standardlesson.entity; import java.util.List; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table; import javax.persistence.Transient; @Entity @Table(name = "sl_menu") public class SlMenu { @Id @Column(name = "MENU_ID") private Long menuId; @Column(name = "MENU_NAME") private String menuName; @Column(name = "PARENT_ID") private Long parentId; @Column(name = "REMARKS") private String remarks; @Column(name = "ICON") private String icon; @Column(name = "SHOW_ORDER") private String showOrder; @Column(name = "URL") private String url; @Transient private List<SlMenu> slMenuSet; 省略get,set方法。 }
步骤1:在com.bstek.dorado.sample.standardlesson.junior.middle.base目录下新建View,将View命名为MenuManage.view.xml。
步骤2:新建并配置DataType
在【ViewConfig】节点下的【Model】节点下添加一个DataType,设定DataType的属性如下:
属性 | 值 | 说明 |
---|---|---|
name | SlMenu | DataType的名称 |
设定此DataType的parent属性为models目录中Common.model.xml中配置的SlMenu,使之继承公共DataType:
在当前DataType下新增6个PropertyDef,propertyDef1~propertyDef6,分别设置propertyDef的属性如下:
PropertyDef | name | label | readOnly |
---|---|---|---|
propertyDef1 | menuId | 菜单编号 | true |
propertyDef2 | menuName | 菜单名称 | |
propertyDef3 | remarks | 备注 | |
propertyDef4 | icon | 图标 | |
propertyDef5 | showOrder | 菜单顺序 | |
propertyDef6 | url | 菜单超链接 |
鼠标选中【SlMenu】,在左侧【Dorado ToolBox】的【Others】分类下,双击【Reference】,添加一个新的Reference对象到DataType中设定属性:
属性 | 值 | 说明 |
---|---|---|
name | slMenuSet | Reference的名称 |
dataType | [SELF] | DataType |
dataProvider | menuService#getMenuByParentId | 跟DataSet的dataProvider一致,由menuService这个bean中的getMenuByParentId方法为Reference对象提供数据加载服务 |
paramter | $${this.menuId} | 动态EL表达式。表示以当前SlDept对象的ID作为parameter的值 |
如下图所示:
步骤3:新建并配置DataSet
在【ViewConfig】节点下的【View】节点下添加一个DataSet控件,设定DataSet的属性如下:
属性 | 值 | 说明 |
---|---|---|
id | datasetMenu | 控件的Id |
dataType | [SlMenu] | DataSet的数据类型 |
dataProvider | menuService#getTopMenu | 由deptService这个bean中的getTopMenu方法为DataSet提供数据加载服务 |
步骤4:新建并配置SplitPanel
鼠标选择【ViewConfig】节点下的【View】节点,并通过Dorado ToolBox找到SplitPanel,双击添加SplitPanel控件:
设置SplitPanel的属性如下:
属性 | 值 | 说明 |
---|---|---|
position | 300 | 边组件的当前位置 |
步骤5:新建并配置DataTree
接下来需要在页面左侧添加一个DataTree。
鼠标点开SplitPanel节点,选中【SideControl】,通过Dorado ToolBox找到DataTree,双击添加DataTree控件:
设置DataTree属性如下:
属性 | 值 | 说明 |
---|---|---|
id | datatreeMenu | 控件的Id |
dataSet | datasetMenu | 通过dataSet属性告知DataTree绑定是哪些数据,以便在DataTree中展示和处理。 |
currentNodeDataPath | CURRENT_MENU | 自动注册到DataPath中的自定义片段的名称。 |
在节点BindingConfigs下添加一个BindingConfig子节点,设定BindingConfig属性:
属性 | 值 | 说明 |
---|---|---|
labelProperty | menuName | 以当前节点对应的实体对象的label属性作为树节点的标题信息 |
name | menu | 名称 |
childrenProperty | slMenuSet | 获取当前节点的slMenuSet属性,作为子节点的数据 |
recursive | true | 是否支持递归处理 |
如下图所示:
步骤6:新建并配置Container
接下来需要在页面右侧添加一个Container,用于放置子控件。
鼠标点开SplitPanel节点,选中【MainControl】,通过Dorado ToolBox找到Container,双击添加Container控件:
步骤7:新建并配置FieldSet
鼠标点开SplitPanel节点,选中【MainControl】节点下的Container控件,通过Dorado ToolBox找到FieldSet,双击添加FieldSet控件:
设置控件属性如下:
属性 | 值 | 说明 |
---|---|---|
caption | 菜单信息 | FieldSet控件显示的标题 |
height | 300 | 控件的高度 |
width | 500 | 控件的宽度 |
步骤8:新建并配置AutoForm
鼠标点开FieldSet节点,选中【Children】,通过Dorado ToolBox找到AutoForm,双击添加AutoForm控件:
设置控件属性如下:
属性 | 值 | 说明 |
---|---|---|
id | autoformMenu | 控件的Id |
dataSet | datasetMenu | 通过dataSet属性告知AutoForm绑定是哪些数据,以便在AutoForm中展示和处理。 |
dataPath | !CURRENT_MENU | 表示当前树节点下的数据实体 |
cols | * | AutoForm控件单列显示 |
labelSeparator | : | AutoForm Element中标签和输入框间的分隔符 |
labelWidth | 100 | AutoForm Element中标签宽度 |
鼠标选中autoformMenu控件,在左侧的【Dorado ToolBox】工作区的【AutoForm】分类中双击【AutoFormElement】将表单元素加入autoformMenu控件中,新建 6个AutoForm Element,分别设置其属性为:
AutoForm Element | name | editorType |
---|---|---|
AutoForm Element1 | menuId | |
AutoForm Element2 | menuName | |
AutoForm Element3 | icon | |
AutoForm Element4 | showOrder | |
AutoForm Element5 | url | |
AutoForm Element6 | remarks | TextArea |
到目前为止,View的设置完毕,接下来我们准备后台服务。
Attachments:
image2020-4-28 14:58:44.png (image/png)
image2020-4-28 14:59:14.png (image/png)
image2020-4-28 14:59:45.png (image/png)
image2020-4-28 15:0:42.png (image/png)
22.3-1.png (image/png)
22.3-2.png (image/png)
22.3-5.png (image/png)
22.3-9.png (image/png)