普元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的操作都很方便。

PS：
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>来设置勾选选中的参数。

<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>。

<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如下：

<!-- 取出HashMap数据设置到 request -->
<%
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 >标签分别对其进行展示。

<!—学生信息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和设置参数，当勾选了数据后才可以正常返回到父页面。

弹出框页面处理

<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中，在父页面的回调函数通过取数组中的数据设置到父页面获取的数据。如何在模态页面处理选择需要返回的值，请参考如下代码：

<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>

弹出框父页面处理
弹出框,一种是使用RichWeb的lookup标签，一种是使用EOS JS库的showModal,后台需要多写点js。
先看代码：

<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如下：

<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>

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

<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动作名称，通知页面流来执行。

<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>