内容


第三方 JavaServer Faces 控件的 Faces 库定义

Comments

引言

Java™Server Faces (JSF)技术是网络用户界面组件的通用 Java™框架。IBM® Rational® Application Developer 包含了过去数个版本中开发 JSF Web 程序的强大工具。7.5 版本为您(作为一个开发员)引入了新的功能,并以最小的代价来使用任意的第三方 JSF 组件。本文讨论了使用第三方组件库的过程,为库配置元数据,以及共享结果配置以跨开发团队进行合作。

在我们开始之前,让我们探讨一下怎样在开发环境中做到支持第三方组件。如果您有一些新的三方 JSF 控件(要么从零开始创建,或者从 Web 上下载),那么您可以做些什么呢?

  • 新的组件需要从配置板上获得,这样您就可以将其拖到 Java™Server Pages (JSP™)编辑器中的页面了。
  • 当一个组件库第一次添加至 Web 项目中时,需要将合适的资源添加至项目,并采取必要的配置步骤来使库变得可用。
  • 在将组件库添加至 Web 页面之后,需要有一种方法查看和配置 UI 组件。
  • 您还要想控制 UI 外观和行为其他细节的数量。

上面提到的所有功能,在标准的 JSF 控件中,以及基于 IBM 的 JavaServer Faces 组件库(JWL)组件库已经直接有所提供。现在您已经知道怎样展开对其他 JSF 组件库的支持。本篇文章展示了开放源 MyFaces Tomahawk 组件的新特性,以此为例,但是相同的过程适用于任意有效的 JSF 组件库。

创建一个 Faces Library Definition

Rational Application Developer V7.5 引入了为第三方组件库可共享配置的概念。您将会创建一个 Faces Library Definition(JLD),它基本上是一个配置文件加上库所需要的其他文件资源 。这些文件都存储在称为 Faces Definitions Project 的特定类型的工作区项目。

