使用 JavaServer Faces 构建 Apache Geronimo 应用程序，第 4 部分: 使用 Apache Trinidad 组件扩展 JSF

核心提示：到目前为止，在这个共分为五部分的系列教程中，使用 JavaServer Faces 构建 Apache Geronimo 应用程序，第 4 部分: 使用 Apache Trinidad 组件扩展 JSF，已经研究了 Java™Server Faces（JSF），包括将简单的 JSF 应用程序部署到 Apac

到目前为止，在这个共分为五部分的系列教程中，已经研究了 Java™Server Faces（JSF），包括将简单的 JSF 应用程序部署到 Apache Geronimo 上，将 Apache Tomahawk 与应用程序集成，以及了解如何使用 Sun Ajax4jsf 开放源码框架为 JSF 应用程序添加 Asynchronous JavaScript + XML（Ajax）功能。此部分是第 4 部分，您将了解如何使用 Apache Trinidad，ADF Faces 的开放源码版本。Trinidad 提供了一组免费的组件，使用这些组件可以进一步增强 JSF 应用程序的界面。

开始之前

本教程向 Java 编程人员介绍如何使用 JSF 组件来构建具有高度交互性的部署在 Apache Geronimo 上的 Java Platform, Enterprise Edition（Java EE）应用程序。本教程假定读者使用 Eclipse IDE 作为开发平台。

关于本教程

本教程向您介绍 Apache Trinidad，它是一组免费的组件，可用于改进 JSF 应用程序的界面。我们将把现有的示例应用程序前端的开发人员论坛登录页面转换为使用 Trinidad 组件。

关于本系列教程

本教程是关于使用 JSF 构建 Apache Geronimo 应用程序的系列教程（共五部分）的第四部分。下面是整个系列教程的摘要：

第 1 部分：使用 Eclipse 和 Apache MyFaces Core 构建基本的应用程序 介绍了如何将 JSF 标准的 Apache MyFaces 实现与免费应用服务器 Geronimo（同样来自 Apache）结合使用。这个教程向您展示了如何使用 Eclipse IDE 的 Web Tool Platform（WTP）构建 JSF 应用程序。

第 2 部分：在 JavaServer Faces 中使用 Tomahawk 展示了如何将 Apache Tomahawk 组件与 Geronimo 应用程序集成在一起。Tomahawk 提供了若干个自定义组件，可与 JSF 完全兼容。

第 3 部分：在 JavaServer Faces 中使用 ajax4jsf 展示了如何使用 Sun 的免费开放源码框架 Ajax4jsf 将 Ajax 功能添加到 Geronimo 应用程序中。

第 4 部分：使用 Apache Trinidad 组件扩展 JSF 介绍了如何将来自 Apache Trinidad（开放源码的 ADF Faces 组件）集成到 Geronimo 应用程序中以增强 JSF 应用程序的界面。

第 5 部分：将 JSF 应用程序与 Spring 集成 展示了如何将 JSF 应用程序集成到 Spring 框架（流行的框架，可以帮助 Geronimo 开发人员更轻松地构建 Java EE 应用程序）中。

先决条件

本教程适用于在访问后端系统来提取或处理数据方面有经验的 Java 开发人员。而且，必须了解 SQL 的基础知识。理想情况下，作为开发人员，您应该具备使用先前版本的一个或多个 Java Database Connectivity（JDBC）API 、利用接口（例如 ResultSet 和 Connection）方面的经验。此外，您应当具备 JavaServer Pages（JSP）技术的基础知识。

系统要求

必须配有以下工具才能学习本教程：

Geronimo，Apache 的 Java EE 服务器项目。Geronimo 提供了 Tomcat 和 Jetty 两种风格，选用哪种取决于您的需求。我们使用 Jetty（1.1 版），因为它比较小。 注：必须使用 Geronimo 1.2 或更高版本才能使用 Apache Trinidad。

