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

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

 

EOS RichWeb组成

一、             理论基础

1. ide开发环境 ide开发环境包括了jsp编辑器，工具面板和属性视图。
2. javascript api EOS RichWeb提供了字符串处理，日期处理，dom操作，ajax操作等js函数。
3. 标签库     所谓的标签库，跟我们平时使用的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. 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>

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

 

 

 

 

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

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

1. 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));
    }
 %>

<!-- 取出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>

<!—学生信息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. 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>

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

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

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

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

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

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