程序博客网 > 电算化会计软件下载

：构建支持AJAX的JSF组件(一)

来源：互联网 发布：电算化会计软件下载 编辑：程序博客网 时间：2024/04/30 12:56
面将详细介绍一个标准ＪＳＦ组件的制作过程，其中选用了DOJO的部分JS小部件，例如GRID。其中传递数据的方式采用了JSON格式。
1. AJAX用户界面组件
DirectorySearch_DojoImp.java

Java代码 复制代码 收藏代码
  1. package component;   
  2.   
  3. import javax.faces.component.UIInput;   
  4. import javax.faces.component.ValueHolder;   
  5.   
  6. public class DirectorySearch_DojoImp extends UIInput implements ValueHolder    
  7. {   
  8.     @Override  
  9.    public String getFamily() {   
  10.       return "DirectoryFamily";   
  11.     }   
  12. }  

这里没有在组件内部渲染用户界面而是采用了在Renderer中渲染。
DirectorySearchRenderer.java
Java代码 复制代码 收藏代码
  1. package renderer;   
  2.   
  3. import java.io.IOException;   
  4. import javax.faces.component.UIComponent;   
  5. import javax.faces.context.ExternalContext;   
  6. import javax.faces.context.FacesContext;   
  7. import javax.faces.context.ResponseWriter;   
  8. import javax.faces.render.Renderer;   
  9. import phaselistener.DataProviderPhListener;   
  10.   
  11. /**  
  12.  *  
  13.  * @author Administrator  
  14.  */  
  15. public class DirectorySearchRenderer extends Renderer {   
  16.   
  17.     public DirectorySearchRenderer() {   
  18.     }   
  19.   
  20.     @Override  
  21.     public void encodeBegin(FacesContext context, UIComponent component) throws IOException {   
  22.         String clientId = component.getClientId(context);   
  23.         renderStyle(context, component);   
  24.         //渲染AJAX脚本   
  25.         encodeAjaxJavascript(context, clientId + ":grid", component);   
  26.         //encodeInputField用来渲染核心用户界面元素.   
  27.         encodeInputField(context, clientId, component);   
  28.     }   
  29.   
  30.     public void renderStyle(FacesContext context, UIComponent component) throws IOException {   
  31.         ResponseWriter writer = context.getResponseWriter();   
  32.         writer.write("\n");   
  33.         writer.startElement("style", component);   
  34.         writer.writeAttribute("type", "text/css", null);   
  35.         writer.write("\n");   
  36.         writer.write("@import '../js/MyDojo/dojo/grid/_grid/Grid.css';\n");   
  37.         writer.write("@import '../js/MyDojo/dojo/themes/tundra/tundra.css'';\n");   
  38.         writer.endElement("style");   
  39.         writer.write("\n");   
  40.     }   
  41.   
  42.     public void encodeInputField(FacesContext context, String clientId, UIComponent component) throws IOException {   
  43.         // render a standard HTML input field  
  44.         ResponseWriter writer = context.getResponseWriter();   
  45.         writer.write("\n");   
  46.         writer.startElement("p", component);   
  47.         writer.startElement("input", component);   
  48.         writer.writeAttribute("type", "text", null);   
  49.         writer.writeAttribute("id", clientId, "clientId");   
  50.         writer.writeAttribute("size", "20", null);   
  51.         writer.writeAttribute("onkeyup", "lookup('" + clientId + "');", null);   
  52.         writer.endElement("input");   
  53.         writer.endElement("p");   
  54.         //同时在渲染一个DIV.<div id = "searchField:table"></div> 此div为table的插入位置  
  55. //      writer.startElement("div", this);   
  56. //      writer.writeAttribute("id", clientId + ":table", null);  
  57. //      writer.endElement("div");   
  58.         //<div id="commentww" dojotype="dijit.layout.ContentPane" style="width: 600px; height: 300px;  
  59.         // padding: 0px; font-size:12px;">  
  60.         //</div>   
  61.         writer.startElement("div", component);   
  62.         writer.writeAttribute("id", clientId + ":grid", null);   
  63.         writer.writeAttribute("dojotype", "dijit.layout.ContentPane", null);   
  64.         writer.writeAttribute("style", "width: 600px; height: 300px; padding: 0px; font-size:12px;", null);   
  65.         writer.endElement("div");   
  66.     }   
  67.   
  68.     public void encodeAjaxJavascript(FacesContext context, String clientId, UIComponent component) throws IOException {   
  69.         ResponseWriter writer = context.getResponseWriter();   
  70.         ExternalContext extContext = context.getExternalContext();   
  71.         // render Ajax enabled Javascript only once  
  72.         if (!extContext.getRequestMap().containsKey("ajaxflag.ajaxScript")) {   
  73.             extContext.getRequestMap().put("ajaxflag.ajaxScript", Boolean.TRUE);   
  74.             writer.startElement("script", component);   
  75.             writer.writeAttribute("type", "text/javascript", null);   
  76.             writer.writeAttribute("src", DataProviderPhListener.RENDER_SCRIPT_VIEW_ID, null);   
  77.             writer.endElement("script");   
  78.             writer.write("\n");   
  79.             writer.startElement("script", component);   
  80.             writer.writeAttribute("type", "text/javascript", null);   
  81.             writer.writeAttribute("src", "../js/MyDojo/dojo/dojo.js", null);   
  82.             writer.endElement("script");   
  83.             writer.write("\n");   
  84.             writer.startElement("script", component);   
  85.             writer.writeAttribute("type", "text/javascript", null);   
  86.             writer.writeAttribute("src", "../js/MyDojo/dojo/mydojo.js", null);   
  87.             writer.writeAttribute("djconfig", "isDebug:true, parseOnLoad:true, bindEncoding:'UTF-8', parseWidgets:false, searchIds:['" + clientId + "']", null);   
  88.             writer.endElement("script");   
  89.             writer.write("\n");   
  90.         }   
  91.     }   
  92. }  

