1代码表样例开发教程

东软集团股份有限公司

基础软件事业部

代码表样例开发教程

clip_image002tui

更改履历

版本号

更改时间

更改的

图表和章节号

状态

更改简要描述

更改申

请编号

更改人

批准人

V1.0

2014-11-26

 

N

   

侯伟

 
               
               
               
               
               

注:状态可以为N-新建、A-增加、M-更改、D-删除

目录

第1章 功能说明... 1

第2章 功能详解... 1

2.1 所需模型... 1

2.1.1 ENTITY模型... 1

2.1.2 BO、DAO模型... 2

2.1.3 VIEW模型... 3

2.2 代码表数据构造输入项目... 3

2.2.1 UI设计器配置... 3

2.2.2 page_load方法编写... 10

2.2.3过程调用... 10

第1章 功能说明

本教程中包含以下功能点:

1. 通过代码表数据构造单选框输入项目;

2. 通过代码表数据构造复选框输入项目;

3. 通过代码表数据构造普通下拉框输入项目和级联下拉框输入项目;

4. 通过启动类生成代码表数据构造下拉框输入项目;

5. 通过代码表有树形结构的数据构造下拉框树输入项目;

第2章 功能详解

2.1 所需模型

2.1.1 ENTITY模型

在本样例开发过程中实体模型有两个,创建向导如下图所示:

clip_image003clip_image004clip_image006clip_image008

2.1.2 BO、DAO模型

在本样例开发过程中BO的模型为StartupcodelistBO、CodelistBO,对应的DAO模型分别为CodelistuserDAO、CodelistupdemocodelistDAO。

下面代码为StartupcodelistBO中的方法列表:

/**

* 取得代码表信息

* @param codeName 页面绑定DataStore的名称

*/

public void updateCodeList(String codeName);

下面代码为CodelistBO中的方法列表:

/**

* 取得用户籍贯的代码表信息

* @return 代码表信息

*/

public QueryResult getNativePlaceCodeList();

2.1.3 VIEW模型

在样例开发过程中VIEW的模型为demoCodeListForm.view。

2.2 代码表数据构造输入项目

2.2.1 UI设计器配置

由UI设计器配置向导生成如下图页面:

clip_image010

1、配置用户账号是否启用输入项目(单选框)

clip_image011clip_image013

在UI设计器中,选中上图输入控件,点击“clip_image014”按钮。弹出如下图界面,设置显示内容的DataStore属性值为“demoValidation”

clip_image015clip_image017

demoValidation对应的代码表内容如下图:

clip_image018clip_image020

2、配置用户权限输入项目(复选框)

clip_image021clip_image023

在UI设计器中,选中上图输入控件,点击“clip_image014[1]”按钮。弹出如下图界面,设置显示内容的DataStore属性值为“demoUserAccess”

clip_image024clip_image026

demoUserAccess对应的代码表内容如下图:

clip_image018[1]clip_image028

clip_image0293、配置用户性别输入项目(一般下拉框)clip_image031

在UI设计器中,选中上图输入控件,点击“clip_image014[2]”按钮。弹出如下图界面,设置显示内容的DataStore属性值为“demoGenderType”。

clip_image032clip_image034

demoGenderType对应的代码表内容如下图:

clip_image035clip_image037

4、配置用户籍贯输入项目(代码表中树形结构数据生成级联下拉框)

clip_image038clip_image040

在UI设计器中,选中上图输入控件,点击“clip_image014[3]”按钮。弹出如下图界面,设置显示内容的DataStore属性值为“PROVENCE”。

clip_image041clip_image043

PROVENCE对应的代码表内容如下图:

clip_image044clip_image046

clip_image047clip_image049

在UI设计器中,选中上图输入控件,点击“clip_image014[4]”按钮。弹出如下图界面,设置显示内容的DataStore属性值为“CITY”。

clip_image050clip_image052

CITY对应的代码表内容如下图:

clip_image053clip_image055

5、配置用户姓名输入项目(通过启动类生成代码表数据)

clip_image056clip_image058

在UI设计器中,选中上图输入控件,点击“clip_image014[5]”按钮。弹出如下图界面,设置控件ID的属性值为“userNameComboBox”;显示内容的DataStore属性值为“codeName”。

clip_image059clip_image060clip_image062

6、配置用户籍贯输入项目(通过启动类生成代码表数据)

clip_image063clip_image065

在UI设计器中,选中上图输入控件,点击“clip_image014[6]”按钮。弹出如下图界面,点击“切换至属性视图”。

clip_image066clip_image068

clip_image069clip_image071

在属性Tab上,设置id属性的值为“comboBoxTree_NativePlace”;

clip_image072clip_image074

在属性Tab上,设置TreeJson下属性binding的值为:“{store:'nativePlaceTree',parent:'parent',id:'id',label:'codeName',query:{name:'parent',relation:'=',value:'-1'}}”;

2.2.2 page_load方法编写

在“脚本”Tab页中找到page中的load()方法编写的位置,写入下面的代码:

view.processor.getCodeList("codeName");

view.processor.initNativePlaceComboBox();

2.2.3 过程调用

1、启动类生成代码表数据过程调用的配置如下图所示(图片上数字代表设置次序):

clip_image076

从上图第五个步骤进入到成功回调方法编写的区域,编写代码如下:

var data = dc.getDataStore("result");

dataCenter.addDataStore("userNameComboBox", data);

说明:上述代码中的dataCenter.addDataStore("userNameComboBox", data),第一个参数值“userNameComboBox”与2.2.1中设置用户名称下拉框ID名称一致。

2、代码表数据ComboBox树过程调用的配置如下图所示(图片上数字代表设置次序):

clip_image078

从上图第四个步骤进入到成功回调方法编写的区域,编写代码如下:

dataCenter.addDataStore("nativePlaceTree", dc.getDataStore("result"));

说明:上述代码中的dataCenter.addDataStore("nativePlaceTree ", data .getDataStore("result")),第一个参数值“nativePlaceTree”与2.2.1中设置用户籍贯树形下拉框TreeJson下属性binding属性值{store:'nativePlaceTree',parent:'parent',id:'id',label:'codeName',query:{name:'parent',relation:'=',value:'-1'}}”中store对应名称一致。调用要设置为“同步”。

原文地址:https://www.cnblogs.com/Jeely/p/11675724.html