MyFaces，Apache 的 JSF 实现。下载来自 Apache 的核心版本（不附带 Tomcat）。我们在本教程中使用 1.1.3 版。

Eclipse，可扩展的开放源码 IDE，它支持各种语言和平台。

Apache Trinidad 的附加组件和输入验证器，可以与任何 JSF 实现结合使用。根据 Oracle 的 ADF Faces，Trinidad 正处于 Apache 孵化器开发阶段，因此必须获取当前的开发快照：进入 主快照页面，然后选择 trinidad-api 和 trinidad-impl，直至找到 trinidad-api-incubator-m1-SNAPSHOT.jar 和 trinidad-impl-incubator-m1-SNAPSHOT.jar。

Eclipse Web Tools Platform（WTP），用于向 Eclipse 中添加 XML 和 JavaScript 编辑支持以及初步的 JSF 支持。使用 Eclipse 的 Update Manager 安装来自更新站点的 Web Tools Platform。

在系统中安装 Java 1.4 或更高版本。Eclipse 二进制文件附带了它自己的 Java 运行时，但 Geronimo 和 MyFaces 没有附带（这将极大地增大下载存档文件）。我使用的是 Mac OS X 10.4 上的 Java 1.5，但应当不会有太大差异。

简要回顾

在进一步了解 Trinidad 组件以及如何在 devSignup 示例应用程序中使用一些 Trinidad 组件之前，我们先来讨论 Trinidad 并确保您已经为学习本教程准备好 devSignup。

Apache Trinidad

Oracle 最近将 ADF Faces 赠予 Apache 社区。作为一个名为 Trinidad 的新 Apache 项目，ADF Faces 代码正在被重构并变得与 Tomahawk 组件更兼容。

Trinidad 提供了一组超越规范的 JSF 组件，同时还兼容任何符合 JSF 1.1 的实现（例如 MyFaces）。这些组件包括支持文件上传、数据验证器和转换程序；将值从一个页面传递到另一个页面的简单方法；以及混合型状态保存策略，提供最佳的客户端持久性和服务器端持久性。

目前，Trinidad 几乎跟 ADF Faces 一样，但 Trinidad 正在不断接受社区开发的贡献。

devSignup 回顾

在本系列教程的 第 1 部分 中，您了解了如何在 Eclipse 中使用 Faces Configuration 编辑器将 JSP 处理结果与适当的响应文件连接起来。在 第 2 部分 中，回顾了 Apache Tomahawk 扩展并把一些数据验证和附加 UI 组件添加到 Developer Forum Signup 应用程序中。在 第 3 部分 中，采用了 Sun 的 Ajax4jsf 工具并使用了 Ajax 技术把交互式的温度转换实用程序添加到 Developer Forum Signup 应用程序中。现在，让我们确保您已经准备好 devSignup 以便把 Trinidad 组件集成到其中。

导入 devSignup 项目

如果您没有阅读本系列中的前几个教程，至少应当下载 devSignup 示例项目（请参阅 下载 部分），因为稍后将需要在其中添加组件。

本系列教程的 第 2 部分 详细说明了如何将项目从源存档文件中导入 Eclipse。下载 devSignup-src.zip（请参阅 下载 部分），并按照第 2 部分中的说明进行操作，完成后再回到这里。确保按照第 2 部分的 修复 devSignup 项目 中的说明进行操作，否则将不能构建应用程序。

完成后，Eclipse Navigator 视图应当会类似于图 1。

图 1. Eclipse 中的 devSignup 项目

如果您是初次使用 Eclipse IDE，那么此刻应当好好表扬一下自己。导入现有源代码项目是很多新用户失败的原因之一。

现在可以研究 Trinidad 组件并开始考虑这些组件能为您做什么工作。

Apache Trinidad 组件

Apache 的 Trinidad 框架提供了大量有用的组件，其中一些类似于 Apache 的 Tomahawk 框架中的组件。快速查看每个组件提供给 JSF 应用程序开发人员的功能，并留意如何扩展现有 JSF 应用程序，本系列的 第一个教程 中建立并一直不断扩展的 Developer Forum Signup。

一个重要的细节：很多这些组件包括图形元素（例如图片）或需要包括 JavaScript。它们属于 Trinidad .jar 文件并自动包含在 Trinidad Extension 过滤器的 JSP 输出结果中。您将简要了解并学习如何安装它，因此不必担心会缺少 Trinidad 组件所需的图片和 JavaScript 代码。

UI 组件

大部分 Trinidad 组件都是扩展的或高级的 UI 组件，用于使 Web 应用程序的外观更像是普通的桌面应用程序。其中一些组件提供了令人惊讶的复杂小部件，如果您碰巧需要其中某个小部件，会为您节省大量时间。下面是简要介绍：

表 1. Trinidad 组件

组件	描述
<tr:chooseColor>	提供小型调色板功能的组件，用户可以使用它来选择颜色。
<tr:chooseDate>	与 <tr:selectInputDate> 组件结合使用的组件，使用户可以从日历中选择日期，而无需另一个窗口或日历页面。
<tr:column>	表中的列，用于定义该列的标题、脚注和数据。
<tr:commandButton>	触发操作的按钮。
<tr:commandLink>	触发操作的链接。
<tr:commandNavigationItem>	触发操作的菜单项。
<tr:goButton>	直接导航到另一个位置而不触发操作的按钮。
<tr:goLink>	提供一个标准的 HTML 链接（<a href="">...</a>）的组件。
<tr:commandMenuItem>	直接导航到另一个位置而不触发操作的菜单项。
<tr:inputFile>	支持标签、文本和消息的文件上传组件。
<tr:inputText>	文本输入小部件，可以是单行、多行或密码字段。它支持标签、文本和消息。
<tr:navigationLevel hint="bar">	创建条形导航菜单的组件。
<tr:navigationPath>	创建表示返回到站点根页面的路径的导航系列的组件（例如 Home > Developer Forum Signup > Success，每个步骤都有返回到指定页面的链接）。
<tr:navigationTree>	创建基于树的导航菜单并支持展开和收缩树的各个级别的组件。
<tr:message>	为组件显示消息的组件。大多数 Trinidad 输入组件可以自动显示它们自己的消息。
<tr:messages>	显示基于页面的消息（而不是来自特定组件的消息）的组件。此组件通常用在页面接近顶部的位置，用于为用户提供重要消息。
<tr:objectIcon>	提供图标的组件。
<tr:objectImage>	提供图片的组件。
<tr:objectLegend>	提供图标标签的组件。
<tr:objectMedia>	在 Web 浏览器中嵌入的播放器中显示诸如音频、视频或图片之类媒体内容的组件。
<tr:objectSeparator>	提供水平分隔线的组件。
<tr:objectSpacer>	在页面布局中占用固定空间量的组件。这种方法好于使用 “不可见的” GIF 或 PNG 图片来占用空间；而它将创建一个具有指定大小的新的 HTML 块元素。
<tr:outputFormatted>	提供具有某种格式的文本（使用 HTML 的格式元素的子集）的组件。
<tr:outputLabel>	为表单组件提供标签的组件。
<tr:outputText>	提供具有某种样式的文本的组件。
<tr:page>	类似于 <tr:pagePanel> 组件的组件，但配有一个模型对象和一个 <tr:commandMenuItem> 或 <tr:goMenuItem> 戳以提供菜单。
<tr:panelBorder>	布局组件，在其中显示其子组件，支持的方面包括顶部、底部、左侧、右侧、开头、结尾、内顶部、内底部、内右侧、内开头、内左侧和内结尾区域。
<tr:panelBox>	用于显示一组组件的布局组件，将用指定的背景颜色和图标突出显示在页面上。
<tr:panelButtonBar>	提供一组按钮的布局组件。
<tr:panelFormLayout>	提供输入表单控件的布局组件。它把标签和字段垂直排列起来，并支持多列和脚注。
<tr:panelGroup>	以水平列表或垂直列表的方式显示子组件的布局组件。
<tr:panelHeader>	在某一部分顶部显示标签和可选图标的布局组件。
<tr:panelHorizontal>	水平显示子组件的布局组件。可以指定垂直对齐和水平对齐。
<tr:panelLabelAndMessage>	提供标签、子组件、提示和相关消息的布局组件。
<tr:panelList>	将每个子组件作为带符号列表条目显示的布局组件。
<tr:panelPage>	显示整个页面的布局组件。
<tr:panelPageHeader>	显示页眉的布局组件。
<tr:panelSideBar>	显示边栏导航菜单的布局组件。
<tr:panelTip>	显示页面级或部分级提示的容器。
<tr:processChoiceBar>	显示两侧具有 Back 或 Next 按钮以供导航的列表框的组件。
<tr:processTrain>	提供由水平线连接的水平站 列表的组件。每个站都显示为一个图片和文本标签。可以使用它来表现在多页面过程中用户目前所处的阶段。
<tr:progressIndicator>	显示进度条来表示耗时很长的过程的组件。
<tr:region>	显示预先定义的（用 <tr:componentDef>）、可重用的页面区域组件的组件。
<tr:regionDef>	定义可在多个页面上重用的区域的组件。
<tr:resetButton>	显示将表单数据设回默认值的 Reset 按钮的组件。
<tr:selectBooleanCheckbox>	显示具有提示、文本和消息的复选框的组件。
<tr:selectBooleanRadio>	显示与具有相同组属性的其他 <tr:selectBooleanRadio> 元素分在一组的单选按钮的组件。它支持显示提示、文本和消息。
<tr:selectInputColor>	显示用于输入颜色值的文本输入字段和可以显示可选择调色板的按钮的组件。
<tr:selectInputDate>	显示用于输入日期的文本输入字段和用于从日历中提取日期的按钮的组件。
<tr:selectInputText>	显示还可用于启动辅助对话框的文本输入字段的组件。
<tr:selectItem>	显示可以从列表、选项、单选或 Trinidad 左右控件中选择的单个条目的组件。
<tr:selectManyCheckbox>	允许用户从一系列复选框中选择一个或多个条目的组件。
<tr:selectManyListbox>	允许用户从列表框中选择一个或多个条目的组件。
<tr:selectManyShuttle>	允许用户通过将条目从一个列表移至另一个列表的方法选择一个或多个条目的组件。
<tr:selectOneChoice>	显示允许用户从下拉列表中选择一个条目的带标签列表框的组件。
<tr:selectOneListbox>	显示允许用户选择一个条目的带标签多行列表框的组件。
<tr:selectOneRadio>	显示一系列带标签单选按钮并允许用户选择一个单选按钮的组件。
<tr:selectOrderShuttle>	类似于 <tr:selectManyShuttle> 的组件，但是可以使用 first/last 和 up/down 按钮重新排列选择列表中的条目。
<tr:selectRangeChoiceBar>	允许用户选择某一范围的记录并使用弹出列表框和按钮来回移动的组件。
<tr:showDetail>	显示带标签的提示三角形（允许显示或隐藏其内容）的组件。
<tr:showDetailHeader>	显示带标签的提示三角形和标题（允许显示或隐藏标题部分的内容）的组件。
<tr:showDetailItem>	可以被一个 <tr:showOne*> 组件显示的条目。
<tr:showOneChoice>	显示处理一系列由 <tr:showDetailItem> 节点定义的条目的控件的组件。显示为标签和弹出列表框。
<tr:showOneAccordion>	显示折叠面板控件（用于处理由 <tr:showDetailItem> 节点定义的一系列条目）的组件。
<tr:showOneRadio>	显示基于单选按钮的控件（用于处理由 <tr:showDetailItem> 节点定义的一系列条目）的组件。
<tr:showOneTab>	显示基于选项卡的控件（用于处理由 <tr:showDetailItem> 节点定义的一系列条目）的组件。
<tr:singleStepButtonBar>	显示具有 Back 和 Next 按钮以及描述用户所处步骤的标签（例如，第 x 阶段，共 y 个阶段）的控件的组件。
<tr:table>	显示表的组件。此组件还支持选择（单项选择和多项选择）、排序、记录导航和详细信息提示。
<tr:group>	用于聚合相关元素的不可见控件。<tr:group> 的子元素不会被显示出来，除非 <tr:group> 的父元素支持显示分组的子元素（例如 <tr:panelForm>）。
<tr:tree>	显示数据树的组件，支持打开和关闭树中的每个节点。
<tr:treeTable>	用于还包括一个树的数据的表组件。

很明显，这些组件中有一些很有用，而其他可能在特定场合使用比较合适。现在快速查看 Trinidad 框架中的其他组件。

其他 Trinidad 组件

Trinidad 项目还包括若干个其他组件，用于将输入数据转换为 Java 类型、数据验证器和其他实用程序对象。

表 2. 用于转换输入数据的 Trinidad 组件

组件	描述
<tr:attribute>	临时替换 JSF 1.1 中有缺陷的 <f:attribute> 组件的组件（此问题将在 JSF 1.2 中解决）。
<tr:convertColor>	用于在字符串与 java.awt.Color 对象之间来回转换的组件。
<tr:convertDateTime>	基于模式和样式集在字符串与 java.util.Date 对象之间来回转换的组件。
<tr:convertNumber>	基于模式或类型集在字符串与 java.lang.Number 对象之间来回转换的组件。
<tr:document>	在输出中创建 HTML 页面的每个标准根元素（<html>、<body> 和 <head>）的容器。
<tr:forEach>	与 Trinidad 组件结合使用的 JavaServer Pages Standard Tag Library（JSTL） <c:forEach> 标记的替代标记。允许对 java.util.List 对象或数组进行迭代，例如，从中创建 <tr:selectItem>。
<tr:form>	在输出中创建 HTML <form> 元素的组件。
<tr:importScript>	导入由 Trinidad 提供的一个或多个 JavaScript 的组件。此组件可用于确保在 JavaScript 处理程序中使用它之前，脚本已经可用。
<tr:inputHidden>	插入随页面一起提交但不会显示给用户的值的组件。
<tr:iterator>	可与 JSF DataModel 或 CollectionModel 对象结合使用的 <tr:forEach>。
<tr:panelPartialRoot>	为 UI 组件树或子树启用部分页面显示的容器。页面中可以有多个 <tr:panelPartialRoot> 块。
<tr:poll>	要求服务器定期更新数据模型、刷新组件、显示对话框等等的组件。
<tr:resetActionListener>	在操作源（例如 <tr:commandButton>）内部使用，用于引发重设操作。
<tr:returnActionListener>	在操作源（例如 <tr:commandLink>）内部使用的组件，用于从对话框或过程返回值。
<tr:setActionListener>	在操作源（例如 <tr:commandButton>）内部使用的组件，用于在导航前设定值。
<tr:subform>	可以独立于页面的其余内容单独提交的一种页面部分。仅当内部的组件负责提交页面时，<tr:subform> 的内容才会被处理。
<tr:switcher>	动态地确定显示哪个方面的组件。
<tr:validateByteLength>	在编码后验证字符串的字节长度的组件。
<tr:validateDateTimeRange>	验证输入的日期是否处于指定范围内的组件。
<tr:validateRegExp>	使用指定的正则表达式验证输入数据的组件。
<tr:validator>	规划的 JSF 1.2 <tr:validator> 标记的实现。此组件允许回调 bean 方法以验证输入数据。

