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

步骤1:在项目中创建com.bstek.dorado.sample.standardlesson.junior.middle.message包

 

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

 

步骤3:新建并配置DataType

在前一章节中,我们新建并配置了2个DataType:SlMessage和SlEmployee,在本章节中依然需要用到这2个DataType,因此我们可以在MyMessage.view.xml中直接使用【ctrl+c】快捷键分别将2个DataType拷贝下来,然后使用快捷键【ctrl+v】黏贴到当前View中,如下图所示:

 

步骤4:新建并配置DataSet

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

属性
说明
iddatasetEmployee控件的Id
dataType[SlEmployee]DataSet的数据类型
dataProvideremployeeService#getAllForPage由employeeService这个bean中的getAllForPage方法为DataSet提供数据加载服务
pageSize15装载数据时使用的分页大小,即按照每页多少条记录来进行分页装载。

设置完毕后如下图所示:

 

步骤4:新建并配置DataPilot

在本章开发中需要对所有的员工进行分页显示,因此需要添加分页控件和表格控件,我们先添加分页控件即DataPilot控件。

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

属性说明
iddatapilotEmployee控件的Id
dataSetdatasetEmployee通过dataSet属性告知DataPilot绑定是哪些数据,以便在DataPilot中展示和处理。
itemCodespages,pageSize,|

用于定义数据导航条中要显示那些子对象的表达式。

  • pageSize - 显示和指定每页记录数的编辑框。
  • pages - 用于简单翻页按钮定义的特殊代码,表示|<,<,goto,>,>|这5个子对象的组合。
  • | - 分割线

设置完毕后如下图所示:

 

步骤5:新建并配置DataGrid

接下来需要配置用于显示用户的表格,在【ViewConfig】节点下的【View】节点下添加一个DataGrid控件,设定DataGrid的属性如下:

属性说明
iddatagridEmployee控件的Id
dataSetdatasetEmployee通过dataSet属性告知DataGrid绑定是哪些数据,以便在DataGrid中展示和处理。
height300DataGrid控件的高度

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

在此DataGrid中只允许编辑移动电话字段因此其他字段都应设置为只读,设置datagridEmployee的DataColumn的属性如下:

DataColumn
readOnly
说明
employeeCodetrue是否可编辑
employeeNametrue是否可编辑
emailtrue是否可编辑
phonetrue是否可编辑

 

步骤6:新建并配置DataGrid

接下来需要配置用于显示消息的表格,在【ViewConfig】节点下的【View】节点下添加一个DataGrid控件,并设定控件属性如下:

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

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

设置datagridMessage的DataColumn的属性如下:

DataColumn
width
editorType
说明
receiver100 列宽度
receiverMail150 列宽度
sendDate100 列宽度
content TextArea 

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

Attachments:

13.1-1.png (image/png)
13.3-1.png (image/png)
13.3-2.png (image/png)
13.3-3.png (image/png)
13.3-4.png (image/png)
13.3-5.png (image/png)
13.3-3.png (image/png)