以上渲染器中并没有使用完整版的DOJO而是用DOJO的工具类实现了自定义的Mydojo。至于如何实现ingredients参考dojo-release-1.2.3-src\util\buildscripts下的build.bat
这里没有渲染JS脚本，而是把JS脚本放在独立文件中
Ruby代码 复制代码 收藏代码
  1. /*    
  2.  * To change this template, choose Tools | Templates   
  3.  * and open the template in the editor.   
  4.  */   
  5. function lookup(field) {   
  6.     writeloc = field + ":grid";   
  7.     var searchField = document.getElementById(field);   
  8.     if(searchField.value!=''){   
  9.         dojo.xhrGet({   
  10.             url: 'directory.jsp',   
  11.             preventCache: true,   
  12.             load: renderGrid,   
  13.             error: callError,   
  14.             content: {   
  15.                 ajaxreq: true,   
  16.                 input: escape(searchField.value)   
  17.                 }   
  18.         });   
  19.     }   
  20. }   
  21.   
  22. function callError(response, ioArgs) {   
  23.     alert('返回错误');   
  24. }   
  25.   
  26. function renderGrid(response,ioArgs) {   
  27.     comData=null;   
  28.     popStore=null;   
  29.     dataModel=null;   
  30.     layout=null;   
  31.     var isChild = dojo.byId(writeloc).childNodes.length;   
  32.     if(isChild > 0){   
  33.         dojo.byId(writeloc).removeChild(grid.domNode);   
  34.     }   
  35.     var dataCom = response;   
  36.     if(dataCom !=null && dataCom != '')   
  37.         comData = dojo.fromJson(dataCom);   
  38.     else{   
  39.         alert('dataCom is null !');   
  40.         comData = null;   
  41.     }   
  42.     popStore = new dojo.data.ItemFileWriteStore({   
  43.         data:comData  
  44.     });   
  45.     dataModel = new dojox.grid.data.DojoData(null,null,{   
  46.         store: popStore,   
  47.         rowsPerPage:'20',   
  48.         query:{   
  49.             NAME : '*'  
  50.         },   
  51.         sortFields:[{   
  52.             attribute:0,   
  53.             descending:false  
  54.         }]   
  55.     });   
  56.   
  57.     layout = [   
  58.     {   
  59.         type: 'dojox.GridRowView',   
  60.         width: '4px'  
  61.     },   
  62.   
  63.     {   
  64.         cells: [[{   
  65.             name: 'NO',   
  66.             get: getRow,   
  67.             width: 3   
  68.         }]],   
  69.         noscroll: true  
  70.     },   
  71.   
  72.     {   
  73.         cells: [[   
  74.   
  75.         {   
  76.             name: 'PERSONID',   
  77.             field: 4,   
  78.             width:8   
  79.         },   
  80.   
  81.         {   
  82.             name: 'COMMENTER',   
  83.             field: 2,   
  84.             width:8   
  85.         },   
  86.   
  87.         {   
  88.             name: '职务',   
  89.             field: 3,   
  90.             width:8   
  91.         },   
  92.   
  93.         {   
  94.             name: 'LAST UPDATE',   
  95.             field: 0,   
  96.             width:8   
  97.         }   
  98.         ]]   
  99.         }   
  100.     ];   
  101.   
  102.     var thisDate = new Date();   
  103.     var randid = Math.floor(Math.random() * thisDate);   
  104.     var gridid = 'grid'+randid;   
  105.     grid = new dojox.Grid({   
  106.         'id': gridid,   
  107.         'elasticView': 2,   
  108.         'model': dataModel,   
  109.         'structure': layout   
  110.     });   
  111.     dojo.byId(writeloc).appendChild(grid.domNode);   
  112.     grid.render();   
  113. }   
  114.   
  115. function getRow(inRowIndex){   
  116.     return ' ' + inRowIndex;   
  117. }  