在下一部分中，您将看到如何在 Eclipse 与 Web Tools Platform 中进行开发时将 Trinidad 与 MyFaces 应用程序结合使用。

将 Trinidad 与 Web 应用程序结合使用

至此，您可能希望看到一些实际的代码来尝试一些唾手可得的组件。

首先，详细了解将 Trinidad 与应用程序结合使用所需执行的操作，然后将扩展 Developer Forum Signup 应用程序以利用某些 Trinidad 组件。

将 Trinidad 添加到项目中

将 Trinidad 组件添加到 JSF 应用程序中是十分简单的。需要把一个引用添加到 Trinidad JAR 文件中，把扩展过滤器添加到 web.xml 文件中，告诉 JSF 使用 Trinidad 库中的 Render Kit，并在 JSF 页面中包含 Trinidad 标记库。

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

单击列表中的 JSF Library References 以显示 JSF Library References 面板（参见图 2）。

图 2. 将 Trinidad 添加到 devSignup 项目中

单击选择列表区域中的 New 按钮（不是 Implementation Library 弹出菜单旁边的那一个 New 按钮）以显示 Create JSF Library 对话框。使用此对话框定义 JSF 组件库，然后可以将其包含在项目中。在添加包括若干个 JAR 文件或依赖于来自其他项目的附加 JAR 文件的组件库时，用这种方法十分合适。

