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

步骤1:在com.bstek.dorado.sample.standardlesson.junior.system目录下新建View,将View命名为SystemInfo.view.xml.

 

步骤2:添加并配置Container控件

在【ViewConfig】节点下的【View】节点下添加一个Container控件,如下图所示:

将右侧工作区切换到Layout属性设置区中,如下图所示:

将Container控件的Layout属性设置为hbox,hbox为横向布局即加入的子控件将依次横向排列。

info

Container是一个容器控件,作为容器型的控件,我们可以在内部加入多个子控件。控件之间的布局关系由Container本身的Layout特性决定。

 

步骤3:添加并配置Button控件

接下来我们需要在容器控件中添加Button控件。

鼠标选中Container控件,向控件内部增加2个Button控件,如下图所示:

分别设置添加的Button属性如下:

第一个按钮

属性说明
IdbuttonGetSysInfo控件Id
caption获取Dorado版本信息按钮显示名称

第二个按钮

属性说明
IdbuttonClear控件Id
caption清空按钮显示名称

 

步骤4:再添加一个Container控件

在【View】节点下再添加一个Container控件,并将其Layout设置为vbox,如下图所示:

vbox为纵向布局即加入的子控件将依次纵向排列。

 

步骤5:添加Label控件

鼠标选中新增加的Container控件,向控件内部增加4个Label控件,如下图所示:

分别设置添加的Label属性如下:

第一个标签

属性说明
idlabelProduct控件Id
text产品:控件显示的文本

第二个标签

属性说明
idlabelVendor控件Id
text供应商:控件显示的文本

第三个标签

属性说明
idlabelVersion控件Id
text版本:控件显示的文本

第四个标签

属性说明
idlabelTime控件Id
text当前系统时间:控件显示的文本

 

步骤6:调整四个标签的布局,使之美观

鼠标选中labelProduct控件,在右侧工作区中切换到第三个标签页即layoutConstraint工作区,设置padding属性为10,如下图所示:

依次将labelVendor,labelVersion,labelTime的padding属性设置为10。

 

步骤7:添加AjaxAction控件,用于前后台交互

在【View】节点下添加AjaxAction控件,如下图所示:

AjaxAction是用于执行后台方法的动作控件。设置AjaxAction的属性如下:

属性说明
idajaxactionGetSysInfo控件Id
servicesystemInfoService#getSystemInfo用于调用后台服务,systemInfoService为注册到beanFactory中的beanId,getSystemInfo为方法名
executingMessage正在获取Dorado版本信息...ajaxaction执行中提示信息
successMessage获取Dorado版本信息成功!ajaxaction执行成功提示信息

info

AjaxAaction控件的service属性中设置的值,我们称之为服务定位表达式,在Dorado7中服务定位表达式是用来描述服务的查找方式,即Dorado7通过服务定位表达式来查找到具体服务,以便于对服务进行调用。关于服务定位表达式的详细讲解,请参考: 服务定位表达式


步骤8:为Button绑定Action

设置buttonGetSysInfo控件的action属性为ajaxactionGetSysInfo,如下图所示:

设置Button的action属性表示,点击Button按钮就触发AjaxAction动作,执行后台方法。

Attachments:

3.3.3-1.png (image/png)
3.3.3-2.png (image/png)
3.3.3-3.png (image/png)
3.3.3-4.png (image/png)
3.3.3-5.png (image/png)
3.3.3-6.png (image/png)
3.3.3-7.png (image/png)
3.3.1-1.png (image/png)