当前页面: 开发资料首页 → Java 专题 → 如何创建你自己的JSF组件

如何创建你自己的JSF组件

摘要: 如何创建你自己的JSF组件

</td> </tr> <tr> <td height="35" valign="top" class="ArticleTeitle">

程序最终效果图：

如何创建你自己的JSF组件(有删改）原文请看 How To Create Your Own Java Server Faces Components

介绍

企业JSF是一种基于组件方法构建用户界面的技术，它使用UI组件作为构建块简化开发，能大量减少代码的书写，并且允许同样的组件在不同项目中使用。

关于组件我们能说什么呢? Sun 的JSF参考实现只提供了很少几个普通组件。开源的JSF实现也没有提供的更多。

写自定义JSF UI组件容易吗？Sun's J2EE 指南提供了对这个主题的一段专门论述，在这部分里讨论了一个Map组件的例子，并给出了在组件开发过程中你必须遵守的总的原则。然而，这个例子对刚开始开发组件的人来说似乎太难了。它给出了总的原则，但是对你开发自己具体的组件没有给出足够详细的信息.

我们这个指南专注于填补这个缺口。它采用一步一步的方法，并且每一步非常地容易了解。提供的例子并没有覆盖组件开发的各个方面，但对于了解组件开发的概念是一个非常好的开始。

这个指南由七部分组成。每一步增加一些新的代码到前一步的例子里。指南包含的代码描绘了每一步的结果。如果你感到迷惑，你可以把你的结果与这些结果比较，同样，为了测试它如何工作，你也可以增加一些额外功能到你的代码里。如果发生了混乱，你可以将指南包含的代码替换你现在的代码，而继续下一步。

指南的源代码分开放进了七个文件夹中，它们的名字是Step1, Step2, Step3, Step4,Step5, Step6, and Step7. 每一个文件夹仅仅包含一个名做”ticker”子文件夹. 这个子文件夹包含了能正常运行的例子，它描绘这个特殊步骤的结果。加上一个名为Step0的文件夹，它包含了JSF项目的基本构架。

Step 1: 组件基础

在第一步骤中，我们将下面代码创建为一个组件。

Hello JSF Component

JSF 页面的代码将是：

Hello JSF Component

让我们开始创建标记库定义文件，打开WEB-INF 文件夹并创建一个 “ticker.tld” 文件，它包含下列代码:

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

taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"

"http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">

1.0

1.2

http://jsftutorials.com/

ticker

ticker.TickerTag

<body-content>JSP</body>

我们声明了一个名做“ticker”的新标记并指定标记的类文件为ticker.TickerTag。创建标记的类文件TickerTag.java,它包含下列代码：

package ticker;

import javax.faces.component.UIComponent;

import javax.faces.webapp.UIComponentTag;

public class TickerTag extends UIComponentTag{

public void release() {

// the super class method should be called

super.release();

}

protected void setProperties(UIComponent component) {

// the super class method should be called

super.setProperties(component);

}

public String getComponentType() {

return "ticker";
}

public String getRendererType() {

// null means the component renders itself

return null;

}

类TickerTag 处理标记属性。按照命名惯例，这样的类有一个后缀“Tag“。类TickerTag 继承 UIConponentTag 并实现四个方法。

方法getComponentType() 返回组件类型的名称。在faces-config文件中我们将定义这种类型的类。

方法getRendererType()返回组件绘制器的名称。如果这个方法返回null, 它的意思是这个组件没有绘制器，组件将绘制它自己。

方法release()释放在执行这个标记处理器期间分配的任何资源。为了重新设置属性值我们将调用这个方法。 release() 方法将调用父类的release() 方法。

最后，使用方法setProperties(UIComponent component)传速JSP页面的属性值到组件的绘制器。可以使用JSP表达式语言为标记的属性值赋值，当然这也是通过setProperties 方法。

现在让我们定义在上面声明组件类型，打开 WEBINF/faces-config.xml 文件并放入下面代码：

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

faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"

"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">

ticker

ticker.UITicker

我们已经把类ticker.UITicker 的组件类型定义为“ticker” 类型。按照命名惯例，这样的类以“UI”前缀开始，组件类提供了一个绘制用户接口，存贮或恢复状态并处理用户输入。用下面的内容创建 tickerUITicker 类：

package ticker;

import java.io.IOException;

import javax.faces.component.UIOutput;

import javax.faces.context.FacesContext;

import javax.faces.context.ResponseWriter;

public class UITicker extends UIOutput {

public void encodeBegin(FacesContext context) throws IOException {

ResponseWriter writer = context.getResponseWriter();

writer.startElement("div", this);

}

public void encodeEnd(FacesContext context) throws IOException {

ResponseWriter writer = context.getResponseWriter();

writer.endElement("div");

}

因为我们的自定义组件没有提供任何用户输入,我们继承了类UIOutput。 UITicker 类实现两个方法 encodeBegin(FacesContext context)和 encodeEnd(FacesContext context)。第一个方法编码开始标记；第二个方法编码结束标记。

然而，如果你的标记没有包含主体, 我们推荐使用encodeEnd(FacesContext context)方法编码一切。

现在让我们创建我们要使用自定义标记的页面。这个页面应该看起来象下面这样：

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib uri="http://jsftutorials.com/" prefix="d" %>

<head>

Show Custom Component

</head>

<body>

Hello JSF Component

</body>

有两点重要的。第一就是URI 属性。许多人认为这个属性必须参考到一个已存在的URL, 但这不完全正确。一个URI 不同于URL. 这个属性的目的是定义一个唯一的字符串以区别于其它的特殊的标记库。

第二个重要的是使用了包围普通的文本。当绘制JSF组件时，它只能包含JSF组件，这样在这个层次的任何内容必须是JSF组件。

Step 2: 增加简单的属性(以下内容请下载）

function TempSave(ElementID) { CommentsPersistDiv.setAttribute("CommentContent",document.getElementById(ElementID).value); CommentsPersistDiv.save("CommentXMLStore"); } function Restore(ElementID) { CommentsPersistDiv.load("CommentXMLStore"); document.getElementById(ElementID).value=CommentsPersistDiv.getAttribute("CommentContent"); } </td> </tr> <tr>

↑返回目录
前一篇: jsf在bean的构造函数中访问数据库
后一篇: 使用JSF和MyFaces实现文件上载