dorado7组件详解

yiisha258 贡献于2016-06-23

作者 CavinWang  创建于2012-06-08 02:42:00   修改者微软用户  修改于2013-04-03 02:37:00字数76584

文档摘要:
关键词:

 Dorado7组件详解 上海锐道信息技术有限公司 2012年6月 1. 【Button】按钮 8 1.1. 【Button】普通按钮 8 1.2. 【Button】含图标的按钮 9 1.3. 【Button】有系统提示的按钮 11 1.4. 【Button】绑定菜单的按钮 12 1.5. 【Button】被禁用的按钮 14 1.6. 【Button】带Ajax功能的按钮 15 1.7. 【Button】简单按钮 18 1.8. 【Button】简单图标按钮 20 2. 【CardBook】卡片盒 22 2.1. 【CardBook】卡片盒常规用法 22 3.【DataPilot】数据导航条 25 3.1【DataPilot】数据导航条的常规用法 25 3.2【DataPilot】数据导航条显示增加,删除,取消按钮 27 4.【Dialog】对话框 28 4.1【Dialog】对话框常规用法 28 4.2【Dialog】对话框Buttons和Toos 30 4.3【Dialog】对话框的模态和最大化 31 5.【FieldSet】FieldSet 32 5.1【FieldSet】FieldSet常规用法 32 5.2【FiledSet】FiledSet中Buttons 35 6.【FloatContainer】浮动容器 36 6.1【FloatContainer】浮动容器常规用法 36 6.2【FloatContainer】浮动容器的模态和动画 37 7.【GroupBox】GroupBox 38 7.1【GroupBox】GroupBox常规用法 38 7.2【GroupBox】GroupBox中Buttons 40 8【IFrame】IFrame组件 41 8.1【IFrame】IFrame组件常规用法 41 9.【Panel】和【FloatPanel】面板容器和浮动面板容器 43 9.1【Panel】和【FloatPanel】面板常规用法 43 9.2【Panel】、【FloatPanel】面板Buttons和Tools 46 9.2.3要点说明 47 10.【ProgressBar】滚动条 49 10.1【ProgressBar】滚动条的静态效果 49 10.2【ProgressBar】动态滚动条 50 11.【Section】 53 12.【Slider】滑动条 53 12.1.【Slider】通过滑动条获得图片百分比 53 13.【SplitPanel】分割面板 55 13.1.【SplitPanel】与菜单结合 55 14.【Tabbar】标签条 57 14.1.【Tabbar】显示效果 57 14.2.【Tabbar】和【Tab】结合显示效果 58 15.【TabControl】标签页 60 15.1.【TabControl】和IframeTab结合 60 16.【Tip】提示信息控件 62 16.1.【Tip】不同形态显示效果 62 17.【ToolBar】工具栏 64 17.1.【ToolBar】工具栏常见形态 64 18.【Label】文本标签 65 18.1.【Label】文本标签控件 65 19.【TextEditor】文本编辑器 68 19.1.【TextEditor】带mapping的文本编辑器 68 19.2.【TextEditor】使用dataset的文本编辑器 71 20.【TextArea】多行文本编辑器 74 20.1.【TextArea】多行文本编辑器控件 74 21.【DataLabel】文本标签 75 21.1.【DataLabel】文本标签控件 75 22.【Link】超链接 77 22.1.【Link】超链接 77 23.【CheckBox】复选框 79 23.1.【CheckBox】复选框 79 24.【PasswordEditor】密码编辑器 82 24.1.【PasswordEditor】密码编辑器 82 25.【FormProfile】表单配置 85 25.1.【FormProfile】表单配置 85 26.【NumberSpinner】数字微调编辑器 87 26.1.【NumberSpinner】数字微调编辑器 87 27.【DateTimeSpinner】日期时间微调编辑器 89 27.1.【DateTimeSpinner】日期时间微调编辑器 89 28.【CustomSpinner】自定义微调编辑器 91 28.1.【CustomSpinner】自定义微调编辑器 91 29.【RadioGroup】单选框组 92 29.1.【RadioGroup】单选框组 92 30.【FormElement】表单元素 95 30.1.【FormElement】表单元素 95 31.【AutoForm】自动表单 97 31.1.【AutoForm】自动表单 97 32【Validator】校验器 99 32.1【RepExpValidator】正则表达式校验器 99 32.2【CustomValidator】用户自定义数据校验器 102 32.3【RangeValidator】数值区间校验器 103 32.4【LengthValidator】文本长度校验器 105 33.【Menu】菜单 106 33.1【Menu】的一般用法 106 33.2【Menu】右击显示 108 34.【Trigger】触发 110 34.1【Trigger】的一般用法 110 35. 【ListDropDown】列表型下拉框 111 35.1. 【ListDropDown】的一般用法 111 35.2. 【ListDropDown】的自定义功能 113 36. 【YearMonthDropDown】年月下拉框 115 36.1. 【YearMonthDropDown】的用法 115 37. 【DateDropDown】日期下拉框 116 37.1. 【DateDropDown】的用法 117 38. 【DataSetDropDown】数据绑定下拉框 118 38.1. 【DataSetDropDown】的用法 118 39. 【CustomDropDown】自定义下拉框 121 39.1. 【CustomDropDown】的用法 121 40. 【AutoMappingDropDown】属性下拉框 124 40.1. 【AutoMappingDropDown】的用法 124 41【PageBanner】页面标签 127 41.1【PageBanner】页面标签的一般用法 127 42.【BlockView】块状列表控件 129 42.1.【BlockView】块状列表控件 129 43.【DataBlockView】支持数据绑定的列表控件 132 43.1.【DataBlockView】支持Dataset的数据绑定列表 132 44.【ListBox】下拉列表控件 134 44.1.【ListBox】静态数据下拉列表框 134 44.2.【ListBox】动态数据列表控件 136 45.【DataListBox】支持数据绑定的列表控件 138 45.1.【DataListBox】支持数据绑定的列表控件 138 46.【Grid】表格控件 140 46.1.【Grid】普通表格控件 140 47.【DataGrid】数据表格控件 143 47.1.【DataGrid】数据表格控件 143 48.【TreeGrid】树状表格 145 48.1.【TreeGrid】树状表格 145 49.【Tree】树状列表 154 49.1.【Tree】树状列表 154 50.【DataTree】支持数据绑定的树状列表 156 50.1.【Tree】支持数据绑定的树状列表 156 51.【DataTreeGrid】支持数据绑定的树状表格控件 159 51.1.【DataTreeGrid】支持数据绑定的树状表格控件 159 52.【ButtonPanel】按钮面板 161 52.1.【ButtonPanel】按钮面板 161 52. 【QuickForm】 165 52.1. 【QuickForm】的一般用法 165 52.2. 【QuickForm】与DataSet绑定使用 168 53. 【DataType】数据类型 170 53.1. 【DataType】递归数据树的建立 170 53.2. 【DataSet】数据类型主从表显示 177 54. 【DataSet】数据集 180 54.1. 【DataSet】数据集与DataSetDropDown组合使用 180 54.2. 【DataSet】数据集与DataSetDropDown组合使用 183 54.3. 【DataSet】数据集实现数据查询功能 186 56.【DatePicker】日期选择控件 189 56.1.【DatePicker】日期选择控件 189 57.【YearMonthPicker】年月选择控件 192 57.1.【YearMonthPicker】年月选择控件 192 58.【SubViewHolder】子视图的控件 195 58.1.【SubViewHolder】子视图的控件 195 59.【Accordion】Outlook Bar效果的布局组件 197 59.1.【Accordion】Outlook Bar效果的布局组件 197 60.【HtmlContainer】可完全通过HTML/DHTML自定义渲染方式的容器控件 199 60.1.【HtmlContainer】可完全通过HTML/DHTML自定义渲染方式的容器控件 199 42.2.【BlockView】动态数据块状列表控件并实现控件间的拖动 201 61.【Action】动作控件 204 61.1【Action】动作控件的常规用法 204 62.【AjaxAction】远程过程动作控件 205 62.1【AjaxAction】远程过程动作控件常规用法 205 62.2【AjaxAction】远程动作控件带参数后台访问 207 63.【FormSubmitAction】表单提交动作控件 209 63.1【FormSubmitAction】表单提交动作控件的常规用法 209 63.2【FormSubmitAction】表单提交方式和页面打开方式 212 64.【UpdateAction】提交动作控件 214 64.1【UpdateAction】提交动作控件的常规用法 214 1. 【Button】按钮 1.1. 【Button】普通按钮 1.1.1. 页面效果 基本功能:打开这个页面的时候显示一个按钮,按钮单击可以出现一个"Hello World!"的信息提示框。 1.1.2. 开发步骤 第1步,新建一个View,命名为CButton,在View节点下新建一个Button。 第2步,设置Button属性。 属性 属性值 说明 caption 普通按钮 第3步,在Button的Events标签页上定义onClick事件,双击打开该事件的编辑器: 代码如下: dorado.MessageBox.alert("Hello World!"); 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.Cbutton.d 1.1.3. 要点说明 这个例子简洁地显示了【Button】的常规用法。 1.2. 【Button】含图标的按钮 1.2.1. 页面效果 1.2.2. 开发步骤 第1步,在CButton 视图文件的View节点下新建一个Button。 第2步,修改Button的属性。 属性 属性值 说明 caption 含图表的按钮 icon url(>skin>common/icons.gif) -0px -100px 图表的偏移量 第3步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.Cbutton.d 1.2.3. 要点说明 第2步中,icon属性值有方便方法获得。从http://wiki.bsdn.org/dosearchsite.action?spaceSearch=false&queryString=icontool下载icontool.rar,打开index文件后得到如下页面,点击合适按钮即可得到其icon属性值。 这个例子主要讲解Button的图标设置功能。 1.3. 【Button】有系统提示的按钮 1.3.1. 页面效果 1.3.2. 开发步骤 第1步,在CButton 视图文件的View节点下新建一个Button。 第2 步,在Button的Property标签页上设置tip属性为需要的提示信息,如下图所示。 属性 属性值 说明 caption 有系统提示的按钮 tip 系统默认提示信息 第3步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.Cbutton.d 1.3.3. 要点说明 这个例子介绍了怎么为Button添加提示信息,其开发步骤简单明了。 1.4. 【Button】绑定菜单的按钮 1.4.1. 页面效果 1.4.2. 开发步骤 第1步,在CButton 视图文件的View节点下新建一个Button,并新建一个Menu,并为Menu新建若干MenuItem,如下图所示。 第2步,设置Button的属性 属性 属性值 说明 caption 绑定菜单的按钮 menu mymenu 要绑定的菜单id 第3步,设置Menu的属性 属性 属性值 说明 id mymenu 将MenuItem的caption属性分别设置为操作1、操作2、操作3。 第3步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.Cbutton.d 1.4.3. 要点说明 这个例子介绍了怎么为Button绑定菜单。其中,Button中的menu属性必须为Menu的id,这样才能进行绑定。 1.5. 【Button】被禁用的按钮 1.5.1. 页面效果 1.5.2. 开发步骤 第1步,在CButton 视图文件的View节点下新建一个Button。 第2 步,设置Button的属性。 属性 属性值 说明 caption 被禁用的按钮 disabled true 禁用Button 第3步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.Cbutton.d 1.5.3. 要点说明 这个例子介绍了怎么禁用Button按钮。 1.6. 【Button】带Ajax功能的按钮 1.6.1. 页面效果 1.6.2. 开发步骤 第1步,在CButton 视图文件的View节点下新建一个Button和AjaxAction。 第2 步,创建一个java类,命名为SimpleAjax。 代码如下: package com.bstek.dorado.component.document.control.c01button; import java.util.Properties; import org.springframework.stereotype.Component; import com.bstek.dorado.annotation.Expose; import com.bstek.dorado.core.DoradoAbout; @Component public class SimpleAjax { @Expose public String toUpperCase(String str){ return "input:\n"+str+"\n\n"+"output:\n"+str.toUpperCase(); } } 第3步,设置AjaxAction属性。 属性 属性值 说明 id action1 paramenter Hello World! service simpleAjax#toUpperCase simpleAjax为类名,首字母要小写,toUpperCase为方法名 第4步,编写AjaxAction的onSuccess函数。 代码如下: dorado.MessageBox.alert(self.get("returnValue")); 第5步,设置button属性。 属性 属性值 说明 caption to upper case action action1 simpleAjax为类名,首字母要小写,toUpperCase为方法名 第6步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.Cbutton.d 1.6.3. 要点说明 这个例子介绍了怎么自定义Ajax功能,以及和Button进行绑定。 1.7. 【Button】简单按钮 1.7.1. 页面效果 1.7.2. 开发步骤 第1步,在CButton 视图文件的View节点下新建一个SimpleButton,如下图所示。 第2 步,新建一个css文件,并命名为CButton,注意要与view名称一样。 代码如下: .btn_color{ color:#000; background:url(/Dorado7Component/dorado/client/skins/~current/common/icons.gif) -0px -100px; } 第3步,设置SimpleButton的属性。 属性 属性值 说明 className btn_color 为css文件中的样式名 height 20 width 20 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.Cbutton.d 1.7.3. 要点说明 这种类型的按钮仅由一个div构成,需要用户提供一组className,即可构成一个图标按钮。用户需要提供所有的背景图片以及样式,如果不是需要特殊定制的按钮,建议使用dorado.widget.SimpleIconButton,只需要提供一个图标即可实现不错的效果。 1.8. 【Button】简单图标按钮 1.8.1. 页面效果 1.8.2. 开发步骤 第1步,在CButton 视图文件的View节点下新建一个SimpleIconButton,如下图所示。 第2 步,设置SimpleIconButton的属性。 属性 属性值 说明 icon url(>skin>common/icons.gif) -0px -100px menu mymenu 1.4中建立的menu的id 第3步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.Cbutton.d 1.8.3. 要点说明 SimpleIconButton的用法与Button的大体相同,SimpleIconButton为图标按钮, 无caption属性。 2. 【CardBook】卡片盒 2.1. 【CardBook】卡片盒常规用法 2.1.1. 页面效果 点击切换按钮,图片来回切换。 2.1.2. 开发步骤 第1步,新建一个View,命名为CCardBook,在View节点下新建一个Button、CardBook,并在CardBook下新建两个HtmlContainer。 第2 步,设置Button的属性: 属性 属性值 说明 caption 切换 top 20 left 100 设置CardBook的属性: 属性 属性值 说明 id mycardbook top 50 left 40 设置HtmlContainer1的属性: 属性 属性值 说明 id HtmlContainer1 content images/my-photo-01.png为图片路径 height 800 userData 0 width 1000 设置HtmlContainer2的属性: 属性 属性值 说明 id HtmlContainer2 content images/my-photo-01.png为图片路径 height 800 width 1000 第3步,编写Button的onClick函数。 代码如下: var mycardbook=this.get("#mycardbook"); if(mycardbook.get('currentControl').get('userData')==0){ mycardbook.set('currentControl',1); } else{ mycardbook.set('currentControl',0); } 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.Cbutton.d 2.1.3. 要点说明 CardBook为卡片组件。 该组件可以添加多个子组件,但是每次只能显示一个子组件,显示的组件称为活动组件。目前该组件被TabControl使用。 3.【DataPilot】数据导航条 3.1【DataPilot】数据导航条的常规用法 3.1.1页面效果 3.1.2开发步骤 第一步,新建一个Dorado View,命名为CDataPilot,并在View节点下添加控件【DataSet】、【ToolBar】和【DataGrid】,然后在【ToolBar】节点中添加【DataPilot】控件。 第二步,配置【DataPilot】中对应属性。 属性 属性值 说明 id dpDataPilot View中控件的唯一标识 dataSet dtProduct View中DataSet控件id itemCodes pages 显示分页 第三步,为对应的【DataSet】配置属性。 属性 属性值 说明 dataProvider dataPilotService#getAll SpringBean#method得到数据 dataType [dtProduct] DataSet对应的实体类型,“[]”表示对多关系 pageSize 10 每页显示10条数据 第四步,为对应的【DataGrid】生成显示的列,配置其dataSet属性。 属性 属性值 说明 dataSet dsProduct DataSet的id 3.1.3要点说明 这个例子简洁的说明了【DataPilot】的基本作用和页面显示效果。 我们将通过配置【DataPilot】的属性,把从后台方法得到的数据在页面中显示的时候进行了分页处理。数据导航条很适合配合【ToolBar】控件一同使用,建议您在使用时将数据导航条放置在【ToolBar】中,当然这并不是必须的。关于【DataSet】、【DataGrid】等控件使用,请参考其对应的详解。其中【DataSet】中dataProvider对应的方法在service包下DataPilotService中。 3.2【DataPilot】数据导航条显示增加,删除,取消按钮 3.2.1页面效果 3.2.2开发步骤 第一步,修改【DataPilot】中itemCodes属性为pages,丨,+,-,x分别代表“分页”、“分隔符”、“添加按钮”、“删除按钮”、“取消按钮”。 3.2.3要点说明 这个例子说明了数据导航栏的增加、删除、撤销按钮的显示。 需要注意的是,当点击添加时候,增加一条数据,这些按钮并没有操作数据库,如何保存这些按钮的操作还需要配合其他方法。 4.【Dialog】对话框 4.1【Dialog】对话框常规用法 4.1.1页面效果 4.1.2开发步骤 第一步,新建一个Dorado View,命名为CDialog,在View节点下创建一个【Button】和一个【Dialog】,并在Children中添加一个【Label】组件。 第二步,配置【Dialog】的属性。 属性 属性值 说明 id dialog1 View中控件的唯一标识 caption 测试Dialog 控件的标题 center true 是否剧中显示 height 300 对话框的高度 width 400 对话框的宽度 第三步,设置【Label】text属性,要显示的内容。 属性 属性值 说明 text 这里可以放置其他组件 显示的文字 第四步,在View节点下的【Button】的OnClick事件编辑代码。 代码分如下: var dialog = this.get('#dialog1'); dialog.show(); 4.1.3要点说明 这个例子简洁的说明了【Dialog】 的常规用法和页面效果。 我们通过在页面中的【Button】弹出弹出对话框,可以看到Childen中【Label】的值在对话框中显示。当然Childen中可以根据需要放弃其他多种控件。【Dialog】默认提供了最大化、最小化、标题拖动、拖拽大小的功能,以及有自己的皮肤。如果不需要这些功能,可以考虑使用【FloatPanel】实现。其中【FloatPanel】请参考【FloatPanel】详解。 4.2【Dialog】对话框Buttons和Toos 4.2.1页面效果 4.2.2开发步骤 第一步,在【Dialog】组件下Buttons中添加两个【Button】并分别配置其id、caption和icon属性。 属性 属性值 说明 id btt1 View中的唯一标识 caption 确定 页面中按钮中的文字 icon url(>skin>common/icons.gif) -20px -0px 按钮中的图标 第二步,在Buttons中的【Button】的OnClick时间中编辑事件,点击隐藏对话框。 代码如下: this.get('#dialog1').hide(); 第三步,在Tools中添加两个【SimpleIconButton】并分别配置icon属性。 属性 属性值 说明 icon url(>skin>common/icons.gif) -120px -0px 按钮中的图标 4.2.3要点说明 这个例子简洁的显示了【Dialog】中Buttons和Tools的作用和效果。 在Buttons中添加【Button】默认下部居中显示,可以根据业务的需要显示,调整Buttons属性即可;Tools是在标题栏中添加了两个【SimpleIconButton】,关于【SimpleIconButton】控件的详细介绍,请参考其对应的讲解。 4.3【Dialog】对话框的模态和最大化 4.3.1页面效果 4.3.2开发步骤 第一步,模态设置,修改【Dialog】属性modal的值为true。 属性 属性值 说明 modal true 对话框弹出为模态效果 第二步,最大化设置,修改【Dialog】属性maximizable的值为true。 属性 属性值 说明 maximizable true 对话框显示最大化图标 4.3.3要点说明 这个例子简洁说明了【Dialog】的模态和最大化功能的设置和效果。 对话框的模态可以更清晰的显示对话框的内容,是比较常用的配置。点击对话框右上角的最大化标志,可以实现对话框充满整个窗口,完整显示对话框中内容。 5.【FieldSet】FieldSet 5.1【FieldSet】FieldSet常规用法 5.1.1页面效果 5.1.2开发步骤 第一步,新建Dorado View,命名为CFieldSet,在View节点中添加【FiledSet】和【Container】控件,并设置【FieldSet】的属性。 属性 属性值 说明 id filedSet1 View中的唯一标识 caption 总额 标题名称 height 250 控件的高度 width 600 空间的宽度 第二步,然后在【FieldSet】中添加五个【Container】,在每个【Container】中添加【Label】和【TextEditor】。 第三步,设置【Container】的大小。 属性 属性值 说明 height 50 控件的高度 width 200 控件的宽度 第四步,设置【FieldSet】的布局类型为form。 第五步,设置【Label】的text属性和【Texteditor】的text属性。例: 属性 属性值 说明 text 分类一 空间显示的内容 5.1.3要点说明 这个例子简洁的显示了【FiledSet】的显示效果和基本用途。 【FiledSet】是对Html中的【FieldSet】的封装。可以看到【FieldSet】中的所有分类的总和等于该控件指向的那个文本,当然文本中的内容这个事例中是固定的,可以根据业务的需要动态显示【FieldSet】的总和。 5.2【FiledSet】FiledSet中Buttons 5.2.1页面效果 5.2.2开发步骤 第一步, 在【FieldSet】节点下的Buttons中添加两个【Button】组件,设置其id、caption以及icon属性。 属性 属性值 说明 id bOk View中的唯一标识 caption 确定 按钮上显示的文本信息 icon url(>skin>common/icons.gif) -20px -0px 按钮上显示的图标 第二步,在“取消”按钮中的Onclick事件中编辑事件设置【FiledSet】的状态为折叠。 代码如下: var fieldSet = this.get('#fieldSet1'); fieldSet.set('collapsed',true); 5.2.3要点说明 这个例子简洁的显示了【FiledSet】中Buttons的作用和页面效果。 Buttons中按钮的默认布局是居中显示,可以根据业务的需要,修改其布局。 6.【FloatContainer】浮动容器 6.1【FloatContainer】浮动容器常规用法 6.1.1页面效果 6.1.2开发步骤 第一步,新建Dorado View,命名为CFloatContainer,在View节点下添加【Button】、【HtmlContainer】和【FloatContainer】控件,然后在【FloatContainer】添加【FieldSet】控件。配置【FloatContainer】的属性。 属性 属性值 说明 id FloatContainer1 View中的唯一标识 center true 居中显示 height 350 控件高度 width 650 控件宽度 第二步,在View节点下的【HtmlContainer】中添加一个图片。 【HtmlContainer】中content中引用图片: 第三步,打开View节点下【Button】OnClick事件编辑框,编辑事件,点击显示该控件。 代码如下: this.get('#FloatContainer1').show(); 6.1.3要点说明 这个例子简洁的说明了【FloatContainer】的常规用法。 【FloatContainer】浮动容器,用法跟【Container】近似,其中可以根据业务需要添加多中其他控件。关于【FiledSet】详细用法,请查看【FiledSet】的讲解。 6.2【FloatContainer】浮动容器的模态和动画 6.2.1页面效果 6.2.2开发步骤 第一步,模态效果,设置【FloatContainer】中属性modal的值为true。 属性 属性值 说明 modal true 控件以模态效果弹出 第二步,动画效果,选择【FloatContainer】中属性showAnimateType的值,根据业务需要选择。 属性 属性值 说明 showAnimateType silde 控件以silde的动画效果出现 6.2.3要点说明 这个例子说明了通过配置【FloatContainer】的值来设置其不同的显示效果。 7.【GroupBox】GroupBox 7.1【GroupBox】GroupBox常规用法 7.1.1页面效果 7.1.2开发步骤 第一步,新建Dorado View,命名为CGroupBox,在View节点下添加一个【Label】和【GroupBox】控件,并设置【GroupBox】。 属性 属性值 说明 id groupBox1 View中的唯一标识 caption 任务提示 按钮上显示的文本 height 100 控件的高度 width 50% 控件的宽度 第二步,在【GroupBox】节点下的Children中添加一个【Container】并设置其layout为hbox,然后在【Container】中添加几个【Button】。 第三步,为每个【Button】设置不同的信息。 7.1.3要点说明 这个例子简洁的说明了【GroupBox】的基本用法和页面效果。 我们可以看到【GroupBox】是一种风格独特的分组框,其中的内容指向了一个文本提示,并且点击其中的小三角符号可以隐藏其中的内容。其中【GroupBox】中可以根据业务的需要添加多中其他控件。 7.2【GroupBox】GroupBox中Buttons 7.2.1页面效果 7.2.2开发步骤 第一步,在View节点下添加一个【Label】控件和【GroupBox】控件,并设置【Label】text属性和【GroupBox】caption和id以及width、heigth。 第二步,在【GroupBox】节点下添加一个【AutoForm】,添加几个【AutoFormElement】组件并配置属性。步骤同8.1.2。 第三步,在Buttons中添加两个【Button】,“确认”和“取消” 7.2.3要点说明 这个例子说明了【GroupBox】中Buttons的作用和效果显示。 我们在Buttons中添加了两个【Button】,页面默认会把两个【Button】在控件的下方居中显示,当然可以根据需要,通过配置Buttons来设置【Button】的位置。 8【IFrame】IFrame组件 8.1【IFrame】IFrame组件常规用法 8.1.1页面效果 8.1.2开发步骤 第一步,新建一个Dorado View,命名为CIFrame,在View节点下添加两个【Container】组件,设置该View的layout为hbox。 第二步,在每个【Container】中分别添加一个【IFrame】组件,分别设置其width属性为50%。 属性 属性值 说明 width 50% 控件的宽度为浏览器的一半 第三步,设置【IFrame】中path属性。 属性 属性值 说明 path http://www.bstek.com 关联页面的路径 8.1.3要点说明 这个例子简洁的说明了【IFrame】的基本作用和效果。 我们再View中添加了两个【IFrame】通过配置其path路径来自动关联到其对应的页面,可以是项目中另一个View页面,也可以是Web页面。 9.【Panel】和【FloatPanel】面板容器和浮动面板容器 9.1【Panel】和【FloatPanel】面板常规用法 9.1.1页面效果 9.1.2开发步骤 第一步,新建一个Dorado View,命名为CPanel,在View节点下添加一个【Panel】,在【Panel】的Children中添加一个【Button】,设置【Panel】的外边距和id以及背景。 属性 属性值 说明 id panel1 View中的唯一标识 background url(images/dorado7-logo-big.png) 背景图片 caption Panel的Caption属性,如果设置则显示标题栏 标题栏信息 height 400 控件的高度 width 600 控件的宽度 第二步,在View节点下添加【FloatPanel】组件。配置【FloatPanel】的属性。 属性 属性值 说明 id floatPanel1 View中的唯一标识 caption FloatPanel的caption属性 标题栏信息 left 200 距离左侧的距离 top 30 距离顶部的距离 第二步,在【FlaotPanel】中的Children中添加一个【AutoForm】组件,并添加几个【AutoFormElement】组件。 第三步,设置【AutoForm】中cols属性,单列,并设置【AutoFormElement】的label属性。 第四步,在【Panel】节点下Children中【Button】的OnClick事件中编辑事件,来显示【FlaotPanel】。 代码如下: this.get('#floatPanel1').show(); 9.1.3要点说明 这个例子简洁的说明了【Panel】、【FlaotPanel】的页面效果。 我们首先在页面中创建了一个【Panel】控件,在这个节点中添加了一【Button】组件,在点击按钮的时候弹出【FlaotPanel】控件并显示其中的信息。在【FlaotPanel】中我们放置了一个【AutoForm】控件,关于这个空间的用法,请参考【AutoForm】的详解。其中可以看到他们的【Panel】和【FloatPanel】的共同属性比如如果不设置其caption时候,标题栏不显示。 9.2【Panel】、【FloatPanel】面板Buttons和Tools 9.2.1页面效果 9.2.2开发步骤 第一步,在【Panel】、【FloatPanel】节点中的Buttons中添加两个【Button】,分别为之配置id和icon属性。 属性 属性值 说明 id tbOK1、tbOK2 View中的唯一标识 caption 确定 按钮上显示的文本 icon url(>skin>common/icons.gif) -20px -0px 按钮显示的图标 第二步,在【Panel】、【FlaotPanel】节点中的Tools中添加两个【SimpleIconButton】,分别为之配置icon属性,添加图片。 属性 属性值 说明 icon url(>skin>common/icons.gif) -120px -0px 显示的图标 第三步,在“确定”和“取消”按钮中添加Onclick事件,来关闭【FloatPanel】 代码如下: this.get('#floatPanel1').hide(); 9.2.3要点说明 这个例子简要说明了【Panel】、【FlaotPanel】中Buttons和Tools的作用和页面效果。 我们在Buttons中添加了两个【Button】,同时在Tools中添加了两个【SimpleIconButton】,可以看到界面中在下方居中出现了两个按钮,点击隐藏【FloatPanel】,在【Panel】、【FloatPanel】标题栏出现两个图标按钮,点击暂时没有添加事件,可以根据业务需要添加相应的操作。可以看出Buttons和Tools中的操作两者的效果和使用方法是一样的。 9.3【FloatPanel】浮动面板模态和最大化 9.3.1页面效果 9.3.2开发步骤 第一步,设置模态,配置【FloatPanel】属性modal为true。 属性 属性值 说明 modal true 模态效果显示 第二步,设置最大化,配置【FlaotPanel】属性maximizeable为true。 属性 属性值 说明 maximizeable true 控件可以最大化 9.3.3要点说明 这个例子简要说明了【FlaotPanel】中模态和窗口最大化的配置和页面效果。 当点击页面中的按钮的时候,可以看到弹出的【FloatPanel】以模态效果初显,可以更明显的显示【FloatPanel】中的内容,当然【FloatPanel】中可以添加其他多种控件。模态效果只有浮动控件才有这样的属性。普通控件是没有的。 10.【ProgressBar】滚动条 10.1【ProgressBar】滚动条的静态效果 10.1.1页面效果 10.1.2开发步骤 第一步,新建一个Dorado View,命名为CProgressBar,在View节点下新建一个【Container】。 第二步,在【Container】下添加一个【Label】和【ProgressBar】。 第三步,设置【Label】的text属性,同时设置【ProgressBar】的value和width属性。 属性 属性值 说明 value 60 滚动条的进度,默认最大100 width 300 控件的宽度 10.1.3要点说明 这个事例简洁的显示了【ProgressBar】滚动条的页面效果。 我们设置了【ProgressBar】属性value的值为60,可以看到maxValu=100,默认最大值为100,当然可以根据业务的需要修改这个最大值。 10.2【ProgressBar】动态滚动条 10.2.1页面效果 (图一:内存提取前效果) (图二:获得当前内存使用情况,每800ms提取一次) 10.2.2开发步骤 第一步,在View节点下,新建一个【Container】,并设置其layout为vbox,padding=30,align=left。 第二步,在【Container】中添加一个【AjaxAction】控件,并设置相应属性。 属性 属性值 说明 id getMemInfo View中的唯一标识 caption 提取Server端内存使用情况222 控件显示的内容 service progressBarService#getMemInfo SpringBean#Method 第三步,在此【Container】节点下添加一个【Button】并设置其属性。 属性 属性值 说明 id buttonGetMemInfo View中的唯一标识 action getMemInfo AjaxAction的id 第四步,在此【Container】节点下添加一个【Container】并设置其layout为hbox,向其中添加两个【Label】控件,配置其text属性。 第五步,在View节点下,第二个【Container】中添加【ProgressBar】控件,配置其width=300。 10.2.3要点说明 这个事例简洁的显示了动态【ProgressBar】滚动条的页面效果。 我们可以看到通过【AjaxAction】得到数据,在【ProgressBar】中滚动条动态显示。另外我们通过配置【Button】的action属性来调用某个【AjaxAction】,同时把【AjaxAction】的caption的值渲染给了【Button】。其中关于【AjaxAction】的用法,请参考其详解,其中service中对应的方法在service包下ProgressBarService中。 11.【Section】 12.【Slider】滑动条 12.1.【Slider】通过滑动条获得图片百分比 12.1.1. 页面效果 12.1 滑动条划过20%的时候得到的图片 12. 2 滑动条滑动到90%的时候得到的图片 12.1.2. 开发步骤 第一步,新建一个Dorado View,命名为CSlider,在View节点下新建一个【Slider】和一个【Panel】。 第二步,设置【Slider】的属性。 属性 属性值 说明 id sliderId View中的唯一标识 width 600 进度条宽度为600px 第三步,设置【Panel】的宽和高(width,height)都为0。并设置其背景图片(方法见【Panel】讲解)。 第四步,通过【Slider】的onValueChange事件,控制显示图片的比例。 代码分如下: var slider = this.get("#sliderId"); var panel = this.get("#panelId"); var per = slider.get("value")/slider.get("maxValue"); panel.set("width",per*600); panel.set("height",per*500); 12.1.3. 要点说明 这个例子简单的说明了【Slider】进度条的一种用法,当我们在项目开发的过程中遇到比例动态控制的时候,可以考虑使用该控件。 13.【SplitPanel】分割面板 13.1.【SplitPanel】与菜单结合 13.1.1. 页面效果 13.1.2. 开发步骤 第一步,新建一个Dorado View,命名为CSplitPanel,在View节点下新建【ToolBar】和【SplitPanel】。 第二步,在【ToolBar】下添加【Lable】控件,设置属性。 属性 属性值 说明 text 家庭养花分类 显示内容 style padding-left:10px 工具栏说明距离左边距10个像素 第三步,设置【SplitPanel】的属性 。 属性 属性值 说明 position 200 分隔栏距离左边距200个像素 第四步,添加一个【Tree】和一个【HtmlControl】控件,分别置于【SplitPanel】的MainControl和SideControl中。 13.1.3. 要点说明 这个事例简介的说明了【SplitPanel】分割面板的页面效果和配置方法。 分割面板是用来布局的一个组件,使用该组件需要指定一个边组件,一个主组件。边组件可以收缩,并可以指定其宽度和高度。边组件和主组件的相对位置可以是左右,也可以是上下,下上,右左,相对位置可以通过SplitPanel的direction属性设置。可取left,right,bottom,top,默认为left。下图为direction设为bottom时的页面效果。 14.【Tabbar】标签条 14.1.【Tabbar】显示效果 14.1.1. 页面效果 14.1.2. 开发步骤 第一步,建立一个Dorado View,命名为CTabBar01,在View节点下创建一个【TabBar】。 14.1.3. 要点说明 这个事例简介的显示了单个【Tabbar】的显示效果。 【Tabbar】标签栏通常不会单独使用,通常会和【ControlTab】、【IframeTab】、【Tab】这些控件结合使用,下面介绍了结合【Tab】控件的使用。 14.2.【Tabbar】和【Tab】结合显示效果 14.2.1. 页面效果 14.2.2. 开发步骤 第一步,建立一个Dorado View,命名为CTabBar02,在View节点下创建一个【Panel】,在【Panel】的Children下添加【TabBar】,在【TabBar】下添加10个【Tab】。 第二步,配置【Panel】的属性。 属性 属性值 说明 width 500 容器的宽度 Height 300 容器的高度 第三步,配置【TabBar】的属性。 属性 属性值 说明 showMenuButton True 显示Tab的菜单按钮 第四步,配置第1个【Tab】。第2、8、9、10个同第一个。 属性 属性值 说明 caption 标签1 控件上显示的名称 第五步,配置第3个【Tab】的属性。第4、5个同第3个。 属性 属性值 说明 caption 标签3 控件上显示的名称 disabled true 标签页处于禁用状态 第六步,配置第6个【Tab】的属性。第7个同第6个。 属性 属性值 说明 caption 标签6 控件上显示的名称 closeable true 标签页可以被关闭 14.2.3. 要点说明 这个事例说明了【TabBar】结合【Tab】控件的配置过程和页面效果。 【TabBar】通常和标签页配合使用。若标签页过超出显示区域,在第一个标签页和最后一个标签页附近会自动添加两个移动的箭头,如下图黄色椭圆标注,用来移动标签页的位置。当【TabBar】的showMenuButton属性值为true时,会出现一个图片按钮,如下图红色椭圆标志按钮,点击时会将标签页以菜单形式展现。 15.【TabControl】标签页 15.1.【TabControl】和IframeTab结合 15.1.1. 页面效果 15.1.2. 开发步骤 第一步,建立一个Dorado View,命名为CTabControl,在View节点下创建一个【TabControl】,在TabControl中添加三个【IframeTab】。 第二步,配置第一个【IframeTab】的属性。 属性 属性值 说明 caption 百度 标签页的标题 path http://www.baidu.com 标签页路径 第三步, 配置第二个【IframeTab】的属性。 属性 属性值 说明 caption 锐道官方 标签页的标题 path http://www.bstek.com 标签页路径 第四步, 配置第三个【IframeTab】的属性。 属性 属性值 说明 caption bsdn学习驿站 标签页的标题 path http://www.bsdn.org 标签页路径 15.1.3. 要点说明 这个事例说明了【TabControl】标签页的基本用法和页面显示效果。 【TabControl】通常与标签页配合使用,标签页有【Tab】、【IframeTab】、【ControlTab】三种,具体用法和区别看标签页讲解。 16.【Tip】提示信息控件 16.1.【Tip】不同形态显示效果 16.1.1. 页面效果 16.1.2. 开发步骤 第一步,建立一个Dorado View,命名为CTip,在View节点下创建一个1个【Label】 第二步,配置【Label】属性。 属性 属性值 说明 text 以下是不同形态的Tip,光标移动到该行字,会出现提示信息! 标签页的标题。 tip wow ! 好好学习哟 提示信息。 第三步,在View节点下创建6个【Tip】和6个【Button】。 第四步,设置6个【Tip】的属性。 属性 属性值 说明 id tip1 View中控件唯一标识 arrowDirection top 箭头指向朝上 center true 提示信息正中显示 closeable true 可以关闭 text NBA2012年度赛季已经拉开帷幕。
