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

步骤1：在com.bstek.dorado.sample.standardlesson.junior.base目录下新建View，将View命名为EmployeeManage.view.xml。

步骤2：新建并配置DataType

在【ViewConfig】节点下的【Model】节点下添加一个DataType，如下图所示：

设定DataType的属性如下：

属性	值	说明
name	SlEmployee	DataType的名称

设定此DataType的parent属性为models目录中Common.model.xml中配置的SlEmployee，使之继承公共DataType，具体操作请参考 6.3.1节中步骤3：

在本章开发中，需要对相关字段设置数据校验器如下：

字段名称	字段说明	数据校验器	说明
employeeCode	员工编号	LengthValidator	文本长度数据验证器
userName	系统Id	RequiredValidator	必填数据验证器
employeeName	姓名	RequiredValidator	必填数据验证器
email	电子邮件	RegExpValidator	正则表达式数据验证器

info

在前面开发中我们使用了RequiredValidator，LengthValidator，而RegExpValidator是正则表达式数据验证器，可以通过正则表达式对数据进行校验。

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

PropertyDef	name	label
propertyDef1	employeeCode	员工编号
propertyDef2	userName	系统Id
propertyDef3	employeeName	姓名
propertyDef4	email	电子邮件

分别加入数据校验器，如下图所示：

分别设置LengthValidator和RegExpValidator属性如下：

LengthValidator

属性	值	说明
minLength	1	允许输入字符最小长度
maxLength	6	允许输入字符最大长度

RegExpValidator

属性	值	说明
whiteRegExp	\w+([-+.]\w+)@\w+([-.]\w+)\.\w+([-.]\w+)*	RegExpValidator的whiteRegExp(白表达式)

步骤3：新建并配置DataSet

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

属性	值	说明
id	datasetEmployee	控件的Id
dataType	[SlEmployee]	DataSet的数据类型
dataProvider	employeeService#queryForCondition	由employeeService这个bean中的queryForCondition方法为DataSet提供数据加载服务
readOnly	true	设置DataSet数据只读
pageSize	15	装载数据时使用的分页大小，即按照每页多少条记录来进行分页装载。

界面如下图所示：

步骤4：新建并配置查询AutoForm

在视图中添加AutoForm控件，设定AutoForm的属性如下：

属性	值	说明
id	autoformCondition	控件的Id
createPrivateDataSet	true	是否要在AutoForm没有实际绑定DataSet时自动创建一个私有的DataSet用于管理表单数据。
cols	400,,	AutoForm列显示布局表达式
labelSeparator	：	AutoForm Element中标签和输入框间的分隔符

info

AutoForm控件的createPrivateDataSet属性主要是设置是否要在AutoForm没有实际绑定DataSet时自动创建一个私有的DataSet用于管理表单数据。

由于Dorado中有很多类似于数据校验、键值映射这样的功能都依赖于DataSet，所以如果仅仅使用简单的Entity绑定，AutoForm必然是失去一些功能特性。启用本属性可以让AutoForm自动创建一个私有的DataSet，以便于使用上述各项功能。

对于createPrivateDataSet为true的AutoForm，如果我们通过如下代码获取Entity对象，则它是被这个私有的DataSet所管理的实体对象。

var entity = autoForm.get("entity");

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

AutoForm Element	name	label
AutoForm Element1	employeeName	姓名
AutoForm Element2	userName	系统ID
AutoForm Element3	employeeCode	员工号
AutoForm Element4	email	电子邮件
AutoForm Element5	phone	座机
AutoForm Element6	mobile	移动电话
AutoForm Element7	position	职务

最终结果如下图：

鼠标选中autoformCondition控件的email字段，切换到其layoutConstraint工作区，设置colSpan属性如下：

info

AutoForm控件内部元素布局默认为form布局，设置colSpan是使email字段跨列显示，同理rowSpan是跨行显示

并且设置email的width属性如下：

属性	值	说明
width	400	设置AutoForm Element元素的宽度

步骤5：新建并配置ToolBar控件

在视图中添加ToolBar控件，如下图所示：

info

ToolBar是工具栏控件，同时也是一个容器控件，一般情况下ToolBar都是用以统一管理界面上的功能按钮或菜单项。关于ToolBar的详细讲解，请参考：ToolBar

接下来我们在工具栏中加入查询按钮，鼠标选中【ToolBar】控件，在右侧的【Dorado7 ToolBox】下的【ToolBar】分类中，双击【ToolBarButton】图标将子控件加入工具栏，如下图所示：

