IBM®Faces 组件是 JavaServer™ Faces Widget Library （JWL）的一部分。您可以使用它们构建一个带有丰富组件功能，并用它们来排列复杂数据的 Web 应用程序。合成的应用程序没有覆盖区域，因为它只使用了 HTML、CSS 和 JavaScript™。IBM Faces 组件 JavaServer Faces （JSR 127）的一个扩展。IBM® Rational® Application Developer Version 7.0 工具允许用户通过拖放操作使用这些组件进行快速的应用程序开发。dataTable 组件允许用户演示任何类型的列表数据，包括文本、图片、复合框等等类型。这篇文章解释了如何使用 JWL dataTable 建立一个应用程序，以及在 Rational Application Developer V7.0 环境中 dataTable 的新特性。

建立一个应用程序

下面的步骤介绍了如何使用 JSF dataTable 建立一个 Web 应用程序

在 Rational Application Developer 中建立一个动态的 Web 项目

1. 在文件菜单，点击New > Dynamic Web Project。
2. 在 Project Name box 输入项目名称，例如 MyProject。
3. 为 IBM® WebSphere® Application Server V6.1 选择一个 Target Runtime。
4. 在 Configurations context 菜单，选择 Faces Project 选项。
5. 点击 Add Project to an EAR 按钮，然后输入一个 EAR 文件名称，它要和您刚刚输入的项目名称一致，但是附加 EAR。例如：MyProjectEAR。
6. 点击 Next 按钮。
7. 确保 Base Faces Support、Enhanced Faces Components 以及 JSTL 处于活动状态。
8. 点击Finish建立动态Web项目。
9. WebDiagram.gph 文件默认是打开状态。
10. 关闭这个文件，因为您不需要使用这个特性。

建立一个新的 JavaServer 页面

1. 在新的项目中，右键点击 Web Content 文件夹然后选择 New Web Page。
2. 在 File Name 框体中输入一个页面名称。
3. 点击 Finish 按钮，增加一个 JavaServer Page™（JSP）到动态 Web 项目中。

引入 Java bean 作为您的数据源

1. 在文章的最后您可以下载到 SampleModel.zip 文件（查看资源部分）。
2. 这个 .zip 文件包含带有数据的样本 JavaBeans™，您会在 dataTable 中用到它。
3. 在 Import 窗体的 Select an Import Source 对话框中，输入 Archive。这样可以使对话框列表中只包含 Archive文件。
4. 点击 Archive 文件，然后点击 Next 按钮。
5. 点击最靠上的 Browse 按钮，定位您刚刚下载的 SampleModel.zip 文件。
6. 请确保所有出现在左边窗格中的文件夹都被选中。
7. 点击底部的 Browse 按钮选择您想要导入文件的文件夹。
8. 选择项目中的 src 文件夹。
9. 点击 Finish 按钮将 JavaBeans 导入到您的项目中。
10. 您的应用程序中可用的类的结构如图1所示：

建立页面数据

您现在可以通过刚刚导入的 JavaBeans 在您的项目中建立使用的页面数据。您将使用 samplemodel.zip 文件中的 Root.java 建立页面数据，并将它作为您的页面数据的根类。

1. 在 Page Data 视图中，右键点击 Page Bean 选项，然后选择 New > JavaBean。
2. 在 Name 对话框中输入一个 bean 的名称，例如：mybean。
3. 点击 Class 对话框旁边的按钮，输入根类的名称，在这个例子中我们使用：Root。
4. 点击 Finish 来创建页面数据.

在页面中添加一个 dataTable

1. 在 Page Data 视图中，展开 mybean 根节点。
2. 选择 Stocks 队列，将其拖拽到 JSP 上。这样会在页面上建立一个显示 Stocks 数组内容的 dataTable。
3. 您可以在对话框中的选项中配置显示那一列内容。
4. 点击 Finish 接受 dataTable 默认设置。
5. Rational Application Developer 工具会在 JSP 上建立一个 dataTable，用来显示 Stock 数组的列。
6. 转到 JSP 的资源视图。

dataTable 资源代码应该如表1所示：

                 
<hx:dataTableEx id="tableEx1" value="#{pc_File1.mybean.stocks}"
			var="varstocks" styleClass="dataTableEx" headerClass="headerClass"
			footerClass="footerClass" rowClasses="rowClass1, rowClass2"
			columnClasses="columnClass1" border="0" cellpadding="2"
			cellspacing="0">
			<hx:columnEx id="columnEx1">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="Change" 
					id="text1"></h:outputText>
				</f:facet>
				<h:outputText id="textChange1" value="#{varstocks.change}"
					styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
			<hx:columnEx id="columnEx2">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="CurrentPrice"
						id="text2"></h:outputText>
				</f:facet>
				<h:outputText id="textCurrentPrice1"
					value="#{varstocks.currentPrice}" styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
			<hx:columnEx id="columnEx3">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="Symbol" 
					id="text3"></h:outputText>
				</f:facet>
				<h:outputText id="textSymbol1" value="#{varstocks.symbol}"
					styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
			<hx:columnEx id="columnEx4">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="Volume" 
					id="text4"></h:outputText>
				</f:facet>
				<h:outputText id="textVolume1" value="#{varstocks.volume}"
					styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
			<hx:columnEx id="columnEx5">
				<f:facet name="header">
					<h:outputText styleClass="outputText" value="Percentage" 
					id="text5"></h:outputText>
				</f:facet>
				<h:outputText id="textPercentage1" value="#{varstocks.percentage}"
					styleClass="outputText">
				</h:outputText>
			</hx:columnEx>
		</hx:dataTableEx>

在服务器上运行 dataTable

1. 保存您对项目做的所有更改。
2. 从工具栏的 Project 菜单中选择 Clean 按钮。
3. 在 Servers 标签中，点击绿色的 Start the Server 图标运行 IBM® WebSphere® Application Server V6.1 应用程序。
4. 在 Project Explorer 视图中，右键点击您刚刚在 WebContent 文件夹中建立的 JSP 文件，然后选择 Run As > Run on Server。
5. 在 context 菜单中，选择 WebSphere Application Server V6.1 选项，然后点击 Finish 按钮。
6. JSP 会在 Rational Application Developer 工具的内部浏览器上运行，如图2所示：

回页首

使用新特性添加一个 Deluxe Pager

Deluxe Pager 不是 dataTable 的新组件，但是很多新特性已经在 Rational Application Developer V7.0 中讨论过。

添加一个 <hx:deluxePager>标签

1. 回到 JSP 的Design视图。
2. 选择 dataTable 选项。
3. 选择 Rational Application Developer Properties 视图来查看 dataTable 的属性。
4. 点击 Display options 标签，它是 hx:dataTableEx 的一个子标签。
5. 在 Rows per page 文本区域中，输入2，这样您就有了一个页面的一个需求。
6. 下一步，点击 添加一个 deluxe pager。
7. 这会为 dataTable 建立一个页脚，然后在 dataTable 页脚中添加 Deluxe Pager。

dataTable 的 Deluxe Pager 标签和页脚如表2所示：

                 
	   <f:facet name="footer">
			<hx:panelBox id="box1" styleClass="panelBox">
				<hx:pagerDeluxe id="deluxe1" styleClass="pagerDeluxe" />
			</hx:panelBox>
		</f:facet>

现在，当您在服务器上运行 JSP 时，dataTable 将会使用默认的 Deluxe Pager，如图3所示：同时查看表格1中 Deluxe Pager 标签的新属性列表。

您可以在 JSP 资源视图中手动设置这些新属性。

1. 回到您的 JSP 的Design 视图。
2. 选择 Deluxe Pager。
3. 选择 Rational Application Developer Properties 视图查看 Deluxe Pager 的属性。
4. 在 Properties 视图的 hx:pagerDeluxe 标签中，有两个控制框来选择启动这些特性：
1. 查看 Hide 'First' and 'Last' 按钮旁的框体，设置 showOnlyNextPrevious 的属性将 Hide 'First' and 'Last' 按钮设置为 true。
2. 察看 Hide disabled buttons 旁的框体，设置 hideDisabledButtons 属性为 true。

注释：或者，您可以按照下列步骤设置 Rational Application Developer V7.0 工具中提供的新特性：

1. 回到 JSP 的资源视图。
2. 定位 <hx:pagerDeluxe> 标签。
3. 在标签中添加一个 showOnlyNextPrevious="true" 属性。
4. 在标签中添加一个 hideDisabledButtons="true" 属性。

当您在服务器上运行 dataTable 时，合成的 dataTable 形式类似于图4所示。"first"和"last" 按钮并没有显示出来，这是由于您已经设置成只显示 next 和 previous 按钮。但是previous 按钮同样没有显示，这是由于您屏蔽并隐藏了这个按钮。

回页首

在 Output Statistics 中添加新属性

Output Statistics 不是 dataTable 的新组件，但是从 Rational Application Developer V7.0 开始，它拥有了更多的特性。

添加一个 <hx:outputStatistics> 标签

1. 回到 JSP 的 Design 视图。
2. 选择 dataTable 选项。
3. 选择 Rational Application Developer Properties 视图查看 dataTable 的属性。
4. 点击 Display options 标签，它是 hx:dataTableEx 的子标签。
5. 选择 Add page information 选项。这会在 dataTable 页脚的 Deluxe Pager 旁添加 Output Statistics。