西部马刺首轮对战爵士 提示栏显示内容 属性 属性值 说明 id tip2 View中控件唯一标识 arrowDirection top 箭头指向朝上 caption NBA西部半决赛结果 提示栏标题 center true 提示信息正中显示 closeable true 可以关闭 showDuration 3 显示3秒后隐藏 text 马刺2:4负于雷霆。石佛邓肯挥泪 提示栏显示内容 属性 属性值 说明 id tip3 View中控件唯一标识 arrowDirection left 箭头指向朝左 center true 提示信息正中显示 closeable true 可以关闭 showAnimateType Zoom 提示栏动态展示 showDuration 3 显示3秒后隐藏 text 东部凯尔特人和热火成胶着状态,实力相差不多。胜负难分 提示栏显示内容 属性 属性值 说明 id tip4 View中控件唯一标识 arrowDirection left 箭头指向朝左 center true 提示信息正中显示 closeable true 可以关闭 modal true 模态显示提示框 modalType dark 背景形态呈现暗色 showDuration 3 提示信息显示3秒后隐藏 text 此时Tip的modal属性值为true,modalType属性值为dark 提示栏显示内容 属性 属性值 说明 id tip5 View中控件唯一标识 arrowDirection left 箭头指向朝左 center true 提示信息正中显示 closeable true 可以关闭 showDuration 3 提示信息显示3秒后隐藏 text 带图标的提示信息 提示栏显示内容 属性 属性值 说明 id tip6 View中控件唯一标识 arrowDirection right 箭头指向朝右 caption 我最爱的电视节目 提示信息栏标题 center true 提示信息正中显示 text 《大秦帝国》
《雍正王朝》
《大染坊》
《大宅门》 提示栏显示内容 第四步,在Id为tip5的【Tip】组件中写入onReady事件: 代码分如下: self.set("icon", " url(>skin>common/icons.gif) -60px -40px"); 第五步,设置6个【Button】的caption属性,并分别在6个【Button】的onclick中写入事件,控制显示信息展示。 代码分如下: this.id("tip1").show(); 第六步,设置View属性,进行有关排版设置。 属性 属性值 说明 layout form 表单形式排列控件 cols 250,250 每行显示两个控件,每个控件宽度为250个像素 rowHeight 50 每行所占高度为50个像素 padding 20 四周留白20个像素。 16.1.3. 要点说明 这个事例通过配置几个几个【Tip】提示信息控件的不同属性来说明其不同的作用和页面的效果。 如上所述,介绍了【Tip】空间的多种展现形式,基本可以满足我们正常需求。点击每个按钮时,都会显示对应形态的提示信息栏。 17.【ToolBar】工具栏 17.1.【ToolBar】工具栏常见形态 17.1.1. 页面效果 17.1.2. 开发步骤 第一步,建立一个Dorado View,命名为CToolBar,在View节点下创建一个1个【ToolBar】。 第二步,在【ToolBar】节点下创建两个【ToolBarButton】,一个【DataPilot】,一个【TextEditor】,具体属性设置参见相关组件详述。 17.1.3. 要点说明 这个事例简介的介绍了【TooBar】工具栏的单独的作用和页面效果。 【ToolBar】常常作为工具栏在页面显示,在工具栏上,可以添加很多子控件来满足工具栏的基本需求。通常这个控件和和【DataPilot】、【DataGrid】一起使用来显示数据的个数和翻页。其配合使用请查看【DataPilot】的介绍。 18.【Label】文本标签 18.1.【Label】文本标签控件 18.1.1. 页面效果 18.1.2. 开发步骤 第一步,新建一个Dorado View,命名为CForm,设置View节点的属性并在View节点下新建一个GroupBox控件。 View属性设置为: 属性 属性值 说明 title Form控件 styleSheetFile com/bstek/dorado/component/document/control/style.css 设置View的布局方式为vbox(垂直布局) 第二步,在GoupBox的Buttons节点下添加一个Button控件,Children节点下添加一个Label控件 第三步,设置控件属性 设置GroupBox属性 属性 属性值 说明 caption Label Control 显示标题 设置Label属性 属性 属性值 说明 id formLabel text 标签测试 tip 标签测试 exClassName layoutRegion width 70% 设置Button属性 属性 属性值 说明 caption 设置属性 第四步,设置GroupBox Layout布局方式为vbox垂直布局 第五步,设置Button onClick事件 this.get("#formLabel").set({ text: '通过设置text属性设置标签显示', tip: '通过设置text属性设置标签显示' }); 第六步,访问路径 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CForm.d 18.1.3. 要点说明 在CForm View中曾设置过View的styleSheetFile属性为com/bstek/dorado/component/document/control/style.css,这是Dorado View引用外部css样式的属性设置,我们在control包下加入style.css文件,设置css样式并在formLabel的exClassName属性中做了引用。 .layoutRegion { background: :#FDFEDA; border: 1px #DBB74A solid; padding: 4px; white-space: nowrap; overflow: visible; } Label作为文本标签作为文本的显示,在Button onClick事件中通过获取formLabel控件并设置其属性text,tip达到我们应用Label使用的目的。设置formLabel text tip属性还可以按照如下进行操作; this.get("#formLabel").set("text","通过设置text属性设置标签显示"); this.get("#formLabel").set("tip","通过设置text属性设置标签显示"); 以上介绍了Label控件的使用方法,我们建了名为CForm的Dorado View和外部css样式文件,在后面控件的使用介绍中可能还会应用到,到时将不做讲解。CForm中我们不仅仅将Label的使用示例放在其中,还会将其他的Form类控件也放置在里面,因此使用了GroupBox作为容器布局控件分别展示各个控件的使用,关于GroupBox的详细使用请参照GroupBox控件介绍。 19.【TextEditor】文本编辑器 19.1.【TextEditor】带mapping的文本编辑器 19.1.1. 页面效果 19.1.2. 开发步骤 第一步,接上例在CForm中添加GroupBox控件,在Buttons节点下添加两个Button,在Children节点下加入Container控件,然后在Container控件下加入Label和TextEditor控件。 第二步,设置各控件属性 GroupBox属性 属性 属性值 说明 caption TextEditor Control layout vbox Container属性 属性 属性值 说明 layout hbox TextEditor属性 属性 属性值 说明 id formTextEditor1 width 80% 第三步,设置TextEditor mapping属性 在mapping下mapValues中值点Edit编辑进入mapValues设置对话框。 mapValues对话框中mapValues节点下加入Collection,然后在Collection节点下加入三个实体。 第一个Entity 属性 属性值 说明 key 0 value 保密 第二个Entity 属性 属性值 说明 key 1 value 已婚 第三个Entity 属性 属性值 说明 key 2 value 未婚 然后回到TextEditor的属性设置窗口,设置mapping属性下keyProperty属性和valueProperty属性分别为key,value对应mapValues中实体对象对应的属性。 第四步,Button事件 添加Button设置值按钮的onClick事件 this.set("#formTextEditor1.value","0"); 添加Button获取值按钮的onClick事件 var value=this.get("#formTextEditor1").get("value"); dorado.MessageBox.alert(value); 19.1.3. 要点说明 上面的例子中通过设置TextEditor的mapping属性达到键值对的目的,可以理解为翻译,如上例,设置值为0的时候,显示为保密,自动做了显示映射,更多mapping使用功能请参照mapping章节。 直接获取TextEditor控件的值可按照本例中获取对象的value属性即可。 19.2.【TextEditor】使用dataset的文本编辑器 19.2.1. 页面效果 19.2.2. 开发步骤 第一步,建立DataType 在Model节点下加入DataType,设置DataType name属性为Product。 继续在DataType下加入两个BasePropertyDef,分别设置其属性。 属性 属性值 说明 name productName 属性 属性值 说明 name unitPrice dataType float 数据类型 第二步,建立DataSet并绑定DataType 属性 属性值 说明 id datasetProduct dataType Product 绑定DataType 第三步,加入显示布局等控件 如上图,分别假如GroupBox控件,设置caption属性为TextEditor Control Use DataSet,在Buttons节点下加入两个Button,分别设置caption属性为获取值和设置值。然后在Children节点下加入TextEditor控件,设置属性如下: 属性 属性值 说明 dataset datasetProduct property productName 第四步,我们保存设置信息,可以看到TextEditor这时的状态是灰色的,是因为这时我们把TextEditor绑定在datasetProduct上,在Dorado数据驱动机制下,由于dataset中没有数据记录,所以此时TextEditor不能进行数据操作。 第五步,设置Button设置值的onClick事件 this.get("#datasetProduct").setData([{ productName: "dorado7", unitPirce: 100000 }]); 添加Button获取值onClick事件 var data = this.get("#datasetProduct").getData(); if (data) { dorado.MessageBox.alert(data.current.get("productName")); } else { dorado.MessageBox.alert("请先设置值后再进行此操作"); } 19.2.3. 要点说明 本事例是通过将TextEditor绑定到DataSet上获取数据和操作数据的事例,我们进行数据操作的时候只关心Dataset及DataType,并不关心是否TextEditor,因此本例并没有给TextEditor进行命名,只是通过调用DataSet提供的数据操作方法获取和操作当前数据。事实上,通过直接获取TextEditor中值的方式在Dorado编程中很少,大多都是通过数据驱动的方式进行。 本例中引用到了DataType和DataSet,更多关于其用法和操作请参照相关章节。TextEditor中还有很多的属性和方法,再此不做一一介绍,更多细节参照Dorado提供的API. 20.【TextArea】多行文本编辑器 20.1.【TextArea】多行文本编辑器控件 20.1.1. 页面效果 20.1.2. 开发步骤 本事例开发步骤请参照TextEditor控件开发讲解。 属性 属性值 说明 blankText 请填写您的爱好 空白值时显示文字 height 100 20.1.3. 要点说明 本例展示了TextArea的使用,属性blankText是当文本对应值为空值时显示文字,这在很多实际应用中比较常用到,至于其他的使用请参照TextEditor的使用讲解,除了没有TextEditor的mapping属性对应功能外,其他用法与TextEditor一样。 21.【DataLabel】文本标签 21.1.【DataLabel】文本标签控件 21.1.1. 页面效果 21.1.2. 开发步骤 第一步,在CForm视图中加入GroupBox及DataLabel控件 第二步,设置DataLabel属性 属性 属性值 说明 id formDataLabel dataSet datasetProduct property productName 第三步,设置DataLabel onRefreshDom事件 var icon = $DomUtils.xCreate({ tagName: "img", src: "images/file.gif" }); var entity = self.getBindingData(); var label = $DomUtils.xCreate({ tagName: "label", innerHTML: entity ? entity.get("productName") : "" }); var dom = self.getDom(); for (i = 0; i < dom.childNodes.length; i++) { dom.removeChild(dom.childNodes[i]); i -= 1; } dom.appendChild(label); dom.appendChild(icon); 第四步,访问地址 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CForm.d 可以看到在DataLabel后有个图片,DataLabel默认情况下使用Label方式展示数据集当前记录下字段值,这时我们通过加入onRefrshDom事件代码更改了Dorado的默认刷新展示机制,加入了图片效果。 21.1.3. 要点说明 本例通过在onRefreshDom中加入逻辑的方式更改了Dorado的默认展现机制,可能本身没有代表性,但是可以借此了解Dorado实现。本例使用JSON方式创建了图片及Label,加入到DataLabel对应Dom对象中。self.getBingData()表示绑定到DataLabel上的数据对象,进行刷新时将数据取出来进行展现。 22.【Link】超链接 22.1.【Link】超链接 22.1.1. 页面效果 22.1.2. 开发步骤 第一步,加入GroupBox和Link控件 设置GroupBox caption属性为Link Control。 Link属性设置 属性 属性值 说明 id formLink target _blank 第二步,加入DataType属性 接之前DataType,在DataType Product中加入BaseProsertyDef,设置属性name为netAddress 第三步,在客户端给datasetProduct加入数据记录,在datasetProduct onReady事件中加入 self.setData([{ productName: "dorado7", unitPrice: 100000, netAddress: "http://www.bsdn.org" }]); 第四步,加入事件,让数据当前记录与Link做数据绑定。 在View的onCreate事件中加入 this.$setDataLink = function(self, arg){ var formLink = this.get("#formLink"); formLink.set("text", arg.newCurrent.get("productName")); formLink.set("href", arg.newCurrent.get("netAddress")); } 在DataType Product onCurrentChange事件中加入 this.$setDataLink (self,arg); 第五步,访问地址 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CForm.d 可以看到名称为Link Control的GroupBox下有个超链接,点击链接,在新窗口下打开页面。 22.1.3. 要点说明 本例通过结合View,DataType,DataSet等事件访问Link,并设置其属性达到Link与数据信息的联动。DataSet的onReady事件中加入数据信息,这种方式在实际的开发中可能有的地方会用到。在View的onCreate事件中将我们写的function注入到view中,然后在DataType的onCurrentChange中访问,访问时我们传入DataType onCurrentChange中对应的self及arg。Link的target有几种方式_blank,_parent,_self,_top及自定义的iframe。 View中将对象注入到view中,然后再通过this.x访问是在进行dorado view开发时常使用的技巧。 23.【CheckBox】复选框 23.1.【CheckBox】复选框 23.1.1. 页面效果 23.1.2. 开发步骤 第一步,接前例,在DataTypt Product下加入BasePropertyDef并设置name属性为isOldUser,dataType为Boolean。 第一步,加入控件GroupBox,在GroupBox Children结点下加入FormElement控件,设置属性。 设置FormElement控件属性 属性 属性值 说明 dataSet datasetProduct editorType CheckBox 编辑类型 property isOldUser showHint false 第三步,加入类文件 package com.bstek.dorado.component.document.control.listener; import org.springframework.stereotype.Component; import com.bstek.dorado.common.event.DefaultClientEvent; import com.bstek.dorado.data.type.EntityDataType; import com.bstek.dorado.view.manager.ViewConfig; @Component("cFormView") public class CFormView { public void onInit(ViewConfig viewCofig) throws Exception { EntityDataType dataTypeProduct = (EntityDataType) viewCofig .getDataType("Product"); if (null != dataTypeProduct) { dataTypeProduct .addClientEventListener( "beforeDataChange", new DefaultClientEvent( "var textMsg = '您从' + (arg.oldValue ? '老用户' : '新用户');" + "textMsg += '更改到' + (arg.newValue ? '老用户' : '新用户');" + "dorado.MessageBox.confirm(textMsg, function(){" + "return true;});" + "return false")); } } } 第四步,注意检查更改doradohome下app-context.xml文件context:component-scan元素 第五步,设置CForm View的ViewConfig listener属性为spring:cFormView#onInit 第六步,访问View CForm即可以看到对应效果。 23.1.3. 要点说明 本例通过加入监听器的方式获取DataType并加载客户端事件。Dorado通过对象监听方式进行智能方法匹配,将对象利用Spring注释的方式注入到Spring Bean中,Spring通过扫描的方式扫描进行注入。如上app-context.xml中context:component-scan,具体用法可以参照spring相关文档。本例在ViewConfig listener属性中通过服务定位的方式spring:cFormView#onInit在初始化View时Dorado将匹配调用方法进行初始化。 本例中通过初始化ViewConfig方式监听,在实际应用中可能会遇到需要同事访问View对象,DataType及Arguments等情况,都可以在ViewConfig中获得,然后进行业务逻辑。 24.【PasswordEditor】密码编辑器 24.1.【PasswordEditor】密码编辑器 24.1.1. 页面效果 24.1.2. 开发步骤 第一步,加入DataType,设置name属性为User,加入两个BasePropertyDef,设置相关属性 user属性 属性 属性值 说明 name user required true password属性 属性 属性值 说明 name password required true 第二步,在password属性下加入RegExpValidator,设置相关属性 属性 属性值 说明 validateMode whiteBlack whiteRegExp [A-Za-z0-9]{6} resultMessage 请输入至少6位字母和数字 第二步,加入DataSet,设置相关属性 属性 属性值 说明 id dataSetUser dataType User 在DataSet onReady事件 self.setData([{}]); 第三步,AjaxAction控制,设置属性 属性 属性值 说明 id passwordAction service cFormView#onLogin 第四步,加入显示控件 User FormElement属性设置如下 属性 属性值 说明 dataSet dataSetUser property user editorWidth 200 showHintMessage true width 50% Password FormElement属性设置如下 属性 属性值 说明 dataSet dataSetUser property password editorType PasswordEditor editorWidth 200 showHintMessage true width 50% 其他显示控件属性设置比较简单,在此不做说明。 第五步,加入登陆测试按纽onClick事件代码 var action = this.id("passwordAction"); var currentData = this.get("#dataSetUser").getData().current; if (currentData.validate() == "ok") { var parameter = { user: currentData.get("user"), password: currentData.get("password") }; action.set("parameter", parameter).execute(function(result){ dorado.MessageBox.alert(result.loginInfo); }); } else { dorado.MessageBox.alert("密码信息不合规则,请重新输入"); } 第六步,接前面例子,在CFormView加入onLogin方法 @Expose public Properties onLogin(String user,String password)throws Exception{ Properties info = new Properties(); info.setProperty("loginInfo","您的登录信息为:\n用户:"+user+"\n密码:"+password); return info; } 24.1.3. 要点说明 密码编辑器一般应用在需要输入用户密码的场景中,本例通过加入FormElement 设置editorType为PasswordEditor的方式达到我们输入类型为密码框的目的,当然您也可以直接加入PasswordEditor控件。本例在DataType中设置字段的required设置必填的目的,加入正则表达式验证输入合法性。 在登陆测试按纽中获取出dataSetUser的当前值并进行验证,然后调用CFormView中onLogin方法模拟登陆流程,在实际应用中可以在onLogin方法中调用相关逻辑进行登陆验证。 RegExpValidator及相关其他对象的使用请参照Dorado7相关介绍。 25.【FormProfile】表单配置 25.1.【FormProfile】表单配置 25.1.1. 页面效果 25.1.2. 开发步骤 第一步,在视图中加入控件FormProfile,设置其属性 属性 属性值 说明 id formProfile editorWidth 200 exClassName layoutRegion 第二步,加入如下控件 设置第二、三、四个FormElement的formProfile属性为formProfile 25.1.3. 要点说明 本例的实现和展示都比较简单,旨在通过formProfile属性设置了解其用法。 FormProfile控件并不用于显示,其目的是为了方便为一批表单元素统一的定义表单属性。如本例中我们设置formProfile控件的editorWidth和exClassName属性,然后在与后面三个FormElement做了绑定,可以看到后面三个控件的相关属性做了改变。 另外,为了进一步的简化操作。dorado.widget.FormElement还会在创建的过程中自动的在View中寻找是否存在id为"defaultFormProfile"的FormProfile控件。如果找到则将自动建立与其的绑定关系。因此,在很多情况下,我们只要声明一个id为"defaultFormProfile"的FormProfile控件,并且将需要的表单属性设置在其中。然后,这个View中所有的FormElement在默认情况下,都将自动从中读取配置信息。 本例中使用到的CSS扩展样式来源于文本标签中的介绍,具体可以参照之前的使用及用法。 26.【NumberSpinner】数字微调编辑器 26.1.【NumberSpinner】数字微调编辑器 26.1.1. 页面效果 26.1.2. 开发步骤 第一步,加入显示控件 第二步,设置属性 第一个NumberSpinner属性设置 属性 属性值 说明 min 0 max 100 step 1 默认值为1 text 0 第二个NumberSpinner属性设置 属性 属性值 说明 min 0 max 10000 step 100 text 2000 第三步,设置GroupBox布局方式 这里设置布局方式为form布局,cols属性值为“200,*”表示表单布局第一列宽度为200,第二列宽度自适应。 第四步,其他属性设置在此不做说明。 26.1.3. 要点说明 NumberSpinner(数字微调编辑器)作为一种编辑器,可以用来调整数字的加减。通常在使用过程中设置其最大最小属性及text属性即可使用。作为一种FormElement其他使用与其他表单控件类似,在实际使用中通常设置dataSet及property属性实现数据驱动。 27.【DateTimeSpinner】日期时间微调编辑器 27.1.【DateTimeSpinner】日期时间微调编辑器 27.1.1. 页面效果 27.1.2. 开发步骤 第一步,加入相关控件 在GroupBox下加入FormElement,并在FormElement下Editor结点下加入DateTimeSipnner。加入DateDropDown。 第二步,设置控件相关属性 DateDropDown属性 属性 属性值 说明 id dateDropDownTrigger showTimeSpinner true 是否显示时间,默认只显示日期 DateTimeSpinner属性 属性 属性值 说明 trigger dateDropDownTrigger type datetime 27.1.3. 要点说明 本例介绍了DateTimeSpinner(日期时间微调编辑器)的使用相关属性设置来了解其用法。通常情况下DateTimeSpinner会与其他时期下拉框配合使用,以达到不同的使用要求,本例就是通过设置DateTimeSpinner的trriger属性绑定时间下拉框的;type属性设置编辑类型,有如下几种类型,不同的类型显示不同,可以依据使用场景进行选择。 DateTimeSpinner作为表单控件在使用通常与数据集进行绑定使用,配合日期时间下拉框达到使用要求,下拉框的使用可以参照下拉框的介绍。 28.【CustomSpinner】自定义微调编辑器 28.1.【CustomSpinner】自定义微调编辑器 28.1.1. 页面效果 28.1.2. 开发步骤 第一步,加入控件 如上图,分别在FormElement下加入两个CustomSpinner 第二步,设置控件相关属性 属性 属性值 说明 pattern IP: [0,255].[0,255].[0,255].[0,255] 属性 属性值 说明 pattern $[*].[0,99|2] 28.1.3. 要点说明 CustomSpinner的使用是通过设置pattern属性定义各个微调槽配置信息的文本表达式。 Pattern的基本语法是利用[]表示一个微调槽。[]中可以放置该微调槽的取值范围,即range属性,例如[0,99]表示取值范围是0到99。*可用于代表开放的取值范围,例如[0,*]表示0到无穷大,[*]或[]代表任意的取值。除此之外,[]中还可以放置数位的设置,如[0,99|2]表示取值范围是0到99并且自动补零至两位。 29.【RadioGroup】单选框组 29.1.【RadioGroup】单选框组 29.1.1. 页面效果 29.1.2. 开发步骤 第一步,按照下图加入如下控件 设置GroupBox布局为form布局,在Children结点下加入两个FormElement。第一个FormElement下加入FormRadioGroup,id值为formRadioGroup,并在FormRadioGroup下加入两个RadioButton。 第一个RadioButton属性 属性 属性值 说明 text 测试1 value 1 第二个RadioButton属性 属性 属性值 说明 text 测试2 value 2 第二步,设置按钮事件如下: var rg1 = this.id("formRadioGroup"); rg1.set("radioButtons", [{ value: "0", text: "未婚" }, { value: "1", text: "已婚" }, { value: "2", text: "保密" }]); 第三步,为了演示方便性,我们直接在之前dataTypeUser中加入BasePropertyDef字段,name属性为isMarried。类型为boolean类型。设置mapping相关属性 第四步,设置第FormElement相关属性 属性 属性值 说明 dataSet dataSetUser property isMarried editorType RadioGroup 29.1.3. 要点说明 通过本例我们知道有三种方式了解RadioGroup的应用方式。第一种是在RadioGroup下加RadioButton的方式展现;第二种使用JSON数据设置RadioGroup的radioButtons属性;第三种方式是通过DataType中Mapping属性设置展现形式的方式。 30.【FormElement】表单元素 30.1.【FormElement】表单元素 30.1.1. 页面效果 30.1.2. 开发步骤 第一步,按照下图加入相关控件 第二步,在FormElement Editor结点下加入相关控件。 30.1.3. 要点说明 表单元素是一种组合式的控件,提供此组件的目的是为了使表单的定义变得更加简单。 一般而言,一个表单元素包含文本标签、编辑器、提示信息三个部分。我们在实际应用中所见的大部分输入域都是由这三个部分组成的。 本例中,我们通过在Editor下加入不同的控件可以看到相关控件的展示效果,如果加入的控件是具有输入性质的控件,则可以通过FormElement获取到值。在表单的实际使用中,表单通常与数据集进行绑定。 FormElement作为表单与其他控件联合使用,其他控件的具体使用参照相关介绍,本例只是简单的做了效果展示,实际使用中可以依据情况做灵活应用。 31.【AutoForm】自动表单 31.1.【AutoForm】自动表单 31.1.1. 页面效果 31.1.2. 开发步骤 第一步,按照下图加入相关控件 第二步,设置属性 AutoForm属性 属性 属性值 说明 cols *,*,* 列宽度 labelWidth 150 第三步,相关Element占行列设置 31.1.3. 要点说明 本例简单介绍了AutoForm中添加FormElement,AutoFormElement及其他可视控件。AutoForm的cols属性是在使用时常需要设置的属性,使用逗号分隔各列,默认只有一列,如果需要多列,使用逗号分隔开来。列宽度支持绝对宽度和自适应,*号表示自适应,当然你也可以设置某列的绝对宽度为一个数值。 AutoForm作为一个数据控件可以绑定到数据集上,可以动态创建AutoFormElement,同时也可以作为一个容器控件,加入所有可视控件。 DataSet是数据集,用于封装一组数据(指实体对象或实体集合)的控件。 可与许多组件组合使用,是Dorado的核心组件之一。 32【Validator】校验器 32.1【RepExpValidator】正则表达式校验器 32.1.1页面效果 32.1.2开发步骤 第1步, 新建一个View视图,并命名为CValidator,在model节点下新建一个DataType,并设置其属性: 属性 属性值 说明 name product mathType com.bstek.dorado.component.document.entity.DProduct 右击product,选择Generate PropertyDefs,并在productName下添加一RegExpValidator,如下图所示: 设置RegExpValidator属性 属性 属性值 说明 blackRegExp ^[1-9]\d*$ 不允许正整数 whiteRegExp ^[A-Za-z]+$  允许匹配由26个英文字母组成的字符串 第2步, 在view节点下按下图所示创建组件 第3步,设置DataSet属性。 属性 属性值 说明 dataProvider dropDown#getAll dataType [product] pageSize 20 设置DataPilot属性: 属性 属性值 说明 dataSet dataSet1 itemCodes +,-,x 第4步,设置Button属性 属性 属性值 说明 caotion 修改 并编写onClick函数,代码如下: this.get("#dialogEdit").show(); 设置DataGrid属性 属性 属性值 说明 dataSet dataSet1 第5步,设置AutoForm属性 属性 属性值 说明 cols * dataSet dataSet1 右击AutoForm选择 Generate AutoForm Element。 第6步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CValidator.d 32.1.3要点说明 RepExpValidator为正则表达式校验器,可以使用正则表达式进行校验。 32.2【CustomValidator】用户自定义数据校验器 32.2.1页面效果 可以自定义onValidator函数。 32.2.2开发步骤 第1步,在上一小节的基础上,在quantityPerUnit下新建一CustomValidator,如下图所示。 第2步,编写CustomValidator的onValidator函数,当校验器执行数据校验时触发的事件。 代码如下: dorado.MessageBox.alert("正在执行校验..."); 第3步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CValidator.d 32.2.3要点说明 CustomValidator为用户自定义数据校验器。 32.3【RangeValidator】数值区间校验器 32.3.1页面效果 32.3.2开发步骤 第1步,在上一小节的基础上,在unitPrice下新建一RangeValidator,如下图所示。 第2步, 设置RangeValidator 属性: 属性 属性值 说明 maxValue 1000 maxValueValidateMode allowEquals 允许等于最大值 minValue 10 minValueValidateMode allowEquals 允许等于最小值 第3步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CValidator.d 32.3.3要点说明 RangeValidator为数值区间校验器。 32.4【LengthValidator】文本长度校验器 32.4.1页面效果 32.4.2开发步骤 第1步,在上一小节的基础上,在unitPrice下新建一LengthValidator,如下图所示。 第2步, 设置LengthValidator 属性: 属性 属性值 说明 maxLenth 10 minLenth 1 第3步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CValidator.d 32.4.3要点说明 LengthValidator为文本长度校验器。 33.【Menu】菜单 33.1【Menu】的一般用法 33.1.1. 页面效果 33.1.2. 开发步骤 第1步,新建一个view,并命名为CMenu,在View节点下新建一个Button,并新建一个Menu,并为Menu新建若干MenuItem,如下图所示。 第2步,设置Button的属性 属性 属性值 说明 caption 绑定菜单的按钮 menu mymenu 要绑定的菜单id 第3步,设置Menu的属性 属性 属性值 说明 id mymenu 将MenuItem的caption属性分别设置为操作1、操作2、操作3。 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CMenu.d 33.1.3. 要点说明 这个例子介绍了怎么绑定菜单。其中,Button中的menu属性必须为Menu的id,这样才能进行绑定。 33.2【Menu】右击显示 33.2.1 页面效果 右击panel任一地方,显示菜单。 33.2.2 开发步骤 第1步,在CMenu的View节点下新建一个Panel。 第2步,编写Panel的onContextMenu函数。 代码如下: this.get("#mymenu").show({ position:{ left:arg.event.pageX, top:arg.event.pageY } }); 第3步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CMenu.d 33.2.3 要点说明 这个例子介绍了右击显示菜单功能。 34.【Trigger】触发 34.1【Trigger】的一般用法 34.1.1. 页面效果 34.1.2. 开发步骤 第1步, 新建一个view,并命名为CTrigger,在View节点下新建一个Trigger和TextEditor,如下图所示。 第2步,设置Trigger的属性 属性 属性值 说明 id mytrigger icon url(>skin>common/icons.gif) -0px -100px 第3步,设置TextEditor的属性 属性 属性值 说明 trigger mytrigger 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CTrigger.d 34.1.3. 要点说明 Trigger为与编辑框相关联的触发器,使编辑器可以进行自定义下拉框。 35. 【ListDropDown】列表型下拉框 35.1. 【ListDropDown】的一般用法 35.1.1. 页面效果 35.1.2. 开发步骤 第1步, 新建一个view,并命名为CDropDown,在View节点下新建一个TextEditor和ListDropDown,如下图所示。 第2步,设置ListDropDown的属性 属性 属性值 说明 id dropdown1 items 1,2,3,4,5,6 下拉框中的项目 第3步,设置TextEditor的属性 属性 属性值 说明 trigger dropdown1 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDropDown.d 35.1.3. 要点说明 ListDropDown为列表型下拉框,使用方便。 35.2. 【ListDropDown】的自定义功能 35.2.1. 页面效果 选中下拉框中的项目,显示相应的值。 35.2.2. 开发步骤 第1步, 在CDropDown的View节点下再新建一个TextEditor和ListDropDown,如下图所示。 第2步,选择下图中红圈标记的部分,进行items编写。 新建Collection,并添加四个Entity组件,并分别为四个Entity创建属性和值。 第3步,设置ListDropDown的属性 属性 属性值 说明 id Dropdown2 displayProperty lable 下拉框中显示的项目为lable值 property key 当选中项目后,编辑框中显示的值为key对应的值 第4步,设置TextEditor的属性 属性 属性值 说明 trigger Dropdown2 第5步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDropDown.d 35.2.3. 要点说明 ListDropDown为列表型下拉框,使用方便。 36. 【YearMonthDropDown】年月下拉框 36.1. 【YearMonthDropDown】的用法 36.1.1. 页面效果 36.1.2. 开发步骤 第1步, 在CDropDown的View节点下再新建一个TextEditor和YearMonthDropDown,如下图所示。 第2步,设置YearMonthDropDown的属性 属性 属性值 说明 id Dropdown3 第3步,设置TextEditor的属性 属性 属性值 说明 trigger Dropdown3 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDropDown.d 36.1.3. 要点说明 YearMonthDropDown为日期型下拉框,使用方便。 37. 【DateDropDown】日期下拉框 37.1. 【DateDropDown】的用法 37.1.1. 页面效果 37.1.2. 开发步骤 第1步, 在CDropDown的View节点下再新建一个TextEditor和DataDropDown,如下图所示。 第2步,设置DataDropDown的属性 属性 属性值 说明 id Dropdown4 第3步,设置TextEditor的属性 属性 属性值 说明 trigger Dropdown4 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDropDown.d 37.1.3. 要点说明 DataDropDown也是日期型下拉框,风格与YearMonthDropDown略有不同,使用方法相近。 38. 【DataSetDropDown】数据绑定下拉框 38.1. 【DataSetDropDown】的用法 38.1.1. 页面效果 38.1.2. 开发步骤 第1步, 在CDropDown的View节点下再新建一个TextEditor、DataSet和DataSetDropDown,如下图所示。 第2步, 在service中创建创建一Java类,并命名为DropDown。 代码如下: package com.bstek.dorado.component.document.service; import javax.annotation.Resource; import org.springframework.stereotype.Component; import com.bstek.dorado.annotation.DataProvider; import com.bstek.dorado.component.document.dao.DProductDao; import com.bstek.dorado.component.document.entity.DProduct; import com.bstek.dorado.data.provider.Page; @Component public class DatasetDropDown { @Resource private DProductDao dProductDao; @DataProvider public void getAll(Page page) { dProductDao.find(page, "from Product"); } } 第3步,设置DataSet的属性 属性 属性值 说明 id dsProducts dataProvider dropDown#getAll 数据源 dataType [dtProduct] 数据类型 pageSize 10 下拉框每次显示10个 第4步,设置DataSetDropDown的属性 属性 属性值 说明 id Dropdown5 dataset dsProducts displayProperty productName Property productName width 400 第5步,设置TextEditor的属性 属性 属性值 说明 trigger Dropdown5 第6步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDropDown.d 38.1.3. 要点说明 DataSetDropDown是数据绑定型下拉框,需要用到DataSet为其提供数据。 39. 【CustomDropDown】自定义下拉框 39.1. 【CustomDropDown】的用法 39.1.1. 页面效果 点击下拉框弹出提示。 39.1.2. 开发步骤 第1步, 在CDropDown的View节点下再新建一个TextEditor和CustomDropDown,如下图所示。 第2步,在Dropdown.java中编写onDropDownInit函数。 代码如下 package com.bstek.dorado.component.document.service; import javax.annotation.Resource; import org.springframework.stereotype.Component; import com.bstek.dorado.annotation.DataProvider; import com.bstek.dorado.common.event.DefaultClientEvent; import com.bstek.dorado.component.document.dao.DProductDao; import com.bstek.dorado.component.document.entity.DProduct; import com.bstek.dorado.data.provider.Page; import com.bstek.dorado.view.widget.base.Button; import com.bstek.dorado.view.widget.form.trigger.CustomDropDown; @Component public class DropDown { @Resource private DProductDao dProductDao; @DataProvider public void getAll(Page page) { dProductDao.find(page, "from Product"); } public void onDropDownInit(CustomDropDown customDropDown){ customDropDown.setIcon("url(/Dorado7Component/dorado/client/skins/~current/common/icons.gif) -0px -100px"); customDropDown.addClientEventListener("onOpen", new DefaultClientEvent("dorado.MessageBox.alert('You clicked CustomDropDown');")); } } 第3步,设置CustomDropDown的属性 属性 属性值 说明 id Dropdown6 listener spring:dropDown#onDropDownInit 第4步,设置TextEditor的属性 属性 属性值 说明 trigger Dropdown6 第5步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDropDown.d 39.1.3. 要点说明 CustomDropDown为用户自定义下拉框,可用listener进行自定义。如无特殊需要,一般使用其他几种下拉框即可。 40. 【AutoMappingDropDown】属性下拉框 40.1. 【AutoMappingDropDown】的用法 40.1.1. 页面效果 40.1.2. 开发步骤 第1步, 在CDropDown的View节点下再新建一个TextEditor,如下图所示。 第2步,设置TextEditor的属性 属性 属性值 说明 trigger autoMappingDropDown dorado会在View中自动创建一个id为"autoMappingDropDown1"的dorado.widget.AutoMappingDropDown实例,无需自己创建。 第3步,编写Texteditor的mapping。点击下图中红圈处,进入mapValue编辑框。 在mapValue编辑框中,新建Collection和两个Entity,并为每个Entity新建Key和value属性和值,如下图所示。 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDropDown.d 40.1.3. 要点说明 AutoMappingDropDown可自动将属性声明dorado.PropertyDef中的mapping转换成下拉数据的下拉框。大部分情况下,我们不必在每次使用此对象时创建一个新的实例。多个编辑框可以共享同一个dorado.widget.AutoMappingDropDown实例。 基于这个特性,dorado会在View中自动创建一个id为"autoMappingDropDown1"的dorado.widget. AutoMappingDropDown实例。 因此,一般而言,我们只需要直接引用这个id为"autoMappingDropDown1"的下拉框即可。 41【PageBanner】页面标签 41.1【PageBanner】页面标签的一般用法 41.1.1页面效果 41.1.2开发步骤 第1步, 创建一view视图,并命名为CPageBanner,在View节点下再新建一个PageBanner和HtmlContainer,如下图所示。 第2步,设置PageBanner的属性 属性 属性值 说明 caption 页面标题示范 第3步,设置HtmlContainer的属性 属性 属性值 说明 content 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CPageBanner.d 41.1.3要点说明 PageBanner可以帮助开发者方便的设计页面标题。 42.【BlockView】块状列表控件 42.1.【BlockView】块状列表控件 42.1.1. 页面效果 42.1.2. 开发步骤 第一步,新建一个Dorado View,命名为CBlockView,设置View节点的属性并在View节点下新建一个BlockView控件。 View属性设置为: 属性 属性值 说明 title BlockView控件 第二步,设置控件属性 设置BlockView属性 属性 属性值 说明 dragTags items 拖动时可识别的标签tag draggable true droppable true droppableTags items height 460 width 360 lineSize 4 每行显示的块数 第三步,设置BlockView的数据列表 点击“items”属性的下拉菜单“Edit”进入数据列表编辑界面 先添加一个Collection节点,再点击右侧的Collection节点,在左侧的可选控件中双击添加Entity,对每个Entity设置两个属性,分别为name 和image: 其中name属性为块状控件的标题,images属性为显示的图标。 第四步,设置BlockView的OnCreate事件 事件代码如下: self.set("renderer", new dorado.widget.blockview.ImageBlockRenderer({ captionProperty: "name" })); 第六步,访问路径 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CBlockView.d 42.1.3. 要点说明 在BlockView中使用到了drag和drop方式,可以实现拖动图标并设置图标的位置。另外对创建数据列表的方式比较特殊,需要手动添加多条数据。在 BlockView的属性中不能直接设置render属性,需要在OnCreate事件中进行设置,使其渲染对象为ImageBlockRender并指定了标题属性名称。 43.【DataBlockView】支持数据绑定的列表控件 43.1.【DataBlockView】支持Dataset的数据绑定列表 43.1.1. 页面效果 43.1.2. 开发步骤 第一步,创建dataType,继承自公共的dtProduct,并增加一个属性imgUrl用于显示图片。 第二步,添加dataSet数据控件,并设置相关属性: 属性 属性值 说明 Id dataSetProduct dataProvider blockViewService#getProductList dataType [dataTypeProduct] pageSize 20 第三步,添加DataBlockView,并设置属性: 属性 属性值 说明 dataSet dataSetProduct lineSize 4 height 500 width 400 设置OnCreate事件,添加如下代码: self.set("renderer", new dorado.widget.blockview.ImageBlockRenderer({ captionProperty: "productName",imageProperty:"imgUrl"})); 注意此处的imageProperty属性值要与dataTypeProduct设置的虚拟属性imgUrl对应起来。 第四步, 添加服务器端数据 @DataProvider public void getProductList(Page page) throws Exception { dProductDao.find(page, "from DProduct"); Collection productList = page.getEntities(); Collection tmpList = new ArrayList(); int index=0; for (DProduct product : productList) { index++; DProduct tmp= EntityUtils.toEntity(product); EntityUtils.setValue(tmp, "imgUrl", "images/blocks/"+index+".gif"); tmpList.add(tmp); } page.setEntities(tmpList); } 为对象列表设置虚拟一个属性“imgUrl”,路径指向项目中的块状图片。需要与View中的dataTypeProduct中设置的属性名保持一致。 第五步,访问 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CDataBlockView.d查看效果 43.1.3. 要点说明 本例中使用了虚拟属性,当从数据库中取得的数据不能满足页面显示需要时,可以添加虚拟属性来实现。同时在设置DataBlockView的显示属性时,需要指定imageProperty属性值为imgUrl用于显示块状图标。 44.【ListBox】下拉列表控件 44.1.【ListBox】静态数据下拉列表框 44.1.1. 页面效果 44.1.2. 开发步骤 第一步 新建一个View,取名ClistBox 第二步,创建一个ListBox控件 设置属性: 属性 属性值 说明 height 200 items a,1,2,3,4,5 第三步 设置事件 在事件中添加如下代码,显示当前点击的是哪个选项。 dorado.MessageBox.alert("当前点击的选项是:"+self.getCurrentItem()); 第四步,访问路径 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CListBox.d 可以在两个BlockView中拖动相互拖动图标。 44.1.3. 要点说明 本例展示了ListBox的使用,items属性可以直接设置显示的选项列表,可以使用字符串、数字,以逗号分隔,通过onDataRowClick事件获取点击的选项值。 44.2.【ListBox】动态数据列表控件 44.1.1. 页面效果 44.2.2. 开发步骤 接上一示例,在上一示例中添加一个ListBox 第一步,在视图中加入DataListBox控件 第二步,设置ListBox属性 属性 属性值 说明 id listBoxData items ${dorado.getDataProvider(“dataPilotService#getProductList”).getResult()} property productName 第三步,添加事件代码,在onDataRowClick事件中添加以下代码: var entity=self.getCurrentItem(); dorado.MessageBox.alert(id:"+entity.id+"\nproductName:"+entity.productName); 点击DataListBox中的选项,显示如下: 第四步,访问地址 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CListBox.d 44.2.3. 要点说明 本例通过在设置ListBox的items属性值,从服务器端获取动态数据,设置property属性后即可以列表中按数据中的哪个值作为显示值,在onDataRowClick事件中,取到的是一个json对象,即服务器返回的数据对象,这与直接读取字符串有一定的区别。 45.【DataListBox】支持数据绑定的列表控件 45.1.【DataListBox】支持数据绑定的列表控件 45.1.1. 页面效果 45.1.2. 开发步骤 接上一示例,在上一示例中添加一个DataListBox 第一步,添加一个dataSet 设置dataSet 属性 属性 属性值 说明 id dataSetProduct dataProvider dataPilotService#getProductList dataType [dtProduct] 第二步,添加一个Label,并设置Label的text属性为“下面是绑定dataSet的DataListBox”作为提示信息 在视图中加入DataListBox控件 第三步,设置DataListBox属性 属性 属性值 说明 id listBoxDataSet dataSet dataSetProduct property productName height 200 width 300 第三步,添加事件代码,在onDataRowClick事件中添加以下代码: var entity=self.getCurrentItem(); dorado.MessageBox.alert("id:"+entity.get("id")+"\nproductName:"+entity.get("productName")); 点击DataListBox中的选项,显示如下: 第四步,访问地址 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CListBox.d 45.1.3. 要点说明 本例通过给DataListBox绑定dataSet,且设置property属性后即可以列表中按数据中的哪个值作为显示值,在onDataRowClick事件中,取到的是一个entity对象,即服务器返回的数据对象,这与直接读取字符串有一定的区别。 46.【Grid】表格控件 46.1.【Grid】普通表格控件 46.1.1. 页面效果 46.1.2. 开发步骤 第一步,加入Grid控件 设置Grid属性: 属性 属性值 说明 id grid1 selectionMode multiRows 第二步,设置grid的显示列 在这里显示三列,选择、姓名和性别,列属性为: 属性 属性值 说明 caption 姓名 property userName 属性 属性值 说明 caption 性别 property sex 第三步,设置显示的数据 点击grid的items属性,转入数据设置页。 先增加一个Collection节点,点击Collection,双击左侧的Entity,添加几个Entity组件,每个Entity设置两项属性,分别为userName和sex,对应的值可自行设置,如上图设置的“张三”和“男”。 第四步,访问地址 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CGrid.d 46.1.3. 要点说明 本例通过结合Grid与DataColumn的设置,可以了解Grid的列如何与数据绑定。 上例中的数据是设置的固定数据,可以参照ListBox示例来设置动态的数据,即设置items属性来获取服务器端数据库中提供的数据,使用方式参照44.2,显示列的数据注意属性上保持一致。 47.【DataGrid】数据表格控件 47.1.【DataGrid】数据表格控件 47.1.1. 页面效果 47.1.2. 开发步骤 第一步,新建一个View,CdataGrid.view.xml 第二步,添加一个dataSet 设置控件属性 属性 属性值 说明 Id dataSetProduct dataProvider dataPilotService#getProductList dataType [dtProduct] 第三步,添加一个DataGrid 设置属性: 属性 属性值 说明 Id dataSetProduct dataProvider dataPilotService#getProductList dataType [dtProduct] selectionMode multiRows 在dataGrid上点击鼠标右键,在弹出的菜单上选择“Generate DataColumns”自动生成数据列。最后添加一个RowSelectorColumn列,并拖至第一列。 第四步,访问 http://CONTEXT_PATH/com.bstek.dorado.component.document.control.CDataGrid.d即可以看到对应效果。 47.1.3. 要点说明 DataGrid是我们在开发系统时,最常使用的一个组件,列表数据的都基本使用该控件来展现。数据的展现列与dataSet的列可以有一定的区别,即在DataGrid中可以删除某些不需要显示的列,但这不影响dataSet中的数据值。 若要使DataGrid可以多选或单选,需要给DataGrid增加一个选择列,即添加RowSelectorColumn,并且要设置DataGrid的属性selectionMode为multiRows,否则无法进行多行选择。 48.【TreeGrid】树状表格 48.1.【TreeGrid】树状表格 48.1.1. 页面效果 48.1.2. 开发步骤 在开始设计之前,我们需要准备一组树型结构的数据,以JSON方式组织数据结构。 第一步,向View节点添加一个TreeGrid控件。 第二步,添加TreeGrid的DataColumn节点: 展开TreeGrid控件,选择column节点,双击左侧组件列表中的DataColumn添加DataColumn,添加几列数据,结构请看下图: 分别对每个DataColumn设置caption和name及property属性,分别为num,country,count3,count8,count9。 第三步,添加TreeGrid事件,切换到事件标签,双击onReady事件添加事件代码,代码中的数据主要是定义JSON格式的数据用于填充数型结构的node,设置每个node的data属性。 var NODES = [{ label: "1930", data: { number: "1930", country: "乌拉圭", count3: 70, count8: 0, count9: 1 }, nodes: [{ label: "", data: { country: "Crystal Palace", count3: 5, count8: 2, count9: 0 } }, { label: "", data: { country: "Coventry", count3: 2, count8: 3, count9: 0 } }, { label: "", data: { country: "Derby", count3: 2, count8: 3, count9: 0 } }, { label: "", data: { country: "Luton", count3: 3, count8: 4, count9: 0 } }, { label: "", data: { country: "Millwall", count3: 1, count8: 4, count9: 1 } }, { label: "", data: { country: "Norwich", count3: 1, count8: 1, count9: 0 } }, { label: "", data: { country: "Nottm Forest", count3: 3, count8: 1, count9: 0 } }, { label: "", data: { country: "QPR", count3: 2, count8: 1, count9: 0 } }] },{ label: "1934", data: { number: "1934", country: "意大利", count3: 70, count8: 0, count9: 1 } },{ label: "1938", data: { number: "1938", country: "法国", count3: 84, count8: 0, count9: 2 } },{ label: "1950", data: { number: "1950", country: "巴西", count3: 88, count8: 0, count9: 0 } },{ label: "1954", data: { number: "1954", country: "瑞士", count3: 140, count8: 0, count9: 3 } },{ label: "1958", data: { number: "1958", country: "瑞典", count3: 126, count8: 0, count9: 2 } },{ label: "2002", data: { number: "2002", country: "韩国,日本", count3: 147, count8: 260, count9: 17 }, nodes: [{ label: "", data: { country: "Crystal Palace", count3: 5, count8: 2, count9: 0 } }, { label: "", data: { country: "Coventry", count3: 2, count8: 3, count9: 0 } }, { label: "", data: { country: "Derby", count3: 2, count8: 3, count9: 0 } }, { label: "", data: { country: "Luton", count3: 3, count8: 4, count9: 0 } }, { label: "", data: { country: "Millwall", count3: 1, count8: 4, count9: 1 } }, { label: "", data: { country: "Norwich", count3: 1, count8: 1, count9: 0 } }] },{ label: "2006", data: { number: "2006", country: "德国", count3: 147, count8: 335, count9: 16 } } ]; self.set("nodes", NODES); 设置TreeGrid的数据列表,直接设置其nodes属性即可,nodes的数据是一组json对象,对象属性值需要与DataColumn对应起来。 第四步, 访问http://CONTEXT_PATH/com.bstek.dorado.component.document.control.CTreeGrid.d即可以看到对应效果。 48.1.3. 要点说明 TreeGrid的数据可以使用动态设置,也可以自己组装成静态数据进行设置,组装的数据需要与DataColumn的property对应才能正常显示,每个node节点的数据可以设置多级子数据,数据对象都以数组方式构建,每个数据对象需要有label和data属性,Label用于显示节点名称,data为对应的列表数据。 TreeGrid的数据不能直接通过IDE设置,只能在其onReady或其它事件中使用js方式设置其nodes属性值。 49.【Tree】树状列表 49.1.【Tree】树状列表 49.1.1. 页面效果 49.1.2. 开发步骤 第一步,新建View文件CTree.view.xml,添加Tree组件并设置Tree的属性: 属性 属性值 说明 showLines true Width 300 Height 300 第二步,设置Tree的子节点 点击Tree组件节点,双击左侧的Node组件图标,创建几个Node节点,并设置几个子节点的expanded属性为true,使其自动展开,再点右侧创建好的Node节点,双击左侧Node组件创建当前Node的子节点,并设置每个Node节点的Label属性。 第三步,添加Tree的事件,转到Tree的事件选项卡,双击onDataRowClick编写代码 var item=self.get("currentNode"); alert(“当前选中项:”+item.get("label")); 第四步,访问 http://CONTEXT_PATH/com.bstek.dorado.component.document.control.CTree.d查看效果。 49.1.3. 要点说明 对Tree组件的应用主要用在一些静态不变的数据,节点固定。设置各节点的expanded属性可以让节点是否自动展开,若要判断当前选中的节点,需要读取Tree的currentNode属性,并取得其label属性进行判断。 50.【DataTree】支持数据绑定的树状列表 50.1.【Tree】支持数据绑定的树状列表 50.1.1. 页面效果 50.1.2. 开发步骤 新建View文件,命名为CdataTree.view.xml 第一步,创建一个dataType,继承models中的dtEmployee 属性 属性值 说明 name dataTypeEmployee parent dtEmployee 第二步,给dataType添加一个子属性,使用Referer属性: 属性 属性值 说明 name children dataProvider employeeService#getEmployeesBySuperior dataType [SELF] Parameter $${this.id} 第三步,添加dataSet,设置属性为: 属性 属性值 说明 id dataSetEmployee dataProvider employeeService#getEmployeesBySuperior dataType [dataTypeEmployee] 第四步,在view中添加DataTree控件,并设置属性: 属性 属性值 说明 id dataTreeEmployee dataSet dataSetEmployee width 300 height 200 第五步,添加DataTree的BindingConfigs节点,增加一个BindingConfig,并设置属性如下: 属性 属性值 说明 childrenProperty children expandLevel 3 展开的默认层级数 labelProperty firstName recursive true 递归方式显示树 最终View的配置如图: 第六步,为DataTree添加事件代码,点击DataTree控件,转到事件选项卡,在onDataRowClick事件中添加如下代码获取当前选中的用户的姓名: var entity=self.get("currentEntity"); dorado.MessageBox.alert("当前用户:"+entity.get("firstName")+" “+entity.get("lastName")); 第七步,访问http://Context_Path/com.bstek.dorado.component.document.control.CDataTree.d即可以看到对应效果。 50.1.3. 要点说明 本例主要从树型结构的数据表中获取数据,使用DataType的Reference属性动态获取子列表数据,并通过树的形式展现。在使用DataTree的时候,需要注意BindingConfig的配置,需要把recursive属性设置为true,否则不会显示树形效果,labelProperty为显示分支的属性列,如本例的姓属性firstName。 51.【DataTreeGrid】支持数据绑定的树状表格控件 51.1.【DataTreeGrid】支持数据绑定的树状表格控件 51.1.1. 页面效果 51.1.2. 开发步骤 新建View页CdataTreeGrid 第一步,定义一个dataType,并为dataType的parent为dtEmployee 属性 属性值 说明 name dataTypeEmployee parent dtEmployee 添加一个引用属性children,如下图: 第二步,在View节点添加一个dataSet,并设置属性: 属性 属性值 说明 id employeeService#getEmployeesBySuperior dataType [dataTypeEmployee] 第三步,添加DataTreeGrid,右键菜单,选择“Gernerate DataColumns”自动生成属性列,并设置DataTreeGrid属性: 属性 属性值 说明 id dataTreeGridEmployee dataSet dataSetEmployee treeColumn firstName 展开DataTreeGrid组件节点,在BindingConfigs节点中添加一个新的BindingConfig,并设置属性: 属性 属性值 说明 labelProperty firstName recursive true childrenProperty children 第四步, 访问http://CONTEXT—PATH/com.bstek.dorado.component.document.control.CDataTreeGrid.d即可以看到对应效果。 51.1.3. 要点说明 需要提供树型的数据组织结构,其中DataTreeGrid的treeColumn属性为显示树型结构的展开或收缩列;DataTreeGrid的Columns可以设置显示对应dataType的所有属性,也可以设置只显示某几列;BindingConfigs节点的配置需要指定childrenProperty,即子数据列表的属性,且要设置recursive为true,即自动递归的方式来循环显示子列表。 本例中我们使用了DataTreeGrid组件来显示树型结构的数据展现形式,与DataTree的区别就是DataTreeGrid可以显示多列属性,在特殊数据展现形式下可以看到更详细的信息。 52.【ButtonPanel】按钮面板 52.1.【ButtonPanel】按钮面板 52.1.1. 页面效果 52.1.2. 开发步骤 本例主要讲解如何设计自己常用的组件,并把这些组件设计成一个公共的组件模型,在其它View页面可以进行引用添加。 第一步,创建一个公共组件页面,便于后面注册成为公共组件。新建文件AssembledComponents.view.xml。 第二步,添加一个Panel组件,并设置其id为ButtonPanel。 第三步,向Panel中的Children中添加一个Container,并设置Container的LayoutConstraint相关属性: 属性 属性值 说明 type bottom 位于Panel底部 height 28 高度 第四步,向Container中添加一个Button组件,并设置其caption属性为:${virtualProperty.buttonCaption},此属性值是为了在后面在IDE中设置按钮的标题。 第五步,设置Button的onClick事件,添加如下代码: dorado.MessageBox.alert("您点击了" + self.get("caption") + "按钮."); 点击按钮显示按钮的标题。这样,自己组合的ButtonPanel组件就完成了。 第五步,把设计的组装ButtonPanel注册到dorado7中,使之成为一个公共可用的组件。 打开位于WEB-INF/dorado-home中的系统配置文件components-context.xml,向其中添加一段注册代码: 各个property属性设置如下: 属性 属性值 说明 name ButtonPanel 这个名字会出现在View页面中右侧的组件列表中,属性值可自定义 Src com.bstek.dorado.component.document.control.AssembledComponents#ButtonPanel 公共组件位置,并指定组件所在的View中的id d:virtual-property buttonCaption 这个属性会出现在ide中右侧的属性列表中,设置的值就会出现在ButtonPanel中按钮的标题上。 至此,以上的组件设计和注册就全部注册完成了。 现在再在项目上点右键,选择弹出的菜单中的“更新dorado配置规则”,使刚才注册的组件能让dorado7的ide识别。 第六步,新建View页面CbuttonPanel.view.xml,点击view节点,展开左侧的组件列表others,可看到刚才注册的ButtonPanel组件: 如果在之前设置的name的属性值为其它,比如“ButtonPanel2”,则在这里显示的就为ButtonPanel2。双击ButtonPanel组件,添加到View节点中并设置ButtonPanel的属性: 第八步,向Buttons节点中添加两个按钮,并设置caption属性分别为“确定”和“关闭”,暂不向按钮添加事件。 第九步,访问 http://CONTEXT—PATH/com.bstek.dorado.component.document.control.CButtonPanel.d即可以看到对应效果。 52.1.3. 要点说明 本例主要讲解了如何设置自己的公共组件,任何组件我们都可以设置为公共的组件,对于常用的一些功能一样的组件,我们可以通过注册组件的方式设置为公共组件。要注册为公共组件,要在spring的配置中把组件注册进去,并要设置其name的名称,且可以设置多个虚拟属性,即添加标签节点,这些节点会出现在ide的右侧属性列表中。注册后还需要更新dorado的配置规则,这样组件就能被ide识别了。 通过本例的讲解,我们学会了如何设计自己的组件,对一些功能常用到的组件,可以注册成为常用组件,这个类似于import功能,但是注册为组件的好处就是可以设置自己的属性,且可视化设置属性,而import的组件不能设置其中的组件属性。通过本例的学习,我们可以举一反三,设计更多的组合组件。 52. 【QuickForm】 52.1. 【QuickForm】的一般用法 52.1.1. 页面效果 在项目一的编辑框中输入数值,点击“获取项目一的值”按钮,可以显示输入值。 52.1.2. 开发步骤 第1步, 创建一view视图,并命名为CQuickForm,在View节点下再新建一个QuickForm和四个AutoFormElement,如下图所示。 第2步,分别设置每个AutoFormElement的属性 属性 属性值 说明 id FormElement1 lable 项目一 lableWidth 40 tip 项目一 width 200 属性 属性值 说明 id FormElement2 lable 项目二 lableWidth 40 tip 项目二 width 200 属性 属性值 说明 id FormElement3 lable 项目三 lableWidth 40 tip 项目三 width 200 属性 属性值 说明 id FormElement4 lable 项目四 lableWidth 40 tip 项目四 width 200 第3步,在view节点下创建一Button,并设置其属性。 属性 属性值 说明 caption 获取项目一的值 第4步,编写Button的onClick函数 代码如下: var value = this.get("#FormElement1.value"); dorado.MessageBox.alert(value); 第5步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CQuickForm.d 52.1.3. 要点说明 使用QuickForm可以使其子组件按表状分布。 52.2. 【QuickForm】与DataSet绑定使用 52.2.1. 页面效果 52.2.2. 开发步骤 第1步, 在CQuickForm的View节点下再新建一个QuickForm和DataSet,如下图所示。 第2步,设置DataSet的属性 属性 属性值 说明 id dsProducts DataProvider dropDown#getAll DataType [dtProduct] pageSize 10 第3步,设置QuickForm属性。 属性 属性值 说明 autoCreatElements true dataset dsProducts 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CQuickForm.d 52.2.3. 要点说明 DataSet中的DataProvider以及DataType与35.5中的DataSet的一样,直接对DropDown.java中的函数进行调用,所以无需重复创建。 QuickForm可以与DataSet进行绑定,将autoCreatElements设为true后,dorado将根据数据类型自动生成表格形式显示。 53. 【DataType】数据类型 53.1. 【DataType】递归数据树的建立 53.1.1. 页面效果 53.1.2. 开发步骤 第1步,在entity包中新建一java类,并命名为LCategory。 代码如下: package com.bstek.dorado.component.document.entity; import java.io.Serializable; import java.util.Collection; import javax.persistence.CascadeType; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.ManyToOne; import javax.persistence.OneToMany; import javax.persistence.SequenceGenerator; import javax.persistence.Table; import com.bstek.dorado.component.document.entity.DProduct; @Entity @Table(name = "CATEGORIES") public class LCategory implements Serializable { private static final long serialVersionUID = 6076304611179489256L; private long id; private String categoryName; private String description; private Collection categories; private Collection products; @Id @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "SEQ_ID") @SequenceGenerator(name = "SEQ_ID", sequenceName = "SEQ_ID") public long getId() { return id; } public void setId(long id) { this.id = id; } @Column(name = "CATEGORY_NAME") public String getCategoryName() { return categoryName; } public void setCategoryName(String categoryName) { this.categoryName = categoryName; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } @OneToMany(cascade = CascadeType.REMOVE, fetch = FetchType.LAZY) @JoinColumn(name = "PARENT_ID") public Collection getCategories() { return categories; } public void setCategories(Collection categories) { this.categories = categories; } @OneToMany(cascade = CascadeType.REMOVE, fetch = FetchType.LAZY) @JoinColumn(name = "CATEGORY_ID") public Collection getProducts() { return products; } public void setProducts(Collection products) { this.products = products; } } 第2步,在dao包下新建一java类,并命名为LCategoryDao。代码如下: package com.bstek.dorado.component.document.dao; import org.springframework.stereotype.Repository; import com.bstek.dorado.component.document.entity.LCategory; import com.bstek.dorado.hibernate.HibernateDao; @Repository public class LCategoryDao extends HibernateDao {} 第3步,新建一view,并命名为CDataType,并在view节点下新建两个DataType、一个DataSet以及DataTree,如下图所示。 第4步,设置第一个DataType属性。 属性 属性值 说明 matchType com.bstek.dorado.component.document.entity.LCategory 数据匹配类型 name Category 设置第二个DataType属性。 属性 属性值 说明 matchType com.bstek.dorado.component.document.entity.DProduct 数据匹配类型 name product 然后通过向导生成DataType下的所有的PropertyDef,移除部分不需要的属性。 第5步,设置Category 的PropertyDef的DataType属性。 名称 属性 属性值 说明 products DataType [product] categories DataType [SELF] 如果PropertyDef所定义的DataType类型为其父类型本身,可以通过快捷的属性SELF完成。 第6步,新建一个java类,并命名为LDataTypeService。 代码如下: package com.bstek.dorado.component.document.service; import java.util.Collection; import javax.annotation.Resource; import org.springframework.stereotype.Component; import org.springframework.transaction.annotation.Transactional; import com.bstek.dorado.annotation.DataProvider; import com.bstek.dorado.annotation.DataResolver; import com.bstek.dorado.component.document.dao.DProductDao; import com.bstek.dorado.component.document.dao.LCategoryDao; import com.bstek.dorado.component.document.entity.LCategory; import com.bstek.dorado.data.provider.Page; @Component public class LDataTypeService { @Resource private LCategoryDao lcategoryDao; @Resource private DProductDao dproductDao; @DataProvider public Collection getAll(){ return lcategoryDao.getAll(); } } 第7步, 设置DataSet的属性。 属性 属性值 说明 dataProvider lDataTypeService#getAll dataType [Category] id dataSet1 第8步,在DataTree下新建两个BindingConfigs。 设置DataTree属性: 属性 属性值 说明 dataSet dataSet1 设置第一个BindingConfigs属性 属性 属性值 说明 childrenProperty categories 节点的信息来自上一层的哪个属性 labelProperty categoryName name categorys recursive true 是否为迭代节点 设置第二个BindingConfigs属性 属性 属性值 说明 childrenProperty products 节点的信息来自上一层的哪个属性 labelProperty productName icon url(>skin>common/icons.gif) -260px -20px 第9步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDataType.d 53.1.3. 要点说明 通过数据模型开发一个具有递归显示功能的树。本例将使用到com.bstek.dorado.component.document.entity包下的DProduct与LCategory实体对象类。LCategory类中通一对多关系配置了它自身存在的父子关系,它所代表的数据是自身存在父子关系的迭数据。 53.2. 【DataSet】数据类型主从表显示 53.2.1. 页面效果 点击上面表格中任意条目,下面表格自动显示选中条目的具体信息。 53.2.2. 开发步骤 第1步,在上一小节的基础上,在CDataType视图中继续按照下图新建组件。 第2步,设置SplitPanel属性。 属性 属性值 说明 direction top position 220 设置MainControl中DataPilot的属性: 属性 属性值 说明 dataPath #.products 当前的products值 dataset dataSet1 itemCodes +,-,x 设置MainControl中DataGrid的属性: 属性 属性值 说明 dataPath #.products 当前的products值 dataset dataSet1 第3步,设置SideControl中DataPilot的属性: 属性 属性值 说明 dataset dataSet1 itemCodes +,-,x 设置SideControl中DataGrid的属性: 属性 属性值 说明 dataset dataSet1 第4步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDataType.d 53.2.3. 要点说明 完成后,查看页面展示效果。在第一个表格中点击不同的记录,第二个表格的记录会随之改变。与树的开发进行比较,可以发现唯一的区别就是DataPath使用。 54. 【DataSet】数据集 54.1. 【DataSet】数据集与DataSetDropDown组合使用 54.1.1. 页面效果 54.1.2. 开发步骤 第1步, 新建一个View视图,并命名为CDataSet,在其View节点下再新建一个TextEditor、DataSet和DataSetDropDown,如下图所示。 第2步, 在service中创建创建一Java类,并命名为DataSet。 代码如下: package com.bstek.dorado.component.document.service; import javax.annotation.Resource; import org.springframework.stereotype.Component; import com.bstek.dorado.annotation.DataProvider; import com.bstek.dorado.component.document.dao.DProductDao; import com.bstek.dorado.component.document.entity.DProduct; import com.bstek.dorado.data.provider.Page; @Component public class Dataset { @Resource private DProductDao dProductDao; @DataProvider public void getAll(Page page) { dProductDao.find(page, "from Product"); } } 第3步,设置DataSet的属性 属性 属性值 说明 id dsProducts dataProvider dataSet#getAll 数据源 dataType [dtProduct] 数据集中数据的数据类型。 pageSize 10 下拉框每次显示10个 第4步,设置DataSetDropDown的属性 属性 属性值 说明 id Dropdown5 dataset dsProducts displayProperty productName Property productName width 400 第5步,设置TextEditor的属性 属性 属性值 说明 trigger Dropdown5 第6步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDataSet.d 54.1.3. 要点说明 DataSet是数据集,用于封装一组数据(指实体对象或实体集合)的控件。 可与许多组件组合使用,是Dorado的核心组件之一。 54.2. 【DataSet】数据集与DataSetDropDown组合使用 54.2.1. 页面效果 可以对数据进行添加、删除和保存操作。 54.2.2. 开发步骤 第1步, 在CDataSet视图的View节点下再新建一个ToolBar、DataGrid和UpdataAction,并在ToolBar下面新建一个DataPilot和Button,UpdataAction下新建一个UpdataItem组件,如下图所示。 第2步, 在DataSet中添加saveAll函数。 代码如下: package com.bstek.dorado.component.document.service; import java.util.Collection; import javax.annotation.Resource; import org.springframework.stereotype.Component; import org.springframework.transaction.annotation.Transactional; import com.bstek.dorado.annotation.DataProvider; import com.bstek.dorado.annotation.DataResolver; import com.bstek.dorado.component.document.dao.DProductDao; import com.bstek.dorado.component.document.entity.DProduct; import com.bstek.dorado.data.provider.Page; @Component public class DataSet { @Resource private DProductDao dProductDao; @DataProvider public void getAll(Page page) { dProductDao.find(page, "from Product"); } @DataResolver @Transactional public void saveAll(Collection products){ dProductDao.persistEntities(products); } } 第3步,设置DataPilot的属性 属性 属性值 说明 dataSet dsProducts itemCodes pages,+,-,x 第4步,设置Button的属性 属性 属性值 说明 action myupdata caption 保存 icon url(>skin>common/icons.gif) -140px -20px 第5步,设置DataGrid的属性 属性 属性值 说明 dataSet dsProducts 第6步,设置UpdataAction的属性 属性 属性值 说明 dataResolver dataSet#saveAll 保存数据时调用的函数 executingMessage 正在保存... successMessage 保存成功! 第7步,设置UpdataItem的属性 属性 属性值 说明 dataSet dsProducts 第8步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDataSet.d 54.2.3. 要点说明 DataSet是数据集,用于封装一组数据(指实体对象或实体集合)的控件。 可与许多组件组合使用,是Dorado的核心组件之一。 54.3. 【DataSet】数据集实现数据查询功能 54.3.1. 页面效果 在文本编辑框中输入productName,点击查询按钮,弹出搜索内容。 54.3.2. 开发步骤 第1步, 在CDataSet视图的View节点下再新建一个ToolBar、DataGrid和UpdataAction,并在ToolBar下面新建一个DataPilot、TextEditor、和两个Button,UpdataAction下新建一个UpdataItem组件,如下图所示。 第2步, 在DataSet中添加query函数。 代码如下: @DataProvider public void query(Page page, String productName){ if (null!=productName) dProductDao.find(page, "from Product where productName like '%"+productName+"%'"); else dProductDao.find(page, "from Product"); } 第3步,设置DataPilot的属性 属性 属性值 说明 dataSet dataset itemCodes pages,+,-,x 第4步,设置Button1的属性 属性 属性值 说明 action updata caption 保存 icon url(>skin>common/icons.gif) -140px -20px 第5步,设置Button2的属性 属性 属性值 说明 action updata caption 查询 icon url(>skin>common/icons.gif) -20px -40px 第6步,设置DataGrid的属性 属性 属性值 说明 dataSet dataset 第7步,设置UpdataAction的属性 属性 属性值 说明 dataResolver dataSet#saveAll 保存数据时调用的函数 executingMessage 正在保存... successMessage 保存成功! 第8步,设置UpdataItem的属性 属性 属性值 说明 dataSet dataSet 第9步,编写查询按钮的onClick函数,代码如下: var value = this.get("#editorProductName.value"); this.get("#dataSet").set("parameter", value).flushAsync(); 第10步,访问路径: http://localhost:8080/Dorado7Component/com.bstek.dorado.component.document.control.CDataSet.d 54.3.3. 要点说明 DataSet是数据集,用于封装一组数据(指实体对象或实体集合)的控件。 可与许多组件组合使用,是Dorado的核心组件之一。 56.【DatePicker】日期选择控件 56.1.【DatePicker】日期选择控件 本示例我们使用一个Dialog来包装日期控件,点击一个按钮后弹出日期选择对话框,点击对话框上的“确定”按钮后取得日期并写入一个文本框中。 56.1.1. 页面效果 56.1.2. 开发步骤 新建View页CdatePicker 第一步,点击view节点, 创建一个TextEditor组件,并设置其属性: 属性 属性值 说明 id textEditorDate 第二步,在View节点添加一个Button,并设置属性: 属性 属性值 说明 caption 选择日期 第三步,添加Dialog: 属性 属性值 说明 id dialogDatePicker 给Dialog的buttons节点添加两个按钮,分别设置“caption”属性为“确定”和“取消”,再向其children节点中添加DatePicker组件,隐藏其自身的按钮,设置属性: 属性 属性值 说明 id datePicker1 showClearButton false showConfirmButton false showTodayButton false 对话框按钮事件,点击“取消”按钮,切换到事件标签,双击“onClick”事件输入以下代码: this.get("#dialogDatePicker").hide(); 点击“确定”按钮,切换到事件标签,双击“onClick”事件输入以下代码: var date=this.get("#datePicker1.date"); this.set("#textEditorDate.value",date.formatDate("Y-m-d")); this.get("#dialogDatePicker").hide(); View设置结果如下图: 第四步,设置按钮事件 选择“选择时间 ”按钮,切换到事件标签,双击onClick事件编写如下代码: this.get("#dialogDatePicker").show(); 第五步, 访问http://CONTEXT—PATH/com.bstek.dorado.component.document.control.CDatePicker.d即可以看到对应效果。 56.1.3. 要点说明 对DatePicker的使用,主要是要了解其获取或设置当前日期的方法,取出的日期是一个日期型的类型,若要显示为相应格式的字符串,需要对其进行格式化才能正常显示。 本例中我们使用了DatePicker组件来显示自定义日期选择对话框,相对于trigger中的日期选择组件,直接使用DatePicker具有很大的灵活性,可以根据功能进行界面包装,除了使用对话框方式显示日期,还可以把它直接显示在页面上进行日期选择操作。 57.【YearMonthPicker】年月选择控件 57.1.【YearMonthPicker】年月选择控件 本示例我们使用一个Dialog来包装年月选择控件,当文本框获得焦点后后弹出年月选择对话框,点击对话框上的“确定”按钮后取得选择的年月并回写入文本框中。 57.1.1. 页面效果 57.1.2. 开发步骤 新建View页CYearMonthPicker 第一步,点击view节点, 创建一个TextEditor组件,并设置其属性: 属性 属性值 说明 id textEditorYearMonth 第二步,添加Dialog: 属性 属性值 说明 id dialogYearMonth 给Dialog的children节点中添加YearMonthPicker组件,设置属性: 属性 属性值 说明 id yearMonthPicker1 设置YearMonthPicker事件,双击“onPicker”事件,即点击“确定”按钮后产生的事件,输入以下代码: var picker=this.get("#yearMonthPicker1"); var year=picker.get("year"); var month=picker.get("month")+1; if (month<10) { month="0"+month; } this.set("#textEditorYearMonth.value",year+"-"+month); this.get("#dialogYearMonth").hide(); 再设置取消事件,双击“onCancel”事件输入以下代码: this.get("#dialogYearMonth").hide(); View设置结果如下图: 第五步, 访问 http://CONTEXT—PATH/com.bstek.dorado.component.document.control.CYearMonthPicker.d即可以看到对应效果。 57.1.3. 要点说明 对YearMonthPicker,无法直接隐藏其自身的“确定”和“取消”按钮,我们可以直接使用其两个事件来使用这两个按钮,点击“确定”会触发“onPicker”事件,点击“取消”会触发“onCancel”事件,选中的年月无法使用一个属性来获取,要分别获取其year和month属性,需要注意的是month的值,因为month是从0开始计数,因此取得的月份与我们实际的月份要小1,若要显示正常值,需要加1。 本例中我们使用了YearMonthPicker组件来显示自定义年月选择对话框,相对于trigger中的年月选择组件,直接使用YearMonthPicker具有很大的灵活性,可以根据功能进行界面包装,除了使用对话框方式显示年月控件,还可以把它直接显示在页面上进行年月选择操作。该控件常用于报表等需要实行跨月查询功能。 58.【SubViewHolder】子视图的控件 58.1.【SubViewHolder】子视图的控件 58.1.1. 页面效果 58.1.2. 开发步骤 新建View页CSubViewHolder 第一步,点击view节点, 创建一个SubViewHolder组件,并设置其属性: 属性 属性值 说明 id subViewHolder1 Height 400 Width 500 subView com.bstek.dorado.component.document.control.CBlockView 第二步, 访问 http://CONTEXT—PATH/com.bstek.dorado.component.document.control.CSubViewHolder.d即可以看到对应效果。 58.1.3. 要点说明 SubViewHolder的功能主要是引用一个View页面,可以很方便的将一个已经定义好的视图引入到当前视图当中,只需要指定完整的包路径就可以引入了,简单的设置subView属性即可。 SubViewHolder引入的页面不能指定后缀名,只需要指定完整包路径就可以了。 59.【Accordion】Outlook Bar效果的布局组件 59.1.【Accordion】Outlook Bar效果的布局组件 59.1.1. 页面效果 59.1.2. 开发步骤 新建View页CAccordion 第一步,点击view节点, 创建一个Accordion组件,并设置其属性: 属性 属性值 说明 id accordion1 Width 200 Height 400 第二步,添加Section 选中添加的accordiion节点,双击左侧组件列表中的“Section”添加三个组件。 第一个Section中添加一个Label 控件; 第二个Section中添加一个Menu组件,添加几个MenuItem子菜单; 第三个Section中添加一个Tree组件,设置几个节点。 第三步, 访问 http://CONTEXT—PATH/com.bstek.dorado.component.document.control.CAccordion.d即可以看到对应效果。 59.1.3. 要点说明 Accordion适用于搭建页面架构的操作工具栏,对于较多功能项的系统非常合适,其Section节点可以装载大部份控件,如Menu,树型控件等。 每个Section有一个标题栏和组件,但同时激活的只能有一个Section。 60.【HtmlContainer】可完全通过HTML/DHTML自定义渲染方式的容器控件 60.1.【HtmlContainer】可完全通过HTML/DHTML自定义渲染方式的容器控件 60.1.1. 页面效果 点击后的效果: 60.1.2. 开发步骤 新建View页CHtmlContainer 第一步,点击view节点, 创建一个HtmlContainer组件,并设置其属性: 属性 属性值 说明 content accordion1 点击content属性输入框右侧的图标展开多行内容编辑框 输入以下内容: 点击访问锐客网
以下是嵌入的图片:
第二步,添加组件 选中HtmlContainer组件,添加一个按钮,并设置其属性: 属性 属性值 说明 caption 添加的测试按钮 第三步,添加事件设置HtmlContainer内容 选中HtmlContainer,切换到事件标签,双击“onClick”事件,添加如下代码: self.set("content","修改文本"); 第三步,访问 http://CONTEXT—PATH/com.bstek.dorado.component.document.control.CAccordion.d即可以看到对应效果。 点击HtmlContainer可见修改后的内容。 60.1.3. 要点说明 HtmlContainer可以容纳任何可见的控件,还可以直接输入html代码或文字,其兼容能力强。 HtmlContainer与Container控件相似,但是HtmlContainer可以直接输入html代码显示,以满足界面的特殊布局需求。 42.2.【BlockView】动态数据块状列表控件并实现控件间的拖动 42.2.1. 页面效果 42.2.2. 开发步骤 接上一示例,在View中添加另一个BlockView。 第一步,设置view布局结构为Hbox 第二步,添加BlockView,并设置BlockView属性 属性 属性值 说明 id newBlockView dragTags items 拖动时可识别的标签tag draggable true droppable true droppableTags items height 460 width 360 lineSize 4 第三步,编写服务器端数据提供接口 在接口方法中,模拟提供10个数据,以List方式返回,List中以Map方式保存数据。在包com.bstek.dorado.component.document.service下新建JavaBean,类名为BlockViewService,添加以下方法: @DataProvider public Collection getBlockDataList() { List list = new ArrayList(); for (int i=0;i<10;i++) { Map map = new HashMap(); map.put("name", "name"+i); map.put("image", "http://www.bstek.com/images/logo.jpg"); list.add(map); } return list; } 注意把当前类注册到spring里去,若在app-context.xml中未配置,请加上以下配置: 第四步,设置BlockView的items属性 把items属性设置为动态获取数据,属性值为: ${dorado.getDataProvider("blockViewService#getBlockDataList").getResult()} 第四步,设置newBlockView的OnCreate事件 事件代码如下: self.set("renderer", new dorado.widget.blockview.ImageBlockRenderer({ captionProperty: "name" })); 第六步,访问路径 http://CONTEXT_PATH /com.bstek.dorado.component.document.control.CBlockView.d 可以在两个BlockView中拖动相互拖动图标。 42.2.3. 要点说明 在newBlockView中使用到动态获取服务器提供的数据,这样就方便了我们对数据的管理 ;且在两个控件间可以相互拖动,只需要设置drag和drop相关属性,不需要添加任何js代码就实现。 以上介绍了BlockView控件的使用方法,我们建了名为CBlockView的Dorado View。CBlockView中我们不仅仅将展示了数据,还对数据的拖动进行了设置,其得在学习其它控件时能了解draggable、droppable、draggableTags和droppableTags属性的用法。 61.【Action】动作控件 61.1【Action】动作控件的常规用法 61.1.1页面效果 61.1.2开发步骤 第一步,新建一个Dorado View,命名为CAction,在View节点下添加一个【Button】控件。 第二步,在该View节点下添加一个【Action】控件,并为其配置相应的属性。 属性 属性值 说明 id action1 View中控件的唯一标识 caption 点击测试Action 控件的标题 icon url(>skin>common/icons.gif) -120px -0px 控件上的图标 successMessage 请求成功!! 请求成功后的提示信息 第三步,配置该View中【Button】的action属性。 属性 属性值 说明 action action1 View中控件的id 第四步,在View节点下【Action】的onSuccess事件中编辑事件。 代码如下: //成功信息提示 dorado.MessageBox.alert('恭喜请求成功!!'); 61.1.3要点说明 这个事例简单的说明了【Action】动作控件的常规用处和使用方法。 可以看到我们并没有配置【Button】的其他属性,如caption,icon等,而是在【Action】中配置,只是在【Button】中配置了action的属性为这个【Action】的id,但页面在渲染的时候可以把【Action】的相应配置在【Button】中显示出来。之所以要用到【Action】除了事件编写方便外,也可以使所有事件便于管理,在后期项目维护中易于维护。关于【Button】的应用请参考其对应的解析。 62.【AjaxAction】远程过程动作控件 62.1【AjaxAction】远程过程动作控件常规用法 62.1.1页面效果 62.1.2开发步骤 第一步,新建一个Dorado View,命名为CAjaxAction,在View节点下创建一个【Label】和一个【TextEditor】,设置【Label】的提示信息并配置【TextEditor】的属性。 属性 属性值 说明 id textEditor1 View中控件的唯一标识 width 300 控件的宽度 第二步,在View节点下添加【Button】和【AjaxAction】控件,配置【AjaxAction】的属性。 属性 属性值 说明 id ajaxAction1 View中控件的唯一标识 caption 测试AjaxAction 控件的标题 icon url(>skin>common/icons.gif) -120px -0px 空间中的图标 Service ajaxActionService#returnInfo Spring#Method后台方法 SuccessMessage 远程数据请求成功!!! 动作成功的信息提示 第三步,设置【Button】action属性,要显示的内容。 属性 属性值 说明 action ajaxAction1 AjaxAction的id 第四步,在View节点下的【AjaxAction】的OnSuccess事件编辑代码。 代码分如下: //将远程动作得到的信息显示出来 var returnValue = self.get('returnValue'); this.get('#textEditor1').set('value',returnValue); 62.1.3要点说明 这个例子简洁的说明了【AjaxAction】远程过程动作控件的常规用法和页面效果。 我们通过设置【AjaxAction】的属性并配置了【Button】的action的属性,把在【AjaxAction】的配置在页面渲染的时候在【Button】中显示出来。通过【AjaxAction】远程的信息在点击后使其在【TextEditor】中显示出来。 62.2【AjaxAction】远程动作控件带参数后台访问 62.2.1页面效果 62.2.2开发步骤 第一步,在View节点下【AutoForm】控件,并设置其cols属性。 属性 属性值 说明 cols 200,40,200,80,200 五列,以及每列的宽度 第二步,在【AutoForm】节点下添加三个【AutoFormElement】控件,分别设置其相应的属性。 属性 属性值 说明 id num1 View中控件的唯一标识 labelWidth 2 labelWidth的宽度 ShowLabel false 不显示label那部分 第三步,在【AutoForm】中添加一个【Label】和一个【Container】并且在【Container】中添加加一个【Button】控件。设置【Label】的text属性。 第四步,在View节点下添加一个【AjaxAction】并设置其属性。 属性 属性值 说明 id ajaxAction2 View中控件的唯一标识 caption 求和 在控件上显示的信息 Service ajaxActionService#getSum Spring#Method后台方法 第五步,在【AjaxAction】的BeforeExecute方法中编辑事件。 代码如下: var num1 = this.get('#num1').get('value'); var num2 = this.get('#num2').get('value'); if (num1 && num2) { self.set('parameter', { num1: num1, num2: num2 }); }else { dorado.MessageBox.alert('求和参数必须填写,且为数字类型!!'); } 第六步,在【AjaxAction】的OnSuccess事件中边界事件。 代码如下: var sum = this.get('#sum'); var returnVlaue = self.get('returnValue'); if (returnVlaue == -1) {//输入类型有误 dorado.MessageBox.alert('求和参数必须为数字类型!!'); }else { sum.set('value', returnVlaue); } 第七步,设置【Button】的caption属性为ajaxAction2。 62.2.3要点说明 这个事例简洁的说明了【AjaxAction】远程动作控件客户端通过传参都后台进行交互的过程。 我们在页面中设计了两个参数当点击求和操作的时候将两个参数传到后台进行计算,然后将返回的值在后面的文本框中显示出来。这个例子简洁的说明了前台和后台远程过程动作的成功演示。 63.【FormSubmitAction】表单提交动作控件 63.1【FormSubmitAction】表单提交动作控件的常规用法 63.1.1页面效果: (信息提交页面) (信息提交跳转的页面) 63.1.2开发步骤 第一步,新建一个Dorado View命名为CFormSubmitAction,在Model下新建一个【DataType】,添加四个字段,并分别配置其属性。 属性 属性值 说明 name name DataType中name属性 label 账号 显示中文信息 required true 必填,不为空 第二步,在【DataType】的password2字段添加一个【CustomValidator】验证两次密码是否一致。在其OnValiddate事件中编写事件。 代码如下: var entity = arg.entity; if(entity.get('password1') != entity.get('password2')){ arg.result = { text: "两次输入的密码不一致!", state: "error" }; } 第三步,在View节点下添加【Label】和【DataSet】控件。并设置【Label】的text属性。然后配置【DataSet】的属性,并在OnReady中编辑代码。 属性 属性值 说明 id dataSetInfo View中的唯一标识 dataType dtInfo DataType的id 代码如下: self.insert({}); 第四步,继续在View节点下添加一个【AutoForm】控件,并设置其属性。 属性 属性值 说明 id autoForm1 View中的唯一标识 dataSet dataSetInfo DataSet的id cols * 一列数据显示 第五步,在View节点中添加一个【FormSubmitAction】控件,并配置其属性。 属性 属性值 说明 id formSubmitAction1 View中的唯一标识 action component.document.control.CFormSubmitAction2.d 跳转的页面 caption 提交信息 控件上显示的信息 第六部,在【AutoForm】中天际一个【Container】控件,并在在该控件中添加一个【Button】并设置【Button】的action为【FormSubmitAction】的id。 第七步,在【FormSubmitAction】控件的beforeExecute事件中编写事件。根据填将信息传递给跳转到的页面。 代码如下: var loginMsg= this.get('#dataSetInfo').getData('#'); if(loginMsg.validate()=='ok'){ self.set("parameter",loginMsg); }else{ dorado.MessageBox.alert('请查看错误信息!!'); arg.processDefault=false; } 第八步,新建一个Dorado View 命名为CFormSubmitAction2,实现页面的跳转并接受传递过来的参数。页面中添加几个【Label】控件,在【Label】中配置接收参数的方法和对应接收的参数名。 属性 属性值 说明 Text 账号:${request.getParameter("name")} 接收填写的账号信息 63.1.3要点说明 这个事例简单的说明了【FormSubmitAction】表单提交动作控件的常规用处和使用方法。 我们在页面中通过配置【FormSubmitAction】的action属性来实现页面的跳转。通过EL表达式在另一个页面来接收参数。这个表单默认的提交方式POST的并在当前页面打开,如何配置其提交方式和页面打开方式在下面提到。其中用到其他各种空间的配合使用,对应的空间请查看其详细解析。 63.2【FormSubmitAction】表单提交方式和页面打开方式 63.2.1页面效果 63.2.2开发步骤 第一步,在View节点下新添加一个【AutoFrom】控件,并设置其属性。 属性 属性值 说明 id autoForm2 View中的唯一标识 cols *,* 两列显示 width 400 控件的宽度 第二步,在【AutoForm】中先添加两个【AutoFormElement】控件,设置其id属性。 属性 属性值 说明 id submitMethod / openMethod View中的唯一标识 第三步,在submitMethod对应的【AutoFormElement】中添加【RadioGroup】并添加两个【RadioButton】分别设置【RadioButton】的配置信息。 属性 属性值 说明 test POST请求 / GET请求 显示的信息 value post / get 实际传递的参数 第四步,在openMethod对应的【AutoFormElement】中添加【RadioGroup】并添加两个【RadioButton】分别设置【RadioButton】的配置信息。 属性 属性值 说明 test 当前页面 / 新起页面 显示的信息 value _self / _blank 实际传递的参数 第五步,设计参数的默认值,分别在submitMethod对应的【AutoFormElement】和openMethod对应的【AutoFormElement】的OnReady事件中编写事件,设置其默认值。 代码如下: //设置默认提交方式 self.set('value','post'); //设置默认打开方式 self.set('value','_self'); 第六步,在【FormSubmitAction】的beforeExecute事件中编辑事件,根据选择的方式,设置【FormSubmitAction】的配置。 代码如下: var loginMsg = this.get('#dataSetInfo').getData('#'); //修改formSubmitAction中的配置信息 var formSubmitAction1 = this.get('#formSubmitAction1'); formSubmitAction1.set('method',this.get('#submitMethod').get('value')); formSubmitAction1.set('target',this.get('#openMethod').get('value')); if(loginMsg.validate()=='ok'){ self.set("parameter",loginMsg); }else{ dorado.MessageBox.alert('请查看错误信息!!'); arg.processDefault=false; } 63.2.3要点说明 这个事例简单的说明了【FormSubmitAction】表单提交动作控件的提交以及页面打开方式的设置。 我们可以看到当选择提交方式是GET的时候,可以在地址栏中看到你自己参数的拼接,默认是没有显示参数的。页面打开方式默认在当前页面打开,如果选择新起页面的话,会从新打开一个浏览器显示跳转页面。其中涉及到其他控件的运用,请查看其对应的详细解析。 64.【UpdateAction】提交动作控件 64.1【UpdateAction】提交动作控件的常规用法 64.1.1页面效果 64.1.2开发步骤 第一步,新建一个Dorado View,命名为CUpdateAction,并在View节点下添加控件【DataSet】、【ToolBar】和【DataGrid】,然后在【ToolBar】节点中添加【DataPilot】控件。 第二步,第一步的配置详情,请查看【DataPilot】控件的配置(详细:CDataPilot.view.xml)。 第三步,在View节点下添加【UpdateAction】控件,并配置其属性。 属性 属性值 说明 id updateAction1 View中控件的唯一标识 caption 保存数据 控件的标题 dateResolver updateActionService#saveData SpringBean#Method icon url(>skin>common/icons.gif) -140px -20px 控件上的图标 successMessage 数据保存成功!!! 请求成功后的提示信息 第三步,在【UpdateAction】中添加【UpdateItem】控件。并配置其dataSet属性。 属性 属性值 说明 dateSet dtProduct View中控件的id 第四步,配置该【ToolBar】中添加【Button】并配置action属性。 属性 属性值 说明 action updateAction1 View中控件的id 64.1.3要点说明 这个事例简单的说明了【UpdateAction】提交动作控件的常规用处和使用方法。 当我们在页面中根据配置的【Datapilot】中的Items中的按钮操作的时候并没有操作数据库中数据,只有在点击保存数据按钮的时候才会通过配置的方法来操作数据库中的数据。关于数据的加载和显示请查看控件【DataPilot】的详细介绍。

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ] 7 人已下载

下载文档