eos7.6

EOS Platform7.6(NUI 版)
基础教程


普元信息技术股份有限公司Primeton Technologies, Ltd. http://www.primeton.com


欢迎使用
 

目录
 
第 1 章    NUI Demo    5
1.1    执行 SQL 脚本    5
1.2    导入 Demo 源代码    6
1.3    运行NUI Demo    10
第 2 章    EOS7.6 开发体验    12
2.1    关键知识点    12
2.2    Hello World 案例描述    12
2.3    Hello World 案例开发    12
2.4    测试运行    25
2.5    数据流转原理    26
第 3 章    创建NUI EOS Sample 示例项目    29
3.1    案例描述    29
3.2    创建项目步骤    29
3.3    测试运行    30
第 4 章    单表功能开发    32
4.1    关键知识点    32
4.2    报销单查询案例开发    32
4.2.1    案例描述    32
4.2.2    案例开发    32
4.3    报销单新增案例开发    48
4.3.1    案例描述    48
4.3.2    案例开发    48
4.3.3    测试运行    57
4.4    报销单删除案例开发    58
4.4.1    案例描述    58
4.4.2    案例开发    58
4.4.3    测试运行    63
4.5    报销单编辑案例开发    63
4.5.1    案例描述    64
4.5.2    案例开发    64
4.5.3    测试运行    67
第 5 章    LOOKUP 功能开发    69
5.1    关键知识点    69
5.2    案例描述    69
5.3    案例开发    69
5.4    测试运行    79
第 6 章    单表维护向导开发    81
6.1    关键知识点    81
6.2    案例描述    81
6.3    案例开发    81
6.4    测试运行    90
第 7 章    主从表维护向导开发    92
7.1    关键知识点    92
7.2    案例描述    92
7.3    案例开发    92
7.4    测试运行    100
第 8 章    组织机构建模    103
8.1    关键知识点    103
8.2    组织机构建模    103
第 9 章    简单流程快速开发    112
9.1    需求描述    112
9.2    流程建模模拟    112
9.2.1    项目准备    112
9.2.2    创建流程应用构件包    113
9.2.3    创建流程定义    113
9.2.4    定义流程图    115
9.2.5    流程属性定义    115
9.2.6    活动属性定义    116
9.2.7    业务实现    124
9.2.8    开发测试    124
9.2.9    流程发布    125
9.3    运行管理监控    125
第 10 章    报销流程第一次修改    131
10.1    关键知识点    131
10.2    案例描述    131
10.3    案例开发及运行    131
10.3.1    完成流程定义    131
10.3.2    流程发布    144
10.3.3    测试运行    144
第 11 章    报销流程第二次修改    145
11.1    关键知识点    145
11.2    案例描述    145
11.3    案例开发及运行    145
11.3.1    完成流程定义    145
11.3.2    流程发布    159
11.3.3    测试运行    160
第 12 章    自定义流程开发    161
12.1    关键知识点    161
12.2    案例描述    161
12.3    案例开发及运行    161
12.3.1    完成流程定义    161
12.3.2    完成“填写报销单”环节    163
12.3.3    完成“部门经理审批”环节    178
12.3.4    完成“财务审阅”环节    187
12.3.5    完成“总监审批”环节    195
12.3.6    完成“VP 会签”环节    195
第 13 章    使用流程快速实施框架    197
13.1    关键知识点    197
13.2    案例描述    197
13.3    案例开发    197
13.3.1    完成流程定义    197
13.3.2    使用流程快速实施框架完成“填写报销单”环节    198
13.3.3    测试运行    206

 
第1章 NUI Demo
在开发中为了能更快地学会使用NUI控件,可利用产品配套的非开源组件中提供了NUI 的示例代码、SQL 脚本及API 文档。在开发之前,将 NUI 的示例源代码导入到 Studio 中, 方便后续开发的参考和学习。步骤如下:

