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

步骤1：在项目中创建com.bstek.dorado.sample.standardlesson.junior.base包

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

步骤3：新建并配置DataType

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

设定DataType的属性如下：

属性	值	说明
name	SlCompany	DataType的名称

在4.2.8节中提到如果将一个DataType定义在View的Model节点下，那么这个DataType是这个View私有的，DataType支持继承:包括多重继承，在本节我们在View中定义的DataType继承models目录中Common.model.xml中定义的SlCompany。

info

对于DataType相关特性描述，请参考 DataType

选择当前DataType的parent属性，如下图所示：

可以看到右侧有一个小图标，单击这个图标，会出现如下的Parent选择向导：

展开【Models】文件夹，选中【SlCompany】，这个DataType即在models目录中Common.model.xml中定义的父级DataType，点击【Add】按钮，将此DataType选择到右侧的【Parent】框中，点击【Finish】按钮，则完成parent属性的设置，设置结果如下：

在本章开发中，需要对【企业简称】和【企业全称】设置数据校验器，数据校验是基于DataType的，因此可以在DataType下的PropertyDef下添加这些Validator。

info

对于Validator的详细描述，请参考：数据校验器

在【SlCompany】这个DataType下新建2个PropertyDef，鼠标选中【SlCompany】，在左侧【dorado7 ToolBox】工具栏中，在【Others】目录下双击【PropertyDef】，将PropertyDef加入到当前DataType下，如下图所示：

分别设置propertyDef的属性如下：

propertyDef1

属性	值	说明
name	companyName	propertyDef的名称
label	企业简称	propertyDef标签显示

propertyDef2

属性	值	说明
name	fullName	propertyDef的名称
label	企业全称	propertyDef标签显示

note

不建议在公用的DataType的PropertyDef上设置数据校验器或过于私有化的配置，因为DataType的继承特性，可能导致不必要的问题。

选中【companyName】，在左侧【dorado7 ToolBox】工具栏中，在【Others】目录下双击【RequiredValidator】，将必填数据验证器加入到当前PropertyDef中，选中【fullName】，双击【LengthValidator】，将长度数据验证器加入到当前PropertyDef中：

设置LengthValidator属性如下：

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

设置完成后，界面如下图所示：

步骤4：新建并配置DataSet

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

属性	值	说明
id	datasetCompany	控件的Id
dataType	[SlCompany]	DataSet的数据类型
dataProvider	companyService#getCompany	由companyService这个bean中的getCompany方法为DataSet提供数据加载服务
readOnly	true	设置DataSet数据只读

界面如下图所示：

note

需要注意的是，在dataType属性的设置上，需要选择当前View中私有的DataType，如下图所示：

步骤5：新建并配置AutoForm

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

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

【鼠标右键】点击autoformCompany控件，在弹出菜单中选择【Generate AutoForm Elements】，生成相关字段，删除companyId这个AutoForm Element和多余的AutoForm Element，最终结果如下图：

步骤6：新增并配置UpdateAction控件

info

如果想做持久化处理，还需要借助DataResolver技术。DataResolver与DataProvider类似，也是一个Ajax请求，只是作用与DataProvider相反，DataProvider用于从服务器端获取数据存放在客户端的DataSet中，而 DataResolver技术却是为了将客户端的DataSet中的数据提取出来，并通过AJAX技术上传到服务器端，便于交给后台的DAO做持久化的处理工作。

在Dorado7中DataResolver一般都是通过UpdateAction控件来配置的，

当前的View中添加UpdateAction控件，设置UpdateAction属性如下:

属性	值	说明
id	updateactionSave	控件的Id
dataResolver	companyService#saveCompany	通过执行companyService这个bean中的saveCompany方法对传递到后台的数据进行持久化
executeMessage	正在保存...	当此Action正在执行时希望系统显示给用户的提示信息
successMessage	保存成功！	当此Action执行成功之后自动提示的信息。
hotkey	ctrl+s	执行此Action的热键

然后为UpdateAction添加子节点UpdateItem，绑定需要提交的DataSet数据集:

鼠标选中updateactionSave，在右侧【Dorado7 ToolBox】工作区的【Others】分类下面双击【UpdateItem】，设置属性如下：

属性	值	说明
dataSet	datasetCompany	实现DataSet数据采集,一个UpdateAction可以添加多个UpdateItem

界面如下图所示：

步骤7：新增并配置Container控件

新建一个Container控件用于放置后面添加的2个按钮控件，为View中添加Container控件，设置Container属性如下：

属性	值	说明
width	500	设置容器控件的宽度
height	50	设置容器控件的高度

接下来设置Container的布局属性如下图所示：

info

hbox横向布局中的pack属性表示子控件的对齐方向，有3个属性可选：start，center，end，分别表示按照开始的位置对齐，居中对齐和按照最后的位置对齐。

步骤8：添加并配置按钮

鼠标选中Container控件，在容器控件下添加2个Button控件，如下图所示：

设置第一个Button控件属性如下：

属性	值	说明
id	buttonEdit	控件的Id
caption	编辑	控件显示的标题

接下来给buttonEdit绑定onClick事件，切换到Client Events事件列表，在onClick事件上增加datasetCompany参数，如下图所示：

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

datasetCompany.set("readOnly",false);

通过js将datasetCompany的只读属性设置为否，因此就能编辑数据。第一个Button属性设置完毕。

设置第二个Button控件属性如下：

属性	值	说明
id	buttonSave	控件的Id
caption	保存	控件显示的标题
action	updateactionSave	通过绑定UpdateAction，点击按钮便执行UpdateAction操作
tip	使用Ctrl+s快捷键保存	鼠标移到Button控件上的提示信息

最终设置结果如下图所示：

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

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

Attachments: