内容


JavaServer Faces 数据模板简介

学习怎样使用和定制模板,以更轻松地控制 Web 页面的内容和外观

Comments

基于已有的 JavaBeans™ 或者其他数据源,IBM® Rational® Application Developer V7.5.4 使得创建 JavaServer™ Faces(JSF)控件变得更加容易。在您的数据集成到 Page Data 视图之后,您可以将数据拖拉到 Faces 页面上,您可以使用页面上的向导来选择您想要放置控件的类型(Input Text fields,Output Text fields,Combo Boxes,Data Tables,以及等等)。在您做出您的决定之后,Rational Application Developer 会在页面上为您创建这些控件。另外,这些控件将会与您的数据自动联系起来。

数据模板使您能够控制在这个向导中出现的选项。您可以编辑已存在的选项,例如,更改 Check Box 标签上的所有 styleClass 属性,或者向所有的 Input Text 控件添加一个最小长度或者最大长度的值。您还可以删除任意已存在的模板选项,添加您自己的模板,或者在团队或者组织之间共享模板。

创建

创建一个 Web 项目,创建一个 Faces JavaServer Page(JSP),并导入到即将使用到的 JavaBeans。

创建一个 Web 项目:

  1. 从菜单中选择 File > New > Project > Dynamic Web Project

在 New Project 向导中执行以下操作(见于图 1):

  1. 输入 Employee 作为项目名。
  2. 选择 JavaServer Faces IBM Enhanced Project 配置项。
  3. 点击 Finish
图 1. 新 Web 项目
完成的 web 项目向导
完成的 web 项目向导

创建一个 Web 页面:

  1. 在 Enterprise Explorer 中右键点击项目名。
  2. 从下拉菜单中选择 New > Web Page
  3. 在 New Web Page 向导的 File Name 区域中,输入 viewEmployee 作为页面名(见于图 2)。
  4. 点击 Finish
图 2. New Web 页面
完成的 web 页面向导
完成的 web 页面向导

导入 JavaBeans:

  1. 下载 Employee.zip 文件(查看文章的 下载 部分),并将其保存到您的电脑上。
  2. 在 Employee 下面,Enterprise Explorer 中展开 Java Resources
  3. 右键点击 src,并选择 Import
  4. 在 Import 向导中,选择 General > Archive 文件然后点击 Next
  5. 切换至 Employee.zip 文件。
  6. 点击 Finish。

向 Page Data 视图添加 TestEmployee bean :

  1. 在 Page Data 视图中,右键点击 Page Bean
  2. 选择 New > JavaBean
  3. 在 Add JavaBean 向导中,输入 emp 作为名字,输入 com.MyCompany.TestEmployee 作为类的名字。
  4. 点击 Finish
图 3. 添加一个 Java bean
完整的 JavaBean 向导
完整的 JavaBean 向导

向 bean 添加一个方法:

  1. 在 Page Data 视图中,右键点击emp (com.MyCompany.TestEmployee)
  2. 选择 Add new JavaBean Method
  3. 在 Select Method 界面中,选择 employeeInfo (String)。
  4. 点击 OK
图 4. 添加一个方法
选择方法对话框
选择方法对话框

Page Data 视图概述

检查 Page Data 视图中的 bean:

  1. 在 Page Data 视图中,展开 emp (com.MyCompany.TestEmployee)employee (com.MyCompany.Employee)

这是一个简单的代表公司某个职员的 bean。它包含了关于该职员的信息,例如她的名字、出生日期、工作积极性、工号及其在公司内的职位。还有一种方法,可以返回关于该雇员的基本信息(她的名字和 ID)。

将 bean 拖拉到页面上:

  1. 在 Page Data 视图中,选择 emp,将其拖拉到 Web 页面上,然后释放鼠标键。

Insert JavaBeans 向导将会出现。该向导包含了页面的操控台。这些控件与 TestEmployee bean 中的区域相联系。

  1. 点击 Displaying data (read only)单选按钮。.

查看“Fields to display”下面的信息。您将会看到属性 employee.Name 的信息,它是一个字符串,生成的默认控件是 Display Text。

  1. 点击 Display Text 旁边的 down-arrow图标以查看其他的选项。

除了 Display Text,您可以选择一个 Formatted Text 控件。对于 employee.dob,它是一个日期,唯一的选项是一个 Display Date 控件。对于 employee.positionsHeld,它是一个数组,选项是拥有多个列的数据表、单个列的数据表、拥有未格式化单列的数据表。

因为您选中了“Displaying data”单选按钮,所以出现在“Fields to display”下面的选项,将会是 Output 区域以显示只读数据。

  1. 点击 Inputting data 单选按钮以查看选项编辑数据。

您将会看到,除了 employee.Name 区域的 Display Text 控件,现在选择已经被更改为一个 Input Text 区域。

点击 Input Text 旁边的 down-arrow 图标 以查看其他的选项。例如,您可以选用 Combo Box、Display Text、Formatted Text 或者一个 Input Text Area 控件。选择“Inputting data”单选按钮能够激活 Input 和 Output 控件。

接下来,您需要看一下雇员信息,但是不要在页面中更改它。

  1. 将单选按钮更改为 Displaying data(图 5)。
  2. 取消 Invoking a Method 复选框的选择。
  3. 点击 Finish
图 5. Insert JavaBeans 向导
Insert JavaBean 向导和显示的数据控件
Insert JavaBean 向导和显示的数据控件

检查您已经添加到页面的内容

查看您向页面添加了什么内容。现在页面上包含了一个带有 Output Text 控件的 HTML 表格(以便输入雇佣的名字、出生日期、工作状态,以及 ID),以及列出雇员以前位置的数据表。所有这些控件都与 TestEmployee Bean 的属性相联系。例如,名字 Output Text 与名字属性相联系,由它的值属性证明: value="#{pc_ViewEmployee.emp.employee.name}" 不用您自己来书写代码,您已经创建了含有代表雇员数据的 JavaServer Faces 控件的页面(见于图 6)。

图 6. 结果得到的控件
HTML 表格与显示的控件
HTML 表格与显示的控件

添加一个区域以提供更多的信息

现在,添加一个区域以返回雇员的信息。

  1. 在 Page Data 视图中,展开 employeeInfo()
  2. 选中 doEmployeeInfoAction(),将其拖拉到其他控件下的 Web 页面 上,释放鼠标按键。

页面上会添加一个按钮,以及匹配这种方法的操作属性:
action="#{pc_ViewEmployee.doEmpEmployeeInfoAction}"

现在这个按钮对您并没有什么作用,但是在实际的程序中, employeeInfo() 方法可以用于收集关于雇员的基本信息。

但是如果您不想生成这些特定的 JavaServer Faces 控件呢?如果您想在向导中看到不同的选项呢?接下来,您将会学习到怎样定制向导选项以及 JavaServer Faces 数据模板。

检查 JavaServer Faces 数据模板

  1. 在 Page Data 视图中,选择 emp 并将其拖到按钮后面的页面上。

当 Insert JavaBeans 向导出现时,注意 All、None 以及 Options 按钮旁边有一个链接声称“ Configure Control Types”。

  1. 点击 Configure Control Types 链接。

这将会打开 Preferences 对话框,它包含了更改 Rational Application Developer 行为的各种选项。Preferences 对话框将会对 Data Templates 页面打开(图 17)。

图 7. Preferences 界面
Data 模板偏好页面
Data 模板偏好页面

在 Preferences 对话框中有四个页面,处理 JavaServer Faces 数据模板,这些模板决定了 Insert JavaBeans 向导中显示的选项:

  • 生成模板
  • 数据模板
  • 迭代模板
  • 方法模板

模板包含了静态的文本,例如添加的标签的名字,以及变量。这些变量就是在使用模板时将会得到动态计算的项目。变量,以 ${ 开始,以 } 结尾,它允许我们将一个控件与特定的数据联系起来(例如雇员的姓名),以确保控件的 ID 在页面上是独一无二的,以及为控件创建标签等等。这些模板类似于其他的 Eclipse 模板,例如 Java > Editor > Templates下面 Preferences 对话框中的模板。尽管文中所觉的范例,只处理页面 beans,但是这些模板适用于 Page Data 视图中出现所有类型的数据,例如 Faces 管理的 beans、Java Persistence API (JPA)、Web Services 等等。

