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

时间  2019-11-18
标签 eos richweb 客户端 实践 总结 繁體版
原文   原文链接

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

 

EOS RichWeb组成html

1、             理论基础java

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

 

标签名web

功能ajax

备注api

Bean 类数组

用于把数据区、Cookie、Http头、http请求参数以及资源文件中的内容输出session

bean_writedom

从数据区获取数据 并打印出数据jsp

 

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实现，效率很高。

 

2、             标签实例

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

  

[xhtml] view plaincopyprint?
  1. <table>  
  2. <w:panel>  
  3. <w:radioGroup id="group1">  
  4.   <l:iterate property="viewList" id="id01">  
  5.   <tr align="center" class="<l:output evenOutput='EOS_table_row' />">  
  6.     <td>  
  7.         <w:rowRadio>  
  8.             <h:param name='stuid' iterateId='id01' property='stuid' />  
  9.          </w:rowRadio>  
  10.     </td>  
  11. <td align="center">  
  12. <b:write iterateId="id01" property="stuid" />  
  13.     </td>  
  14. <td>  
  15. <b:write iterateId="id01" property="stuname" />  
  16.     </td>  
  17. <td>  
  18. <b:write iterateId="id01" property="stuage" />  
  19.     </td>  
  20. <td>  
  21. <b:write iterateId="id01" property="stusex" />  
  22.     </td>  
  23.   </tr>  
  24.   </l:iterate>  
  25. </w:radioGroup>  
  26. </table>  
  27. </w:panel>  

 

 

 

 

  1. 2.    多行选择控件

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

 

 

 

 

[c-sharp] view plaincopyprint?
  1. <table>  
  2. <w:panel>  
  3. <w:checkGroup id="group1">  
  4.   <l:iterate property="viewList" id="id01">  
  5.   <tr align="center" class="<l:output evenOutput='EOS_table_row' />">  
  6.     <td>  
  7.         <w: rowCheckbox >  
  8.             <h:param name='stuid' iterateId='id01' property='stuid' />  
  9.          </w: rowCheckbox >  
  10.     </td>  
  11. <td align="center">  
  12. <b:write iterateId="id01" property="stuid" />  
  13.     </td>  
  14. <td>  
  15. <b:write iterateId="id01" property="stuname" />  
  16.     </td>  
  17. <td>  
  18. <b:write iterateId="id01" property="stuage" />  
  19.     </td>  
  20. <td>  
  21. <b:write iterateId="id01" property="stusex" />  
  22.     </td>  
  23.   </tr>  
  24.   </l:iterate>  
  25. </w:checkGroup >  
  26. </table>  
  27. </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以下：

[c-sharp] view plaincopyprint?
  1. <!-- 取出HashMap数据设置到 request -->  
  2. <%  
  3.     HashMap viewMap =(HashMap)request.getAttribute("viewMap") ;  
  4.     Iterator itkey = viewMap.keySet().iterator();  
  5.     while(itkey.hasNext()){  
  6.         String key = (String)itkey.next();  
  7.         request.setAttribute(key,viewMap.get(key));  
  8.     }  
  9.  %>  

 

 

 

 

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

 

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

