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