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

pute2000

关注

原创最新推荐文章于 2021-07-02 21:14:55 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

[JSF] JSF & HTML5 高级程序设计 (英文版) ☆ 资源说明：☆ [Apress] JSF & HTML5 高级程序设计 (英文版) [Apress] Pro JSF and HTML5 Building Rich Internet Components (E-Book) ☆ 图书概要：☆ Pro JSF and HTML5 shows you how to leverage the full potential of JavaServer Faces (JSF) and HTML5. This book is for Java developers who aspire to build sophisticated, enterprise-grade web experiences with HTML5-enabled JSF. Written by JSF experts and verified by established community figures, this book will serve as your primary resource, helping you build or integrate well-designed HTML5-enabled JSF components into your rich internet applications. ☆ 出版信息：☆ [作者信息] Hazem Saleh, Allan Lykke Christensen, Zubin Wadia [出版机构] Apress [出版日期] 2013年11月24日 [图书页数] 412页 [图书语言] 英语 [图书格式] PDF 格式立即下载

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

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

组件包结构如下：

组件的类文件

Java代码

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();
}
}

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代码

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;
}
}

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代码

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>" );
}
}

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代码

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

<?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代码

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

<?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代码

< %@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 >

<%@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上部署运行，成功。