Dorado 7 : 22.3.1.1 创建视图并添加控件

本节中将使用到com.bstek.dorado.sample.standardlesson.entity包下的SlMenu实体对象类。SlMenu.java中通一对多关系配置了它自身存在的父子关系,它所代表的数据关系也是递归关系。

...
@Entity
@Table(name = "sl_menu")
public class SlMenu implements Serializable {
    private static final long serialVersionUID = 1L;

    private int menuId;

    private String menuName;
    ...
    private Set<SlMenu> slMenuSet = new HashSet<SlMenu>(0);
    public SlMenu() {
        super();
    }
   
    ...
    @OneToMany(fetch = FetchType.LAZY, mappedBy = "slMenu")
    public Set<SlMenu> getSlMenuSet() {
        return slMenuSet;
    }
}

 

步骤1:在com.bstek.dorado.sample.standardlesson.junior.middle.base目录下新建View,将View命名为MenuManage.view.xml。

 

步骤2:新建并配置DataType

在【ViewConfig】节点下的【Model】节点下添加一个DataType,设定DataType的属性如下:

属性
说明
nameSlMenuDataType的名称

设定此DataType的parent属性为models目录中Common.model.xml中配置的SlMenu,使之继承公共DataType:

在当前DataType下新增6个PropertyDef,propertyDef1~propertyDef6,分别设置propertyDef的属性如下:

PropertyDef
name
label
readPnly
propertyDef1menuId菜单编号true
propertyDef2menuName菜单名称 
propertyDef3remarks 备注 
propertyDef4icon图标 
propertyDef5showOrder菜单顺序 
propertyDef6url菜单超链接 

在本节开发中,对于子菜单的加载我们直接使用延迟加载技术。

鼠标选中【SlMenu】,在左侧【Dorado7 ToolBox】的【Others】分类下,双击【Reference】,添加一个新的Reference对象到DataType中设定属性:

属性

 说明

name

slMenuSet

Reference的名称

dataType

[SELF]

DataType

dataProvidermenuService#getMenuByParentId跟DataSet的dataProvider一致,由menuService这个bean中的getMenuByParentId方法为Reference对象提供数据加载服务

paramter

$${this.menuId}

动态EL表达式。表示以当前SlDept对象的ID作为parameter的值

如下图所示:

 

步骤3:新建并配置DataSet

在【ViewConfig】节点下的【View】节点下添加一个DataSet控件,设定DataSet的属性如下:

属性
说明
iddatasetMenu控件的Id
dataType[SlMenu]DataSet的数据类型
dataProvidermenuService#getTopMenu由deptService这个bean中的getTopMenu方法为DataSet提供数据加载服务

 

步骤4:新建并配置SplitPanel

鼠标选择【ViewConfig】节点下的【View】节点,并通过Dorado7 ToolBox找到SplitPanel,双击添加SplitPanel控件:

设置SplitPanel的属性如下:

属性
说明
position300边组件的当前位置

 

步骤5:新建并配置DataTree

接下来需要在页面左侧添加一个DataTree。

鼠标点开SplitPanel节点,选中【SideControl】,通过Dorado7 ToolBox找到DataTree,双击添加DataTree控件:

设置DataTree属性如下:

属性
说明
iddatatreeMenu控件的Id
dataSetdatasetMenu通过dataSet属性告知DataTree绑定是哪些数据,以便在DataTree中展示和处理。
currentNodeDataPathCURRENT_MENU自动注册到DataPath中的自定义片段的名称。 

在节点BindingConfigs下添加一个BindingConfig子节点,设定BindingConfig属性:

属性

 说明

labelProperty

menuName

以当前节点对应的实体对象的label属性作为树节点的标题信息

namemenu名称

childrenProperty

slMenuSet

获取当前节点的slMenuSet属性,作为子节点的数据

recursivetrue是否支持递归处理

如下图所示:

 

步骤6:新建并配置Container

接下来需要在页面右侧添加一个Container,用于放置子控件。

鼠标点开SplitPanel节点,选中【MainControl】,通过Dorado7 ToolBox找到Container,双击添加Container控件:

 

步骤7:新建并配置FieldSet

鼠标点开SplitPanel节点,选中【MainControl】节点下的Container控件,通过Dorado7 ToolBox找到FieldSet,双击添加FieldSet控件:

设置控件属性如下:

属性
说明
caption菜单信息FieldSet控件显示的标题
height300控件的高度
width500控件的宽度

 

步骤8:新建并配置AutoForm

鼠标点开FieldSet节点,选中【Children】,通过Dorado7 ToolBox找到AutoForm,双击添加AutoForm控件:

设置控件属性如下:

属性
说明
idautoformMenu控件的Id
dataSetdatasetMenu通过dataSet属性告知AutoForm绑定是哪些数据,以便在AutoForm中展示和处理。
dataPath!CURRENT_MENU表示当前树节点下的数据实体
cols*AutoForm控件单列显示
labelSeparator:AutoForm Element中标签和输入框间的分隔符
labelWidth100AutoForm Element中标签宽度

鼠标选中autoformMenu控件,在左侧的【Dorado7 ToolBox】工作区的【AutoForm】分类中双击【AutoFormElement】将表单元素加入autoformMenu控件中,新建 6个AutoForm Element,分别设置其属性为:

AutoForm Element
name
editorType
AutoForm Element1menuId 
AutoForm Element2menuName 
AutoForm Element3icon 
AutoForm Element4showOrder 
AutoForm Element5url 
AutoForm Element6remarksTextArea

info

AutoForm表单编辑框默认为TextEditor,如果需要修改编辑框样式可以设置其editorType属性。

到目前为止,View的设置完毕,接下来我们准备后台服务。

Attachments:

22.3-1.png (image/png)
22.3-2.png (image/png)
22.3-3.png (image/png)
22.3-4.png (image/png)
22.3-5.png (image/png)
22.3-6.png (image/png)
22.3-7.png (image/png)
22.3-8.png (image/png)
22.3-9.png (image/png)