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

序言

  本文起因是因为使用PrimeFaces，既惊叹于炫酷的各种UI Components，又因为遇到困难但是社区很少支持而苦恼。回想使用JSF的这些年，从ICEFaces到PrimeFaces，JSF的开源社区都忙于商业支持，而很少对free的用户进行友好及时的支持。
  <<The Complete Reference-Java Server Faces2.0>>一书提到如果有别人已经造好的车轮子，就没有必要自己造车轮。是的，一般情况下，都是这样。但是在JSF的世界里，在我们很难获得开源社区的支持的现实下，自己制造车轮子，一方面为了自己用，另一方面也是为了更好的理解JSF和其他开源库，第三方的JSF库有问题自己能够解决，而不必依赖别人。
  本文所有代码采用技术：Maven3,Emacs和JDEE(你也可以使用其他文本编辑器如VI)，JSF选用标准实现Mojarra 2.0.3-b03,GlassFishV3.0.1,在UBuntu10.10下开发。
  本文参考资料主要来自<<The Complete Reference-Java Server Faces2.0>>一书，以及http://www.mkyong.com/jsf2/custom-tags-in-jsf-2-0

说明

  为了和主流JSF的术语一致，有些我采用英文而不翻译。
UIComponent                 JSF tag后台对应的类
UI Component                JSF tag以及后台对应的所有类和配置文件形成的整体
Composite Component    JSF2提供了Composite Component的创建方法，避免了通过Java代码生成html标记的繁琐，只需要基于现有的JSF tag进行组合即可。但是为了学习JSF的内部机制，还是很有必要编写传统的Non Composite Component。

第一部分 简单的Noncomposite Component

运行mvn archetype:generate 出现很多jsf的模板工程选择,但是没有一个是我很满意的，所以只能自己创建一个简单的jar包项目。
mvn archetype:generate -DgroupId=com.freebird -DartifactId=jsfex -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
好，现在Maven创建了一个工程，目录为jsfex,我修改pom.xml如下：
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.freebird</groupId>
  <artifactId>jsfex</artifactId>
  <packaging>jar</packaging>
  <version>1.0</version>
  <name>jsfex</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>javax</groupId>
      <artifactId>javaee-web-api</artifactId>
      <version>6.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>ch.qos.logback</groupId>
      <artifactId>logback-classic</artifactId>
      <version>0.9.27</version>
    </dependency>
  </dependencies>
</project>

注意，在src/main/resources/建立META-INF目录，把helloworld.taglib.xml文件放在里面，打包的时候会自动放到target目录下jar文件内的META-INF目录下面。helloworld.taglib.xm文件内容：
<?xml version='1.0' encoding='UTF-8'?>
<facelet-taglib xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd" version="2.0">
  <namespace>http://com.freebird/jsfex</namespace>
  <tag>
    <tag-name>helloworld</tag-name>
    <component>
      <component-type>HtmlHelloWorld</component-type>
    </component>
  </tag>
</facelet-taglib>

再放入faces-config.xml文件，内容如下：
<?xml version="1.0" encoding="utf-8"?>
<faces-config version="2.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
  <component>
    <component-type>HtmlHelloWorld</component-type>
    <component-class>com.freebird.component.HtmlHelloWorld</component-class>
  </component>
</faces-config>

据说annotation可以避免在faces-config.xml文件中配置compoent信息，但是我只在代码写在web应用程序中的时候成功过，当将我的tag独立打包的时候，总是提示找不到类。这个解决方案可能通过下面这篇文章解决，我没有试过，提供一个URL地址：
http://ocpsoft.com/opensource/create-common-facelets-jar/

现在实现UIComponent类,代码如下:

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;

/**
  * Describe class HtmlHelloWorld here.
  *
  *
  * Created: Mon Dec 27 14:39:47 2010
  *
  * @author <a href="mailto:chenshu@csdesktop">chenshu</a>
  * @version 1.0
  /
public class HtmlHelloWorld extends UIComponentBase {

  @Override
  public String getFamily() {
    return null;
  }

  @Override
  public void encodeAll(FacesContext context) throws IOException {
    ResponseWriter writer = context.getResponseWriter();
    writer.startElement("div", this);
    writer.writeAttribute("style", "color : red", null );
    writer.writeText("HelloWorld! today is: " + new java.util.Date(), null);
    writer.endElement("div");
  }

}



好了，现在把这个jar包放到一个JSF2的应用中试试看。这里不再介绍如何编写JSF2应用程序，已经超出本文范围。用Maven编写一个JSF2的应用程序又需要不少步骤，因为我没有发现我喜欢的模板，得自己从头定制，我使用的是PrimeFaces,MyBatis,将来还要用Spring3.会在另外的文章中介绍。
首先注册自己的jar包，用如下命令：
mvn clean install
mvn install:install-file -Dfile=target/jsfex-1.0.jar -DgroupId=com.freebird -DartifactId=jsfex -Dversion=1.0 -Dpackaging=jar

在需要使用的web应用程序中只需要在pom.xml中加入下面的配置：
    <dependency>
      <groupId>com.freebird</groupId>
      <artifactId>jsfex</artifactId>
      <version>1.0</version>
    </dependency>

facelets页面上如下使用：
<html...
xmlns:cs="http://com.freebird/jsfex"/>
...
<h:form>
  ...
  <cs:helloworld/>
  ...
</h:form>

编译web程序部署后，页面显示效果：
HelloWorld! today is: Mon Dec 27 20:06:10 CST 2010

 

未完，待续