1.1    执行 SQL 脚本
下载产品配套的“非开源组件”,解压缩后,执行\非开源组件\nui\examples\dbscripts 目录下面的 sql 脚本,根据自己的数据库来打开相应 sql;如果开发数据库为 mysql,请执行sample-mysql.sql。本教程中所用的其它 SQL 语句都为 oracle 类型。
本案例说明:执行 SQL 脚本除了可以通过数据库客户端执行之外,还可以通过 studio 进行执行,步骤如下:
1)    studio 中数据库视图处选中自己的数据库然后右键,连接数据库;
2)    选中数据库,鼠标右键,选中 Open SQL Scrapbook,如下图:

 

3)    将 SQL 语句粘贴到SQL 剪贴簿中,将类型、名称以及数据库选好,可以根据自己的需求选择全部执行或者执行部分内容,如下:


注意:

执行SQL 脚本的数据库要求完成初始化,初始化的过程可以在安装 EOS Platform 7.6 时进行,也可以在安装成功后进入 governor 进行。

1.2    导入 Demo 源代码
通过“开始程序EOS Platform7.6Studio”,打开开发环境 Studio。
(1)    单击菜单栏的“文件”,在弹出的菜单中选择“新建EOS 项目”,弹出“新建 EOS
项目”的对话框,选择“空项目”,如图所示。
 

 
图1-1  NUI Demo-选择项目类型

(2)    点击【下一步】,填写新建项目所需的信息,在“项目名称”处输入 NUIDemo, 其它信息都是默认信息,如图所示。
 

 
图1-2  NUI Demo-填写项目信息
(3)    点击【完成】,NUIDemo 项目创建成功。
(4)    在左侧的资源管理器中,右键选中 NUIDemo,在显示的菜单中选择“导入”,在弹出的对话框中选择“EOS导入源代码”,如图所示。
 

 
图1-3  导入源代码

(5)    点击【下一步】, 显示导入源代码信息。点击【浏览】, 选择“ [ 非开源组件]\nui\examples\nui-demo4eos-src.zip”,如图所示。
 

 
图1-4  选择源代码包

(6)    点击【完成】,有提示弹出时选择“覆盖”。

1.3    运行 NUI Demo
点击工具栏上的图标“  ”,启动服务器并确保服务器启动正常。在浏览器中访问示例,地址为:http://[IP 地址]:[端口号]/default/demo/index.jsp,比如http://127.0.0.1:8080/default/demo/index.jsp。
EOS Platform7.6 版本服务启动成功后,首次访问页面时会自动跳转到登录界面。在登录页面输入用户名 sysadmin,密码 000000,点击登录后,进入 coframe。再次访问http://[IP 地址]:[端口号]/default/demo/index.jsp,显示出 NUI Demo 示例的主页,如图所示。
 


 

图1-5  NUI Demo 示例

注意:

关于 coframe,请参考\开源组件\coframe 文件下的相关文档。

每次访问的时候都会跳转到 coframe 界面,可以通过进入 governor配置HTTP 接入 未登录时跳转页面改成如下:/coframe/auth/login/login.jsp,修改后确定即可。
 

第2章 EOS7.6 开发体验
2.1    关键知识点
本章通过经典的“Hello World”案例,开始EOS 7.6 开发的最初体验,建立对EOS 7.6 最基本的感性认识。通过对案例的分析,帮助您更深刻地理解最核心的数据流转原理和处理过程。

2.2    Hello World 案例描述
本案例的需求是:在页面上输入姓名,点击【提交】按钮后,后台获取用户输入的姓 名,并将它与“Hello World!”字符串拼装成新的字符串,最后在页面上显示出新字符串。

图2-1  Hello World 案例效果图

2.3    Hello World 案例开发
通过“开始程序EOS Platform 7.6EOS Studio”启动 EOS 的集成开发环境。启动后, 进入到 EOS Studio 的开发工作区。本案例的开发过程如图所示。
 


 


图2-2  Hello World 案例开发过程图

详细的开发步骤如下:
1.    创建项目
创建EOS 空项目“EOSTrain”。
(1)    单击菜单栏的“文件”,在弹出的菜单中选择“新建EOS 项目”,弹出“新建 EOS 项目”的对话框,选择“空项目”,如图所示。
图2-1  EOSTrain -选择项目类型
 

