试着开始开发基于JSF2的Html5组件包

现在许多浏览器都开始支持html5，然而当前的ide编辑环境还不能识别html5的标签，在工作中，有应用html5的需求，想通过开发基于JSF2的Html5组件包，来满足这样的现实需求，实现可复用的html5表现组件。

 

开始试写，第一个标记<h5:doctype/>

 

 

组件包结构如下：

 

 

 

 组件的类文件

 

Java代码

1. package  com.putesoft.jsf.component.html5;  
2.   
3. import  javax.faces.component.UIComponentBase;  
4.   
5. /**  
6.  * 开始于 2010-04-07  
7.  * html5的DOCTYPE的文档类型声明，一个简单的html5标记封装  
8.  * 最后修改于 2010-04-09  
9.  * @author 普特工作室  
10.  * @version 1.0  
11.  */   
12. public   class  Html5Doctype  extends  UIComponentBase {  
13.   
14.     /**  
15.      * 使用组件的类名作为，返回组件的家族标识  
16.      * @return  
17.      */   
18.     @Override   
19.     public  String getFamily() {  
20.         return  Html5Doctype. class .getName();  
21.     }  
22.   
23.   
24.   
25. }  

package com.putesoft.jsf.component.html5;

import javax.faces.component.UIComponentBase;

/**
 * 开始于 2010-04-07
 * html5的DOCTYPE的文档类型声明，一个简单的html5标记封装
 * 最后修改于 2010-04-09
 * @author 普特工作室
 * @version 1.0
 */
public class Html5Doctype extends UIComponentBase {

    /**
     * 使用组件的类名作为，返回组件的家族标识
     * @return
     */
    @Override
    public String getFamily() {
        return Html5Doctype.class.getName();
    }



}

 

组件的标记处理类

 

Java代码

1. package  com.putesoft.jsf.taglib.html5;  
2.   
3. import  com.putesoft.jsf.component.html5.Html5Doctype;  
4. import  com.putesoft.jsf.renderkit.html5.Html5DoctypeRenderer;  
5. import  javax.faces.webapp.UIComponentELTag;  
6.   
7. /**  
8.  * 开始于 2010-04-08  
9.  * 组件的标志处理器类，组件的标记类  
10.  * 衔接代码，让这个组件能在JSP页面上下文中执行，从而钩到其它的相关类  
11.  * 最后修改于 2010-04-09  
12.  * @author 普特工作室  
13.  * @version 1.0  
14.  */   
15. public   class  Html5DoctypeTag  extends  UIComponentELTag {  
16.   
17.     /**  
18.      *   
19.      * 直接使用类的全路径名，作为组件的类型名，  
20.      * 此处是衔接代码，通过此衔接代码，  
21.      * 根据获得的组件名，在faces-config.xml中，找到对应的组件类  
22.      * 然后执行组件的处理逻辑  
23.      * @return  
24.      */   
25.     @Override   
26.     public  String getComponentType() {  
27.         String compontentType = Html5Doctype.class .getName();  
28.         return  compontentType;  
29.     }  
30.   
31.   
32.     /**  
33.      * 直接使用类的全路径名，作为组件的渲染器类型名，  
34.      * 此处是衔接代码，通过此衔接代码，  
35.      * 根据获得的渲染器名，在faces-config.xml中，找到对应的渲染器类  
36.      * 然后执行组件的渲染处理  
37.      * @return  
38.      */   
39.     @Override   
40.     public  String getRendererType() {  
41.         String rendererType = Html5DoctypeRenderer.class .getName();  
42.         return  rendererType;  
43.     }  
44.   
45.   
46.   
47. }  

package com.putesoft.jsf.taglib.html5;

import com.putesoft.jsf.component.html5.Html5Doctype;
import com.putesoft.jsf.renderkit.html5.Html5DoctypeRenderer;
import javax.faces.webapp.UIComponentELTag;

/**
 * 开始于 2010-04-08
 * 组件的标志处理器类，组件的标记类
 * 衔接代码，让这个组件能在JSP页面上下文中执行，从而钩到其它的相关类
 * 最后修改于 2010-04-09
 * @author 普特工作室
 * @version 1.0
 */
public class Html5DoctypeTag extends UIComponentELTag {

    /**
     * 
     * 直接使用类的全路径名，作为组件的类型名，
     * 此处是衔接代码，通过此衔接代码，
     * 根据获得的组件名，在faces-config.xml中，找到对应的组件类
     * 然后执行组件的处理逻辑
     * @return
     */
    @Override
    public String getComponentType() {
        String compontentType = Html5Doctype.class.getName();
        return compontentType;
    }


    /**
     * 直接使用类的全路径名，作为组件的渲染器类型名，
     * 此处是衔接代码，通过此衔接代码，
     * 根据获得的渲染器名，在faces-config.xml中，找到对应的渲染器类
     * 然后执行组件的渲染处理
     * @return
     */
    @Override
    public String getRendererType() {
        String rendererType = Html5DoctypeRenderer.class.getName();
        return rendererType;
    }



}

 

组件渲染器类

 

Java代码

1. package  com.putesoft.jsf.renderkit.html5;  
2.   
3. import  java.io.IOException;  
4. import  javax.faces.component.UIComponent;  
5. import  javax.faces.context.FacesContext;  
6. import  javax.faces.context.ResponseWriter;  
7. import  javax.faces.render.Renderer;  
8.   
9. /**  
10.  * 开始于 2010-04-10  
11.  * HTML5的文档类型渲染器  
12.  * 最后修改于 2010-04-10  
13.  * @author 普特工作室  
14.  * @version 1.0  
15.  */   
16. public   class  Html5DoctypeRenderer  extends  Renderer {  
17.   
18.   
19.     /**  
20.      * 编码组件，渲染成Html代码  
21.      * @param context  
22.      * @param component  
23.      * @throws IOException  
24.      */   
25.     @Override   
26.     public   void  encodeBegin(FacesContext context, UIComponent component)  throws  IOException {  
27.         //从faces上下文环境中获得响应书写器   
28.         ResponseWriter writer = context.getResponseWriter();  
29.         //直接把字符串写出，不进行字符转义处理   
30.         writer.write("<!DOCTYPE HTML>" );  
31.     }  
32.   
33.   
34.   
35.   
36. }  

package com.putesoft.jsf.renderkit.html5;

import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.Renderer;

/**
 * 开始于 2010-04-10
 * HTML5的文档类型渲染器
 * 最后修改于 2010-04-10
 * @author 普特工作室
 * @version 1.0
 */
public class Html5DoctypeRenderer extends Renderer {


    /**
     * 编码组件，渲染成Html代码
     * @param context
     * @param component
     * @throws IOException
     */
    @Override
    public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
        //从faces上下文环境中获得响应书写器
        ResponseWriter writer = context.getResponseWriter();
        //直接把字符串写出，不进行字符转义处理
        writer.write("<!DOCTYPE HTML>");
    }




}

 

标记库文件

 

Xml代码

1. <? xml   version = "1.0"   encoding = "UTF-8" ?>   
2. < taglib   
3.     version = "2.1"   
4.     xmlns = "http://java.sun.com/xml/ns/javaee"   
5.     xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"   
6.     xsi:schemaLocation = "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd" >   
7.       
8.       
9.     < description > 用于JSF2的，html5通用标记的JSF封装 </ description >   
10.     < tlib-version > 1.0 </ tlib-version >   
11.     < short-name > jsf_html5 </ short-name >   
12.     < uri > http://putesoft.com/jsf_html5 </ uri >   
13.       
14.       
15.     < tag >   
16.         < description > Html5的文档类型声明封装 </ description >   
17.         < name > doctype </ name >   
18.         < tag-class >   
19.             com.putesoft.jsf.taglib.html5.Html5DoctypeTag  
20.         </ tag-class >   
21.     </ tag >   
22.       
23. </ taglib >   

<?xml version="1.0" encoding="UTF-8"?>
<taglib
    version="2.1"
    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-jsptaglibrary_2_1.xsd">
    
    
    <description>用于JSF2的，html5通用标记的JSF封装</description>
    <tlib-version>1.0</tlib-version>
    <short-name>jsf_html5</short-name>
    <uri>http://putesoft.com/jsf_html5</uri>
    
    
    <tag>
        <description>Html5的文档类型声明封装</description>
        <name>doctype</name>
        <tag-class>
            com.putesoft.jsf.taglib.html5.Html5DoctypeTag
        </tag-class>
    </tag>
    
</taglib>

 

 

组件库文件

 

Java代码

1. <?xml version= "1.0"  encoding= "UTF-8" ?>  
2.   
3. <!--  
4.     Document   : faces-config.xml  
5.     Created on : 2010 年 4 月 8 日, 下午 5 : 09   
6.     Author     : 普特工作室  
7.     Description: JSF组件库的组件注册  
8. -->  
9.   
10. <faces-config  
11.     xmlns="http://java.sun.com/xml/ns/javaee"   
12.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
13.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"   
14.     version="2.0" >  
15.   
16.   
17.   
18.     <component>  
19.         <description>Html5的文档类型声明DOCTYPE</description>  
20.         <component-type>  
21.             com.putesoft.jsf.component.html5.Html5Doctype  
22.         </component-type>  
23.         <component-class >  
24.             com.putesoft.jsf.component.html5.Html5Doctype  
25.         </component-class >  
26.     </component>  
27.   
28.   
29.     <render-kit>  
30.         <renderer>  
31.             <component-family>  
32.                 com.putesoft.jsf.component.html5.Html5Doctype  
33.             </component-family>  
34.             <renderer-type>  
35.                 com.putesoft.jsf.renderkit.html5.Html5DoctypeRenderer  
36.             </renderer-type>  
37.             <renderer-class >  
38.                 com.putesoft.jsf.renderkit.html5.Html5DoctypeRenderer  
39.             </renderer-class >  
40.         </renderer>  
41.     </render-kit>  
42.   
43.   
44. </faces-config>  

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

<!--
    Document   : faces-config.xml
    Created on : 2010年4月8日, 下午5:09
    Author     : 普特工作室
    Description: JSF组件库的组件注册
-->

<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">



    <component>
        <description>Html5的文档类型声明DOCTYPE</description>
        <component-type>
            com.putesoft.jsf.component.html5.Html5Doctype
        </component-type>
        <component-class>
            com.putesoft.jsf.component.html5.Html5Doctype
        </component-class>
    </component>


    <render-kit>
        <renderer>
            <component-family>
                com.putesoft.jsf.component.html5.Html5Doctype
            </component-family>
            <renderer-type>
                com.putesoft.jsf.renderkit.html5.Html5DoctypeRenderer
            </renderer-type>
            <renderer-class>
                com.putesoft.jsf.renderkit.html5.Html5DoctypeRenderer
            </renderer-class>
        </renderer>
    </render-kit>


</faces-config>

 

组件在Jsp文件中使用

 

Html代码

1. < %@page  contentType = "text/html"   pageEncoding = "UTF-8" % >   
2.   
3. < %@taglib  prefix = "f"   uri = "http://java.sun.com/jsf/core" % >   
4. < %@taglib  prefix = "h"   uri = "http://java.sun.com/jsf/html" % >   
5. < %@taglib  prefix = "h5"   uri = "http://putesoft.com/jsf_html5"  % >   
6.   
7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
8.     "http://www.w3.org/TR/html4/loose.dtd">   
9.   
10. < %--  
11.     This file is an entry point for JavaServer Faces application.  
12. --%>   
13. < f:view >   
14.     < h5:doctype />   
15.     < html >   
16.         < head >   
17.             < meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" />   
18.             < title > JSP Page </ title >   
19.         </ head >   
20.         < body >   
21.             < h1 > < h:outputText   value = "JavaServer Faces" /> </ h1 >   
22.         </ body >   
23.     </ html >   
24. </ f:view >   

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="h5" uri="http://putesoft.com/jsf_html5" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%--
    This file is an entry point for JavaServer Faces application.
--%>
<f:view>
    <h5:doctype/>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>JSP Page</title>
        </head>
        <body>
            <h1><h:outputText value="JavaServer Faces"/></h1>
        </body>
    </html>
</f:view>

 

在tomcat6.0.20上部署运行，成功。