构建支持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;
}