普元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教程