试着开始开发基于JSF2的Html5组件包
现在许多浏览器都开始支持html5，然而当前的ide编辑环境还不能识别html5的标签，在工作中，有应用html5的需求，想通过开发基于JSF2的Html5组件包，来满足这样的现实需求，实现可复用的html5表现组件。开始试写，第一个标记<h5:doctype/>
组件包结构如下：
http://dl.iteye.com/upload/attachment/232771/ea86b808-1e74-3825-8e7d-1bc37ed91b88.jpg
组件的类文件
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.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.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 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"?><!-- 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文件中使用
<%@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上部署运行，成功。
完整的JSF2的Html5组件包下载
页:
[1]