对于这些例子,首先从 Apache MyFaces 网站(http://myfaces.apache.org/download.html)下载 Tomahawk 组件 Java™档案(JAR)文件,它作为代表性的第三方组件库。

从创建包含库配置元数据的 Faces Definition Project 开始。

  1. 通过选择 File > New > Project 来启动该向导(您可以在 Web 目录之下可以找到它)。
  2. 在此向导中您只需给项目起一个名字(在本例中,该名字是 MyFaces Components),如图 1 所示。
图 1. 创建一个 Faces Definitions Project
含有文本条目区域的对话框
含有文本条目区域的对话框

接下来,为 Tomahawk 库创建一个库定义,并检查它的元素。

  1. 右击您刚刚创建的新项目并选择 New > Faces Library Definition
  2. 给新定义起一个名字(例如,tomahawk)。
  3. 点击 Jar file 区域旁边的浏览器按钮。选择您所下载的 JAR 文件的位置,或者 Apache 站点,如图 2 所示。
  4. 点击 Finish
图 2. 创建一个新的 Faces Library Definition
指定名字,文件和项目的对话框
指定名字,文件和项目的对话框

在花费少许时间分析 Tomahawk JAR 文件并生成文件之后,向导设置完毕,并打开新的 JLD 配置文件(tomahawk.jld)。在下一个章节中您将会更清晰的查看编辑器,但是现在注意包含信息的文件,以配置 Web 程序。

仅仅拥有这些库定义和它包含的项目,您已经成功地让工具意识到了 Tomahawk 组件。接下来,探讨一下工具是怎样使用这些配置的,并查看微调它们的方式。

创建一个 JSF Web 项目

现在您已经创建了一个 JSF Web 项目,以查看这些新组件库是怎样与 JSF 工具集成到一起的。

  1. 通过选择 File > New > Project > Dynamic Web Project ,来启动项目向导。
  2. 提供一个项目名。
  3. Configuration 下拉菜单中,选择 JavaServer Faces v1.1 Project
  4. 点击 Finish

注意在这里您选择的是 JavaServer Faces 配置,它是更通用 Faces Project 配置的子集。这是因为 Faces Project 也含有 IBM JWL 组件库,它可能会与第三方库相协作。通常来说,在项目中有第三方组件时,您应该使用更基本的 JSF 配置。

图 3. 创建一个测试 Web 项目
创建一个项目或者将其添加到程序的对话框
创建一个项目或者将其添加到程序的对话框

接下来在该测试项目中创建一个 JSP 页面。

  1. 在 Enterprise Explorer 中右击项目名。
  2. 选择 New > Web Page。
  3. 在向导中输入 JSP 名,如图 4 所示。
  4. 点击 Finish
图 4. 创建一个 Web 页面
左边是树状视图,右边是 preview
左边是树状视图,右边是 preview

探讨基本的第三方组件集成

  1. 当您刚刚创建的测试页面在编辑器中打开时,查看配置板视图并注意新的 tomahawk drawer,如图 5 所示(一般来说,您会在配置板的底部,发现第三方的组件库)。
图 5. 第三方组件的配置板
打开组件集的 drawer
打开组件集的 drawer

Tomahawk 组件的 drawer 会显示出来,因为您在前面创建的 Faces Library Definition ,会呈现在工作区内。

  1. 试着关闭含有定义的项目(MyFaces Components),并会发现配置板 drawer 出现了。然后重新打开下面以返回 drawer。
  2. 现在从配置板拖拉 Tomahawk 命令按钮组件到测试 JSP 上。会出现一个提示符,催促您复制新的项目资源。
  3. 点击 OK 以允许工具添加 Tomahawk 到测试项目中(注意按钮标签也会添加至页面)。
  4. 使用 Enterprise Explorer,查看路径/Web Content/WEB-INF/lib 之下的测试项目,以找到 tomahawk JAR 文件。因为该 JAR 文件会引用库定义,工具会自动将其复制到 Web 项目中,这是 Tomahawk 组件第一次得到使用。您将会在下一步看到,怎样配置其他的项目创建过程。
  5. 回到测试页面(testPage.jsp),注意 t:commandButton 标签会由一个 JSF 格式的标签所环绕。在 Page Designer 的 Design 视图中,标签会当做按钮来看待。这两种情况都会发生,因为工具认为新的标签代表了一个 JSF UI 组件。
  6. 点击页面中的按钮以选中它。在 Properties 视图下,您可以使用普通的 JSF 工具来更改按钮标签的任意属性。例如,找到 Properties 视图中按钮的值属性,并点击该按钮附近的图标,以打开已见过的捆绑对话框,生成一个 JSF 捆绑表达式。

创建附近的项目配置

现在您会返回至 Faces Library Definition ,以为创建 Web 项目添加附件的元数据。如果您在前面关闭了库定义编辑器,那么就切换至在前面创建的(MyFaces Components)并打开 tomahawk.jld 定义文件。

简略看一下库定义编辑器(如图 6 所示)。您就会注意到编辑器被分割为左边是配置部分,右边是响应左边选择部分区域的编辑器。

图 6. Faces Library Definition 编辑器
左边是概述,右边是具体信息
左边是概述,右边是具体信息

点击查看大图

在图 6 中,最顶上的 Faces Library Definition 部分被选中了,您就可以在右边配置关于库的一般信息了。接下来将会集中讲 Application Configuration 部分,当第三方库首次得到应用时,该部分都会响应对 Web 项目所做的任意更改(在提示符对话框中点击 OK 时,就能够定义操作了)。

向项目添加更多的文件

现在您已经知道,默认条件下,Rational Application Developer 将会自动向第三方库添加 JAR 文件到 Web 项目中(例如,tomahawk.jar)。但是,组件库运行时要完全发挥功能,就需要更多的配置。例如, Tomahawk 组件需要更多的 Apache Commons 代码来正常工作,所以您就需要向配置添加更多的资源。

  1. 转至 http://commons.apache.org/downloads/index.html 并下载以下的包:
    1. commons-fileupload
    2. commons-lang
  2. 解压下载的文件,并为每一个包复制 JAR 文件到工作区文件夹中,该文件夹中含有 tomahawk 组件 JAR(例如,/MyFaces Components/tomahawk)。
  3. 如有需要刷新工作区,这样您就可以在 Enterprise Explorer 中看到新的 commons-* JAR 文件了。

接下来,在库定义编辑器中执行以下操作,以向配置添加这些 JAR 文件。

  1. 在编辑器中选择 Resources 部分,并点击右边的 Add 按钮,本部分中的唯一选择是 File,所以只需点击 OK。(或者您也可以选择,右击 Resources 部分然后选择 Add > File)。
  2. 在编辑器的右边,点击 Source 路径区域附近的浏览器或者省略号 (...)按钮。
  3. 浏览找到您刚刚添加的 commons-fileupload JAR 文件,如图 7 所示,并点击 Finish 。注意默认条件下,JAR 文件将会添加到 Web 项目中的/WEB-INF/lib
  4. 重复以上过程以为 commons-lang JAR 文件创建另一个 Resource 条目。
图 7. 向库定义添加一个新的文件资源
 Select a file or a folder 对话框
Select a file or a folder 对话框

点击查看大图

附加的 Web 程序配置

Tomahawk 库中的一些组件同样需要一个过滤器,以处理运行时的资源请求。为了在 Web 项目中自动创建 MyFaces Extensions Filter ,您就可以在库定义编辑器中添加更多的配置元素 。

  1. 在 Library Definition 编辑器中选择 Application Configuration 之下的 web.xml Updates 部分。
  2. 点击 Add 并选择 Filter。点击 OK
  3. 在右边会出现一个空的过滤器配置。输入以下值,如图 8 所示:
    1. NameMyFacesExtensionsFilter
    2. Classorg.apache.myfaces.webapp.filter.ExtensionsFilter
    3. 选择并编辑 URL Mappings 之下的默认值,并将其更改为:/faces/myFacesExtensionResource/*
    4. 点击 Servlet Mappings 旁边的 Add,并输入 Faces Servlet
  4. 扩展过滤器还需要一个初始化参数。为了添加这个参数,选择编辑器左边的新过滤器然后点击 Add,以创建一个空白的 Init Param 文件。然后输入以下的值:
    1. NamemaxFileSize
    2. Value20m
    3. DescriptionSet the size limit for uploaded files.
图 8. 添加一条过滤器定义
左边是 Overview ,右边是 Filter definition and mappings
左边是 Overview ,右边是 Filter definition and mappings

点击查看大图

除了定义刚刚描述的新过滤器,web.xml Updates 部分也允许您注册新的 servlets,在使用 JSF 组件库时,向 Web 程序添加附加的环境参量。

在有些情况下,库需要 faces-config.xml 中的额外配置元素,以正常发挥功能。Application Configuration 下面的 Faces Configuration File ,用于指定额外的 faces-config 文件,以添加至 Web 程序的运行时配置中。

该文件应该位于与 Faces Library Definition 文件相同的目录之下。该文件将会复制到 Web 项目的 /WebContent/WEB-INF 文件夹中,并引用运行时使用的 web.xml。唯一的限制是新的文件不能命名为 faces-config.xml ,因为它会与 JSF Web 项目中已经出现的默认配置文件发生冲突。

测试程序配置变更

对于您刚刚所做的变更,使用 Tomahawk 组件的 Web 项目现在就有添加的附加 Commons JAR 文件,而 Extensions Filter 将会在 web.xml 中自动注册。您可以通过创建另外一个新的测试项目和 Web 页面,来确认这点。在这里,您要更新早期创建的测试项目的配置。

不论何时将 JSF 标签库安装到 Web 项目中,工具都会追踪库配置的版本。 Rational Application Developer 中直接支持的库,以及第三方库定义与为 Tomahawk 创建的定义相似。在合适时,工具会检查已存在的 Web 项目,以查看是否有可用的标签库升级,并为更新项目的配置提供一个提示符。您将会使用这种机理,来升级测试项目中的 Tomahawk 标签库。

  1. 选择库定义编辑器中左边最上部的 Faces Library Definition 部分。
  2. 在右边部分,找到 Version 区域,并将该值增加到一个更高的数值(例如,将 1.0 更改为 1.0.1),如图 9 所示。
图 9. 更改库定义的版本号
左边是概述,右边是具体信息
左边是概述,右边是具体信息

点击查看大图

  1. 保存库定义。
  2. 切换至(或者打开) Problems 视图。在一小段时间之后,一个新的 Error 会出现,以指示测试项目需要更新 Faces Resources。
  3. 在 Problems 视图中选择 Error ,右击并选择 Quick Fix
  4. 在 Quick Fix 对话框中点击 Finish
  5. 现在就会出现一个升级 Web 项目的提示符。您会看到 tomahawk URI 作为可用的新配置列出来。在该对话框中点击 Yes,如图 10 所示。
图 10. 为 JSF 组件库更新资源对话框
您可以选择 Yes, Later, 或者 Never
您可以选择 Yes, Later, 或者 Never

在资源更新对话框中回答 Yes,以继续对 Tomahawk 的项目配置工作。检查您的测试项目,以确定附加的 Commons JAR 文件已经被添加,而 Extensions Filter 会在 web.xml 中得到定义。

您刚刚执行的升级已存在 Web 项目的操作,就是库定义中为 JSF 组件库的配置变更的典型过程。实际上,库定义编辑器中 Application Configuration 部分下所做的任何更改,都需要增加版本号,以将更改推广至已存在的项目。

如果在所有的 Web 项目中都没有使用过组件库,那么就不需要对版本做更改了。正如您在下一部分中将会看到的那样,对 Application Configuration 区域之外的库定义所做的任何更改都会立即被工具捕捉到,于是不再需要更改版本号或者升级项目资源。

标签库配置

现在探讨对 Tomahawk 库定义所做的其他更改,该库定义会影响到标签基础上的工具行为。很少有设置能够影响到库中所有的标签,但是这里的大多数配置都会关注个人标签。

  1. 打开库定义编辑器,并选择 Tag Library 部分。注意编辑器右边的大多数区域,会关注该库配置板 drawer 的一般外观(标签,图标,以及打开/关闭状态)。 CSS 和 JavaScript 链接的列表是个例外,当库中的任意标签添加至页面时,两个列表都会指示应该添加至 JSP 页面的引用。
  2. 为了查看特定标签的设置,打开编辑器中的 Tag Library 节点,并找到 命令按钮 标签条目。选中它并检查这部分的区域。在编辑器的右边部分做出以下更改:
    1. 对于 label ,输入 Tomahawk's Command Button
    2. 点击小图标旁边的浏览器或者省略号(…)图标。
    3. 在显示的对话框中,选择 Standard Faces Components 之下的命令按钮图标。它将会再使用 Rational Application Developer 的内置 JSF 组件图标。保持复选框为选中状态,以自动设置相关的大型图标。
    4. 点击 OK。您的配置应该按照图 11 所示的那样。
图 11. 为单个标签配置外观
引用的细节信息
引用的细节信息
  1. 强调显示编辑器左边的命令按钮标签,并重复点击 Up 按钮,以将其移动到标签列表的顶部。编辑器中标签的顺序应该反映在配置板中。
  2. 保存库定义文件。
  3. 现在打开您早期创建的测试 JSP。在配置板上找到 Tomahawk 库的 drawer。您会注意到按钮首先会出现在 drawer 中,您刚刚选择的图标也会显示出来,新的文本标签会拖入使用,而不是标签名字。

特定标签的配置

为了查看配置板外观旁边的其他配置区域,在库定义编辑器中为命令按钮打开节点,并检查节点下面的相关部分。文章的剩余部分将会探讨其中的每一个区域,并使用一些不同的 Tomahawk 标签,来验证不同的配置选项。

Drop Properties 部分

每一个标签下的 Drop Properties 部分会关注定义拖放操作。当您从配置板或者 Page Data 视图中拖拉标签时,这些配置元素就可以应用了。

本部分中的第一个复选框,指示了拖拉标签附近是否有一个 JSF 表单。称为 Allows children 的其他复选框,指示了特定的 JSF 标签是否允许将 JSF UI 组件拖到它里面。本部分并不适用像 JSF 转化器、验证器或者 facets 这样的非 UI 标签。

像库定义中的许多其他配置元素一样,这些复选框会在向导开始检查标签库时得到设置。一般来说,大多数的设置值都是合适的,但是有一些情况您需要对设置做微调。在本例中,执行以下步骤。

  1. 打开您早期创建的 Web 页面(testPage.jsp)。
  2. Tomahawk 配置板 drawer 中,拖拉 dataTable 标签到页面中。它会简单的作为一个显示 t:dataTable 标签名的灰框出现。
  3. 现在拖拉一个 Tomahawk 标签到 dataTable 标签上。现在您已经注意到 t:column 标签会自动添加到 dataTable 里边。这是因为 dataTable 标签的 Allows children 复选框得到了合适的设置。
  4. 从配置板中拖拉 Tomahawk Command Button 标签,并试着将其直接拖到列标签中,如图 12 所示。
图 12. 将标签拖到列上
带有加号的方形图标
  1. 您也许会注意到按钮并没有按预料的那样进入到列中。相反,它会停留在列附近的 dataTable 里,这是无效的,如列表 1 所示。之所以会发生这种情况,是因为创建库定义的向导不能识别列标签的代表意义,所以默认条件下系统会阻止子标签进入列中。
列表 1. 列的不合适拖拉操作结果
<t:dataTable styleClass="dataTable" id="table1">
	<t:commandButton styleClass="commandButton"id="button1"></t:commandButton>
	<t:column styleClass="column" id="column1"></t:column>
</t:dataTable>
  1. 取消不合适的按钮拖放(点击 Ctrl-Z 或者使用 Edit > Undo JSF tag insertion)。
  2. 转回至 Tomahawk 的库定义编辑器,并找到 column 标签。
  3. Drop Properties 部分中,选择 Allows children,如图 13 所示。保存您的更改。
图 13. 更改列拖拉属性
Drop Properties Details with referenced 复选框
Drop Properties Details with referenced 复选框
  1. 转回至测试页面,并再次尝试将按钮拖到列标签上。这一次,按钮就可以进入列中了,如列表 2 所示。如果在拖拉操作时发生什么问题时,您可以将其拖到编辑器的源视图中, t:column 标签的任何地方都行。现在不要去管设计页面的外观,很快它们就可以矫正过来了。
列表 2. 矫正的标签位置
<t:dataTable styleClass="dataTable" id="table1">
	<t:column styleClass="column" id="column1">
		<t:commandButton styleClass="commandButton" id="button1">
                  </t:commandButton>
	</t:column>
</t:dataTable>

库定义编辑器的 Drop Properties 部分的其他区域,定义了工具所用字符串的列表。前两个就是需要向 JSP 页面添加的 CSS 和 JavaScript 链接。这些只适用于特定的单个标签。您可以指定 Tag Library 部分的链接。

本部分的最后一个区域,指定了可能与组件一起使用的 JSF facets 的名字。接下来的例子展示了 facet 的名字是怎样在工具中使用的。

  1. 打开 Tomahawk 库定义并转至 column 标签的 Drop Properties 部分。
  2. 点击 Allowed Facets 区域附近的 Add 新项。
  3. 将项目的名字更改为 header
  4. 保存库定义。
  5. 现在返回测试页面,并找到您在前面步骤中添加的 t:column 标签。点击以选中它。
  6. 找到并打开 Properties 视图。该视图一般位于 Web 属性页面编辑器之下。您可以通过选择 Window > Show View > Properties ,来打开它。
  7. 在列标签的 Properties 视图中,点击视图顶部的按钮以添加一个子标签,如图 14 所示。注意报头 facet 名现在就处于可用状态(因为您在前面更改了库定义)。
图 14. 通过 Properties 视图添加 facet
选项是 headerFacet, Parameter, 以及 Attribute
选项是 headerFacet, Parameter, 以及 Attribute
  1. 选择报头 Facet 选项,并注意相应的f:facet标签会添加到列的下面。

Visualization 部分

正如您在前面看到的 Tomahawk 命令按钮标签一样, Rational Application Developer 中的 JSF 工具可以直接在页面编辑器中看到第三方组件,而不需要您去做另外的配置。通过运行部分 JSF 逻辑以发布组件的 HTML 代表,可以做到这一点。

但是有时这种伪赋值过程会失败,因为组件的赋值逻辑太过复杂,或者因为实时服务器运行时需要的一些元素,没有出现在开发环境中。当这种情况发生时,会出现一个灰色的图标,就像在前面您在 dataTable 和列标签中看到的那样。

为了达到对不能自动可视化的组件的更好开发经验,库定义提供了一种基于模板的方法,以生成特定标签的可视化表示。如果库定义中提供了一种可视化模板,自动赋值过程将会被跳过,而 HTML 模板将会被评价,并由页面编辑器直接使用。

对可视化模板有一些可应用的变量。探讨这些选项的最佳方式,是查看工具提供的范例模板。这些范例代表了一些最普通的 JSF 控件类型。现在您就可以为 Tomahawk 的 dataTablecolumn 组件,创建用户定义的可视化,这样就能在用户前面获取经验的基础之上做较大的改善了。

遵循以下的步骤:

  1. 在库定义中找到 dataTable 标签,并在标签下面选择 Visualization 部分。
  2. 点击右边的 Edit 按钮(模式的文本区域是只读的)。
  3. 在显示的 Modify Visualization 对话框中,点击 Insert from Template
  4. 选择 Data table 并点击 OK。您将会看到 visualization 部分中的一些标记文本。
  5. 重复对 column 标签的操作,这次选择 Column in a data table 模板。
  6. 保存库定义。
  7. 如果测试 JSP 页面在编辑器中打开,找到并关闭它。Visualization 更改只是在页面重新打开之后才会有效。
  8. 在编辑器中再次打开测试页面,注意 dataTablecolumn 就会呈现您想要的外观了。拖拉新组件的操作要比新可视化更加简单,如图 15 所示。
图 15. 为数据表定制可视化
Submit Query 按钮

在图 15 中,列内的命令按钮标签现在就出现在页面合适的位置上。它是由您用于列标签范例模板的${children}变量决定的。当 visualization 得到核算时,该变量会由列的所有子标签替换,这样它们就会出现在页面中合适的位置中。

另外,注意您在前面步骤中向列添加的报头 facet ,会和 Drop a component here 文本一起显示。这是列模板中的${facet:header}变量存在的原因。这种变量寻找特殊名字的 JSF facet 标签(header),如果在 facer 下面没有找到子标签,那么就将其取代,您可以拖拉一个新标签(例如, outputText )到 facet 区域,然后您就会发现该新标签出现在列主体上面合适的位置。

其他的共有组件类型有一系列的范例模板。您可以逐个的研究它们,以查看关于定制可视化中可以使用的取代变量的更多范例。

Tag Attributes 部分

在库定义编辑器中找到 Tomahawk 命令按钮标签,并打开 Tag Attributes 部分以查看属性名的列表。创建库定义时会创建属性列表,该属性列表是一个固定列表。但是,您可以调整库定义这些属性的顺序,而顺序会影响到工具行为。按照以下方式来做:

  1. 在页面编辑器中打开您的测试 JSP 页面。
  2. 如果页面中什么都没有,您就从配置板中拖拉一个 Tomahawk 命令按钮。
  3. 当页面编辑器关注按钮标签时,切换至 Properties 视图。
  4. 注意属性的列表是按字母顺序分类的。在创建库定义时会执行这种顺序。
  5. 现在为 Tomahawk 库打开库定义编辑器。
  6. 找到命令按钮标签并打开 Tag Attributes 部分。
  7. 选择 dir 属性并点击 Up 按钮若干次,直到它成为最顶级的属性。
  8. 保存库定义。
  9. 返回到您的测试 JSP 页面。选择命令按钮之外的 JSF 组件(如有需要从配置板中拖拉不同的组件),然后再次选择按钮以刷新工具。
  10. 注意 dir 属性现在列在第一位。

这种排序机理可以用以重排 Properties 视图,这样最重要的和最普通的属性都会首先列出来。例如, valuestyleClass 属性都会为组件所编辑。

配置标签属性的另一个方面会指定属性代表哪一个类型。例如,在大多数情况下, onclick 代表一次 JavaScript 事件, readonly 是一种 Boolean 值,而 styleClass 指定了 CSS 类的名字。该属性遵循标准的 JSF 命名习惯(就像前面的例子一样)。

属性类型反映了 Properties 视图的行为。例如,如果您为一个 Tomahawk 标签,点击 readonly 旁边的编辑区域,它会显示出一个组合框,给您 true 或者 false 的选择,或者可以捆绑至程序数据的表达式值。

有一些第三方标签会有独一无二及特定的属性和可能的值,您可以使用库定义对其作出配置。例如:

  1. 转至库定义编辑器中的 dataTable 标签并找到 newspaperOrientation 属性。
  2. 点击 Type 元素旁边的编辑按钮。
  3. 在出现的对话框中,选择 Enum 作为类型。它意味着会列出所有可用的值。
  4. 点击 Add 按钮以为水平线和垂直线添加值,属性描述文本会显示出允许的值。
  5. 点击 OK 以设置新类,如图 16 所示。
图 16. 指定一种属性类型
 Select an Attribute Type 对话框
Select an Attribute Type 对话框

点击查看大图

  1. 返回至测试 JSP 页面。选择一个 Tomahawk dataTable 标签(如有需要从配置板中拖拉一个新标签),并切换至 Properties 视图。
  2. 找到 newspaperOrientation 属性,并注意您在编辑区域点击时,您刚刚指定的值会作为选择显示出来。

Data Binding 部分

库定义编辑器中的 Data Binding 部分,使您能够更改工具向特定 JSF 组件捆绑数据的具体方式。一般来说,默认条件大多数情况下都能创建合适的库定义,但是也许会有小部分特别的类,或者需要更改的非标准属性名。

在库定义中找到命令按钮标签,并打开 Data Binding 部分,以查看可配置值。默认条件下,您将会看到用于捆绑的属性值。该选择指定了,将数据从 Page Data 视图拖拉到页面中的 JSF 标签时,会更改什么属性。在有些情况下,不同的属性可以用于一般的捆绑,在下拉菜单中可以有其他的选择。

现在查看 Tomahawk dataTable 标签的 Data Binding 部分。您会注意到指定多值数据的复选框被选中了。选中该复选框,可以使得值表达式以一种稍微不同的方式写出来(从捆绑字符串的结尾省略一个[0])。

Data Binding 部分的最后一项,指定了显示数据集时使用的属性。您将会看到对于 Tomahawk dataTable,它被设置成了标准 JSF var 属性。在捆绑 dataTable 标签时,会分配属性,该属性还用于为 dataTable 之内的其他 JSF 组件生成捆绑表达式。它通常是和早期谈论的多值复选框一起指定。

Tomahawk 组件通常会得到正确的创建,但是您可以通过更改本部分中的值,来探讨 Data Binding 功能。注意从 Page Data 视图中拖拉数据,将会更改不同的数据。

Child Tags 部分

Child Tags是一个可以向库定义中标签添加的可选部分。该部分包含了一个模板,以生成向选中标签添加的新标签,并为一些普通的页面编辑操作提供有效的快捷方式。在接下来的例子中,向 Tomahawk 数据表添加新列,会变得更加容易。

  1. 在 Tomahawk 库定义中选择 dataTable 标签。
  2. 在编辑器中点击 Add 按钮。当对话框出现时,选择 Child Tags (唯一的选择)并点击 OK
  3. 指定 New Column 作为模式名。
  4. 输入可选的描述。
  5. 将如列表 3 所示的文本添加到如图 17 所示的 Pattern 区域中。注意模式定义了其他的 JSF 标签以组成一个新列,以及 dataTable 之内的报头部分。所有的标签前缀和一些属性值应该使用计算变量(${}表达式),您可以使用 Insert Variable 按钮将其添加至模式中。
列表 3. Pattern 标签
<${t}:column styleClass=column id=${id}>
  <${f}:facet name=header>
    <${t}:outputText value=Column Name />
  </${f}:facet>
</${t}:column>
图 17. 创建一个新的 Child Tags 模板
带有 Name, Description, 和 Pattern 区域的对话框
带有 Name, Description, 和 Pattern 区域的对话框
  1. 点击 OK 以保存新的 Child Tags 模板。
  2. 保存库定义。
  3. 现在返回至测试 JSP 页面,然后从配置板的 Tomahawk drawer 拖拉一个新的 dataTable 组件。
  4. 对于选中的 dataTable 标签,切换至 Properties 视图,并点击按钮以添加一个新的子标签。从下拉菜单中选择 New Column (这就是您刚刚为模板指定的名字)。
图 18. 向 dataTable 添加一个新列
New Column, Parameter, 和 Attribute 菜单项
  1. 注意会向带有合适值的 dataTable 添加一个新列标签,该值会由标签前缀和组件 ID 所取代。

Data Templates 部分

Data TemplatesFaces Library Definition 部分下面的可选部分,您可以使用该部分来改善 Page Data 视图的行为。当您从 Page Data 视图拖拉数据段到 JSP 页面时,会出现一个向导,以让您选择生成哪一种类型的 UI 控件。通过为组件库中的标签创建一个新的数据模式,在向导中您就有更多的选择了。

在库定义编辑器中有两个类型的数据模式。对于大多数的基本控件类型您可以使用 Property 模式。例如,您可以为 Tomahawk 的 inputDate 组件创建一个模式,并将其与 java.util.Date 类型联系起来。您可以使用 Iterative 模式,来生成与数据集相联系的更加复杂的控件。例如,在拖拉数据列表时,您可以创建一个迭代模板以生成 Tomahawk dataTablecolumn 标签。

库定义中使用的模板系统,与用于产品层次的配置相同,该配置位于 Window > Preferences > Web > JavaServer Faces Tools > Generation Templates 之下。将数据模板置于库定义中,仅仅为与库的所有用户共享库的组件,提供了一个稳定的方式。

最佳实践

现在您已经知道怎样配置库定义的公共元素,以改善使用第三方 JSF 组件的开发经验。在您配置库定义时,您可能想与其他开发者一起共享库。将库定义项目检入到源代码控制系统,将其他开发员的项目检入到他们自己的工作区中,这样可以达到共享库的最佳效果。记住您只需让库定义出现在工作区中,这样就能使工具像您预期的那样工作。

在您构建库定义时还需考虑其他的地方:

  • 如果一个 JSF 组件库需要多个 JAR 文件,那么您最好直接在 Faces Library Definition 向导中直接指定它们。对于这个 Tomahawk 范例,您在向导中只需选择 tomahawk JAR 文件,并将其他的 Apache Commons JAR 文件添加至配置中。这个过程只适用于 Tomahawk,但是有些情况,独立的 JAR 文件需要位于 classpath ,以合适的分析 JSF 组件,同时工具会生成库定义。一个例子便是 MyFaces Trinidad 组件库,对于它您可以指向 trinidad-impl jar 文件,以定义组件库,但是您需要在库定义的第二页添加 trinidad-api jar 文件,以避免产生错误。
  • 正如您在前面部分中看到的那样,如果可以使用新一点的定义的话,工具会使用库定义的版本号,来管理项目资源的升级。这种机理产生了您需要考虑采用的一些习惯:
    • 对组成组件库的 JAR 文件进行重命名,以使用通用的名字。例如,使用 tomahawk.jar 而不是 tomahawk-1.1.8.jar 作为名字。这就使得以后的升级变得更加容易,因为将来您在发布 tomahawk-1.1.9.jar (举个例子)时,您就可以升级库定义并保持相同的文件名了。以后所有对已存在 Web 项目的升级操作,都只需简单的替换 tomahawk.jar ,而不需要其他的步骤了。
    • 如果在您的工作区内对相同的标签库有多个库定义,那么工具会忽略所有的版本号,除了最高版本的版本号。为了让名字更加清晰,如果您要更改 JAR 文件名以删除特定版本的信息,最好将库定义的版本字符串变成有意义的名字。版本号最开始时是 1.0 ,但是稍后可以更改为匹配 a.b.c.d 格式的任意号码(匹配 Eclipse 插件版本规则的模式)。所以在本例中,将库版本号更改为 1.1.8,以代表您使用的 Tomahawk JAR 文件。

总结

本文探讨了在 Rational Application Developer 中使用第三方 JSF 组件的新功能。创建一个库定义是让工具意识到新组件库的简易方式。大量配置参数的存在,可以帮助您微调不同的行为。在您完成库定义配置之后,您就可以与其他的开发员轻易共享配置,这样,每一个处理组件的人都可以有相同的经验。


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Rational
ArticleID=434947
ArticleTitle=第三方 JavaServer Faces 控件的 Faces 库定义
publish-date=10122009