电算化会计软件下载 电算化会计软件下载
原创粉丝点击
热门IT博客
淘宝店铺店招图片尺寸淘宝店铺店招图片尺寸
全民奇迹挂机软件全民奇迹挂机软件
手机照片怎么导入mac
xp编程器
readboy平板翻墙路软件
python 字符串方法
如何做好酒店网络销售
vb winsock
在线画画软件
远控王远程控制软件
2017java 笔试题
阿里云域名备案流程
林俊杰小瓶子知乎
如何开设淘宝店铺
有什么二次元软件
知其雄守其雌的翻译
淘宝里金小姐正品代购
通用权限管理数据库
东方财富网python面试
出纳现金日记账软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 得了脊椎炎怎么办 转账输错卡号怎么办 地暖不热怎么办视频 墨镜被刮花了怎么办 秃鹰十字歪怎么办 磁铁没有磁性怎么办 加密u盘打不开怎么办 木地板起泡怎么办 复合地板起泡怎么办 强化地板起泡怎么办 没房子结婚怎么办 计算器自动约分怎么办 数码大师要钱怎么办 会声会影过期了怎么办 毕业论文不合格怎么办 收尘布袋不透气怎么办 前列腺液过多怎么办 采样率不一样怎么办 去以色列怎么办签证 听见鬼笑怎么办 听见鬼哭怎么办 晚上乐器扰民怎么办 尤克里里调音后怎么办 怀孕了害喜怎么办 小提琴拉完后要怎么办 小号嘴拿不下来怎么办 单簧管坏了怎么办 饥荒杀人蜂群怎么办 二胡蟒皮太干怎么办 二胡揉弦时琴动怎么办 怀孕睡不着怎么办 日产风度油耗怎么办 古筝开裂怎么办 古筝后岳山开裂怎么办 水果店没生意怎么办 马蹄生吃了怎么办 风幕柜有水珠怎么办 婴儿有痰咳不出怎么办 香油起泡怎么办 萨克斯生锈了怎么办 埙高音上不去怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里