使用 JavaServer Faces 构建 Apache Geronimo 应用程序，第 2 部分: 在 JavaServer Faces 中使用 Tomahawk

核心提示：本教程是分 5 部分的教程系列的第 2 部分，本教程讲解 Apache Tomahawk，使用 JavaServer Faces 构建 Apache Geronimo 应用程序，第 2 部分: 在 JavaServer Faces 中使用 Tomahawk，在这个系列的 第 1 期 中，介绍了 Java™S

本教程是分 5 部分的教程系列的第 2 部分。本教程讲解 Apache Tomahawk。在这个系列的

第 1 期 中，介绍了 Java™Server Faces™（JSF），并在 Apache Geronimo 上构建和成功地部署了一个简单的 JSF 应用程序。JSF 是一种基于 Java 的新框架，它使 Java Platform, Enterprise Edition（Java EE）应用程序图形用户界面（GUI）的构建工作变得更为容易。现在将研究 Apache Tomahawk（它提供了几个定制的 100% 与 JSF 兼容的组件），并学习如何将它集成到应用程序来改进界面。

开始之前

本教程向 Java 程序员讲解如何使用 JSF 组件构建高度交互性的部署在 Apache Geronimo 上的 Java EE 应用程序。本教程假设读者将使用 Eclipse IDE 作为开发平台。

关于本教程

本教程讲解 Apache Tomahawk，这是一套可以改进 JSF 应用程序界面的补充组件。我们将添加一些输入验证器和其他输入组件，从而进一步开发开发者论坛注册页面的前端。

关于本系列

本教程是关于使用 JSF 构建 Apache Geronimo 应用程序的分五部分的教程系列的第 2 部分。整个系列教程包括以下几个部分：

第 1 部分：使用 Eclipse 和 Apache MyFaces Core 构建基本的应用程序 介绍如何使用 JSF 标准的 Apache MyFaces 实现以及 Geronimo（一种也是来自 Apache 的免费应用服务器）。这个教程讲解如何使用 Eclipse IDE 的 Web Tool Platform（WTP）来构建 JSF 应用程序。

第 2 部分：在 JavaServer Faces 中使用 Tomahawk 展示如何在 Geronimo 应用程序中集成 Apache Tomahawk。Tomahawk 提供了几个与 JSF 100% 兼容的定制组件。

第 3 部分：在 JavaServer Faces 中使用 ajax4jsf 演示如何使用 Sun 的免费开放源码框架 ajax4jsf 使 Geronimo 应用程序获得 Asynchronous JavaScript + XML（Ajax）功能。

第 4 部分：使用 ADF Faces 扩展 JSF 讲解怎样将 ADF Faces 中的组件集成到 Geronimo 应用程序中。Oracle 的 ADF Faces 是构建于 JSE 之上的一组非常丰富的 UI 组件（它是用 Trinidad 这个名称捐献给 Apache 的代码的一部分）。

第 5 部分：将 JSF 应用程序与 Spring 集成 展示如何将 JSF 应用程序与 Spring 框架集成。Spring 是一个流行的框架，它使 Geronimo 开发者能更容易地构建 Java EE 应用程序。

系统需求

为了学习本教程，需要有下列工具：

Geronimo，Apache 的 Java EE 服务器项目。根据需要，Geronimo 提供 Tomcat 和 Jetty 两种风格。我们采用的是 Jetty 风格（1.1 版），因为它小一点儿。

MyFaces，Apache 的 JSF 实现。请从 Apache 下载核心版本（不带 Tomcat）。本教程中使用的版本是 1.1.3 版。

Tomahawk，它提供用于 MyFaces 的额外组件和输入验证器，同时与 JSF 100% 兼容。

Eclipse，这是一个可支持大量语言和平台的可扩展开放源码 IDE。

Eclipse Web Tools Platform（WTP），它给 Eclipse 添加了对 XML 和 JavaScript 编辑的支持以及对 JSF 的基本支持。

将 Java 1.4 或更新版本 安装到您的系统中。Eclipse 二进制文件中带有自己的 Java 运行时，但 Geronimo 和 MyFaces 则没有（带运行时会使下载归档文件的尺寸显著变大）。在本教程中，我们使用 Mac OS X 10.4 所用的 Java 1.5，但平台应该不是问题。可以从 Sun Microsystems 或 IBM® 处获得 Java 技术的文件。

概述

在创建 Web 应用程序时，Java Servlet 和 JavaServer Pages™（JSP™）技术提供了一个强大的环境，但并没有给出创建用户界面（UI）的标准方法。您必须全靠自己来管理 JSP 页面中所有表单的状态，还必须把进来的 HTTP 请求分派给适当的事件处理程序。如果站点的 GUI 很复杂，随应用程序而产生的复杂的基础设施最终会变得难以管理。此外，站点还会有些特有的行为以及其他一些细节问题，使得您构建的代码很难被重用。JSF 提供了一种简化高层任务（例如 UI 组件的排列和重用）的现成工具，并能够把组件的状态和输入处理与决定应用程序行为的对象关联起来。

Apache Geronimo

Apache Geronimo 是一个开放源码（采用 Apache Software Foundation 许可协议）的 Java EE 服务器，其设计目的是尽可能增强应用程序的兼容性和性能。它的当前版本（到写本文时是 1.1 版）通过了 Sun 的 Java 2 Platform, Enterprise Edition（J2EE™）的 Technology Compatibility Kit（TCK）测试，这意味着它符合 Sun 的规范，与 J2EE 服务器完全兼容。

与 Jetty 或 Tomcat Web 服务器打包在一起时，Geronimo 非常易于启用和运行，而且它已经部署了一个极其有用的管理界面应用程序。不需要以任何方式重新启动或重新配置服务器，就可以从管理控制台上载并启动 Web 应用程序。

Apache MyFaces

Apache MyFaces 是第一个免费的开放源码的 JSF Web 应用程序框架实现。JSF 类似于流行的 Struts 框架，实现了模型 - 视图 - 控制器（MVC）模式，但是它的一些特性是 Struts 没有提供的。JSF 是由 Java Specification Request #127（JSR 127）规范所定义的，这个规范已经被 Web 应用程序行业的专家批准成为 Java Community Process（JCP）规范。

Apache Tomahawk

Apache Tomahawk 在 JSF 规范包含的组件之外提供了一套额外的 JSF 组件，同时与任何符合 JSF 1.1 的实现（比如 MyFaces）100% 兼容。

Eclipse

Eclipse 是按照一个可扩展的面向插件的体系结构而构建的，它是一个开放源码的集成开发环境（IDE）。因此，只要有这一个 IDE 就能够支持做任何工作所需的几乎任何语言、任务、平台和数据文件。这样的话，开发人员将可以从出色的 Java 开发支持和 WTP 项目的插件中获益。WTP 提供了支持 XML 的编辑器，它还提供了实验性的 MyFaces 支持。

我们来很快地看一下我们的应用程序示例。

应用程序示例

在 第 1 部分 中，使用 Geronimo 部署了一个简单的用 MyFaces 编写的 Web 应用程序，它为您创建自己的 Web 应用程序提供了一个很好的开端。这个应用程序为一个假想的面向开发者的论坛处理注册过程。

在下一节中，将回顾第一个教程中所做的工作，然后讨论 Tomahawk 的组件并在注册应用程序中添加几个 Tomahawk 组件。

回顾

在 第 1 部分 中，介绍了 Apache Geronimo 和 JSF 标准的 MyFaces 实现。学习了如何使用 Eclipse IDE 创建新的 JSF 项目、将它导出为 .war 文件并将它部署在 Geronimo 服务器上。还看到了如何使用 Eclipse 中的 Faces Configuration 编辑器将 JSP 处理结果连接到适当的响应文件。

导入 devSignup 项目

应该从 第 1 部分 下载 devSignup 示例项目，因为本教程后面将改进它。

启动 Eclipse，如果还没有安装 Web Tools Platform 及其依赖项，那么使用 Update Manager 安装它们。在从插件列表中选择 Web Tools Platform 之后，一定要在 Update Manager 中点击 Select Required 按钮；这将确保获得至少两个其他项目的必要部分（Eclipse Modeling Framework 和 Graphical Editing Framework）。

从菜单选择 File > New Project 显示 New Project 对话框（见 图 1）。

图 1. 创建新 Eclipse 项目

展开 General 类别并选择 Project。

点击 Next。

输入 devSignup 作为项目名，然后点击 Finish 创建空项目。

在 Eclipse 的 Navigator 视图中右击新的 devSignup 项目，然后在上下文菜单中选择 Import 显示 Import 对话框（见 图 2）。

图 2. 导入 devSignup 项目的文件

展开 General 类别并选择 Archive File（因为这个项目是作为存档文件 devSignup-src.zip 提供的）。

点击 Next。

点击 Browse 按钮并选择 devSignup 项目的存档文件（见 图 3）。

图 3. devSignup 项目来自一个 ZIP 存档文件

点击 Finish 导入 devSignup Web 应用程序的源文件。查看 Navigator 视图，您会注意到所有文件都深了一层，位于一个额外的 devSignup 文件夹下（见 图 4）。

图 4. 为什么我的文件在一个子文件夹中？

不幸的是，这在 Eclipse 中很常见。

选择额外文件夹下的所有东西（.metadata、.settings、build、src 和 WebContent 目录以及 .classpath 和 .project）并将它们拖到顶级 devSignup 文件夹中。

删除空的 devSignup 文件夹，这样就设置好了。

在覆盖顶级 .project 文件时，Eclipse 会注意到这实际上是一个 Web 应用程序并对所有文件进行验证。如果它询问是否允许缓存来自 Sun 开发人员 Web 站点的文件，那么同意这么做；Eclipse 将使用这些文件验证 Web 项目。（在大多数情况下是这样的。除非您的系统碰巧设置得与我常用的 iBook 完全一样（嗨，不要笑，这种可能性很小，但是存在），否则 Eclipse 无法找到部署这个项目所需的 MyFaces .jar 文件。）

修复 devSignup 项目

devSignup 项目的某些部分包含系统特有的信息，比如安装 Java 库和 MyFaces JAR 的路径。这也是用 Eclipse 共享项目时的常见问题。我们来查看项目的设置并修复需要修复的设置。

右击 devSignup 项目并从上下文菜单中选择 Properties。Eclipse 显示 Properties 对话框，见 图 5。

图 5. Eclipse 的 devSignup 项目属性

点击列表中的 JSF Library References 条目；需要告诉这个项目 MyFaces 文件在哪里。Eclipse 显示这个项目的 JSF Library References 属性（见 图 6）。

图 6. 设置 JSF 库引用

在面板的顶部，选中 Deploy jars to WEB-INF/lib，因为您肯定希望在创建应用程序时包含 JSF 库。

点击这个复选框正下方的 New 按钮，显示 Create JSF Implementation Library 对话框，见 图 7。

图 7. 创建一个 JSF 实现库

给这个库起一个描述性的名字；我起的名字是 MyFaces (Core)。

从 Version Supported 下拉列表中选择 v1_1（因为 Apache MyFaces 支持 1.1 版的 JSF 规范），然后点击 Add 按钮，选择要包含在这个库定义里的 JSF .jar 文件。

包含来自 MyFaces Core 发行版的以下文件：

commons-beanutils-1.7.0.jar

commons-codec-1.3.jar

commons-collections-3.1.jar

commons-digester-1.6.jar

commons-el-1.0.jar

commons-lang-2.1.jar

commons-logging-1.0.4.jar

jstl-1.1.0.jar

myfaces-api-1.1.3.jar

myfaces-impl-1.1.3.jar

这是在当前的 MyFaces 实现中最精简的一组 JSF 库（有些文档中在这个清单里没有 jstl.jar ，但这是一个必需的 文件）。

这里需要注意的一点是：在 JSF Implementation 库中将包含对您的 .jar 文件的完全路径引用；该库不会把这些文件拷贝到您的工作区里。这样做是有益的，因为不必为每个项目都生成这些 JAR 文件的一个副本；但另一方面，这也有坏处，因为这样就不能利用 SCM 系统，甚至也无法通过导出 Eclipse 项目，把这个项目移交给另一个开发人员。

添加完所需的 .jar 文件后，单击 Finish 创建一个 JSF 实现库。

接下来，需要纠正 Java Build Path 面板的内容（见 图 8）。

图 8. devSignup 的 Java Build Path 面板

选择 JRE System Library 条目；如果它针对的平台与您目前的平台不同，也无需担心。

点击 Edit 按钮，显示 Edit Library 对话框。

选择一个适当的 Java 系统库，然后点击 Finish。

在 Properties 对话框中点击 OK 来应用这些修改。Eclipse 会重新构建 Java 源文件，项目应该能够正常工作了！

Tomahawk 组件

Tomahawk 项目将它的组件松散地划分为三类：组件、验证器和其他东西。我们来看看每一类给 JSF 应用程序开发人员提供了什么，并展望一下它们对本系列的 第一个教程 中开发的 JSF Developer Forum Signup 应用程序能够进行怎样的扩展。

一个重要的细节是：许多这些组件需要包含图形元素（比如图像）或 JavaScript™ 代码。它们是 Tomahawk .jar 文件的一部分，并自动地包含在 MyFaces Extensions Filter 的 JSP 输出中。在下一节中，将学习如何安装它，所以不必为缺少 Tomahawk 组件所需的图像或 JavaScript 担心。

组件

大多数 Tomahawk 组件（见 表 1）是扩展的或高级的用户界面组件，其设计目的是使 Web 应用程序的外观和感觉更接近一般的桌面应用程序。其中一些组件提供了极其复杂的图形部件，如果您的应用程序中碰巧需要这样的部件，那么直接使用它们可以节省大量开发时间。

表 1. Tomahawk 组件

组件	描述
Alias Bean (Data, <t:aliasBean>)	允许为现有的 bean 创建别名。例如，假设有一个现有的子视图（<f:subview>），它引用一个名为 holder 的 bean，但是表单的 bean 名为 userData。可以将 <f:subview> 包装在 <t:aliasBean> 中，从而表示对 holder 的任何引用都转发到 userData bean。
Buffer (Data, <t:buffer>)	将页面的一部分放进 bean 中，以便在以后显示它。
Calendar (Input, <t:inputCalendar>)	显示一个日历，让用户可以轻松地选择一个日期。周名称、月名称和每周的启始日是根据系统地区自动选择的，所以本地化是自动的。
Column (Column, <t:column>)	<h:column> 的扩展版本，提供了直通属性（也就是说，它们将直接复制进输出的 HTML 中），允许精确地控制如何显示页眉、页脚和数据单元格，以及它们如何响应 JavaScript 事件。
Columns (Data, <t:columns>)	在 Data Table 中使用，在表中提供数量可以动态变化的列。
Data List (Data, <t:dataList>)	与 Data Table 相似，但是将它的行显示为简单的逗号分隔列表、带符号列表或编号列表。
Data Scroller (Panel, <t:dataScroller>)	这个控件允许翻页浏览 UIData（<h:dataTable>）；它显示 first、fast rewind、previous、next、fast forward 和 last 按钮来控制显示。
Date (Input, <t:inputDate>)	显示一个用来输入日期的文本输入控件。可以接受日期或时间（或同时接受这两者），提供一个用来选择日期的弹出日历，处理 12 小时或 24 小时时间。
Extended Data Table (Data, <t:dataTable>)	扩展了标准的 JSF DataTable，能够保存 DataModel 的状态并支持可点击的排序标题。
File Upload (Input, <t:inputFileUpload>)	显示一个允许用户上传文件的 HTML 输入字段。允许指定这个字段接受哪种 Multipurpose Internet Mail Extensions（MIME）类型。
Html Editor (Input, <t:inputHtml>)	显示一个简单的基于 HTML 的行内字处理程序。当前，在每个页面上只能有一个 HTML 编辑器，但是如果每次只显示一个编辑器，那么可以使用选项卡包含多个编辑器。
Html Tag (Output, <t:htmlTag>)	显示任何 HTML 标记。
Javascript Listener (Output, <t:jsValueChangeListener>)	在客户机上模拟 JavaScript 提供的 Value Change Listener 功能。当对一个控件的修改应该在其他控件中触发修改时，可以使用这个组件。可以在任何 Input 控件中嵌入一个或更多的 Javascript Listener，当这个控件被更新时，这些 Listener 都被触发。
JSCook Menu (Command, <t:jscookMenu>)	显示一个基于 JavaScript 的动态菜单。
Newspaper Table (Obsolete!)	这个控件已经废弃了，所以不要使用它。Newspaper Table 的功能现在包含在 Extended Data Table 组件中。
Panel Navigation (Panel, <t:panelNavigation>)	显示一个垂直菜单并支持嵌套的菜单项。
Panel Navigation 2 (Panel, <t:panelNavigation2>)	与 Panel Navigation 组件相似，但是使用无序列表而不是表进行显示。还可以使用 Navigation Menu Items 动态地建立菜单树。
Panel Stack (Panel, <t:panelStack>)	显示重叠的 Panel，允许动态地切换面板。
Popup (Panel, <t:popup>)	一个在发生鼠标事件时显示的弹出面板（比如当鼠标指针停留在另一个用户界面组件上时）。
Schedule (Panel, <t:schedule>)	与 Microsoft® Outlook® 客户机或 Evolution 中的日程安排程序相似，在日、工作周、周或月视图中显示约会或活动安排。
Style Sheet (Output, <t:stylesheet>)	显示常用 CSS 样式表文件的路径。
TabbedPane (Panel, <t:panelTabbedPane>)	显示一个选项卡式的 Panel，允许用户在 Panel 之间进行切换。这种切换可以在客户机上进行处理，也可以在服务器上进行处理（这会导致页面刷新）。
Tree (HtmlTree, <t:tree>)	MyFaces 中 HTML 树组件的扩展版本，允许为树、节点和选择的节点指定 CSS 类。
Tree2 (HtmlTree, <t:tree2>)	一个高度可定制的扩展的树组件，它的数据由一个后端 bean 提供。几乎任何类型的 JSF 组件（文本、图像、复选框等等）都可以显示在树的节点中，而且除了标准的服务器端转换之外，它还支持在客户端展开节点（无需页面刷新！）。
Tree Table (HtmlTreeColumn, <t:tree>)	显示一个带树型列的表。
UI Save State (Data, <t:saveState>)	允许对 bean 和值进行持久化，使其生命周期长于 Request 范围，但是短于 Session 范围。可以使后端 bean 和值的持久化范围与视图组件相同。传统的 JSP 应用程序在 HttpSession 对象中保存状态信息，这需要一个过期日期，而且有几个与服务器重启和服务器集群有关的问题。UI Save State 组件将数据编码在客户机响应中，并在下一次客户机请求中自动恢复它。

显然，其中一些组件非常有用，而其他组件可能只适用于很特殊的场景。

现在来看看 Tomahawk 的验证器组件。

验证器

Tomahawk 还提供了几个方便的验证器（见 表 2），可以用来确保输入数据的质量。

表 2. Tomahawk 验证器

验证器	描述
validateCreditCard (<t:validateCreditCard>)	验证 American Express、Discover、MasterCard 或 Visa 的信用卡信息。还可以用来确定数据不是支持的信用卡之一。
validateEmail (<t:validateEmail>)	验证电子邮件地址。
validateEqual (<t:validateEqual>)	确保这个组件中的数据与另一个组件中的数据匹配。适用于验证密码或电子邮件地址等信息。
validateRegExpr (<t:validateRegExpr>)	确保这个组件中的数据与指定的正则表达式匹配。用来验证全数字的字段、电话号码等信息。
validateUrl (<t:validateUrl>)	验证 URL。

通过重用这些验证器，可以减少大量工作。正则表达式验证器尤其灵活，只要能够将所需的数据表示为正则表达式，就能够进行验证。

现在来看看 Tomahawk 库中包含的其他东西。

其他东西

Tomahawk 还提供了对 JSF 开发人员有帮助的其他一些东西（见 表 3），其中的扩展过滤器是在使用许多 Tomahawk 组件时都需要的。

表 3. 其他 Tomahawk 内容

Tomahawk 内容	描述
扩展过滤器	一些 Tomahawk 组件需要对 JavaScript、CSS 样式表和图像的额外支持。这些资源包含在 Tomahawk .jar 文件中，而扩展过滤器提供了从生成的 HTML 访问这些资源所需的代码和 URL。扩展过滤器还处理文件上传组件（<t:inputFileUpload>）所使用的多部分请求。
forceId 属性	可以为任何 Tomahawk 组件指定这个属性，允许将这个 ID 设置为 ID 属性指定的值。如果需要对特定的 HTML 元素 ID 使用 JavaScript 或 CSS 样式，这个属性就很有用。
JspTilesViewHandler	Tomahawk 允许使用来自 Struts 应用程序的 tiles，从而能够将现有的 tiles 集成到 JSF 应用程序中。

如果您还不是 Struts 开发人员，那么扩展过滤器可能是这些东西中最重要的，因为许多 Tomahawk 组件都需要它。因为 Tomahawk 文档似乎没有包含这方面的详细信息，所以如果要使用 Tomahawk 特性，最好总是使用扩展过滤器。幸运的是，使用它并不太影响性能。

在下一节中，将在 MyFaces 应用程序中使用 Tomahawk 并在 Eclipse 中用 Web Tools Platform 进行开发。

在 Web 应用程序中使用 Tomahawk

如果您像我一样性急的话，现在可能迫不及待地想开始编写一些代码，试试这些方便的组件。首先，您应该仔细考虑一下在自己的 Web 应用程序中需要使用 Tomahawk 做什么。接下来，我们对 第一个教程 中的 Developer Forum Signup 应用程序进行扩展，在其中利用一些 Tomahawk 组件。

将 Tomahawk 添加到项目中

将 Tomahawk 组件添加到 JSF 应用程序中是很简单明了的。需要将一个资源添加到 Tomahawk .jar 文件中、将扩展过滤器添加到 web.xml 文件中并将 Tomahawk 标记库包含到 JSF 页面中。

