构建支持AJAX的JSF组件(1)

构建支持AJAX的JSF组件(一)
下面将详细介绍一个标准ＪＳＦ组件的制作过程，其中选用了DOJO的部分JS小部件，例如GRID。其中传递数据的方式采用了JSON格式。
1. AJAX用户界面组件
DirectorySearch_DojoImp.java

package component;import javax.faces.component.UIInput;import javax.faces.component.ValueHolder;public class DirectorySearch_DojoImp extends UIInput implements ValueHolder {    @Override   public String getFamily() {      return "DirectoryFamily";    }}

这里没有在组件内部渲染用户界面而是采用了在Renderer中渲染。
DirectorySearchRenderer.java

package renderer;import java.io.IOException;import javax.faces.component.UIComponent;import javax.faces.context.ExternalContext;import javax.faces.context.FacesContext;import javax.faces.context.ResponseWriter;import javax.faces.render.Renderer;import phaselistener.DataProviderPhListener;/** * * @author Administrator */public class DirectorySearchRenderer extends Renderer {    public DirectorySearchRenderer() {    }    @Override    public void encodeBegin(FacesContext context, UIComponent component) throws IOException {        String clientId = component.getClientId(context);        renderStyle(context, component);        //渲染AJAX脚本        encodeAjaxJavascript(context, clientId + ":grid", component);        //encodeInputField用来渲染核心用户界面元素.        encodeInputField(context, clientId, component);    }    public void renderStyle(FacesContext context, UIComponent component) throws IOException {        ResponseWriter writer = context.getResponseWriter();        writer.write("\n");        writer.startElement("style", component);        writer.writeAttribute("type", "text/css", null);        writer.write("\n");        writer.write("@import '../js/MyDojo/dojo/grid/_grid/Grid.css';\n");        writer.write("@import '../js/MyDojo/dojo/themes/tundra/tundra.css'';\n");        writer.endElement("style");        writer.write("\n");    }    public void encodeInputField(FacesContext context, String clientId, UIComponent component) throws IOException {        // render a standard HTML input field        ResponseWriter writer = context.getResponseWriter();        writer.write("\n");        writer.startElement("p", component);        writer.startElement("input", component);        writer.writeAttribute("type", "text", null);        writer.writeAttribute("id", clientId, "clientId");        writer.writeAttribute("size", "20", null);        writer.writeAttribute("onkeyup", "lookup('" + clientId + "');", null);        writer.endElement("input");        writer.endElement("p");        //同时在渲染一个DIV.<div id = "searchField:table"></div> 此div为table的插入位置//      writer.startElement("div", this);//      writer.writeAttribute("id", clientId + ":table", null);//      writer.endElement("div");        //<div id="commentww" dojotype="dijit.layout.ContentPane" style="width: 600px; height: 300px;        // padding: 0px; font-size:12px;">        //</div>        writer.startElement("div", component);        writer.writeAttribute("id", clientId + ":grid", null);        writer.writeAttribute("dojotype", "dijit.layout.ContentPane", null);        writer.writeAttribute("style", "width: 600px; height: 300px; padding: 0px; font-size:12px;", null);        writer.endElement("div");    }    public void encodeAjaxJavascript(FacesContext context, String clientId, UIComponent component) throws IOException {        ResponseWriter writer = context.getResponseWriter();        ExternalContext extContext = context.getExternalContext();        // render Ajax enabled Javascript only once        if (!extContext.getRequestMap().containsKey("ajaxflag.ajaxScript")) {            extContext.getRequestMap().put("ajaxflag.ajaxScript", Boolean.TRUE);            writer.startElement("script", component);            writer.writeAttribute("type", "text/javascript", null);            writer.writeAttribute("src", DataProviderPhListener.RENDER_SCRIPT_VIEW_ID, null);            writer.endElement("script");            writer.write("\n");            writer.startElement("script", component);            writer.writeAttribute("type", "text/javascript", null);            writer.writeAttribute("src", "../js/MyDojo/dojo/dojo.js", null);            writer.endElement("script");            writer.write("\n");            writer.startElement("script", component);            writer.writeAttribute("type", "text/javascript", null);            writer.writeAttribute("src", "../js/MyDojo/dojo/mydojo.js", null);            writer.writeAttribute("djconfig", "isDebug:true, parseOnLoad:true, bindEncoding:'UTF-8', parseWidgets:false, searchIds:['" + clientId + "']", null);            writer.endElement("script");            writer.write("\n");        }    }}

以上渲染器中并没有使用完整版的DOJO而是用DOJO的工具类实现了自定义的Mydojo。至于如何实现ingredients参考dojo-release-1.2.3-src\util\buildscripts下的build.bat
这里没有渲染JS脚本，而是把JS脚本放在独立文件中

/*  * To change this template, choose Tools | Templates * and open the template in the editor. */function lookup(field) {    writeloc = field + ":grid";    var searchField = document.getElementById(field);    if(searchField.value!=''){        dojo.xhrGet({            url: 'directory.jsp',            preventCache: true,            load: renderGrid,            error: callError,            content: {                ajaxreq: true,                input: escape(searchField.value)                }        });    }}function callError(response, ioArgs) {    alert('返回错误');}function renderGrid(response,ioArgs) {    comData=null;    popStore=null;    dataModel=null;    layout=null;    var isChild = dojo.byId(writeloc).childNodes.length;    if(isChild > 0){        dojo.byId(writeloc).removeChild(grid.domNode);    }    var dataCom = response;    if(dataCom !=null && dataCom != '')        comData = dojo.fromJson(dataCom);    else{        alert('dataCom is null !');        comData = null;    }    popStore = new dojo.data.ItemFileWriteStore({        data:comData    });    dataModel = new dojox.grid.data.DojoData(null,null,{        store: popStore,        rowsPerPage:'20',        query:{            NAME : '*'        },        sortFields:[{            attribute:0,            descending:false        }]    });    layout = [    {        type: 'dojox.GridRowView',        width: '4px'    },    {        cells: [[{            name: 'NO',            get: getRow,            width: 3        }]],        noscroll: true    },    {        cells: [[        {            name: 'PERSONID',            field: 4,            width:8        },        {            name: 'COMMENTER',            field: 2,            width:8        },        {            name: '职务',            field: 3,            width:8        },        {            name: 'LAST UPDATE',            field: 0,            width:8        }        ]]        }    ];    var thisDate = new Date();    var randid = Math.floor(Math.random() * thisDate);    var gridid = 'grid'+randid;    grid = new dojox.Grid({        'id': gridid,        'elasticView': 2,        'model': dataModel,        'structure': layout    });    dojo.byId(writeloc).appendChild(grid.domNode);    grid.render();}function getRow(inRowIndex){    return ' ' + inRowIndex;}

查看更多 下一篇