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的属性如下:

属性
说明
nameSlCompanyDataType的名称

在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

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

propertyDef2

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

note

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

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

设置LengthValidator属性如下:

属性说明
minLength1允许输入字符最小长度
maxLength50允许输入字符最大长度

设置完成后,界面如下图所示:

 

步骤4:新建并配置DataSet

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

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

界面如下图所示:

note

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

 

步骤5:新建并配置AutoForm

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

属性
说明
idautoformCompany控件的Id
dataSetdatasetCompany通过dataSet属性告知AutoForm绑定是哪些数据,以便在AutoForm中展示和处理。
cols*AutoForm列显示布局表达式
width500控件的宽度
labelSeparatorAutoForm 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属性如下:

属性说明
idupdateactionSave控件的Id
dataResolvercompanyService#saveCompany通过执行companyService这个bean中的saveCompany方法对传递到后台的数据进行持久化
executeMessage正在保存...

当此Action正在执行时希望系统显示给用户的提示信息

successMessage保存成功!当此Action执行成功之后自动提示的信息。
hotkeyctrl+s执行此Action的热键

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

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

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

界面如下图所示:

 

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

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

属性说明
width500设置容器控件的宽度
height50设置容器控件的高度

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

info

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

 

步骤8:添加并配置按钮

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

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

属性说明
idbuttonEdit控件的Id
caption编辑

控件显示的标题

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

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

datasetCompany.set("readOnly",false);

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

 

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

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

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

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

Attachments:

6.3.1-1.png (image/png)
6.3.1-2.png (image/png)
6.3.1-3.png (image/png)
6.3.1-4.png (image/png)
6.3.1-6.png (image/png)
6.3.1-7.png (image/png)
6.3.1-8.png (image/png)
6.3.1-9.png (image/png)
6.3.1-10.png (image/png)
6.3.1-11.png (image/png)
6.3.1-13.png (image/png)
6.3.1-14.png (image/png)
6.3.1-15.png (image/png)
6.3.1-16.png (image/png)
6.3.1-17.png (image/png)