[xhtml] view plaincopyprint?
  1. <!—学生信息stuList-->  
  2. <form action="">  
  3. <w:panel id="stu" width="100%" title="学生信息列表">  
  4. <table  border="1" height="5" width="100%" >  
  5.   <tr align="center">  
  6.   <td>选择</td>  
  7.     <td>学号</td>  
  8.     <td>姓名</td>  
  9.     <td>年龄</td></tr>  
  10. <w:radioGroup id="group1">  
  11.   <l:iterate property="stuList" id="id01"><!—这里获取stuList 开始遍历-->  
  12.   <tr align="center">  
  13.   <td>  
  14.             <w:rowRadio>  
  15.                     <h:param name='stuid' iterateId='id01' property='stuid'  />  
  16. <!—这里设置勾选须要提交的值 能够有多个<h:param >-->  
  17.             </w:rowRadio>  
  18.     </td>  
  19.     <td align="center"><b:write iterateId="id01" property="stuid" /> </td>  
  20.     <td><b:write iterateId="id01" property="stuname" /> </td>  
  21.     <td><b:write iterateId="id01" property="stuage" /></td>  
  22.   </tr>  
  23.   </l:iterate>  
  24.   </w:radioGroup>  
  25. </w:panel>  
  26. </form>  
  27.   
  28. <!—学生信息schList-->  
  29. <form action="">  
  30. <w:panel id="sch" width="100%" title="学校信息列表">  
  31. <table align="left" border="1" height="5" width="100%">  
  32.   <tr align="center">  
  33.     <td>选择</td>  
  34.     <td>学校编号</td>  
  35.     <td>学校名称</td></tr>  
  36.  <w:radioGroup id="group2">   
  37.  <l:iterate id="id02" property="schList"><!—这里获取schList 开始遍历-->  
  38.   
  39.   <tr align="center">  
  40.     <td>  
  41.         <w:rowRadi  
  42.          <h:param name='schid' iterateId='id02' property='schid'  />  
  43. <!—这里设置勾选须要提交的值 能够有多个<h:param >-->  
  44.          </w:rowRadio>  
  45.     </td>  
  46.     <td> <b:write iterateId="id02" property="schid"/></td>  
  47.     <td><b:write iterateId="id02" property="schname"/> </td>  
  48.   </tr>  
  49.   </l:iterate> </w:radioGroup>  
  50. </table>  
  51. </w:panel></form>  

  

 

 

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

  1. 1.    弹出框模态页面配置

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

 

弹出框页面处理

 

[xhtml] view plaincopyprint?
  1. <w:rowRadio>  
  2.              <h:param name="schid"  iterateId="id02" property="schid" />  
  3.              <h:param name="schname"  iterateId="id02" property="schname"/>  
  4. <!—这里设置勾选须要提交的值 能够有多个<h:param >-->  
  5. </w:rowRadio>  

 

 

 

 

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

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

 

 

 

[xhtml] view plaincopyprint?
  1. <script language="JavaScript"><!--  
  2.       window.resize(600, 480);//从新设置模态窗口位置  
  3.       window.moveCenter();  
  4.       function selectRecord()  //选择数据触发的JS  
  5.       {  
  6.         var g = $id("group2"); //group2是弹出框列表页面的单选面板id <w:radioGroup id="group2">  
  7.         //    if (g.getSelectRow() == null) {  
  8.         //    alert("请选择一行记录");  
  9.         //    return;  
  10.         //  }  
  11.         var ret = new Array;  
  12.         ret[0] = g.getParam("schid"); //将<h:parm>属性值是schid的数据获取  
  13.         ret[1] = g.getParam("schname"); //将<h:parm>属性值是schname的数据获取  
  14.         window.returnValue = ret;//将数组赋值给window.returnValue   
  15.         window.close();  
  16.       }  
  17.       function unSelectRecord() //取消选择触发JS  
  18.       {  
  19.         var ret = new Array;  
  20.         ret[0] = "";  
  21.         ret[1] = "";  
  22.         window.returnValue = ret;  
  23.         window.close();  
  24.       }  
  25. // --></script>  

 

 

 

 

弹出框父页面处理

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

先看代码：

