2单表CRUD综合样例开发教程

“upsample”( SC )à”singletablecrud”(DC )à “metamodel” à “entity”上右键 à “新” à “Entity模型” à 配置数据库连接信息（如下图所示） à 选择“下一步”à 点击“刷新”显示数据库表或视图 à 选择“UP_DEMO_USER”表，“类名”设置为“UpDemoUser”à 点击“完成”。

2.2.4 新建VIEW模型

新建view模型“demoUserMgr.view”:“upsample”( SC ) à “singletablecrud”(DC ) à “metamodel” à “view”上右键 à “新” à “View模型” à 在“文件名”里输入“demoUserMgr”à点击“完成”。如图所示：

新建view模型“demoUserEdit.view”：如下图，方法同上。

2.2.5 demoUserMgr.view模型开发

1. 创建数据集：

打开view模型 à 右下角“数据集”标签页 à 点击“ ”按钮添加数据集 à 如下图完成数据集upDemoUserForm的创建：

à勾选上“支持自动查询”à 将 “生日从”的操作符选为“>=”，“到”的操作符选为“<=”, Form表单中其它选中项的“操作符”选为“like”à 点击“完成”。如下图所示:

类似地，再创建一个数据集 upDemoUserGrid，如下图：

至此demoUserMgr.view页面的数据集创建完毕。

2. 设计页面：

进入“设计”页面 à 选择左侧的“模式控件”à 将模式控件“AdaptiveLayout”拖放到右侧空白页 à 弹出“新建模式控件”页，创建过程如下图：

à 将左侧“模式控件”中的“Form”模式控件拖放到“查询条件”区域的TitlePane上 à 弹出的Form窗口设置如下图：

如图输入FormID à 点击“下一步”à 配置如下图：（可以通过“上移”和“下移”选中行来调整显示顺序；勾选上“是否生成form”）

à从“容器”里拖出一个”Div”放到Form的TitlePane上 à 在该Div的“特性”页中的”type”属性输入“buttons”à 将“基本控件”中的“Button”控件拖入上面的Div中 à 点击按钮上的箭头 à 修改按钮属性如图：（ “控件ID” 修改为一个有意义的ID名称，“控件名称”修改成按钮的实际显示名称）

è 类似地，将“模式控件”里的“Grid”模式控件拖入下半区域的TitlePane上 à Grid模式控件的设置如下图：（注意：“Grid控件类型”要选择XGrid；“Grid选择类型”选择“single”单选行）

设置固定列，并选择需要显示的数据列，如下图所示：

è 添加一个Div和两个按钮“新增”和“删除”到下面XGrid的TitlePane上（方法同上）。至此页面制作完成，页面布局如下图所示：

3. 编辑脚本：

3.1“查询”功能脚本

定义一个过程调用getAllUser(),依赖AutoQueryBO如下图：

è 点击getAllUser方法的“成功回调”后的“编辑”à 输入如下代码：

//将查询得到的dataStore绑定到mgrGrid，标准格式：view.grid.setDataStore("id", store);

//{string} id 对应xgrid的id ;

//{object} store 用于初始化xgrid的dataStore

view.grid.setDataStore("mgrGrid", dc.getSingleDataStore());

è 回到“设计”页面 à 点击“查询”按钮上面的小三角图标“ ” à 在弹出的快速设置页面点击“编辑onClick事件”如图：

è 输入代码如下：

//点击“查询”按钮时调用定义的过程调用方法getAllUser，并传入mgrForm的dataStore

view.processor.getAllUser(view.form.getDataStore("mgrForm"));

3.2 “新增”功能脚本：

点击“新增”按钮上的三角图标 à 点击“编辑onClick事件” à输入如下代码：

//页面导航的穿透发起，标准格式：view.navigator.forward("scid", "dcid", "viewPath", "title", dc);

//{string} scid 目标页面所在SC的id ;{string} dcid 目标页面所在DC的id ;{string} viewPath 目标页面所属的路径 ;{string} title 导航主题，用于区分不同的穿透请求;{object || string} dc 穿透携带的数据，支持多种数据格式

view.navigator.forward("upsample", "singletablecrud", "demoUserEdit", "新增人员", null);

3.3 “修改”功能脚本

点击XGrid中的“帐号”列标题 à 点击上面的小三角图标，如图：

à“编辑formatter事件” à 在编辑页面输入如下代码：

//设置该列字段为超链接格式，并定义onclick事件为clickUser方法

//demoUserMgr为当前view名，clickUser是定义的公共方法；

return "<a href=\"#\" onclick=\"javascript:demoUserMgr.clickUser('"