让我们总结一下每一个 JavaServer Faces 数据模板 Preferences 页面上都有些什么。

  • Generations Templates 页面包含了标签为“Use old page generation framework”的单个复选框。选中这个复选框就会禁用其他 JavaServer Faces 模板页面中的所有模板,所以我们不选中它。
  • Data Templates 页面包含了简单的模板,例如 Input Text 或者 Output Text 标签的模板;这些模板与数据的简单部分一起使用,例如一个整数或者字符串。我们将会仔细查看什么是模板,以及怎样使用它。
  • IterativeTemplates 页面包含了多个复杂的模板,例如 Data Tables 模板。数据表控件更加复杂,因为它们包含了多个子控件,例如 Columns。数据表与多个数据相联系,例如数组或者列表。
  • Method 模板适用于命令按钮。它们与方法联系在一起,例如 employeeInfo() 方法。

模板的剖析

让我们快速检查一下单个模板,并学习它最重要的部分。

  1. 点击 Data Templates 页面。
  2. 点击列表中的第一个模板并选中它(见于图 8)。
图 8. 拜伦模板的输出文本
带有选中文本的数据模板页面
带有选中文本的数据模板页面

模板的名字、Display Text 就是向导中出现的标签。Data Type、拜伦值指示了与模板协同工作的数据的类型。现在查看一下该对话框中的 Preview 部分。它显示了模板的实际内容:

<${h}:outputText styleClass="outputText" id="${id}" value="#{${value}}"> 
</${h}:outputText>

查看这个模式,您可以看见该模板将会生成一个标准的 JavaServer Faces Output Text 标签。模板的模式或者内容包含了一些特殊的字符,例如: ${} 。这些字符位于模板变量左右。变量是使用模板时将会得到动态计算的模板片段。变量的结果取决于与模板一起协调工作的数据片段,以及使用模板的页面。

例如,标签的 ID 应该是独一无二的,而标签的值属性应该与 Page Data 视图中的数据片段相联系。为了做到这一点,idvalue 是变量。本模板中使用的第三个变量, ${h},是一个 Tag Library 变量。Tag Library 变量指示了一个特定的 URI,例如 <%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%> 应该添加至页面中,如果它会没有出现的话。如果有必要的话,Tag Library 变量还可以复制 JAR 文件以及其他的资源,例如形式单到项目中。随后我们还将会探讨其他的变量,在文章的结尾由一个引用表,它列出了所有的模板变量,并给出了使用它们的范例。变量可以得到混合以及匹配,以为特定的标签创建合适的联合。

数据模板页面

让我们再看一下 Data Templates 页面。您也许会注意到有一些模板出现了两次。例如,名字为 Display Text 和拜伦的数据类型就出现了两次。这是因为 Rational Application Developer 拥有两个不同系列的模板:一个为 JavaServer Faces IBM-Enhanced 项目准备,一个为标准的 JavaServer Faces 项目准备。因为在创建 Web 项目时,我们选择的是 JavaServer Faces IBM- Enhanced 配置,它会自动安装 JavaServer Faces (BM-Enhanced)项目 facet,我们将会使用 Enhanced facet 集。

更改您的筛选规则,这样您将只会看到改善后的模板集。

  1. 找到并显示出组合框,现在它被设置成了“All templates”。
  2. 将其更改为 Enhanced templates

您将会看到自动更改的模板的表格,这样显示的就是更少的模板。现在您将会看到只有一个标签为 Display Text 的模板及其拜伦数据类型。

为了理解该表格中显示的是什么,您可以找到一个以前使用过的模板。测试中的 activeEmployee 区域是 java.lang.Boolean (不是一个原始的拜伦值)。在 Insert JavaBean 向导中,选中“Display data "单选按钮时您将会有一个选择。为了定位这个特定的模板,您可以查找这个模板的表格,以找到匹配的名字和数据类型,或者您可以搜索它:

  1. 找到 Filter 区域。
  2. 输入 Boolean

它将会显示四个模板: Display Text for boolean、Check Box for boolean、Display Text for java.lang.Boolean 以及 Check Box for java.lang.Boolean。进一步缩小这个列表:

  1. 在 Filter 搜索区域中输入 java.lang.Boolean

我们还可以根据名字,例如 Combo Box,来搜索某个特定的模板。现在您有两个选择:

  • 显示 Text for java.lang.Boolean
  • java.lang.Boolean 的复选框
  1. java.lang.Boolean 点击 Display Text。
图 9. 筛选后的模板
java.lang.Boolean 模板的页面
java.lang.Boolean 模板的页面

让我们检查一下 Preferences 页面将会告诉您关于该模板的信息。您已经知道了它的名字和数据类型。该模板还有一个选中的复选框,这意味着模板是激活的。如果复选框没有选中,那么模板就是未激活的,这样它就不会作为 Insert JavaBeans 向导中的选项提供。表格的第四列并没有一个图标,但是 Check Box 模板没有。缺少这个图标意味着 Display Text 模板并不是一个输入模板;当选中“Displaying data”单选按钮时它将会出现在向导中。Check Box 模板是一个输入模板,这样只当“Inputting data”单选按钮选中时,它才会显示出来。Check Box 模板也会以粗体显示。这意味着它将会是 java.lang.Boolean 数据类型的默认模板。当您选中“Inputting data”单选按钮时,Check Box 将会位于控件类型列表的顶部。

在表格下方是显示该模板内容的区域。在词语 Preview 的旁边是该模板的简单介绍:Display Text for Booleans。您会看到以下内容:

<${h}:outputText styleClass="outputText" id="${id}" value="#{${value}}"> 
</${h}:outputText>

当您对 activeEmployee 区域使用该模板时,它生成的是:

<h:outputText styleClass="outputText" id="activeEmployee1" 
value="#{pc_ViewEmployee.emp.employee.activeEmployee}"> 
</h:outputText>

您将会看到包含以下变量的模板:

  • ${h}– 标准的 JavaServer Faces 标签库的标签库变量。它被使用了两次:第一次是打开 outputText 标签,第二次是将其关闭。
  • ${id}– 它确保标签的 ID 在页面中都是独一无二的。
  • ${value}– 该值将标签与 PDV 的数据联系起来。

当您使用该模板时,变量 ${h} 将会由 h 代替(小写的字母“h”)。该变量也是 Rational Application Developer 的一个信号,以确保 <%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%> 标签出现在页面上。标签 ${id}activeEmployee1 代替(数据的名字加上一个独一无二的标示符)。变量 ${value}pc_ViewEmployee.emp.employee.activeEmployee 代替。

编辑一个模板

模板最主要的一个优点,在于您可以很轻松地更改它们。如果您想通过标记为斜体来区分 activeEmployee 区域该怎样做?接下来让我们来编辑模板并作出更改。

  1. 点击标记为 Display Text 的模板。
  2. 点击标记为 Edit 按钮以打开 Edit Template 视图(图 10)。
图 10. Edit Template 界面
显示文本模板的 Edit 对话框
显示文本模板的 Edit 对话框

Edit Template 对话框界面包含了对特定模板相关的信息,包含了模板的名字,模板的类作为 Data Templates 页面上的 Data Type 显示,模板是否是一个输入模板(输入模板在 Data Templates 页面上有一个输入的图标),模板的描述及其模式或者问题。如果您点击 Insert Variable 按钮,那么将会看到所有可用的模板变量。这些变量在模板中可能已经使用过了,例如idvalue。其他的,例如 label odc( odc 标签库变量),并没有得到使用,因为 Output Text 标签并不需要它。

接下来,您需要更改模式以向该模板添加形式属性,并将形式属性的值设置成 style="font-style: italic"。

  1. 在 Pattern 区域中,值的后面,输入以下内容: style="font-style: italic"

得到的结果如下:

<${h}:outputText styleClass="outputText" id="${id}" value="#{${value}}" 
style="font-style: italic">       </${h}:outputText>
  1. 点击 OK 以关闭该界面并保存您的更改。

回到 Data Templates 页面,查看 Preview 区域。您将会看到它显示了更新的模板。该模板在表格旁边有一个 Edit 图标(铅笔图标,如图 11 所示)。这意味着您的模板已经从原始的形式更改了。

没有被编辑过的 Check Box 模板,并没有这个图标。您将会看到 Revert to Default 图标对于 Display Text 模板是激活的。如果您决定删除对特定模板所作的更改,您只需点击该按钮。但是现在,保持斜体不变。

图 11. Edited Output Text 模板
显示编辑模板的数据模板页面
显示编辑模板的数据模板页面
  1. 点击 OK 以关闭 Preferences 对话框。

让我们看一下您所做的更改。您只更改了一个模板;因此,以后您只需使用该模板。

Insert JavaBean 对话框界面现在仍然显示出来。但是因为您只更改了 java.lang.Boolean 模板,所以只会生成对 activeEmployee 区域的控件。

  1. 在 Insert JavaBeans 向导中点击 Cancel。
  2. 在 Page Data 视图中,展开 empemployee
  3. 点击 activeEmployee 并将其拖拉到 Command 按钮旁边的页面。

Insert JavaBeans 对话框将会出现。

  1. 确保 Displaying data 单选按钮被选中了,并点击 Finish
  2. 保存页面。

HTML 表格已经添加至您的页面中,同时添加的还有与 activeEmployee 联系的 Output Text。该控件的字体是斜体的,结果如图 12 所示:

<h:outputText styleClass="outputText"  id="activeEmployee2" 
value="#{pc_ViewEmployee.emp.employee.activeEmployee}"  style="font-style: italic"> 
</h:outputText>
图 12. 斜体的 Output 文本
HTML 表格与 outputText 控件

通过更改一个模板,您可以确保 java.lang.Boolean 文件的 Output Text 控件使用的是斜体。您在某处做了更改,但是您可以一直使用它。

找到模板

现在,找到 为 TestEmployee bean 找到用于创建控件的其他模板。这一次,您可以自己打开 Preferences 页面。

  1. 选择 Window 菜单然后选择 Preferences

既然您处理了 Data templates Preferences 页面,Preferences 对话框将会随着打开的页面一起被打开。如果没有,或者在未来的某一天您想要找到该页面,那么您可以展开 Web > JavaServer Faces Tools > Generation Templates > Data Templates。

现在找到 EmployeeId 使用的控件。

EmployeeId 是一个整数( java.lang.Integer )。如果您浏览表格,或者在 Filter 区域中输入了 Integer 。那么您将会看到没有任何模板注册到 java.lang.Integer 。那么您将会使用什么模板呢?如果您不能对某个类找到精确匹配的对象,那么类的父型将会得到检查(现在精确的匹配不能为原始的类型找到,例如 int,注册为“primitive”的模板将会得到使用)。 java.lang.Integer 的父型是 java.lang.Number 。有注册到 java.lang.Number 的模板(在 Filter 区域中输入它),所以您知道向导中显示选项相关的那些模板。

接下来,找到 Name 使用的控件。.

Name 是一个字符串( java.lang.String )。还没有直接注册到字符串的模板,所以选中 String: java.lang.Object 的父型。有 java.lang.Object 的模板,所以这些模板作为 Name 的选项显示。在本例中,我们在向导中选择 Display Text for java.lang.Object

让我们找到 Dob 使用的控件(出生的日期)。

Dob 是一个日期( java.util.Date )。还有注册到 java.util.Date 的模板,这样这些模板作为 Dob 的选项而显示。我们在向导中选择 Display Date for java.lang.Object,这将会生成一个 Output Text 控件以及一个 Date/Time 转化器。

Position[] 是更加复杂的模板,为了进一步检查它,您需要查看 Iterative Templates 页面。

Iterative 模板

让我们知道 Positions[] 使用的 Data Table 模板。

  1. 点击 Preferences 对话框中的 Iterative Templates

Iterative Templates 页面包含了更加复杂的模板,例如用于构筑 Data Table 标签的模板。

该页面上没有模板特定地注册到 Position[],这样您将需要查看类层级结构了。 com.MyCompany.Position 的父型是 java.lang.Object,这样 java.lang.Object[] 的模板用于 com.MyCompany.Position[]

  1. 在 Filter 框中输入 Object[]

在向导中,我们选择 Data Table with multiple columns,所以让我们看一下它。

  1. java.lang.Object[] 点击 Data Table with multiple columns(见于图 13)。
图 13. Iterative 模板
Iterative 模板偏好页面
Iterative 模板偏好页面

您将注意到的第一件事情,是该模板拥有两个预映区域。这是因为 Iterative Templates 页面上的模板有两部分组成:Wrapper 模板和 Iterative 模板。Wrapper 模板是模板的外围部分。它要生成一个 JavaServer Faces Data Table 标签。Wrapper 模板包含了迭代模板。

迭代模板位于 wrapper 模板之中。在这里,您要在数据表内生成一个 JavaServer Faces Column 标签。但是,正如您在 JSP 上看到的那样,每一个 Object[] 的每一个属性都会使用 Iterative 模板。 Postion[] 拥有三项属性: PositionCode、Title 以及 PayrollCode,这样 Data Table 拥有三列(每一个属性拥有一列)。

因为很多复杂的应用都需要用到 Wrapper 和 Iterative 模板,所以它们拥有自己的变量。让我们来查看一下它。

点击 Edit 以得到 Edit Template 界面。

图 14. Editing an iterative 模板
数据表模板的 Edit 模板对话框
数据表模板的 Edit 模板对话框
  1. 点击 Wrapper 模式下面的 Insert Variable 按钮。

出现的变量有些是十分相似的,例如 Tag Library 变量,idvalue。其他的对于 Wrapper 模板来说是独一无二的。变量 iterativeTemplate 用于代替 Wrapper 模板中的迭代模板。这里的模板代替了数据表标签内的 iterativeTemplate 变量,因为这是数据表列应该在的位置。另一个独一无二的变量是 var 。这是被诸如 Data Table 之类控件所使用,这类控件为数据捆绑而使用额外的引用属性(至于 Data Table,子控件一般在值字符串中使用 var 属性的值)。

  1. 点击 Iterative 模式下面的 Insert Variable 按钮。

有一些变量又是熟悉的。对于 iterative 模板有个单独的变量是 propertyTemplate 。Data templates Preferences 页面上出现的每一个模板都是一个实际的 Property 模板。 propertyTemplate 变量用于定位 iterative 模板中的属性模板(例如,定位 Column 标签中的 Output Text 标签)。

查看一下所有三种类型的模板的位置:

  • Iterative 模板周围的 Wrapper 模板。
  • Property 模板周围的 Iterative 模板。
<Wrapper>
<Iterative>
<Property>
</Property>
</Iterative>
</Wrapper>

这就是它在 Employee 范例中的样子:

<Data Table bound to PositionsHeld>  
<Column for PositionCode>   
<Output Text bound to PositionCode>
</Output Text>  
</Column>  
<Column for Title>   
<Output Text bound to Title>
</Output Text>  
</Column>  
<Column for PayrollCode>   
<Output Text bound to PayrollCode>
</Output Text>  
</Column> 
</Data Table>

如果您想要对 Wrapper 模板作出更改,那么它将只会影响到 Data Table,它值出现了一次。如果您想要对 Iterative 模板作出更改,那么这将会影响到三列中的每一个。编辑 Wrapper 和 Iterative 模板以查看它是怎样工作的。

编辑 Iterative 模板

您可以给 Data Table 保持一个较大的边缘,并把列标签的背景颜色设置为蓝色。

为了增加 Data Table 的边缘,您可以将 Data Table 标签的边缘从 0 改为 10

  1. 在 Wrapper 模板的 Preview 区域中,向右切换直到您找到 border="0" 为止。
  2. 将其更改为 border="10"

现在您已经更新了 Column 标签。Column 包含了一个 Header facet,其中是用于给列贴上标签的 Output Text 标记。

  1. 在 Iterative 模板的 Preview 区域中,outputText 的 ID 之后,输入 style="background-color: #0080ff"

您应该以以下代码结尾:

<${hx}:columnEx id="${id}column">  
<${f}:facet name="header">   
<${h}:outputText styleClass="outputText" value="${label}" id="${id}text" 
style="background-color:#0080ff">
</${h}:outputText>  
</${f}:facet>  ${propertyTemplate}</${hx}:columnEx>
  1. 点击 OK 以关闭 Edit 对话框。
  2. 点击 OK 以关闭 Preferences 对话框。
  1. 在 Page Data 视图中,展开 empemployee
  2. 点击 positionsHeld 并将其拖拉到页面上,位于其他控件之后。