[xhtml] view plaincopyprint?
  1. <form name="page_form1" action="">  
  2. <w:panel id="pane02" width="100%" title="搜索条件">  
  3. <table  border="1" height="5" width="300" align="left" class="EOS_table" >  
  4.   <tr >  
  5.     <td width="80">学校(lookUp实现) </td>  
  6.     <td>  
  7.        <w:lookup dialogTitle="学校弹出框" allowInput="false" name="schname" id="lookup1" lookupUrl="com.richweb.eos.PoupSch.flow"      onReturnFunc="returnFunc" />   
  8.     </td>  
  9. <td>  
  10. <input type="text" name="schid" id="schid" value="">  
  11. </td>  
  12.   </tr>  
  13.   <tr >  
  14.  <td width="80">  
  15. <input type="button" value="学校(自定义)" onclick="popusch();">  
  16. </td>  
  17.      <td width="220">  
  18. <h:text name="sechshcname" id="sechshcname"/><input type="button" value="搜索" >  
  19. </td>  
  20.      <td>  
  21. <input type="text" name="sechschid" id="sechschid" value="">  
  22. </td>  
  23.   </tr>  
  24.   <input type="hidden" name="_eosFlowAction" id="_eosFlowAction" value="search">  
  25. </table>  
  26. </w:panel>  
  27. </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?
  1. <script type="text/javascript"><!--  
  2.    function popusch(){//弹出框的页面流地址  
  3.         var url="com.richweb.eos.PoupSch.flow";  
  4.         testShowModal(url);  
  5.    }  
  6.      
  7.          // 关闭对话框时的回调函数  
  8.         function callBack(value){ //value是从模态页面传来的数组 showModal返回回调函数  
  9.              $id('sechschid').value = value[0] ;    //将数组中的数据设置到父页面  
  10.              $id('sechshcname').value = value[1] ;  
  11.         }  
  12.           
  13.   
  14.         function testShowModal(url){ //弹出模态窗口,argument为传入弹出框须要的参数(能够为空) callBack是回调函数  
  15.             var argument ;  
  16.             // 显示对话框,参数依次为,  
  17.             // 对话框内的页面url  
  18.             // 传给对话框的参数  
  19.             // 宽度, 高度 左坐标 上坐标  
  20.             // 对话框标题  
  21.             showModal (url,argument,callBack,400,400,300,100,"学校弹出框");  
  22.         }  
  23.     function returnFunc(value){ //value是从模态页面传来的数组 lookup返回回调函数  
  24.             $id('schid').value = value[0] ;  
  25.             $id('lookup1').displayValue = value[1] ; //获取lookup对象，并设定显示值displayValue ps:lookup必定要给一个id  
  26.     }  
  27. // --></script>  

 

 

  1. 页面跳转

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

 

[xhtml] view plaincopyprint?
  1. <h:form name=” page_form”>  
  2. <w:panel id="pane01" width="100%" title="业务操做">  
  3. <table align="left" border="0" height="5" width="160">  
  4.   <tr>  
  5.     <td width="40"> <input type="button" value="增长" onclick="addRecord();">  
  6.     </td>  
  7.     <td width="40"> <input type="button" value="修改" onclick="updateRecord();">  
  8.     </td>  
  9.     <td width="40"> <input type="button" value="删除" onclick="deleteRecord();">  
  10.     </td>  
  11.     </td>  
  12.   </tr>  
  13. </table>  
  14. <input type="hidden" name="_eosFlowAction" id="_eosFlowAction" value=" "/>  
  15. </w:panel>  
  16. </h:form>  

 

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

 

[javascript] view plaincopyprint?
  1. <script type="text/javascript"><!--  
  2.     function addRecord()  
  3.       {  
  4.         var frm = $name("page_form");//要提交表单的name  
  5.         frm.elements["_eosFlowAction"].value = "insert";// eosFlowAction是默认的action  
  6.         frm.submit();  
  7.       }  
  8.   
  9.       function updateRecord()  
  10.       {  
  11.         var g = $id("group1");//  
  12.         var frm = $name("page_form");  
  13.         if (g.getSelectLength() != 1) {  
  14.           alert("请选择一行记录！");  
  15.           return;  
  16.         }  
  17.         frm.elements["_eosFlowAction"].value = "update";  
  18.         frm.submit();  
  19.       }  
  20.     
  21.       function deleteRecord()  
  22.       {  
  23.         frm.elements["_eosFlowAction"].value = "delete";  
  24.         frm.submit();  
  25.       }  
  26.       
  27. // --></script>  

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程