开发自定义JSF组件(2) 使用Render渲染器

完整的教材:

  1. 开发自定义JSF组件(1) HelloWorld
  2. 开发自定义JSF组件(2) 使用Render渲染器
  3. 开发自定义JSF组件(3) 使用绑定变量
  4. 开发自定义JSF组件(4) 保存状态与恢复状态
  5. 开发自定义JSF组件(5) 在JSP中用JSF组件

上一节教程中定义的组件,使用组件本身的encodeBegin方法输出了html代码,更好的方法是使用Render类来输出,为什么要单独使用另外一个类来输出html代码呢?这跟mvc设计有关,这里的组件(model)保存了java的各种属性,而输出的视图可以是html、json、xml等等,所以需要使用Render类在model与view之间进行转换,通常我们只需要实现html的render就行了。

我们还是拿第1个教材的HelloWorld源代码进行改造 。


开发环境:

  • Windows 7
  • IntelliJ IDEA 12.1.2
  • jboss-6.1.0.Final
  • JSF 1.2

下面的5个步骤是这个组件的重构过程:

1、 定义组件UIHelloWorld,记住JSF的组件必须继承javax.faces.component.UIComponent或者它的子类。这里UIHelloWorld只是输出一句话,继承javax.faces.component.UIOutput最省事了,与上一节相比,这里去掉了encodeBegin方法,新增了getFamily方法。

public class UIHelloWorld extends UIOutput {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public String getFamily() {
        return "com.regaltec.faces.HelloWorld";
    }
}

2、新建HelloWorldRender类,这个类继承javax.faces.render.Renderer类,需实现其中的encodeBegin、encodeEnd和decode方法,分别用来用来转换HTML和接受HTML值,这里只覆盖了encodeBegin方法。

public class HelloWorldRender extends Renderer {
    @Override
    public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
        UIHelloWorld helloWorld = (UIHelloWorld) component;
        if (StringUtils.isNotBlank(helloWorld.getName())) {
            ResponseWriter writer = context.getResponseWriter();
            writer.write("<div>");
            writer.write(String.format("你好,%s! ", helloWorld.getName()));
            writer.write("</div>");
        }
    }
}

3、上面新建的Render类也必须在faces-config.xml里声明。

<?xml version='1.0' encoding='UTF-8'?>
<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_1_2.xsd" version="1.2">
    <component>
        <component-type>com.regaltec.faces.HelloWorld</component-type>
        <component-class>com.regaltec.faces.component.UIHelloWorld</component-class>
    </component>
    <render-kit>
        <renderer>
            <component-family>com.regaltec.faces.HelloWorld</component-family>
            <renderer-type>com.regaltec.faces.render.HelloWorld</renderer-type>
            <renderer-class>com.regaltec.faces.renderkit.html.HelloWorldRender</renderer-class>
        </renderer>
    </render-kit>
    <application>
        <locale-config>
            <default-locale>zh_CN</default-locale>
            <supported-locale>en_US</supported-locale>
        </locale-config>
        <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
    </application>
</faces-config>

component-family、renderer-type的命名规则可以事先规划好。 

4、修改uicomponent.taglib.xml配置,新增renderer-type节点。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://www.regaltec.com/ida40</namespace>
     <tag>
         <tag-name>helloWorld</tag-name>
         <component>
             <component-type>com.regaltec.faces.HelloWorld</component-type>
             <renderer-type>com.regaltec.faces.render.HelloWorld</renderer-type>
         </component>
     </tag>
</facelet-taglib>

5、根据component-type、component-family、renderer-type这3个组合,可以确定使用那一个Render类作视图的渲染。页面的无需修改,以下是helloWorld.xhtml的源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:ida="http://www.regaltec.com/ida40">
<f:view>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <ida:helloWorld id="welcome" name="世界" />
    </body>
</f:view>
</html>

经过上面的改造后,Component类与Render类各守其职,并对多视图渲染提供了良好的扩展。

下一节我将重构代码,将这个name属性绑定到变量里,毕竟在项目开发中,大部份都是使用变量(表达式)。

以上代码在jboss-6.1.0.Final调试通过,感谢百度云网盘提供源码下载。 

转载于:https://my.oschina.net/zhuzhiou/blog/132118

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值