这一次,您将会看到一个有细微差异的向导视图。因为您只对 Position[] 生成控件,所以向导将会自动显示只与数组有关的选项。

  1. 在顶部的组合框中,选择 Data Table with multiple columns
  2. 点击 Finish
  3. Save 页面。

如图 15 所示,您将会看到一个新的 Data Table,它具有较大的边缘和蓝色的标签。

图 15. Data Table
带有蓝色标签的数据表
带有蓝色标签的数据表

方法模板

这一次,查看第四个 JavaServer Faces Generation templates Preferences 页面:方法模板。

  1. 选择 Window > Preferences

您将会继续处理 Iterative templates Preferences 页面,所以 Preferences 对话框将会与显示的页面一起打开。如果它没有打开,或者您想要找到这个页面,那么您可以展开 Web > JavaServer Faces Tools > Generation Templates > Iterative Templates

  1. 点击 Method Templates(图 16)。

Method Templates 页面包含了 Page Data 视图中使用的模板。您所看到的 Button 模板用于生成 Command Button,它与 employeeInfo 方法是联系在一起的。

  1. 选择 Button 模板。
  2. 点击 Edit
图 16. Button 模板
Edit 对话框和偏好页面
Edit 对话框和偏好页面

您可以使用 Edit Template 页面来编辑模板的内容,就像您对 Data Table 和 Output Text 所做的那样。如果您点击 Insert Variables,那么对于 java.lang.Boolean 模板,您将会在 Edit 对话框中看到相同的变量。这是因为 Method 模板是实际的 Property 模板,就像 Data 模板是 Property 模板一样。

  1. 点击 Cancel 以关闭该对话框

创建一个新的模板

接下来让我们假设,您需要输入关于公司新雇员的信息,而不是仅仅查看关于已存在雇员的信息。您需要收集的一段信息,是每一个人的出生日期。创建一个与 Date Picker 相关的 Input Text 控件。您需要以下面的代码结束这个标签:

<h:inputText styleClass="inputText" id="text1"  value="#{pc_Page.bean.date}" size="45"> 
<hx:convertDateTime  dateStyle="full" />  
<hx:inputHelperDatePicker id="datePicker1" /> 
</h:inputText>

现在,创建您的新模板。

  1. 选择 Data Templates 然后选择 New
  2. 输入以下信息:
  • 名字: Input Date Picker
  • 类: java.util.Date
  • 保持“Default template for this class”为未选中状态
  • 选中“Use for Input”
  • 描述:带有日期/时间转化器和日期选择器的 Input Text 控件
  1. 为模式将其粘贴:
<${h}:inputText styleClass="inputText" id="${id}" value="#{${value}}" size="45">   
<${hx}:convertDateTime dateStyle="full" />   
<${hx}:inputHelperDatePicker id="${id}datePicker" />  
</${h}:inputText>

使用该该模板,您可以自己输入变量(确定您在其前后使用了 ${} )或者点击 Insert Variables 并从列表中作出选择(见于图 17)。

图 17. 新模板
完成的新模板对话框
完成的新模板对话框
  1. 点击以保存该模板。

Back on the Data Templates 页面,顶部的筛选规则会自动切换以显示通用的模板。因为这是一个您自己创建的新模板,所以它不会出现在 Enhanced Templates 列表中。Custom Templates 列表还包含了您在早期创建的 java.lang.Boolean 模板的 Display Text。

  1. 点击 OK 以退出 Preferences 窗口。
  2. 在 Page Data 视图中,展开 empemployee
  3. 点击 dob,并将其拖拉到第二个 Data Table 之后的页面上。
  4. 在 Insert JavaBeans 界面中,选择 Inputting data 单选按钮。
  5. 在 Control Type 列中点击 down-arrow 图标,并找到您的 Input Date Picker 模板。
  6. 选中它并点击 Finish
  7. Save 页面。

一个新的 HTML 表格将会随着新控件一起生成:

<h:inputText styleClass="inputText" id="dob2"  
value="#{pc_ViewEmployee.emp.employee.dob}" size="45"> 
<hx:convertDateTime dateStyle="full" />  
<hx:inputHelperDatePicker id="dob2datePicker" /> 
</h:inputText>

您已经成功地创建了一个新的模板并在页面上使用了它。

共享、禁用以及删除模板