(2)    点击【下一步】,填写新建项目所需的信息,在“项目名称”处输入 EOSTrain, 其它信息都是默认信息,如图所示。
 
图2-2  EOSTrain -填写项目信息

(3)    点击【完成】,EOSTrain 项目创建成功。


2.    构件包设计
(1)    在项目资源管理器视图中,右键单击“EOSTrain”,在弹出的菜单中选择“创建构件包”,如图所示。
图2-3  新建构件包
 

(2)    在弹出的“创建构件包”对话框中,设置构件包名称为“com.primeton.helloworld”,显示名称为“HelloWorld 案例开发--逻辑流实现”,如图所示。点击【完成】,完成构件包的创建。
图2-4  创建构件包
(3)    在资源管理器里,展开新建的构件包 com.primeton.helloworld,如图:


图2-5  构件包展现
 

3.    页面开发
(1)    在“资源管理器”中,展开“EOSTraincom.primeton.helloworld展现页面资源”路径,在“页面资源”上点击右键,在弹出的菜单中选择“创建JSP 页面”,如图所示。
图2-6 创建页面
(2)    在弹出的“向导”对话框中输入页面信息,如图所示,点击【完成】按钮,完成页面的创建。
 

图2-7  创建页面向导

创建“helloworld.jsp”页面之后,Studio 的“构件编辑器”会自动将刚刚创建的页面打开,会有默认的 HTML 标签和 script 标签。
(3)    从“helloworld.jsp”左侧调色板工具找到“表单控件->Form”,拖拽“Form”到 JSP
文件中。
(4)    从“helloworld.jsp”左侧调色板工具找到“表单控件->TextBox”,拖拽“TextBox”到“Form”中。设置“name”属性为“myname”。
(5)    同上方法,拖拽出“Button”到“Form”中,并输入“onclick”对应的值为“sayhello()”。
(6)    手工输入一个

标签,“id”为“info”,代码如下:


页面的 HTML 标签部分完成。


4.    逻辑流开发
(1)    在“资源管理器”中,展开“EOSTraincom.primeton.helloworld构件 com.primeton.helloworld”路径,在“com.primeton.helloworld”上点击右键,在弹出的菜单中选择“创建逻辑构件”,如图所示。
图2-8  创建逻辑构件
 

(2)    在弹出的“创建逻辑构件”对话框中的“名称”项中输入“helloworld”,如图所示,点击【完成】创建逻辑构件。
图2-9  创建逻辑构件

(3)    在最左侧“资源管理器”窗口中,展开“EOSTraincom.primeton.helloworld构件 com.primeton.helloworld”,找到刚刚创建的逻辑构件 helloworld.componentType,右键,在弹出菜单中选择“创建逻辑流”,弹出的“创建逻辑流向导”对话框,输入相应的逻辑流信息,如图所示,点击【完成】,结束逻辑流的创建。
 

 
图2-10 创建逻辑流

创建“join”逻辑流后,Studio 的“构件编辑器”会自动打开刚创建逻辑流。
(4)    双击逻辑流的空白处,在弹出的“逻辑流属性设置”对话框中,设置逻辑流的参数和返回值。具体设置信息如图所示。点击【确定】按钮完成设置。
 

 
图2-11 设置逻辑流参数

(5)    在 EOS Studio 最右侧的“构件库视图”窗口中点击工具条上第二个按钮 ,打开构件库,找到 com.eos.foundation ->运算逻辑 ->StringUtil -> concat(),如图所示。
图2-12 构件库

按住鼠标左键,将“concat()”该运算逻辑拖拽到“join.bizx”中。
 

(6)    打开逻辑流所在的“构件编辑器”中的“选用板”,选择“连接线”依次连接“开始”,“concat”和“结束”图元。同页面流设计类似,我们修改“concat”的名称为“连接字符串”,并拖拽“注释”图元,写明操作。最终的逻辑流如图所示:
图2-13 设计逻辑流


