普元EOS RichWeb(富客户端)实践总结

最近公司未来一银行项目要使用到普元的EOS，客服是普元合作机构，没办法，必须将系统在EOS平台上部署开发，认真学习了2个星期，对EOS6.0的印象还是非常的好。丰富的页面开发组件，SOA我不是特别特别的说的出来，看了SOA相关文档和对比传统的开发模式，EOS的思想非常值得学习，EOS里面的组件设计，能更好的增加代码的可重复性，模块的独立性，这对于一个大型银行系统来说，所带来的好处不言而喻。不过这些高深莫测的名词也掩盖不来它背后一些基本的东西，大量使用接口，XML，依赖注入等等。概念是用来推销的。在使用过程中也渐渐发现存在的一些问题，甚至是软件BUG，当然这都是可以理解的，毕竟6.0刚出来不久，相信以后的版本会有更多值得我们期待和改进的地方。

EOS RichWeb组成

一、 理论基础

ide开发环境 ide开发环境包括了jsp编辑器，工具面板和属性视图。
javascript api EOS RichWeb提供了字符串处理，日期处理，dom操作，ajax操作等js函数。
标签库 所谓的标签库，跟我们平时使用的JSTL标签和struts标签功能原理都是一样，可以联想起来使用。 EOS RichWeb共提供了6大类的标签。
- Bean类：用于把数据区、Cookie、Http头、http请求参数以及资源文件中的内容输出。
- Html类：在html控件元素基础上进行了扩展和增强。
- Logic类：提供了一些逻辑判断标签，用于jsp页面逻辑控制。
- Dict类：生成与业务字典相关的html控件元素。
- Webcomp类：提供了date，popmenu，panel，tabpanel，tree等高级控件。
- RichClient类：提供了datacell，comboselect等ajax控件。

标签名	功能	备注
Bean 类	用于把数据区、Cookie、Http头、http请求参数以及资源文件中的内容输出
bean_write	从数据区获取数据并打印出数据
bean_set	将数据并写入数据区。相当于：request.setAttribute
bean_romove	移除数据区数据。相当于：request. romove
bean_size	获取数据区数据集合长度
bean_message	国际化消息和struts的Message一个用法
Html类	提供了对基本HTML标签的封装，支持DataContext.
Logic类	提供了一些逻辑判断标签，用于jsp页面逻辑控制
Webcomp类	提供了date，popmenu，panel，tabpanel，tree等高级控件
RichClient类	提供了datacell，comboselect等ajax控件

EOS的JSP编辑器还是相当好用，提供了丰富的控件，拖拽即可生成代码，特殊的部分需要手工更改。标签大部分提供了对Xpath语法的支持，对JavaBean,List,Map,Document,request,sessiond的操作都很方便。

1) EOS的RichWeb和建设银行的标签库所提供的全部功能基本一样，数据集遍历，日期类型甚至页面的action跳转方式都类似，建议可参考于CCBCSPS的WEB层来掌握EOS RichWeb开发。

2. 比较运算（等于<l:equal>）判断（<l:empty>）和逻辑循环（<l:iterate>）结合JSTL标签的<c:if/> <c:foreach />学习很容易。

3．Webcomp类和RichClient类是实现EOS RichWeb的高级控件，特殊的页面效果等等都可以简单的实现。控件大部分使用ajax实现，效率很高。

二、 标签实例

1. 单选列表

单行选择控件由两个标签组成：<w:radioGroup> 和<w:rowRadio>,<w:rowRadio>必须嵌套在<w:radioGroup>中才能使用，<w:rowRadio>可以嵌套<h:param>用来设置行参数。在使用单行选择控件标签时，嵌套<w:panel>。

对一个查询的学生信息viewList列表进行遍历并展示，使用单行选择控件<w:radioGroup> 配合logic类的<l:iterate>标签实现, <w:rowRadio>中使用<h:param>来设置勾选选中的参数。

[xhtml] view plaincopyprint?

<table> <w:panel> <w:radioGroup id="group1"> <l:iterate property="viewList" id="id01"> <tr align="center" class="<l:output evenOutput='EOS_table_row' />"> <td> <w:rowRadio> <h:param name='stuid' iterateId='id01' property='stuid' /> </w:rowRadio> </td> <td align="center"> <b:write iterateId="id01" property="stuid" /> </td> <td> <b:write iterateId="id01" property="stuname" /> </td> <td> <b:write iterateId="id01" property="stuage" /> </td> <td> <b:write iterateId="id01" property="stusex" /> </td> </tr> </l:iterate> </w:radioGroup> </table> </w:panel>

2. 多行选择控件

多行选择控件由两个标签组成：<w:checkGroup> 和<w:rowCheckbox>。<w:rowCheckbox>必须嵌套在<w:checkGroup>中才能使用，<w:rowCheckbox>可以嵌套<h:param>用来设置行参数.使用方法和单选一样，更多效果可参考EOS RichWeb开发指南，对控件的JS接口进行简单的配置即可实现。在使用多行选择控件标签时，嵌套<w:panel>。

[c-sharp] view plaincopyprint?

<table> <w:panel> <w:checkGroup id="group1"> <l:iterate property="viewList" id="id01"> <tr align="center" class="<l:output evenOutput='EOS_table_row' />"> <td> <w: rowCheckbox > <h:param name='stuid' iterateId='id01' property='stuid' /> </w: rowCheckbox > </td> <td align="center"> <b:write iterateId="id01" property="stuid" /> </td> <td> <b:write iterateId="id01" property="stuname" /> </td> <td> <b:write iterateId="id01" property="stuage" /> </td> <td> <b:write iterateId="id01" property="stusex" /> </td> </tr> </l:iterate> </w:checkGroup > </table> </w:panel>

由两个标签组成：<w:checkGroup> 和<w:rowCheckbox>。使用方法和单选一样，<w:rowCheckbox>必须嵌套在<w:checkGroup>中才能使用，<w:rowCheckbox>可以嵌套<h:param>用来设置行参数。更多效果可参考EOS RichWeb开发指南，对控件的JS接口进行简单的配置即可实现。在使用多行选择控件标签时，需嵌套<w:panel>。

3. 同页面多个列表

例子：在同一页面展示学生信息和学校信息2个列表。

将学生信息列表stuList和学校信息列表schList保存在viewMap中待显示，代码如下：

HashMap map = new HashMap();

map.put("stuList", stuList) ;

map.put("schList", schList)

request.setAttribute(viewMap,map);

⑴新建页面stuschList.jsp如下：

[c-sharp] view plaincopyprint?

<%
HashMap viewMap =(HashMap)request.getAttribute("viewMap") ;
Iterator itkey = viewMap.keySet().iterator();
while(itkey.hasNext()){
String key = (String)itkey.next();
request.setAttribute(key,viewMap.get(key));
}
%>

<% HashMap viewMap =(HashMap)request.getAttribute("viewMap") ; Iterator itkey = viewMap.keySet().iterator(); while(itkey.hasNext()){ String key = (String)itkey.next(); request.setAttribute(key,viewMap.get(key)); } %>

通过上段代码可以将viewMap中的stuList和schList设置到request中，方便我们用<l: iterate >遍历取值。值得注意的是：在后台中我们进行map.put("stuList", stuList) ;map.put("schList", schList)的时候，必须保证key和value的变量名称是一样的，否则使用上段代码将不能达到预期效果。

⑵然后使用Logic类的<l: iterate >标签分别对其进行展示。

[xhtml] view plaincopyprint?