在 Eclipse 的 Navigator 视图中右击 devSignup 项目，然后在上下文菜单中选择 Properties。Eclipse 显示项目属性对话框。

在列表中点击 JSF Library References，显示 JSF Library References 面板，见 图 9。

图 9. 将 Tomahawk 添加到 devSignup 项目中

点击选择列表区域中的 New 按钮（不是 Implementation Library 旁边的按钮），显示 Create JSF Library 对话框（见 图 10）。

图 10. 创建新的 JSF 库

使用这个对话框定义一个 JSF 库，以后可以在项目中包含这个库。这非常适合添加那些包含几个 JAR 的组件库或依赖于其他项目的 .jar 文件的组件库。

在 Library Name 字段中输入库名（我使用 Tomahawk），然后从 Version Supported 下拉列表中选择 v1_1，因为 MyFaces 实现了 1.1 版的 JSF 规范。

点击 Add 按钮，然后选择 Tomahawk .jar 文件（如果使用编写本文时的版本，那么就是 tomahawk-1.1.3.jar）。

重复这个过程来添加下面这些 Tomahawk 所需的 Jakarta .jar 文件：

commons-fileupload-1.1.1.jar

commons-validator-1.3.0.jar

jakarta-oro-2.0.8.jar

点击 Finish，将这个新的 Tomahawk 库添加到项目属性的 JSF Library References 面板中的列表中。这个新的 Tomahawk 库添加到右边的列表中，它会自动地包含在项目的 .war 文件中。

点击 OK 应用修改并关闭项目属性对话框。

为了启用 Tomahawk 扩展，需要将扩展过滤器添加到 Web 应用程序中。双击项目的 web.xml 文件（位于 WebContent/WEB-INF 文件夹中），在 XML 编辑器中打开它。如果编辑器处于 Design 模式，就要点击编辑器底部的 Source 选项卡，从而切换到 Source 模式，这样就会看到原始的 XML 树。

将 清单 1 中的代码添加到 web.xml 中；<filter> 和 <filter-mapping> 元素应该是 <web-app> 的子元素，而不是任何其他 web.xml 标记的子元素。

清单 1. 在 web.xml 中启用 Tomahawk 扩展