+ inRowIndex + "')\">" + inValue + "</a>";

à新建一个公共方法clickUser，参数为index，方法中输入如下代码：

//页面导航的穿透发起，标准格式：view.navigator.forward("scid", "dcid", "viewPath", "title", dc);

//{string} scid 目标页面所在SC的id ;

//{string} dcid 目标页面所在DC的id ;

//{string} viewPath 目标页面所属的路径 ;

//{string} title 导航主题，用于区分不同的穿透请求;在所有的forward和receiveData中的主题应该唯一

//{object || string} dc 穿透携带的数据，支持多种数据格式;

view.navigator.forward("upsample", "singletablecrud", "demoUserEdit", "修改人员",view.grid.getRows("mgrGrid", index));

3.4 “删除”功能脚本

创建一个BO方法“demoUserBO”：“metamodel”à “bo”右键 à “新”à “BO模型”à “文件名”输入“demoUserBO”à “完成”。

DemoUserBO.java中BO方法定义如下：

/**

* 更新或保存用户对象

* @param user 用户对象

public UpDemoUser saveOrupdate(UpDemoUser user);

/**

* 删除用户

* @param user 用户对象

public void deleteUser(UpDemoUser user);

在DemoUserBOImpl.java中输入如下代码：

private DemoUserDAO demoUserDAO;

/**

* 依赖注入，注入相应的自定义的DAO实例

* @param demoUserDAO

public void setDemoUserDAO(DemoUserDAO demoUserDAO) {

this.demoUserDAO = demoUserDAO;

}

/**

* {@inheritDoc}

public UpDemoUser saveOrupdate(UpDemoUser user) {

UpDemoUser User = demoUserDAO.saveOrUpdateUser(user);

return User;

}

/**

* {@inheritDoc}

public void deleteUser(UpDemoUser user) {

demoUserDAO.deleteUser(user);

}

创建一个新的DAO方法”demoUserDAO”：“metamodel”à “dao”右键 à “新”à “DAO模型”à “文件名”输入“demoUserDAO”à “完成”。

DemoUserDAO.java中编码如下：

/**

* 更新或保存用户对象

* @param user 用户对象

public UpDemoUser saveOrUpdateUser(UpDemoUser user);

/**

* 删除用户

* @param user 用户对象

public void deleteUser(UpDemoUser user);

DemoUserDAOImpl.java中输入如下代码：

/**

* {@inheritDoc}

public void deleteUser(UpDemoUser user) {

this.removeObject(user);

}

/**

* {@inheritDoc}

public UpDemoUser saveOrUpdateUser(UpDemoUser user) {

getHibernateTemplate().saveOrUpdate(user);

return user;

}

定义一个新的“过程调用”delUser如下图：

在上图页面中点击“成功回调”的“编辑”，输入如下代码：

//删除mgrGrid选中的第一行，标准格式：view.grid.deleteRow("id", index);

//{string} id 对应xgrid的id ;

//{number} index 待删除的行索引；不传入此值时，默认删除选中的第一行

view.grid.deleteRow("mgrGrid");

编辑“删除”按钮的onClick事件，输入如下代码：

//MessageBox.confirm带有两个按钮的简单确认对话框

MessageBox.confirm({

//message:文本要显示的内容

message:'是否确认删除',

//onComplete:对话框关闭时要执行的回调函数，这里调用定义的公共方法deleteOnComplete

onComplete: deleteOnComplete,

//点击右上角的图标关闭确认框的时候，会不会触发回调函数，默认会触发,并且回调函数的参数值为"false"

iconCloseComplete: true

});

新建一个公共方法deleteOnComplete，参数为value，方法代码如下：

//用于删除的MessageBox中的onComplete方法，调用定义的delUser方法

//view.grid.getRows("mgrGrid")获得grid中选中的行

if(value==true) view.processor.delUser(view.grid.getRows("mgrGrid"));

2.2.6 demoUserEdit.view模型开发

1. 配置Entity校验：

点击workshop“Entity校验配置”图标“ ”à 找到对应SC（upsample）和DC(singletablecrud)下的对应实体（entity à “upDemoUser.entity”） à配置如图所示：

2. 创建数据集：为该view模型创建数据集upDemoUser如下图：

3. 设计页面：该页面只有一个Form区域，设计过程同demoUserMgr.view。设计页面如下图所示：

4. 编辑脚本：

4.1添加page load()方法：

进入“脚本”页面 à选择page load()方法 à 输入如下代码:

//页面导航的穿透成功，标准格式：view.navigator.receiveData("title", "method");

//{string} title 导航主题，用于区分不同的穿透请求，需要和穿透发起的主题相同;{function} method 穿透成功后调用的方法，可以接收穿透发起时传输的数据

view.navigator.receiveData("新增人员", receiveAddUserData);

view.navigator.receiveData("修改人员", receiveUpdateUserData);

添加公共变量addOrUpdate:进入“脚本”页面 à 选择“全局变量”à 输入如下代码：

//定义全局变量用于标识“新增”或“更新”

var addOrUpdate = '';

添加公共方法receiveAddUserData和receiveUpdateUserData如下：

receiveUpdateUserData公共方法如下图：

4.2 “保存”功能脚本：

新建一个“过程调用”saveOrUpdateUser，如下图所示：

点击“成功回调”的“编辑”，输入如下代码：

//页面导航的返回发起，标准格式：view.navigator.prePage("title", dc);

//{string} title 导航主题，用于区分不同的返回请求；{object || string} dc 返回携带的数据，可以支持多种数据格式

if(addOrUpdate =='add'){

view.navigator.prePage("保存成功", dc);

}else{

view.navigator.prePage("修改成功", dc);

}

在“设计”页面点击“保存”按钮 à “编辑onClick事件”à 输入如下代码：

//判断数据是否发生修改

var form = unieap.byId('editForm');

//对form进行校验，form.validate(false)不显示默认的校验信息

if(!form.validate(false)){

//校验提示信息

var message = "";

if(!message && !unieap.byId("account").getValue()) message = "帐号不能为空！";

if(!message && !unieap.byId("name").getValue()) message = "姓名不能为空！";

if(!message && !unieap.byId("accountEnabled").getValue()) message = "请选择帐号是否启用！";

if(!message && !unieap.byId("accountLocked").getValue()) message = "请选择帐号是否锁定！";

if(unieap.byId("mobileTelephone") && !unieap.byId("mobileTelephone").validator.validate())

message = "请填写格式正确的手机号码！";

//提供简单反馈信息的警告提示框

//title为提示框的标题，message为提示框显示的提示信息， type为提示框的显示图标类型

MessageBox.alert({title:"提示信息",

message: message,

type: "warn"});

}else{

//点击“保存”按钮时，调用定义的saveOrUpdateUser过程保存或更新editForm中的数据

view.processor.saveOrUpdateUser(view.form.getDataStore("editForm"));

}

回到demoUserMgr.view，在其page load()方法中编写如下代码：

//页面导航的返回成功，标准格式：view.navigator.onComplete("title", "method");

//{string} title 导航主题，用于区分不同的返回请求，需要和prePage返回发起的主题相同且主题应该唯一;

//{function} method 返回成功后调用的方法，可以接收返回发起时传输的数据

view.navigator.onComplete("保存成功", addUserSuccess);

view.navigator.onComplete("修改成功", updateUserSuccess);

在其“公共方法”中定义两个新公共方法：addUserSuccess和updateUserSuccess。

addUserSuccess方法如下图所示：

updateUserSuccess方法如下图所示：

页面脚本开发完毕。

2.2.7 配置密码框

选中图中需要设置成密码框的cell：

在其“特性”的“属性”中，将“password”属性值设为“true”。

2.2.8 配置手机号码校验

单击需要配置校验的cell，如图：

进入其“特性”页 à “属性”à “validatorClass”属性值填写为“unieap.form.MobilePhoneValidator“。如图所示：

手机号码校验（前台校验）配置完成。

2.2.9 自定义Codelist

本样例中需要自定义三个Codelist：demoGenderType，demoNationality和demoValidation。

自定义Codelist的定义方法：进入”管理控制台”à “资源管理”菜单 à “代码表管理” à 点击添加按钮“ ”à 定义新的代码表如下：

demoGenderType：

demoNationality：

demoValidation：

代码表定义完成。

将自定义代码表应用到Form中：

打开demoUserMgr.view的Form，将性别和国籍的编辑类型由“textbox”改成“comboBox”，在对应的“常数代码”列填入上面对应的“代码表名称”，如图：

demoUserEdit.view的Form也做如下修改：

此外，针对上面的Form，通过“上移”和“下移”调整成想要的显示顺序；调整“描述信息”的“编辑类型”为“textarea”，“跨列数”改为5；同样地，“家庭住址”的“跨列数”改为3。

代码表应用到XGrid中：

打开demoUserMgr.view的XGrid，在“常数代码”列填入对应的“代码表名称”，如下图所示：

此外，上图中的“生日”的“显示格式”选择“yyyy-MM-dd”格式；根据需要调整“属性列宽”。

第3章开发效果展示

1.用户管理页面：

2.用户修改页面：

3.新增用户页面：