添加到 dataTable 页脚的 Output Statistics 标签的代码如表3所示：

                 
		<hx:outputStatistics id="statistics1" styleClass="outputStatistics">
		</hx:outputStatistics>

当您在服务器上运行 JSP 页面时，dataTable 会使用默认的 Output Statistics。默认状态下，Output Statistics 只提供页面信息和所选行数的信息。由于行的选择并没有开启，因此图5只显示了页面信息。

在继续介绍 Output Statistics 组件新特性之前，我们先将选择列的属性添加到 dataTable 中。

1. 回到 JSP 的 Design 视图。
2. 选择 dataTable 选项。
3. 选择 Rational Application Developer Properties 视图查看 dataTable 的属性。
4. 点击 Row actions 标签，hx:dataTableEx 的子标签。
5. 选择 Add selection column 到表格.
6. 再次选择 Run on the server 。

当您在服务器上运行 JSP 页面时，默认的 Output Stastics 组件将会显示选择和页面的信息，如图6所示：

早期版本的 Output Statistics 组件的行为仍然是默认的情况。默认显示页面信息，如果拥有 Selection 列则显示选项信息。表格2显示了 Output Statistics 的新特性。

您可以在 JSP 资源视图中手动设置这些新属性：

1. 回到 JSP 的 Design 视图。
2. 选择 Output Statistics 选项。
3. 选择 Rational Application Developer 中的 Properties 视图，察看 Output Statistics 属性。
4. 在 Properties 视图的 hx:outputStatistics 标签中，有4个检查框和2个文本区域，他们用来启动这些新属性。
5. 选中 Show paging information 选项启动页面信息。
6. 选中Show number of selected rows 选项启动选择信息。
7. 选中Show total number of rows 选项启动总数信息。
8. 选中Show number of visible rows 选项启动行的信息。

注释：您还可以通过在 Rational Application Developer V7.0 提供的工具中输入这些选项的参数来完成以上工作：

1. 回到 JSP 的 Source 视图。
2. 定位 <hx:pagerDeluxe> 标签。
3. 在标签中添加一个 paging="true" 属性。
4. 在标签中添加一个 selected="true" 属性。
5. 在标签中添加一个 shown="true" 属性。
6. 在标签中添加一个 total="true" 属性。

添加到 dataTable 页脚的 Output Statistics 标签将会如表 4所示：

                
		<hx:outputStatistics id="statistics1" styleClass="outputStatistics"
			paging="true" selection="true" total="true" shown="true">
		</hx:outputStatistics>
	

图7显示了您在服务器上运行 dataTable 的结果。在状态栏中统计出4条信息。

为 Output Statistics 添加 Filtered 属性选项

1. 回到 JSP 的 Design 视图。
2. 选择 Output Statistics 选项。
3. 在 Rational Application Developer 中选择 Properties 视图，察看 Output Statistics 属性。
4. 在 Properties 视图的 hx:outputStatistics 标签中，有一个文本区域叫做Number of filtered rows。您既可以在这里输入一个过滤行的确定数量，也可以将其绑定到一个方法，以即时的获得过滤行的数量。您必须输入这个代码，在页面代码文件中为JSP返回过滤行。
5. 在您的项目的 src 文件夹中，打开 pagecode 包的 file1.java 文件。
6. 添加表5的代码到页面代码：

                 
		protected String filteredRows = "10";
		public String getFilteredRows() {
			return filteredRows;
		}

		public void setFilteredRows(String filteredRows) {
			this.filteredRows = filteredRows;
		}

7. 回到 Rational Application Developer 的 Properties 视图，察看 Output Statistics 属性。
8. 点击 Number of filtered rows 文本区域旁的按钮。
9. 您刚刚建立的 filteredRows 变量将会显示在窗口中。
10. 选择 variable 选项，然后点击 OK 按钮。
11. 再次在服务器上运行 JSP 页面，如前面所描述的一样，dataTable 显示出了过滤的行（查看图8）。它显示的是10，这是因为您在这个例子中为它设置的值是10，但是您可以在代码页面文件中改写代码来更改此值。

添加 Output Statistics 的 statusText 属性

新的 statusText 属性应该被设置为一个字符串。例如："我们处于页面的{0} of {1}状态。总共{3}行，选择了其中的{2}行。我们可以看到{4}行，{5}个过滤行：

• {0}和{1}将会被页面信息，可见页面和页面总数替换。
• {2}将会被选择的行信息替换。
• {3}将会被总行数信息替换。
• {4}将会被显示的行数替换。
• {5}将会被过滤得行数替换（仅当用户设置过滤属性值与过滤行数相等时，如前面章节所描述）。