<!—学生信息stuList--> <form action=""> <w:panel id="stu" width="100%" title="学生信息列表"> <table border="1" height="5" width="100%" > <tr align="center"> <td>选择</td> <td>学号</td> <td>姓名</td> <td>年龄</td></tr> <w:radioGroup id="group1"> <l:iterate property="stuList" id="id01"><!—这里获取stuList 开始遍历--> <tr align="center"> <td> <w:rowRadio> <h:param name='stuid' iterateId='id01' property='stuid' /> <!—这里设置勾选需要提交的值可以有多个<h:param >--> </w:rowRadio> </td> <td align="center"><b:write iterateId="id01" property="stuid" /> </td> <td><b:write iterateId="id01" property="stuname" /> </td> <td><b:write iterateId="id01" property="stuage" /></td> </tr> </l:iterate> </w:radioGroup> </w:panel> </form> <!—学生信息schList--> <form action=""> <w:panel id="sch" width="100%" title="学校信息列表"> <table align="left" border="1" height="5" width="100%"> <tr align="center"> <td>选择</td> <td>学校编号</td> <td>学校名称</td></tr> <w:radioGroup id="group2"> <l:iterate id="id02" property="schList"><!—这里获取schList 开始遍历--> <tr align="center"> <td> <w:rowRadi <h:param name='schid' iterateId='id02' property='schid' /> <!—这里设置勾选需要提交的值可以有多个<h:param >--> </w:rowRadio> </td> <td> <b:write iterateId="id02" property="schid"/></td> <td><b:write iterateId="id02" property="schname"/> </td> </tr> </l:iterate> </w:radioGroup> </table> </w:panel></form>

虽然EOS提供了对HashMap取值的标签，但是HashMap中的value,对象只能是一维数组，对于二维数组的value，不能继续配合<l: iterate >进行遍历。

1. 弹出框模态页面配置

弹出框在执行com.richweb.eos.PoupSch.flow后会弹出选择页面，对这个页面需要手写JS和设置参数，当勾选了数据后才可以正常返回到父页面。

弹出框页面处理

[xhtml] view plaincopyprint?

<w:rowRadio> <h:param name="schid" iterateId="id02" property="schid" /> <h:param name="schname" iterateId="id02" property="schname"/> <!—这里设置勾选需要提交的值可以有多个<h:param >--> </w:rowRadio>

勾选某笔资料后，<h:parm>配置返回哪些数据需返回到父页面。

在js里，模态页面返回的数据都是存放在数据对象Array中，在父页面的回调函数通过取数组中的数据设置到父页面获取的数据。如何在模态页面处理选择需要返回的值，请参考如下代码：

[xhtml] view plaincopyprint?

<script language="JavaScript"><!--
window.resize(600, 480);//重新设置模态窗口位置
window.moveCenter();
function selectRecord() //选择数据触发的JS
{
var g = $id("group2"); //group2是弹出框列表页面的单选面板id <w:radioGroup id="group2">
// if (g.getSelectRow() == null) {
// alert("请选择一行记录");
// return;
// }
var ret = new Array;
ret[0] = g.getParam("schid"); //将<h:parm>属性值是schid的数据获取
ret[1] = g.getParam("schname"); //将<h:parm>属性值是schname的数据获取
window.returnValue = ret;//将数组赋值给window.returnValue
window.close();
}
function unSelectRecord() //取消选择触发JS
{
var ret = new Array;
ret[0] = "";
ret[1] = "";
window.returnValue = ret;
window.close();
}
// --></script>

<script language="JavaScript"></script>

弹出框父页面处理

弹出框,一种是使用RichWeb的lookup标签，一种是使用EOS JS库的showModal,后台需要多写点js。

先看代码：

[xhtml] view plaincopyprint?