在 Library Name 字段中输入库名（我使用的是 Trinidad-SNAPSHOT），然后从 Version Supported 下拉菜单中选择 v1_1，因为 MyFaces 将实现 JSF 1.1。

单击 Add 按钮（参见图 3），然后选择以下 Trinidad .jar 文件：

trinidad-api-incubator-m1-SNAPSHOT.jar

trinidad-impl-incubator-m1-SNAPSHOT.jar

图 3. 制作 Trinidad 库引用

单击 Finish 把新的 Trinidad 库添加到项目属性的 JSF Library References 面板的列表中。新的 Trinidad 库被添加到右侧的列表中，它将被自动包含在项目的 .war 文件中。

删除 Ajax4jsf 和 Tomahawk 库；我们将不需要它们。Ajax4jsf 的过滤器与 Trinidad 不兼容，并且 Tomahawk 的大多数功能都包含在 Trinidad 中。

单击 OK 以应用更改并关闭项目属性对话框。

要启用 Trinidad 扩展，需要把扩展过滤器添加到 Web 应用程序中。

双击项目的 web.xml 文件（位于 WebContent/WEB-INF 文件夹中）在 XML 编辑器中打开该文件。如果打开编辑器时为 Design 模式，则通过单击位于编辑器底部的 Source 选项卡切换到 Source 模式。在那儿，会看到原始的 XML。

如果 javax.faces.STATE_SAVING_METHOD 值（可在 <context-param> 块中找到）被设为 server，则将其更改为 client。不同于普通的 JSF 客户端状态，您将奇迹般地获得改进后的 Trinidad 实现。

删除名为 MyFacesExtensionsFilter 的 <filter> 和任何引用 MyFacesExtensionsFilter 的 <filter-mapping> 块；如果使用的是 Trinidad，则实际上不需要使用 Tomahawk 扩展（虽然可以根据需要混用它们）。

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

清单 2. 在 web.xml 中启用 Trinidad 扩展

