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

This page last changed on Jun 18, 2014 by ivan.yi@bstek.com.

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

 

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

 

步骤3：新建并配置DataSet

在【ViewConfig】节点下的【View】节点下添加一个DataSet控件，如下图所示：

设定DataSet的属性如下：

属性值说明
iddatasetCompany控件的Id

DataSet一个数据容器控件。例如：datasetCompany中可以包含1个到多个Company对象，那么Company对象的结构是怎么样的呢？这是由DataSet的DataType属性定义的。现在我们来定义datasetCompany的 dataType属性，我们选择dataType属性：

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

在向导中我们找到准备步骤中在Model中定义的名称为SlCompany的DataType对象。并且特别要注意选择向导中的Select object type属性为Collection。

 

info

DataSet设定DataType属性时，在这个向导窗口需要特别注意Select object type的选择，如果采用Default就表示当前数据容器DataSet只能包含一个DataType的数据实体，而如果选择Collection就表示它可包含这个DataType结构的一个Collection集合。对于DataSet而言这是具有明确区别的，在后期访问DataSet和存取 DataSet中数据的相关代码会有所差别，因此在开发的时候开发人员要明确Select object type属性应该取那个值。

在多数情况下，DataSet中的数据多是以集合形式存储，选择Collection。

 

设置好DataType的属性后：

这样向导操作的最终结果是给datasetCompany这个DataSet的dataType的值赋值为[SlCompany],如果向导中Select object type的值设置为Default,则该处的dataType值就会是SlCompany，没有中括号。

接下来需要设定datasetCompany的dataProvider属性为:"companyService#getCompany":

 

info

我们定义的dataProvider跟前面第三章中AjaxAction的service同属于服务定位表达式，dataProvider是Dorado7中常见的数据加载技术，主要用于为DataSet加载数据，本身也是一种Ajax数据加载形式。

companyService#getCompany这个表达式的意思为在Spring的beanFactory中寻找id为companyService的bean，执行其中的getCompany方法为datasetCompany提供数据。

更多信息可以参考相关链接 DataProvide与DataResolver。

 

步骤4：新建并配置AutoForm

datasetCompany是一个数据容器控件，在页面上是不可见的，为了展现其中的数据我们需要添加一个可以展现数据的控件对象，如AutoForm。在视图中添加AutoForm控件：

并设定AutoForm的属性如下：

属性值说明
idautoformCompany控件的Id
dataSetdatasetCompany通过dataSet属性告知AutoForm绑定是哪些数据，以便在AutoForm中展示和处理。

【鼠标右键】点击autoformCompany控件，在弹出菜单中选择【Generate AutoForm Elements】，生成相关字段：

删除companyId这个AutoForm Elements，最终结果如下图：

info

假如不生成AutoForm的AutoForm Elements，那么AutoForm将显示绑定Dataset的DataType的所有字段

 

由于AutoForm默认是按2列显示，我们如果需要其单列显示则需要调整布局，设置autoformCompany的属性如下：

属性值说明
cols*AutoForm列显示布局表达式
width450控件的宽度
labelSeparator：AutoForm Element中标签和输入框间的分隔符

info

对于cols属性的详细说明请参考 AutoForm

本页面仅作为企业信息的展示，因此需要设置autoformCompany为只读，设置属性如下：

属性值说明

readOnly

true控件的只读属性

note

如果需要设置autoformCompany只读还有另外一种方法，直接设置datasetCompany的readOnly属性为true即可。前面提到AutoForm控件为数据敏感型控件，当其数据来源的DataSet设置为只读时，那么AutoForm自然也变为只读。这样做的好处在于只要单独设置DataSet的readOnly属性就能控制所有与之绑定的数据敏感控件的只读状态。

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

 

 

Attachments:

4.3.3-1.png (image/png)
4.3.3-2.png (image/png)
4.3.3-3.png (image/png)
4.3.3-4.png (image/png)
4.3.3-5.png (image/png)
4.3.3-6.png (image/png)
4.3.3-7.png (image/png)
4.3.3-8.png (image/png)
4.3.3-5.png (image/png)