<filter>　
　　<filter-name>MyFacesExtensionsFilter</filter-name>　
　　<filter-class>　
　　org.apache.myfaces.webapp.filter.ExtensionsFilter　
　　</filter-class>　
　
　　<init-param>　
　　　　<param-name>maxFileSize</param-name>　
　　　　<param-value>20m</param-value>　
　　</init-param>　
</filter>　
　
<filter-mapping>　
　　<filter-name>MyFacesExtensionsFilter</filter-name>　
　　<servlet-name>Faces　Servlet</servlet-name>　
</filter-mapping>　
　
<filter-mapping>　
　　<filter-name>MyFacesExtensionsFilter</filter-name>　
　　<url-pattern>/faces/myFacesExtensionResource/*</url-pattern>　
</filter-mapping>　

<filter> 元素添加 MyFaces 扩展过滤器类并将 maxFileSize 参数设置为 20MB。maxFileSize 是文件上传组件允许的最大大小，可以以字节（一个数字）、千字节（一个数字加上 k）、兆字节（一个数字加上 m）或千兆字节（一个数字加上 g）为单位来指定。

第一个 <filter-mapping> 元素将 MyFaces 扩展过滤器应用于指定的 servlet。<servlet-name> 必须与 web.xml 文件中已有的 <servlet> 元素中指定的 servlet 名称匹配。

第二个 <filter-mapping> 元素告诉 MyFaces 扩展过滤器在处理 Tomahawk 组件使用的额外 JavaScript、样式表和图像时要匹配哪些 URL。与这个模式匹配的 URL 被解释和转换为对 Tomahawk .jar 文件中适当资源的引用。

需要做的最后一件事是在 .jsp 文件中启用 Tomahawk 扩展。

将下面的代码添加到每个使用 Tomahawk 组件的 JSP 页面中。在 devSignup 项目中，只有 signup.jsp（响应页面不使用任何 JSF 代码）。

<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>

这样就行了！现在已经可以在示例应用程序中使用 Tomahawk 组件了。

将 Tomahawk 组件添加到 Developer Forum Signup 应用程序中

在第一个教程中创建的 Developer Forum Signup 应用程序非常简单。它允许用户输入屏幕名、电子邮件地址和密码。对数据没有进行验证，也没有采用任何机制来确保用户输入的密码没有输错。清单 2 显示主注册页面 signup.jsp 的当前状态（注意，我已经在 <f:view> 元素前面添加了 Tomahawk 标记库）。

清单 2. Developer Forum Signup 页面

<?xml　version="1.0"　encoding="UTF-8"　?>　
<%@　page　language="java"　contentType="text/html;　charset=UTF-8"　
　　pageEncoding="UTF-8"%>　
<%@　taglib　uri="http://java.sun.com/jsf/html"　prefix="h"%>　
<%@　taglib　uri="http://java.sun.com/jsf/core"　prefix="f"%>　
<%@　taglib　uri="http://myfaces.apache.org/tomahawk"　prefix="t"　%>　
<f:view>　
<!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">　
<head>　
<meta　http-equiv="Content-Type"　content="text/html;　charset=UTF-8"　/>　
<title>Developer　Forum　Signup</title>　
</head>　
<body>　
<h1>Developer　Forum　Signup</h1>　
<p>　
Welcome　to　our　forums!　Please　fill　in　the　following　form　to　create　your　
　forum　account.　
</p>　
　
<h:form>　
<dl>　
　　<dt>Screen　name:</dt>　
　　<dd>　
　　<h:inputText　value="#{signupData.screenName}"/>　
　　</dd>　
　
　　<dt>Email:</dt>　
　　<dd>　
　　<h:inputText　value="#{signupData.email}"/>　
　　</dd>　
　
　　<dt>Password:</dt>　
　　<dd>　
　　<h:inputSecret　value="#{signupData.password}"/>　
　　</dd>　
</dl>　
　
<h:commandButton　action="#{signupData.register}">Sign　
　up</h:commandButton>　
</h:form>　
</body>　
</html>　
</f:view>　

这是一个简单的页面，它使用 MyFaces 组件收集用户的数据并在 Sign up 按钮被点击时执行 signupData bean 的 register() 方法。

应该添加的一个东西是一个验证器，用它确保用户已经输入了有效的电子邮件地址。

编辑 devSignup 项目中的 signup.jsp（如果还没有添加 Tomahawk 标记库，那么一定要记得添加它）并将 Email 字段的 <h:input> 标记替换为 清单 3 中的代码。

清单 3. 验证用户的电子邮件地址

<h:inputText　value="#{signupData.email}"　id="email"　required="true">　
　　<t:validateEmail/>　
</h:inputText><br/>　
<strong><h:message　for="email"/></strong>　

这就是需要做的所有工作。Tomahawk 会自动地检查输入的数据，确保它是有效的电子邮件地址。如果不是有效的电子邮件地址，那么它将 ID email 的消息设置为适当的错误消息。如果有消息，<h:message> 元素将显示 ID email 的消息（否则，它什么都不显示，所以只会在发生错误时看到这个消息）。

例如，如果输入 not!email 作为电子邮件地址，那么在点击 “Sign up” 按钮之后可能看到 图 11 这样的结果。

图 11. 输入无效的电子邮件地址

表单会重新显示。这一次，设置了 Email 字段的消息，所以它会显示出来；看到了吧，正如我们预料的，这是一个错误消息。

现在，应该要求用户输入密码两次；用户看不到自己输入的密码，所以两次输入可以帮助用户确保正确地输入了想要设置的密码。

将 清单 4 中的代码添加到 Password 字段的 </dd> 标记后面。这会添加第二个 Password 输入字段，而且用户在这里输入的数据必须与第一个 Password 字段的内容匹配。

清单 4. 两次密码输入

<dt>Password　(for　verification):</dt>　
<dd>　
<h:inputSecret　id="password_verify"　required="true">　
　　<t:validateEqual　for="password"/>　
</h:inputSecret><br/>　
<strong><h:message　for="password_verify"/></strong>　
</dd>　

这使用 <t:validateEqual> 确保内容是相同的，并使用 <h:message> 显示与表单的这个部分相关联的任何消息。可以看到 图 12 这样的错误消息。

图 12. 输入了两个不匹配的密码

可以看到，这个验证器并不完善。但是，至少已经在注册页面中添加了一些出色的功能，而无需修改 Java 代码。

怎么添加更酷一点儿的东西呢？向进行注册的用户询问生日。可以使用这一信息确保用户超过了 18 岁（如果需要这么做的话），还可以在适当的日子向用户祝贺生日快乐。

将 清单 5 中的代码添加到 signup.jsp 文件中 </dl> 标记的前面。

清单 5. 添加日期输入控件

<dt>Birthday:</dt>　
<dd>　
<t:inputDate　id="birthday"　value="#{signupData.birthday}"　popupCalendar="true"/>　
</dd>　

图 13 显示生日提示和一个支持弹出式日历的日期输入控件，这样用户就能够用选择的方法输入生日而无需手工输入。

图 13. 添加生日提示和日期输入控件

因为要引用 signupData bean 的 date 成员，所以最终还必需修改一些 Java 代码。

编辑 SignupData.java 文件（在 devSignup 项目中 src/devSignup 下面），将 清单 6 中的代码添加到 SignupData 类中。

清单 6. 在 bean 中添加生日支持

　　　　　　　　　　private　java.util.Date　_birthday　=　null;　
　
public　SignupData()　{　
　　_birthday　=　new　java.util.Date();　
　}　
　　　
public　java.util.Date　getBirthday()　{　
　　return　_birthday;　
}　
public　void　setBirthday(　java.util.Date　newBirthday　)　{　
　　this._birthday　=　newBirthday;　
}　

并不需要做很多工作，就能够在 Web 页面上添加如此复杂的数据输入控件！现在可以构建并部署这个 Web 应用程序，看看已经完成的成果。

部署新的 Developer Signup 应用程序

我们已经做了几处修改，现在是时候看看 Developer Signup 应用程序的效果了。需要构建这个项目、导出 .war 文件并将它部署到 Geronimo 服务器上。

在 Eclipse 的 Navigator 视图中点击 devSignup 项目，然后从菜单中选择 Project > Build Project。Eclipse 编译 Java 代码并验证 JSP 页面和 XML 文件。

在 Navigator 视图中右击 devSignup，然后从上下文菜单中选择 Export。

在 Export 向导中，展开 Web 组，选择 WAR file，然后点击 Next 显示 WAR Export 面板，见 图 14。

图 14. 导出 .war 文件

点击 Browse 按钮，选择一个目标目录和 .war 文件的文件名（我将自己的文件作为 devSignup.war 保存到桌面，这样在服务器上部署它时很容易找到它。）

点击 Finish，导出 .war 文件。

打开您喜欢的 Web 浏览器并访问 http://localhost:8080/console/（如果您的 Geronimo 服务器不在同一台机器上运行，那么要用它的主机名替换 localhost）。这会显示 Geronimo Console Login 屏幕（见 图 15）。

图 15. 登录 Geronimo 的管理控制台

登录管理控制台（记住，默认用户名是 server，默认密码是 manager，应该修改它们。）

点击 Console Navigation 列表中 Applications 部分中的 Deploy New，显示 Install New Applications 屏幕，见 图 16。

图 16. 安装新的 Web 应用程序

点击 Archive 字段旁边的 Browse 按钮，找到刚才创建的 .war 文件。

因为已经选中了 Start app after install，点击 Install，上传 .war 文件并启动应用程序。在浏览器完成存档文件的上传而且 Geronimo 启动了应用程序之后，会看到一个成功消息。

如果已经在服务器上运行过 devSignup（因为您已经学习了第一个教程），那么要选中 Redeploy application 复选框，从而安装新版本并卸载旧版本。

现在，在访问 Developer Signup 应用程序时（在我的系统上是 http://localhost:8080/devSignup/signup.faces，如果您的服务器不在本地机器上运行，那么要用服务器的主机名替换 localhost），应该会看到 图 17 这样的界面。

图 17. 改进后的应用程序

当用户点击 Birthday 输入字段旁边的 ... 按钮时，出现 图 18 这样的组件。（这个组件如此复杂，但是我们没做多少工作就获得了这种功能，对它的支持是自动的！）

图 18. 日期输入字段的弹出式日历

这非常酷，而且它完全是用 JavaScript 和 CSS 在客户机系统上实现的。惟一的缺点是它看起来不太像 “本机” 应用程序。

好了！我们已经成功地掌握了 Apache Tomahawk 并使用它扩展了 Developer Signup Web 应用程序。

结束语

我们研究了 Apache Tomahawk 组件，讨论了如何将它们添加到 Eclipse Web 应用程序项目中，并使用它们扩展了第一个教程中开发的 Developer Forum Signup 应用程序。

在本系列的下一期中，我们将在 JSF 应用程序中添加 Ajax 功能，使用它们让 Developer Forum Signup 应用程序更具交互性，同时避免更多的页面重载或转移。

下载

描述	名字	大小	下载方法
第 2 部分源代码	devSignup-src.zip	11KB	HTTP
Signup2 应用程序 WAR 文件	devSignup-war.zip	3160KB	HTTP