<filter>　
　<filter-name>faces</filter-name>　
　<filter-class>org.apache.myfaces.trinidadinternal.webapp.FacesFilter</filter-class>　
</filter>　
　
<filter-mapping>　
　<filter-name>faces</filter-name>　
　<url-pattern>*.faces</url-pattern>　
</filter-mapping>　
　
<servlet>　
　<servlet-name>resources</servlet-name>　
　<servlet-class>org.apache.myfaces.trinidad.webapp.TrinidadFilter</servlet-class>　
</servlet>　
　
<servlet-mapping>　
　<servlet-name>resources</servlet-name>　
　<url-pattern>/trinidad/*</url-pattern>　
</servlet-mapping>　

<filter> 元素将 Trinidad 扩展过滤器类添加到应用程序所使用的过滤器列表中。这些过滤器在 JSP 文件显示到用户的浏览器之前会处理 JSP 文件。

<filter-mapping> 元素将把 Trinidad 扩展过滤器应用到与 <url-pattern> 中的模式匹配的任何 URL 上 —— 在本例中为任何对 .faces 页面的引用。

新的 <servlet> 和 <servlet-mapping> 元素将创建一个新的 servlet（资源），用于处理来自与 /trinidad/* 匹配的任何 URL 的资源请求。这是 Trinidad 在处理过程中获得需要发送给客户机的 JavaScript 和其他内容的位置。

保存 web.xml 文件，并在 faces-config.xml 文件上单击鼠标右键。

从上下文菜单中选择 Open With > XML Editor，告诉应用程序使用 Trinidad 库中的 Render Kit 而不是默认值。

把清单 3 中的行添加到 faces-config.xml 中。

清单 3. 告诉 faces-config.xml 使用 Trinidad Render Kit

<application>　
　　
<default-render-kit-id>org.apache.myfaces.trinidad.core</default-render　
-kit-id>　
</application>　

删除 Temperature Converter Bean 和 Thermometer Bean 的 <managed-bean> 块，因为不能将 Ajax4jsf 与 Trinidad 结合使用。

保存 faces-config.xml 文件。

需要做的最后一件事是在 JSP 文件中启用 Trinidad 扩展。

把清单 4 中的代码添加到将使用 Trinidad 组件的每个 JSP 页面中。在 devSignup 项目中，那是 signup.jsp（响应页面没有使用任何 JSF 代码，并且我们将不会修改基于 Ajax 的温度实用程序）。

清单 4. 在 JSP 页面中启用 Trinidad

<%@　taglib　uri="http://myfaces.apache.org/trinidad"　prefix="tr"　%>　
<%@　taglib　uri="http://myfaces.apache.org/trinidad/html"　prefix="trh"　%>　

可以删除对 Tomahawk 组件（它的 URL 为 http://myfaces.apache.org/tomahawk）的 taglib 声明，因为此时我们将不使用任何 Tomahawk 组件。

大功告成！现在您已经准备好在示例应用程序中使用一些 Trinidad 组件。

在 Developer Forum Signup 应用程序中添加组件

在 第 3 部分 以后，Developer Forum Signup 应用程序仍然是十分基础的。它允许用户输入屏幕名称、电子邮件地址、密码和用户的生日（使用高级 Tomahawk 日历弹出菜单）。电子邮件地址已经经过验证，并要求用户以相同方式输入两次密码来确保用户输入的密码正确。清单 5 显示了主登录页面 signup.jsp 的当前状态。

清单 5. 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}"　id="email"　required="true">　
　　　　<t:validateEmail/>　
　　</h:inputText><br/>　
　　<strong><h:message　for="email"/></strong>　
　　</dd>　
　
　　<dt>Password:</dt>　
　　<dd>　
　　<h:inputSecret　value="#{signupData.password}"　id="password"　
required="true"/>　
　　</dd>　
　
　　<dt>Password　(for　verficiation):</dt>　
　　<dd>　
　　<h:inputSecret　id="password_verify"　required="true">　
　　　　<t:validateEqual　for="password"/>　
　　</h:inputSecret><br/>　
　　<strong><h:message　for="password_verify"/></strong>　
　　</dd>　
　
　　<dt>Birthday:</dt>　
　　<dd>　
　　<t:inputDate　id="birthday"　value="#{signupData.birthday}"　
popupCalendar="true"/>　
　　</dd>　
</dl>　
　
<h:commandButton　action="#{signupData.register}">Sign　
up</h:commandButton>　
</h:form>　
</body>　
</html>　
</f:view>　

这是一个测试页面，它使用 MyFaces 组件在 Sign up 按钮被单击时收集用户的数据和执行 signupData bean 的 register() 方法。图 4 显示了它在 Web 浏览器中可能显示的外观。

图 4. 当前的 Developer Forum Signup 应用程序

现在，我不知道您感觉怎样，但对于我来说，已经开始看上去有些杂乱了。有三种不同的 JSP 标记库（各种 f:、h: 和 t: 标记），加上各种 HTML 标记。这不是一个大型应用程序（大约仅仅 60 行），但如果需要在一段时间内维护这段代码，这可能会变得有些麻烦。

Trinidad 包括了几乎所有已经使用的标记的替代标记，并且在某些情况下，它还能更高效地实现模式（例如 label: entry field 之类内容已经使用了四次）。让我们把它转换成一个纯 Trinidad 应用程序。

用清单 6 中的内容替换整个 <h:form> 块。这是等效的 Trinidad 代码（没有验证）。更短些而且更干净些，是不是？

清单 6. Trinidad 版本的 signup 表单

<tr:form>　
<tr:panelForm>　
　　<tr:inputText　label="Screen　name:"　value="#{signupData.screenName}"/>　
　　<tr:inputText　label="Email:"　value="#{signupData.email}"/>　
　　<tr:inputText　label="Password:"　value="#{signupData.password}"　
secret="true"/>　
　　<tr:inputText　label="Password　(for　verification):"　value=""　
secret="true"/>　
　　<tr:inputDate　id="birthday"　value="#{signupData.birthday}"/>　
</tr:panelForm>　
　
<tr:commandButton　text="Sign　up"　action="#{signupData.register}"　
immediate="true"/>　
</tr:form>　

<tr:inputText> 组件将创建一个带标签的文本输入字段（连接到给定的 bean 属性），与原来的版本相比，它能为您省去一些额外的工作。<tr:selectInputDate> 和 <tr:commandButton> 都类似于原来使用的组件。

保存文件，并查看已对 Developer Signup 应用程序所做的更改。

部署新的 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 面板。

单击 Browse 按钮以选择 .war 文件的目标目录和文件名。（我把文件作为 devSignup.war 保存到桌面上，以便在将其部署到服务器上时可以轻松地找到它。）

单击 Finish 以导出 .war 文件。

启动您喜欢使用的 Web 浏览器，并访问 http://localhost:8080/console/（如果不是在同一台计算机上运行，则将 localhost 替换为 Geronimo 服务器的主机名）。这将显示 Geronimo 管理控制台登录屏幕。

登录（记住，默认的用户名为 server，默认的密码为 manager，因此应当更改这些信息）以访问管理控制台。

如果 devSignup 已经运行在服务器上（因为按照先前的教程执行了操作），请单击屏幕左侧列表的 Applications 部分中的 Web App WARs 条目。这将提供一个所有已安装 Web 应用程序的列表，每个应用程序旁边都有一个 Uninstall 链接。请在尝试部署新版本之前先卸载 devSignup。

单击 Console Navigation 列表的 Applications 部分中的 Deploy New 以显示 Install New Applications 屏幕。

单击 Archive 字段旁边的 Browse 按钮，并浏览到最近创建的 .war 文件。由于 Start app after install 已经被选中，因此单击 Install 以上传 .war 文件并启动应用程序。当浏览器上传完存档文件并且 Geronimo 启动完应用程序后，您将看到一条成功消息。

现在当访问 Developer Signup 应用程序时（在我的系统上是 http://localhost:8080/devSignup/signup.faces；如果服务器不是在您的本地计算机中运行，则请使用服务器的主机名而不要使用 localhost），应当会看到类似图 5 所示的应用程序。

图 5. 改进后的应用程序

太棒了！您已经将 Developer Signup Web 应用程序成功地从 MyFaces/Tomahawk 混合型应用程序转换为纯 Trinidad 应用程序。

结束语

您已经研究了 Trinidad 组件，了解了如何将这些组件添加到 Eclipse Web 应用程序项目中，并使用它们重写了第一个教程中开始的 Developer Forum Signup 应用程序。

请继续关注第 5 部分，本系列教程的最后一部分，您将了解如何将 JSF 应用程序集成到 Spring 框架中。

本文示例源代码或素材下载