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

这一节将使用com.bstek.dorado.sample.standardlesson.entity包的实体对象SlEmployee,在SlEmployee实体对象的定义中通过一对多关系定义了与SlMessage对象的关系,它们构成了一个立体的数据模型。本节将通过这个立体数据模型开发主从表功能。

...
/**
 * sl_employee:
 */
@Entity
@Table(name = "sl_employee")
public class SlEmployee implements Serializable {
    private static final long serialVersionUID = 1L;
    ...
    /**
     * sl_message:
     */
    private Set<SlMessage> slMessageSet = new HashSet<SlMessage>(0);
    
    public void setSlMessageSet(Set<SlMessage> slMessageSet) {
        this.slMessageSet = slMessageSet;
    }
    @OneToMany(fetch = FetchType.LAZY, mappedBy = "slEmployee")
    public Set<SlMessage> getSlMessageSet() {
        return slMessageSet;
    }
    ...
}

 

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

 

步骤2:新建并配置DataType

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

属性
说明
nameSlMessageDataType的名称

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

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

PropertyDef
name
label
propertyDef1receiver接收者
propertyDef2receiverMail接收邮箱
propertyDef3sendDate发送日期
propertyDef4content内容

接下来选中receiverMail这个propertyDef,为其添加一个RegExpValidator正则表达验证器,用于验证输入的邮箱地址格式是否正确,设置验证器属性如下:

属性说明
whiteRegExp\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*白表达式。即用于描述怎样的数值是合法值的表达式。

设置完毕后如下图所示:

 

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

属性
说明
nameSlEmployeeDataType的名称

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

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

PropertyDef
name
label
propertyDef1employeeId员工Id
propertyDef2employeeCode员工编号
propertyDef3employeeName姓名
propertyDef4email电子邮件
propertyDef5phone座机
propertyDef6mobile移动电话
propertyDef7slMessageSet 

接下来选中slMessageSet这个propertyDef,设置其dataType属性,点击dataType右侧小按钮:

在向导中选择本View中私有Model中的SlMessage,同时由于是一对多关系,【object Type】选中Collection,如下图所示:

note

需要注意的是在DataType中propertyDef的命名一定要跟Pojo对象中保持一致,在SlEmployee这个DataType中的slMessageSet命名和Pojo对象中保持一致。

 

步骤3:新建并配置DataSet

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

属性
说明
iddatasetEmployee控件的Id
dataType[SlEmployee]DataSet的数据类型
dataProvideremployeeService#getEmployeeByUserName由employeeService这个bean中的getEmployeeByUserName方法为DataSet提供数据加载服务
parameter${session.getAttribute('user').userName}装载数据时使用的参数,及传递给数据提供器的参数。

 

步骤4:新建并配置AutoForm

接下来新建一个AutoForm用于展示用户信息,在视图中添加AutoForm控件,设定AutoForm的属性如下:

属性
说明
idautoformEmployee控件的Id
dataSetdatasetEmployeeAutoForm绑定的数据集
width600AutoForm的宽度
labelSeparatorAutoForm Element中标签和输入框间的分隔符
readOnlytrueAutoForm数据编辑状态为只读

【鼠标右键】点击autoformEmployeee控件,在弹出菜单中选择【Generate AutoForm Elements】,生成相关字段,调整显示顺序和多余的AutoForm Element,最终结果如下图:

 

步骤5:新建并配置DataGrid

在视图中,点击【View】节点,添加DataGrid控件,并设定控件属性如下:

属性
说明
iddatagridMessage控件的Id
dataSetdatasetEmployee通过dataSet属性告知DataGrid绑定是哪些数据,以便在DataGrid中展示和处理。
dataPath#.slMessageSet表示当前用户下的消息集合
height400DataGrid控件的高度

info

#.slMessageSet为dataPath表达式,表示当前用户下的所有消息集合。dataPath主要用于描述如何提取、挖掘立体数据模型中的数据的表达式。

关于DataPath的详细说明请参考: DataPath

本节中的消息信息通过Hibernate的配置@OneToMany(fetch = FetchType.LAZY, mappedBy = "slEmployee")自动完成数据加载工作

【鼠标右键】点击datagridMessage控件,在弹出菜单中选择【Generate DataColumns】,生成相关字段,调整字段显示顺序并删除不需要的字段后,如图所示:

设置datagridMessage的DataColumn的属性如下:

DataColumnwidtheditorType说明
receiver100 列宽度
receiverMail150 列宽度
sendDate100 列宽度
content TextArea 

info

DataColumn的editorType是设置表格中列的字段输入框的编辑类型,由于content字段可能文本较多,因此我们设置其为TextArea

 

到目前为止,View的设置完毕,由于datasetEmployee的dataProvider使用的服务employeeService#getEmployeeByUserName前面章节已经实现过,因此我们可以直接查看页面效果。

Attachments:

12.3-1.png (image/png)
12.3-1.png (image/png)
12.3-2.png (image/png)
12.3-3.png (image/png)
12.3-4.png (image/png)
12.3-5.png (image/png)
12.3-6.png (image/png)
12.3-3.png (image/png)