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

 

未完,待续

 

 


你可能感兴趣的:(jsf2)