Create composite component in JSF2

最近在做一个J2EE框架，把一些心得记录下来。下面的例子是框架中messages component的做法，包含了几个技术点，组件中怎么加载css文件，在css中怎么加载图片。记住一点在resources文件下的所有文件夹在JSF2中默认是库名称，如果子文件夹下还有子文件夹，加载资源的时候可以如下写，都是正确的。

<h:outputStylesheet library="commons" name="css/component.common.css" target="head"/> or

<h:outputStylesheet library="commons/css" name="component.common.css" target="head"/>

步骤：

1. 开发环境：

eclipse3.7 + maven3 + jboss7.1 + h2 database

2.技术框架：

JSF2.0 + richface4.0 + EJB3.1 + CDI1.0 + JPA2.0(hibernate实现)

3.pom.xml配置：

     <dependency>
         <groupId>javax.enterprise</groupId>
         <artifactId>cdi-api</artifactId>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>org.jboss.spec.javax.annotation</groupId>
         <artifactId>jboss-annotations-api_1.1_spec</artifactId>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>org.jboss.spec.javax.faces</groupId>
         <artifactId>jboss-jsf-api_2.0_spec</artifactId>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>org.hibernate.javax.persistence</groupId>
         <artifactId>hibernate-jpa-2.0-api</artifactId>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>org.jboss.spec.javax.transaction</groupId>
         <artifactId>jboss-transaction-api_1.1_spec</artifactId>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>org.jboss.spec.javax.ejb</groupId>
         <artifactId>jboss-ejb-api_3.1_spec</artifactId>
         <scope>provided</scope>
      </dependency>

      <dependency>
         <groupId>org.richfaces.ui</groupId>
         <artifactId>richfaces-components-ui</artifactId>
         <version>4.2.1.CR1</version>
        </dependency>
        <dependency>
         <groupId>org.richfaces.core</groupId>
         <artifactId>richfaces-core-impl</artifactId>
         <version>4.2.1.CR1</version>
        </dependency> 

4. 创建resources文件夹在META-INF下，在resources文件夹下的任何文件夹都是库名称，如commons就是库名称，在taglib.xml中必须一致。

   路径：META-INF\resources\commons

5. 创建taglib.xml 在META-INF下. namespace是自己定义的，在调用的时候用。

    <?xml version="1.0"?>
    <facelet-taglib 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/javaeehttp://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd">

    <namespace>http://test.com.cn/test/taglib/commons</namespace>
       <composite-library-name>commons</composite-library-name>
    </facelet-taglib>

6. 创建faces-config.xml在META-INF下.

<?xml version="1.0"?>
<faces-config 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"
        version="2.0">

</faces-config>

7.下面是在commons文件夹下的messages.xhtml

<?xml version="1.0" encoding="utf-8"?>

<ui:composition
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:composite="http://java.sun.com/jsf/composite">
  <composite:interface>
       <composite:attribute name="style" default="" required="false"/>
  </composite:interface>
  <composite:implementation>
   <h:outputStylesheet library="commons" name="css/component.common.css" target="head"/>
      <a4j:outputPanel ajaxRendered="true" layout="block">
  
     <h:panelGroup layout="block" rendered="#{not empty facesContext.maximumSeverity}" style="#{cc.attrs.style}" styleClass="faces-padding-div">
       <div class="faces-msg-box">
          <h:messages errorClass="faces-msg-error" fatalClass="faces-msg-fatal" infoClass="faces-msg-info" warnClass="faces-msg-warn" />
       </div>
     </h:panelGroup>
   </a4j:outputPanel>
  </composite:implementation>
</ui:composition>

.8. component.common.css的路径是resources/commons/css/component.common.css.

   图片路径是resources/commons/images.

 css内容如下:

.faces-msg-error {
    background: #ffffdc url(#{resource['commons:images/msg-error.gif']}) no-repeat scroll 0%;
    color: #f00;
}

.faces-msg-fatal {
    background: #ffffdc url(#{resource['commons:images/msg-fatal.gif']}) no-repeat scroll 0%;
    color: #f00;
}

.faces-msg-info {
    background: #ffffdc url(#{resource['commons:images/msg-info.gif']}) no-repeat scroll 0%;
    color: #15428b;
}

.faces-msg-warn {
    background: #ffffdc url(#{resource['commons:images/msg-warn.gif']}) no-repeat scroll 0%;
    color: #7b5113;
}

.faces-msg-box {
    background-color: #ffffdc;
    padding: 3px;
    border: solid 1px #BED6F8;
    margin:0px;
}

9.调用方式：

xmlns:test="http://test.com.cn/test/taglib/commons"
 

<test:messages/>