如果 statusText 属性未被设置，其他5项新属性将会生效。如果这些属性都没有进行设置，那么只有页面和选项信息将会在状态栏中出现，这是由于其他属性默认状态下被设置为 false。查看表6，一个设置 statusText 属性的代码范例，查看图9所示的范例显示画面：

                
			<hx:outputStatistics id="statistics1"
			styleClass="outputStatistics" filtered="#{pc_File1.filteredRows}" 
			statusText="We are on page {0} of {1}, there are {2} rows selected 
			from a total of {3} rows. We can see {4} rows and there are {5} 
			filtered rows."></hx:outputStatistics>
		

回页首

添加一个新的 Scrolling 特性

滚动条是 Rational Application Developer V7.0 中所提到的 dataTable 的一个新特性。

在 <h:dataTable> 或者 <hx:dataTableEx> 标签上添加滚动条

从先前的版本导入到 Rational Application Developer 7.0 中的 dataTables 将会拥有 <h:dataTable> 标签；但是使用 Rational Application Developer 7.0 建立的 dataTables 将会使用 <hx:dataTableEx> 作为标签。滚动条的区域是在 dataTable 和列的标题和页脚之间。滚动条可以和页面关联，每一个 dataTable 页面都将会滚动条化。 您可以按照下列步骤在 Rational Application Developer 7.0 中指定滚动化区域的高度，以及添加新的滚动条特性：

1. 回到 JS 的 Design 视图。
2. 选择 dataTable 选项。
3. 回到 JSP 的 Source view 标签。
4. 页面现在应该显示的是 h:dataTable 标签的代码，因为您在回到资源视图之前选中了它。
5. 在开始的 h:dataTable 标签下添加 %lt;f:attribute name="scrollSize" value="20px"> 标签，将它作为子标签。
6. 您可以使用 CSS 度量单位为其设置任意单位的高度：em，ex，px，pt，pc，cm，in，mm 或者 %。

添加到 <h:dataTable> 的代码如表7所示：

                
	
			<h:dataTable id="tableEx1" value="#{pc_File1.mybean.stocks}"
				var="varstocks" styleClass="dataTableEx" headerClass="headerClass"
				footerClass="footerClass" rowClasses="rowClass1, rowClass2"
				columnClasses="columnClass1" border="0" cellpadding="2"
				cellspacing="0">
			<f:attribute name="scrollSize" value="20px"/>

	

在 <hx:dataTableEx> 标签中添加滚动条

1. 在 Rational Application Developer 中选择 Properties 视图，查看 dataTable 的属性。
2. 点击 Display options 标签，它是 hx:dataTableEx 的子标签。
3. 在 Height of scrollable area 文本区域，输入一个 数值，然后从菜单中选择一个 unit of height。它可以使 CSS 度量单位中的任意一个：em，ex，px，pt，pc，cm，in，mm 或者 %。
4. 您选择的值必须小于 dataTable 的高度，，否则 Scrolling 不会起作用。

添加到 <hx:dataTableEx> 标签的代码如表8所示：

                
	<hx:dataTableEx id="tableEx1" value="#{pc_File1.mybean.stocks}"
	    var="varstocks" styleClass="dataTableEx" headerClass="headerClass"
		footerClass="footerClass" rowClasses="rowClass1, rowClass2"
		columnClasses="columnClass1" border="0" cellpadding="2"
		cellspacing="0" scrollSize="20px"%gt;
	

当您在服务器上运行 JSP 页面时，如前面章节所描述的一样，dataTable 现在是滚动化的，如图10所示：

回页首

下载

关于下载方法的信息

参考资料

学习

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文 。
  
  
• 获得更多产品相关知识，请访问： Rational Application Developer 产品主页。
  
  
• 查看： developerWorks 技术活动和网络广播。
  
  
• 查看 Sun Microsystems：JavaServer Faces tutorial。
  
  

获得产品和技术

• 下载 Rational Application Developer V7.0 试用版：。
  
  
• 使用 IBM 试用版软件 建立您的下一个开发项目，您可以直接从 developerWorks 下载。
  
  

讨论

• Rational Software Architect、Data Architect、Software Modeler、Application Developer 和 Web Developer 论坛 ：询问关于Rational Application Developer的问题。
  
  
• WebSphere JavaServer Faces （JSF）论坛：询问关于 WebSphere JavaServer Faces （JSF）的问题。
  
  

关于作者

为本文评分

评论

回页首

内容

• 建立一个应用程序
• 使用新特性添加一个 Deluxe Pager
• 在 Output Statistics 中添加新属性
• 添加一个新的 Scrolling 特性
• 下载
• 参考资料
• 关于作者
• 建议