<form name="page_form1" action=""> <w:panel id="pane02" width="100%" title="搜索条件"> <table border="1" height="5" width="300" align="left" class="EOS_table" > <tr > <td width="80">学校(lookUp实现) </td> <td> <w:lookup dialogTitle="学校弹出框" allowInput="false" name="schname" id="lookup1" lookupUrl="com.richweb.eos.PoupSch.flow" onReturnFunc="returnFunc" /> </td> <td> <input type="text" name="schid" id="schid" value=""> </td> </tr> <tr > <td width="80"> <input type="button" value="学校(自定义)" onclick="popusch();"> </td> <td width="220"> <h:text name="sechshcname" id="sechshcname"/><input type="button" value="搜索" > </td> <td> <input type="text" name="sechschid" id="sechschid" value=""> </td> </tr> <input type="hidden" name="_eosFlowAction" id="_eosFlowAction" value="search"> </table> </w:panel> </form>

⑴预先配置好弹出框的页面流com.richweb.eos.PoupSch.flow。

⑵使用<w:lookup>标签时，需配置id，lookupUrl，onReturnFunc。<w:lookup dialogTitle="学校弹出框" allowInput="false" name="schname" id="lookup1" lookupUrl="com.richweb.eos.PoupSch.flow"

onReturnFunc="returnFunc" /> 。其中looupUrl是弹出框URL，onReturnFunc是弹出框返回触发的函数。其他参数属性可以参考开发手册去理解。

⑶手写返回函数。使用showModal做弹出框，需要自己写JS，设置模态页面的URL,，大小，位置，及回调函数callback。参考JS如下：

[javascript] view plaincopyprint?

<script type="text/javascript"><!--
function popusch(){//弹出框的页面流地址
var url="com.richweb.eos.PoupSch.flow";
testShowModal(url);
}
// 关闭对话框时的回调函数
function callBack(value){ //value是从模态页面传来的数组 showModal返回回调函数
$id('sechschid').value = value[0] ; //将数组中的数据设置到父页面
$id('sechshcname').value = value[1] ;
}
function testShowModal(url){ //弹出模态窗口,argument为传入弹出框需要的参数(可以为空) callBack是回调函数
var argument ;
// 显示对话框,参数依次为,
// 对话框内的页面url
// 传给对话框的参数
// 宽度, 高度左坐标上坐标
// 对话框标题
showModal (url,argument,callBack,400,400,300,100,"学校弹出框");
}
function returnFunc(value){ //value是从模态页面传来的数组 lookup返回回调函数
$id('schid').value = value[0] ;
$id('lookup1').displayValue = value[1] ; //获取lookup对象，并设定显示值displayValue ps:lookup一定要给一个id
}
// --></script>

<script type="text/javascript"></script>

页面跳转

例子：页面有新增，修改，删除按钮，点击需要跳到不同的页面。

[xhtml] view plaincopyprint?

<h:form name=” page_form”> <w:panel id="pane01" width="100%" title="业务操作"> <table align="left" border="0" height="5" width="160"> <tr> <td width="40"> <input type="button" value="增加" onclick="addRecord();"> </td> <td width="40"> <input type="button" value="修改" onclick="updateRecord();"> </td> <td width="40"> <input type="button" value="删除" onclick="deleteRecord();"> </td> </td> </tr> </table> <input type="hidden" name="_eosFlowAction" id="_eosFlowAction" value=" "/> </w:panel> </h:form>

点击按钮会触发一个JS，不同的操作调用不同的JS，JS的功能是设置本次操作的action动作名称，通知页面流来执行。

[javascript] view plaincopyprint?

<script type="text/javascript"><!--
function addRecord()
{
var frm = $name("page_form");//要提交表单的name
frm.elements["_eosFlowAction"].value = "insert";// eosFlowAction是默认的action
frm.submit();
}
function updateRecord()
{
var g = $id("group1");//
var frm = $name("page_form");
if (g.getSelectLength() != 1) {
alert("请选择一行记录！");
return;
}
frm.elements["_eosFlowAction"].value = "update";
frm.submit();
}
function deleteRecord()
{
frm.elements["_eosFlowAction"].value = "delete";
frm.submit();
}
// --></script>

<script type="text/javascript"></script>

posted @ 2014-04-22 15:49 做一个GENTALMAN 阅读(635) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部