JSF2自定义组件编程系列 第二部分

 

第二部分 有独立Renderer的Noncomposite Component

<verse>

  通常一个UI Component包含了两个部分:Behavior和Renderer.两者最好能够分别实现，UIComponent类用来实现Behavior，比如处理事件，通过EL绑定属性等等。专门实现一个Renderer类来负责Encoding和Decoding。Encoding指的是生成可以在客户端显示的标记语言，比如html等，Decoding用来将客户端传来的请求（通常以某种标记语言风格）转换成Java变量。

  在进入下一个更加完善一点的UI Component编程之前，先来看一些基本概念。在前面的例子中，HtmlHelloWorld继承了UIComponentBase类，需要实现getFamily方法。该方法返回的字符串用来表示UI Component的种类，比如UIInput属于javax.faces.Input，而UICommand属于javax.faces.Command.在faces-config.xml中，我们会将UIComponent和Renderer配对，比如Primefaces中的配置：

<render-kit>

  <renderer>

    <component-family>javax.faces.Output</component-family>

    <renderer-type>javax.faces.Head</renderer-type>

    <renderer-class>org.primefaces.renderkit.HeadRenderer</renderer-class>

  </renderer>

</render-kit>

 

  有了这种配对关系，我们就可以方便的指定哪一种UIComponent使用哪一个Renderer。作为自定义UI Component，我们可以任意用一个字符串来标志它的UIComponent类的family，如果没有Renderer（也就意味着不需要在faces-config.xml中配置render-kit），可以简单的返回null，第一部分例子就是这样做的。

  现在来开发一个helloworld2 tag，和前面的功能一样，但是多了一个Renderer负责渲染。首先是UIComponent HtmlHelloWorld2.java的代码:

package com.freebird.component;

 

import javax.faces.component.UIComponentBase;

import javax.faces.context.ResponseWriter;

import java.io.IOException;

import javax.faces.context.FacesContext;

import java.util.Date;

 

public class HtmlHelloWorld2 extends UIComponentBase {

 

  @Override

  public String getFamily() {

    return "helloworld2";

  }

 

}

 

  注意getFamily返回"helloworld2"字符串，后面要用到。然后实现Renderer类HtmlHelloWorld2Renderer.java:

package com.freebird.renderer;

 

import javax.faces.render.Renderer;

import javax.faces.context.ResponseWriter;

import java.io.IOException;

import javax.faces.component.UIComponent;

import javax.faces.context.FacesContext;

import java.util.Date;

 

/**

 * Describe class HtmlHelloWorld2Renderer here.

 *

 *

 * Created: Tue Dec 28 10:46:08 2010

 *

 * @author <a href="mailto:chenshu@csdesktop">chenshu</a>

 * @version 1.0

 */

public class HtmlHelloWorld2Renderer extends Renderer {

 

  @Override

  public void encodeBegin(FacesContext context, UIComponent component) throws IOException {

 

  }

 

  @Override

  public void encodeChildren(FacesContext context, UIComponent component) throws IOException {

 

  }

 

  @Override

  public void encodeEnd(FacesContext context, UIComponent component) throws IOException {

    //String clientId = component.getClientId(context);

    //char sep = UINamingContainer.getSeparatorChar(context);

    ResponseWriter writer = context.getResponseWriter();

    writer.startElement("div", component);

    writer.writeAttribute("style", "color : red", null );

    writer.writeText("HelloWorld! today is: " + new java.util.Date(), null);

    writer.endElement("div");

  }

}

 

  现在添加配置信息到helloworld.taglib.xml文件：

  <tag>

    <tag-name>helloworld2</tag-name>

    <component>

      <component-type>HtmlHelloWorld2</component-type>

      <renderer-type>HtmlHelloWorld2Renderer</renderer-type>

    </component>

  </tag>

  最后添加配置信息到faces-config.xml文件：

  <component>

    <component-type>HtmlHelloWorld2</component-type>

    <component-class>com.freebird.component.HtmlHelloWorld2</component-class>

  </component>

  <render-kit>

    <renderer>

      <component-family>helloworld2</component-family>

      <renderer-type>HtmlHelloWorld2Renderer</renderer-type>

      <renderer-class>com.freebird.renderer.HtmlHelloWorld2Renderer</renderer-class>

    </renderer>

  </render-kit>

 

  编译打包吧，可以使用了。