(7)    双击“连接字符串”运算逻辑图元,在弹出的“运算逻辑属性设置”对话框中, 可以看到 concat 有两个输入参数 joinString / strings,一个返回值out0。
 

 

图2-14 concat 运算


点击  ,增加第三个参数 param1。
设置参数与返回值:第一个参数值为:逗号,值类型为常量。第二个参数为:myname, 值类型为:变量,可以用 alt + /  来提示得到。第三个参数值为:“Hello World!”值类型为:常量。返回值为:info,同样可以利用提示得到。它们的值设置如图所示。
 

图2-15  concat 运算逻辑参数设置对话框


保存 join.bizx,concat 图元上的红色错误提示消失。如图:
图2-16 逻辑流
 


5.    完善页面
 

(1)    参照 Demo 中的示例代码,打开 http://127.0.0.1:8080/default/demo/index.jsp 页面,点击左侧菜单“快速入门 -> 数据验证 ->表单:文本显示”,查看 code 页面,找到如下代码:

(2)    将上面代码拷贝到“helloWorld.jsp”文件的代码基础上增加一段代码如下:
 

 

(5)    显示查询结果
查询结果页面使用表格控件 DataGrid,该控件内置 ajax 调用,通过设置 url 即与逻辑流交互数据,并分页显示查询结果。调整后的代码如下:

multiSelect="true">


visible="false">
报销单 ID


报销单编号

    

报销人 ID


报销人姓名


报销日期


报销金额


报销原因


是否预算内项目


受益部门


部门经理


部门经理意见


财务审核


财务审核意见
 

 

 
5.    逻辑流开发:expenseQuery.bizx
在“资源管理器”中,展开“EOSTrain com.primeton.train.expense 构件
com.primeton.train.expense”路径,在“com.primeton.train.expense”上点击右键,在弹出的菜单中选择“创建逻辑构件”名为“expense”。在逻辑构件 expense 上右键,创建逻辑流“expenseQuery”。
双击逻辑流“expenseQuery”操作界面的空白处,弹出逻辑流属性设置窗口,如图所
示:

 

图4-13 定义参数和返回值

返回值中,必须返回一个名为 total  的值,类型通过下拉菜单选择“Int”,作为统计出的记录条数使用,实现页面分页效果。

拖出 3 个图元:2 个“赋值”,第 3 个图元来自构件库 com.eos.fundation ->运算逻辑 ->
DatabaseExt : queryEntitiesByCriteriaEntityWithPage,如图所示:


图4-14 逻辑流图元排列

用连接线将所有图元连接在一起,双击图元下方的名称,根据功能修改每个名称,如图所示:

图4-15 逻辑流

双击“设置查询条件”图元,进行属性设置,如图所示:
 


 
图4-16 “设置查询条件”属性设置
本案例说明:其中第一个参数的右值对应的是 TrainExpenseinfo 数据实体的全名,可以在左侧资源管理器处找到 TrainExpenseinfo 数据实体,右键复制全名,如下图:
 
图4-17 “设置查询条件”属性设置双击“查询报销单”图元,进行属性设置,如图所示:
 

 
图4-18 “查询报销单”属性设置

双击“设置统计总记录数”,设置赋值属性,如图所示。左值即逻辑流的返回值 total,用来存放统计出的记录条数,作为整个逻辑流的返回值返回到页面中,右值代表查询结果的总记录条数。

 
 

6.    完善页面
 
图4-19 “设置统计总记录数”属性设置
 

双击打开“expenseList.jsp”,指定 DataGrid 的 url 为上一步开发的逻辑流全名加固定后缀。通过资源管理器,选中“expenseQuery.bizx”,右键下拉菜单选择“复制全名”,获得的逻辑流全称加上“.biz.ext”的后缀名得到 url 属性值,如下所示:

    url="com.primeton.train.expense.expense.expenseQuery.biz.ext" idField="expid"    
    dataField="expenses"    
multiSelect="true">
7.    测试运行
1.    启动EOS Server,启动成功后,在资源管理器视图,展开“EOSTrain com.primeton.train.expense 展现页面资源”,选中下面的启动 EOS Server。启动成功后, 在资源管理器视图,展开“EOSTrain com.primeton.train.expense 展现页面资源”,选中下面的expenseList.jsp,右键,在弹出的菜单中选择“复制 URL”。
2.    打开浏览器,在地址栏中右键粘贴,显示“http://127.0.0.1:8080/default/expense/expenseList.jsp”,回车,显示程序入口,如图所示。
图4-20 初始页面

3.    输入查询条件,点击查询后,显示结果如图所示,则程序运行正确。
 

 
图4-21 查询页面

本案例说明:
1)    dataField=”expenses” 与 逻 辑 流 中 定 义 的 返 回 值 expenses , 以 及queryEntitiesByCriteriaEntityWithPage 的返回值expenses 一致才会有正确的结果展示在页面中;
2)    queryEntitiesByCriteriaEntityWithPage 构件的功能及参数说明可以参考studio 帮助中的介绍,studio帮助帮助内容,将构件的名字放至搜索栏里,点击转至即可;

4.3    报销单新增案例开发
4.3.1    案例描述
案例的基本需求:基于报销单查询页面,点击【新增】,弹出窗口显示报销单信息录入页面,录入信息保存完毕回到父查询页面。

4.3.2    案例开发
1.    页面开发
打开“expenseList.jsp”页面,在标签内增加一段 JS,对应【新增】按钮的 οnclick="add()"事件函数。增加的部分可从 OOrgList.jsp 中找到。
打开 OOrgList.jsp 页面,拷贝下段代码并修改成如下黄色标出部分:
 

 

url 改为 url: "<%=request.getContextPath() %>/expense/expenseForm.jsp"

2.    子页面开发
在 com.primeton.train.expense 构件包下的“展现页面资源”上点右键,选择“创建
Jsp 页面”,在弹出的创建 Jsp 页面对话框中,输入相关信息,点击【完成】,如图所示。

图4-22 创建Jsp 页面
 

利用 nui-sample 里弹出页面代码构造页面,打开 OOrgForm.jsp 页面,

图4-23 打开OOrgForm.jsp 页面

将 OOrgForm.jsp 的

标签内的所有代码复制黏贴至expenseForm.jsp 页面代码的标签内,根据员工信息录入字段的需求调整代码如下:
 
 

 

员工信息录入页面通过 NUI 控件的 name 属性指定提交数据的变量名,通过“trainexpenseinfo.expname”
的数据格式,将字段值组装给 trainexpenseinfo 变量,方便后续的逻辑流操作。


拷贝 JS 部分即中间部分,用来提交表单数据,发送 Ajax 请求,与后台发生交互,代码调整如下:
 
 

 
 

 

3.    逻辑流开发
在逻辑构件“expense”上点右键,选择“创建逻辑流”,在弹出的创建逻辑流对话框中,输入相关信息,点击【完成】,如图所示。
图4-24 创建逻辑流

右侧展开的逻辑流编辑面板里默认产生了“开始”和“结束”两个图元,双击空白处定义逻辑流的参数和返回值,如图所示。参数来自于 expenseForm.jsp 页面提交组装出的 json 对象 trainexpenseinfo,类型通过下拉菜单选择“数据实体—浏览”,在弹出的的对话框里选择“TrainExpenseinfo”。
 


 

图4-25 定义参数
展开右边“构件库”视图中的“com.eos.foundation运算逻辑DatabaseExt”,选中 “getPrimaryKey(DataObject)”运算逻辑,它是获取持久化实体主键序列号值的构件,将该运算逻辑拖拽到逻辑流“expenseAdd”编辑器中,如图所示。
图4-26 逻辑流图元排列

从左侧拖一个赋值图元放至 getPrimaryKey 后面,如图:
 


 
图4-27 逻辑流图元排列

再继续展开右边“构件库”视图中的“com.eos.foundation运算逻辑DatabaseUtil”,选中“insertEntity(String,DataObject)”运算逻辑,将该运算逻辑拖拽到逻辑流“expenseAdd”编辑器中,排列图元如图所示。
图4-28 逻辑流图元排列

选择左侧选用板的“连接线”,依次连接各图元,修改图元的显示名称。最终的逻辑流如图所示。

 

图4-29 逻辑流

双击“取主键”运算逻辑图元,在弹出的“运算逻辑属性设置”对话框中,设置该方法的参数。这个方法有一个参数: 数据实体数组是图中定义的传入逻辑流中的参数trainexpenseinfo。具体设置如图所示。

图4-30 “取主键”属性设置

双击“通过 muo 获取报销人 id 及报销人姓名”运算逻辑图元,设置值如下图:
 

图4-31 “取主键”属性设置

双击“新增报销单”运算逻辑图元,在弹出的“运算逻辑属性设置”对话框中,设置该方法的参数。这个方法有二个参数:数据源默认为 default,数据实体数组是图中定义的传入逻辑流中的参数trainexpenseinfo。具体设置如图所示,点击【确定】后,保存逻辑流。
图4-32 “新增员工”属性设置

4.    完善页面
打开“expenseForm.jsp”,修改 JS  部分的 addURL  参数值,通过资源管理器,选中 “expenseAdd.bizx”,右键下拉菜单选择“复制全名”,获得的逻辑流全称加上“.biz.ext”的后缀名得到 url 参数值,如下所示:
 

4.3.3    测试运行
1.    浏览器中访问地址“http://127.0.0.1:8080/default/expense/expenseList.jsp”,显示查询页面,点击工具栏的【增加】按钮,弹出窗口,如图所示。
 

 
图4-33 新增页面

输入报销单信息,点击【确定】,并重新加载查询结果,新增记录成功。


4.4    报销单删除案例开发
4.4.1    案例描述
案例的基本需求:基于查询页面,通过查询结果列表的复选框选择多条记录,点击工具栏里的【删除】按钮,批量删除多条记录,并返回查询页面。

4.4.2    案例开发
1.    页面开发
双击打开“expenseQuery.jsp”页面,在标签内增加一段 JS,对应【删除】按钮的οnclick="remove()"事件函数。增加的部分可从 OOrgList.jsp 中找到。
打开 OOrgList.jsp 页面,拷贝 function remove()中的代码并做如下修改:
 

 


2.    逻辑流开发
在逻辑构件“expense”上点右键,选择“创建逻辑流”,在弹出的创建逻辑流对话框中,输入相关信息,点击【完成】,如图所示。
 

 
图4-34 创建逻辑流

右侧展开的逻辑流编辑面板里默认产生了“开始”和“结束”两个图元,双击空白处定义逻辑流的参数和返回值,如图所示。参数来自于 ExpenseQuery.jsp 页面提交的复选框选中行组装出的 json 对象 expenses,类型通过下拉菜单选择“数据实体—浏览”,在弹出的的对话框里选择“TrainExpenseinfo”,并勾选“数组”选项。
 


 
图4-35 定义参数

展开右边“构件库”视图中的“com.eos.foundation运算逻辑DatabaseUtil”,选中 “deleteEntityBatch(String,DataObject[])”运算逻辑,它是用于根据主键批量删除多条记录的构件,将该运算逻辑拖拽到逻辑流“expenseDelete”编辑器中,排列图元如图所示。
图4-36 逻辑流图元排列

选择左侧选用板的“连接线”,依次连接各图元,修改图元的显示名称。最终的逻辑流如下图所示。
 

 

图4-37 逻辑流
双击“删除报销单”运算逻辑图元,在弹出的“运算逻辑属性设置”对话框中,设置该方法的参数。这个方法有二个参数:数据源默认为 default,数据实体数组是图中定义的传入逻辑流中的参数expenses。具体设置如下图所示,点击【确定】后,保存逻辑流。

图4-38 “删除报销单”属性设置

3.    完善页面
打开“expenseQuery.jsp”,修改 remove 函数里 nui.ajax 方法的 url 参数值,通过资源管理器,选中“expenseDelete.bizx”,右键下拉菜单选择“复制全名”,获得的逻辑流全称加上 “.biz.ext”的后缀名得到 url 参数值,如下所示:
 
 

 


4.4.3    测试运行
1.    浏览器中访问地址“http://127.0.0.1:8080/default/expense/expenseList.jsp”,显示多条查询结果记录,通过复选框勾选多条记录,如图所示。
图4-39 初始页面

点击【删除】,弹出提示框“确定删除选中记录?”,点击“确定”,删除多条记录后返回查询页面,并重新加载查询结果,如图所示。

图4-40 删除页面

本案例说明:对于删除案例,除了使用批量删除构件外还可以使用 deleteEntity 构件配合循环的形式来实现。

4.5    报销单编辑案例开发
 

4.5.1    案例描述
案例的基本需求:基于查询页面,通过查询结果列表的复选框选择一条记录,点击工具栏里的【编辑】按钮,修改一条记录,并返回查询页面。

4.5.2    案例开发
1.    页面开发
双击打开“expenseQuery.jsp”页面,在标签内增加一段 JS,对应【编辑】按钮的οnclick="edit()"事件函数。增加的部分可从 OOrgList.jsp 中找到。
打开 OOrgList.jsp 页面,拷贝 function edit()中的代码并做如下修改: 修改为:
 

在 expenseForm.jsp 页面里面 SaveData()的 function 后面加如下方法:
 

 
2.    逻辑流开发
在逻辑构件“expense”上点右键,选择“创建逻辑流”,在弹出的创建逻辑流对话框中,输入相关信息,点击【完成】,如图所示。
图4-41 报销单修改

右侧展开的逻辑流编辑面板里默认产生了“开始”和“结束”两个图元,双击空白处定义逻辑流的参数,如图所示。参数来自于 expenseForm.jsp 页面提交的复选框选中行组装出的 json 对象 trainexpenseinfo,类型通过下拉菜单选择“数据实体—浏览”,在弹出的的对话框里选择“TrainExpenseinfo”。
 


 
图4-42 逻辑流设置

展开右边“构件库”视图中的“com.eos.foundation运算逻辑DatabaseUtil”,选中“updateEntity(String,DataObject)”运算逻辑,它是用于根据主键扩展查询一条记录的构件,将该运算逻辑拖拽到逻辑流“expenseUpdate”编编辑器中,排列图元如图所示。
图4-43 逻辑流设置

选择左侧选用板的“连接线”,依次连接各图元,修改图元的显示名称。最终的逻辑流如下图所示。
 

 
图4-44 逻辑流截图

双击“保存修改报销单信息”运算逻辑图元,在弹出的“运算逻辑属性设置”对话框中, 设置该方法的参数。这个方法有二个参数:数据源默认为 default,数据实体数组是图中定义的传入逻辑流中的参数 trainexpenseinfo。具体设置如下图所示,点击【确定】后,保存逻辑流。
 
图4-45 修改报销单图元

3.    完善页面
打开“expenseForm.jsp”,修改 JS  部分的 updateURL  参数值,通过资源管理器,选中 “expenseUpdate.bizx”,右键下拉菜单选择“复制全名”,获得的逻辑流全称加上“.biz.ext”的后缀名得到url 参数值,如下所示:
 

4.5.3    测试运行
浏览器中访问地址“http://127.0.0.1:8080/default/expense/expenseList.jsp”,显示多条查询结果记录,通过复选框勾选多条记录,如图所示。
 


 
图4-46 编辑页面

点击【编辑】,弹出修改页面,可进行修改,修改后点击【确定】,保存修改内容并重新加载查询结果。

 

第5章 LOOKUP 功能开发
5.1    关键知识点
本章通过 Lookup 开发案例,理解实体之间 N:1 关联关系,理解 Lookup 的使用。
 
5.2    案例描述
之前的示例中,增加新的报销单信息时有一个字段为受益部门 ID,需要手工输入数字, 非常不方便。而在实际应用中,使用者会浏览到所有的部门信息,然后选择一个部门,而选择的数据做为新增报销单信息的一部分,随报销单信息存到数据库中。
在本小节中将利用EOS 提供的 Lookup 控件功能,来实现报销单信息增加时可视地增加受益部门信息的功能。
5.3    案例开发
本案例不需要新建项目,直接在 EOSTrain 项目 com.primeton.train.expense 构件包的下开发。开发的详细步骤如下:

1.    新建数据实体 OrgOrganization
(1)    本例子中受益部门借助 coframe 中组织机构的表,所以不需要单独创建机构表;
(2)    打开 com.primeton.train.expense 构件包->数据–>数据模型: expensedataset.datasetx 文件,在文件上右键,点击“导入数据实体”,找到 ORG_ORGANIZATION 表,完成导入。具体过程如下:
 

 
图5-1  导入数据实体 1


图5-2  导入数据实体 2
 


 
图5-3  导入数据实体 3


 

图5-4  导入数据实体 4

在 expensedataset.datasetx 文件中会出现 OrgOrganization 实体,如图:

图5-5 OrgOrganization 数据实体

(3)    为两个数据实体建立单向 n:1 关系,在左侧调色板中找到“单向 n:1 关系”线,选中, 从“TrainExpenseinfo”实体向“OrgOrganization”实体拖动,会在两个实体间出现绿色单向连线。并且TrainExpenseinfo 实体中会增加一个新的属性:orgOrganization。

 

图5-6  单向 n:1 关系

双击连线,通过下拉列表选中N 端的 benefitorgid。如图;
图5-7  关联属性

2.    借助 NUI Demo 了解 Lookup 用法
用浏览器打开 NUI Demo  首页:http://127.0.0.1:8080/default/demo/index.jsp,在左侧菜单里找到:控件列表–>表单控件 -> Lookup,右侧展开“code”,可以看到 Lookup 由3 部分组成:“nui-lookup”类型的input  控件、“nui-panel”类型的div  控件及“nui-datagrid”类型的 div 控件。

(1)    “nui-lookup”类型的 input 控件,代码如下:
其中:name  和value  组成提交时该控件的“名”与“值”;textField  与 valueField 为  下拉列表选中后传回到主页面的“显示值”与“真实值”;popup 的值为“#”加上“nui-panel”类型的 div 控件的 id 值;grid 的值为“#”加上“nui-datagrid”类型的 div 控件的 id。
(2)    “nui-panel”类型的 div 控件
 
 

 
以上代码实现了用“姓名”进行搜索得到结果功能的页面部分。
(3)    “nui-datagrid”类型的 div 控件,这部分代码含在“nui-panel”类型的 div 控件内:

showToolbar="true" showCloseButton="true" showHeader="false" bodyStyle="padding:0" borderStyle="border:0">

 


姓名:  
style="width: 160px;" onenter="onSearchClick" /> class="nui-button" οnclick="onSearchClick">查询清除




showPageSize="false" showPageIndex="false"

url="org.gocom.components.nui.demo.newdataset.impl.TEmployee.queryEmployee.bi z.ext">



员工帐号

allowSort="true">姓名

创建日期




这部分代码实现了结果展示的页面。

3.    页面修改
(1)    打开 com.primeton.train.expense 构件包->展现–>页面资源:expenseForm.jsp 文件, 此页面实现报销单信息增加和修改功能。找到页面中显示 benefitorgid 的输入框:
 
去掉这个 input ,将 demo 页面中的第一部分“nui-lookup”类型的 input 控件代码拷
贝到这个位置。并进行对应修改:
 

class="nui-lookup" style="width: 200px;"
textField="    orgname"    valueField="    orgid    " popupWidth="auto"
popup="#gridPanel" grid="#datagrid1" multiSelect="true" />
将 demo 页面中的“nui-panel”类型的 div 控件代码拷贝到

你可能感兴趣的:(java)