设置【ToolBarButton】的属性如下：

属性	值	说明
id	buttonQuery	控件的Id
caption	查询	Button显示的标题
icon	url(>skin>common/icons.gif) -20px -40px	设置Button的图标

info

我们发现在设置按钮的图标时，我们使用了表达式，url(>skin>common/icons.gif)我们称之为资源定位表达式。

作为WEB程序员我们都知道:在我们定义一个URL的时候，如果我们定义一个字符串，其开头以"/"开始(包括Dorado开发当中也会接触到的，如button的icon也是一个url字符串)，则表示从端口号开始计算，而不是以webapp的名字开头，而在很多场景下我们还需要webapp的名字，为了解决这个问题，很多系统都将这个webapp的名字作为JS变量输出到客户端，然后在客户端拼写最终的URL。这个做过这方面开发的人都大概了解这个处理过程。在Dorado7中如果我们的URl以应用开头，则我们只要以">"开头就可以，对于这种URL，Dorado会自动的帮助你转换为webapp开头的URL，如:

">images/icon.gif"将转换为"/appContextPath/images/icon.gif"

另外Dorado中还支持带有skin>前缀的写法，如:"skin>widget.css"将转换为Dorado当前当前皮肤路径下的widget.css的URL。因为skin是预设的URL前缀代表当前皮肤的跟路径。

那么url(>skin>common/icons.gif)表达式的意思即获取Dorado当前皮肤路径下的common目录中的icons.gif。

表达式后面所跟的参数则是偏移量，在开发中将一些常用图标合并到一张图片中，然后采用图片偏移量的方式来定义图标。名为icons.gif的图片就是这些图标的集合。

当我们页面上的某一个控件对象希望显示其中的某一个按钮的时候，我们就可以根据图标偏移量动态调整最后两个数字，参考如下的icontool工具,在这个工具中我们单击图标上图同的位置，可以看到它可以帮助我们自动计算图标的偏移量，以及剪切之后显示的图标内容:

在合并小图标的过程中要注意合并之后图片的大小，例如本例中图标合并后的gif的大小为27302字节，按照我们的经验，最好不要超过这个大小。

icontools工具下载

设置好【buttonQuery】控件属性后，我们需要对其绑定onClick事件，即我们在输入查询条件后，点击按钮，对数据结果进行查询。

鼠标选中【buttonQuery】控件，切换到Client Events事件列表，在onClick事件上增加autoformCondition和datasetEmployee参数，如下图所示：

在onClick事件编辑区中输入如下代码：

//获取autoformCondition绑定的实体对象
var entity = autoformCondition.get("entity");
//将实体对象作为参数传入，并异步刷新
datasetEmployee.set("parameter",entity).flushAsync();

info

 datasetEmployee.set("parameter",entity).flushAsync();


是Dorado虚拟属性迭代的写法
等同于：

datasetEmployee.set("parameter",entity)；
datasetEmployee.flushAsync();

接下来加入分页控件，在【ToolBar】控件下加入DataPilot控件，设置控件属性如下：

属性值说明

id datapilotEmployee 控件的Id

dataSet datasetEmployee 通过dataSet属性告知DataPilot绑定是哪些数据，以便在DataPilot中进行分页和处理。

itemCode

pages,pageSize

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

pages 用于简单翻页按钮定义的特殊代码，表示|<,<,goto,>,>|这5个子对象的组合。

pageSize 显示和指定每页记录数的编辑框。

步骤6：新建并配置DataGrid控件，在表格控件中展示员工信息。

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

属性	值	说明
id	datagridEmployee	控件的Id
dataSet	datasetEmployee	通过dataSet属性告知DataGrid绑定是哪些数据，以便在DataGrid中展示和处理。
height	350	设置控件的高度

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

步骤6：新建并配置AutoForm控件，在表单中展示员工信息。

在视图中，点击【View】节点，添加AutoForm控件，并设定控件属性如下：

属性	值	说明
id	autoformEmployeee	控件的Id
dataSet	datasetEmployee	通过dataSet属性告知AutoForm绑定是哪些数据，以便在AutoForm中展示和处理。
cols	400,,	AutoForm列显示布局表达式
labelSeparator	：	AutoForm Element中标签和输入框间的分隔符

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

鼠标选中autoformEmployee控件的email字段，切换到其layoutConstraint工作区，设置colSpan属性如下：

并且设置email的width属性如下：

属性	值	说明
width	400	设置AutoForm Element元素的宽度

到目前为止，View部分设置完毕，接下来我们需要准备后台服务。

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

Attachments: