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

本节将实现一个HtmlInput tag，仍然是Noncomposite Component。接受用户的输入，点击按钮后，会显示用户输入的信息。有朋友要看效果图，我也想show一下，可是图片上传失败。在这个系列文章结束的时候，我会上传我的代码。

  基本流程是，用户在初始页面上输入数据，点击按钮后，一般采用PostBack的方法将数据传递到JSF的 Serverlet，在后台的Renderer的decode方法内部通过 FacesContext.getExternalContext().getRequestParameterMap()获取Map对象，然后通过 key去查找用户的输入数据。key是什么？这里采用clientIdValue:InputField的格式。
   需要解释一下ClientId,JSF定义了一个规则，为了知道是哪一个Tag，程序员可以通过下面的方法在页面初始化的时候输出ClientId到客户端：（实际上一般都是赋给了HTML tag的 name属性)

writer.writeAttribute("name", clientIdValue, "clientId");//第三个参数必须是"clientId"，是JSF内部使用的。

  然后当客户端提交数据后，UIComponent可以通过调用成员函数getClientId(context)获得这个clientIdValue。在我这个例子里面，我在页面初始化的时候将从调用component.getClientId()或得clientIdValue并输出到客户端，用来标志我的HtmlInput tag，然后在下次客户提交的时候拿回来。但是由于我的HtmlInput tag内部有三个子tag，一个输入，一个按钮，一个输出，对于前两个，也需要ClientId标志它们，我使用了父ClientIdValue+区分字符+子tag名称的做法。默认区分字符是:。因此，当获取到HtmlInput tag的ClientId后，拼接出输入子tag的ClientId："ClientIdValue:InputField"，将其作为key从map中检索用户填入的数据。所以ClientId对于检索输入数据非常重要，要想能检索到，你必须按照JSF的规则先在初始化的时候给需要的tag设置ClientId，以后才能拿回来作为key从Map中使用。

  区分字符是可以修改的，通过在web.xml文件中配置 context-param下的javax.faces.SEPARATOR_CHAR.这个以后用到CSS的时候再说。
现在秀一下代码，Renderer的代码：
package com.freebird.renderer;

import com.freebird.component.HtmlInput;
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 javax.faces.component.UINamingContainer;
import java.util.Map;


/**
  * Describe class HtmlInputRenderer here.
  *
  *
  * Created: Wed Dec 29 12:14:24 2010
  *
  * @author <a href="mailto:chenshu@csdesktop">chenshu</a>
  * @version 1.0
  /
public class HtmlInputRenderer extends Renderer {

  public void decode(FacesContext context, UIComponent component) {
    Map requestMap = context.getExternalContext().getRequestParameterMap();
    String clientId = component.getClientId(context);
    char sep = UINamingContainer.getSeparatorChar(context);
    String symbol = ((String) requestMap.get(clientId + sep + "inputfield"));
    HtmlInput myComponent = (HtmlInput)component;
    myComponent.setSubmittedValue(symbol);
  }

  @Override
  public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
    String clientId = component.getClientId(context);
    char sep = UINamingContainer.getSeparatorChar(context);
    encodeInputField(context, clientId + sep + "inputfield",component);
    encodeSubmitButton(context, clientId + sep + "submit",component);
    encodeOutputField(context,component);
  }

  private void encodeInputField(FacesContext context, String clientId, UIComponent component) throws IOException {
    // Render a standard HTML input field
    ResponseWriter writer = context.getResponseWriter();
    writer.startElement("input", component);
    writer.writeAttribute("type", "text", null);
    writer.writeAttribute("name", clientId, "clientId");
    HtmlInput myComponent = (HtmlInput)component;
    String value = (String)myComponent.getSubmittedValue();
    if (value != null) {
      writer.writeAttribute("value", value, "value");
    }
    writer.writeAttribute("size", "6", null);
    writer.endElement("input");
  }


  private void encodeSubmitButton(FacesContext context, String clientId , UIComponent component) throws IOException {
    // render a submit button
    ResponseWriter writer = context.getResponseWriter();
    writer.startElement("input", component);
    writer.writeAttribute("type", "Submit", null);
    writer.writeAttribute("name", clientId, "clientId");
    writer.writeAttribute("value", "Click Me!", null);
    writer.endElement("input");
  }

  private void encodeOutputField(FacesContext context,UIComponent component) throws IOException {
    ResponseWriter writer = context.getResponseWriter();
    String hellomsg = (String) component.getAttributes().get("value");
    writer.startElement("p", component);
    writer.writeText("You entered: " + hellomsg, null);
    writer.endElement("p");
  }
}

UIComponent的代码，HtmlInput类仅仅继承了UIInput类，所以自然拥有了getFamily，get/setSubmittedValue方法的实现。
package com.freebird.component;

import javax.faces.component.UIInput;

/*
  * Describe class HtmlInput here.
  *
  *
  * Created: Wed Dec 29 11:43:18 2010
  *
  * @author <a href="mailto:chenshu@csdesktop">chenshu</a>
  * @version 1.0
  /
public class HtmlInput extends UIInput {

}

现在看一下两个配置文件:
faces-config.xml中添加

  <component>
    <component-type>HtmlInput</component-type>
    <component-class>com.freebird.component.HtmlInput</component-class>
  </component>
  <render-kit>
    <renderer>
      <component-family>javax.faces.Input</component-family>
      <renderer-type>HtmlInputRenderer</renderer-type>
      <renderer-class>com.freebird.renderer.HtmlInputRenderer</renderer-class>
    </renderer>
  </render-kit>

helloworld.taglib.xml中添加
  <tag>
    <tag-name>htmlinput</tag-name>
    <component>
      <component-type>HtmlInput</component-type>
      <renderer-type>HtmlInputRenderer</renderer-type>
    </component>
  </tag>


在web应用程序中使用该tag很简单，仅仅是一行：
<cs:htmlinput/>

下一部分将转入开发Composite Component。