假设您想要与您的同事共享新的模板。让我们查看一下怎样导入和导出模板。

  1. 启动 Preferences 视图,并切换至 Data Templates 页面。

注意在右边有标记为 Import 和 Export 的按钮。

  1. 选择您的 Input Date Picker 模板。
  2. 点击 Export

这将会启动一个对话框,询问您想把导出的模板保存到什么地方。

  1. 点击 Cancel

如果您不想导出模板,我们可以通过点击 Import 来将其发送给可能使用它的同事。

如果 Insert JavaBeans 向导包含了您从来不想使用的模板那该怎样办?模板可以被暂时性地冻结,也可以永久性地删除掉。为了冻结一个模板,您可以取消它旁边复选框的选择。例如,您可以选择新的 Input Date Picker 模板,再取消它的选择。如果您要将其拖拉到页面上,那么 Input Date Picker 模板将不会出现在向导中。

如果您想永久性地删除模板,那么您可以点击 Remove 按钮。对于 Rational Application Developer 中包含的模板,您可以通过点击 Restore Removed 来取消执行的删除操作。但是,点击它将不会重新存储用户创建的模板,例如 Input Date Picker 模板,所以不要将其删除,除非您确定您永远都不会再使用它。

既然您不想删除或者冻结任何模板,那么您可以取消这个对话框的选择:

  1. 点击 Cancel 以关闭 Preferences 对话框。

变量引用

这里有对可用模板变量。除了下面表格中显示的变量,每一个模板都可以使用 Tag Library 变量。Tag Library 变量的列表将会随着项目中可用的 Libraries 而变化。

表 1. Property 模板变量

Property 模板变量显示在 Data Template 页面和 Method Template 页面中。

变量描述结果范例引用模板
操作运行的操作#{pc_ViewEmployee.
doEmpPrintEmployeeInfoAction}
按钮
id控件独一无二的标识符 name1java.lang.Object 的 Display Text
标签控件的标签MyByteArray:Link for byte[]
价值数据捆绑pc_ViewEmployee.emp.employee.name java.lang.Object 的 Display Text

表 2. Wrapper 模板变量

Wrapper 模板变量显示在 Iterative Templates 页面上。

变量描述结果范例引用模板
id控件独一无二的标识符 positionsHeld1java.lang.Object[] 带有多列的数据表
iterativeTemplate重复模板。该变量应该只被使用一次。<hx:columnEx id="positionCode1column"><f:facet name="header"><h:outputText styleClass="outputText" value="PositionCode"id="positionCode1text"></h:outputText></f:facet><h:outputText styleClass="outputText"id="positionCode1" value="#{varpositionsHeld.positionCode}"><hx:convertNumber /> </h:outputText></hx:columnEx>java.lang.Object[] 带有多列的数据表
label控件的标签PositionsHeld:java.lang.Object[] 带有单个列的数据表
value数据捆绑pc_Test.emp.employee.positionsHeldjava.lang.Object[] 带有多个列的数据表
var重复数据捆绑操作:varpositionsHeldjava.lang.Object[] 带有多个列的数据表

表 3. Iterative 模板变量

Iterative 模板变量显示在 Iterative Templates 页面上。

变量描述结果范例引用模板
id控件独一无二的标识符 positionCode1java.lang.Object[] 带有多个列的数据表
标签控件的标签PositionCode带有多个列 java.lang.Object[] 的数据表
propertyTemplate子模板。该变量应该只使用一次。 <h:outputText styleClass="outputText" id="positionCode1" value="#{varpositionsHeld.positionCode}"> <hx:convertNumber /> </h:outputText>带有多列 java.lang.Object[] 的数据表
space不间断的空间&nbsp;带有单列 java.lang.Object[] 的数据表

您所学到知识的总结

在本文中,您已经看到了怎样通过将数据从 Page Data 视图拖拉到页面来使用数据模板,以及怎样在 Preferences 对话框中定位这些模板。您检查过了定制和共享模板、编辑的模板以及创建您自己的模板可用的不同选项。有了这些知识,您就可以根据自己和公司的需要,创建满足特定条件的模板了。


下载资源


相关主题


评论

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Rational
ArticleID=456671
ArticleTitle=JavaServer Faces 数据模板简介
publish-date=12142009