练习 2.2:格式化数据表
在准备开始格式化数据表之前,必须已经完成了整个模块 1:创建具有数据连接的 Web 页面或练习 2.1:导入必需的资源。
all_records.jsp 页上的数据表具有实用的外观。它显示数据库中的所有记录以及指向它打算链接至的其它页面的链接,但外观不是很吸引人。在此练习中,将通过添加一些项(如分页控件、样式规则和待售商品的图片)来改善此数据表。
重命名列标题
很多情况下,您可能不希望数据表中的列标题正好就是数据库中的列名。下列步骤将说明如何将数据表列标题重命名为更适当的名称。
- 在“项目资源管理器”视图中双击 all_records.jsp 页。
- 单击数据表中的 Maincategory 列标题。
- 在“属性”视图中,将值文本字段从 Maincategory 更改为 Category。
- 如果您愿意,可以重命名其它列。
- 保存页面。
格式化 JSF 输出组件
还可以格式化输出组件。在这些步骤中,将格式化 {PRICE} 输出组件,使之以货币值(而不是普通的数字)的形式出现。
- 在页面上单击 {PRICE} 输出组件。
- 在“属性”视图中,将类型从十进制更改为货币。
- 现在,每一商品的价格都将以货币样式显示出来,而不是显示为普通数字。
其它样式和格式可用于不同类型的数据(如百分比、日期和时间)。还可以定制输出组件的格式以显示未列示在“属性”视图中的某种类型的数据(如电话号码)。
- 保存页面。
对数据进行排序
现在,数据未按任何顺序列示。为了向用户提供一个更有条理的广告列表,按类别对记录列表进行排序,以便类似的商品都集中在一起。
- 在“页数据”视图中,右键单击 all_recordlist (ADS) 并从上下文菜单中单击配置。将打开“配置数据列表”窗口。
如果出现警告消息并且声明无法与数据库建立连接,则原因是在测试 Web 站点之后您让服务器仍然运行。如果发生这种情况,在每个对话框中单击“取消”并如练习 1.3:测试 Web 站点中的停止服务器所述停止服务器。
- 在此窗口的条件选项卡上,单击排序方式选项卡。
- 在“可用的列”窗格中,单击 MAINCATEGORY。
- 单击 > 按钮以将 MAINCATEGORY 列移动到“排序方式”窗格中。
该窗口看起来应类似于下图:

- 单击关闭以应用排序更改。
现在,数据将按类别排列。可以按数据库中的任何列排列。
添加分页控件
为了使每条记录不会同时显示在数据表中,可以使用分页控件。分页控件自动将记录分到设定大小的多个页中,而不必在项目中创建任何新的 JSP 文件。
- 单击数据表中的任何位置。
- 在“属性”视图中,从视图左边的 HTML 标记列表中单击 h:dataTable。
- 在“属性”视图中,从左边的标记列表中单击显示选项。
- 在每页行数字段中,输入 5。
- 单击添加 Web 样式分页控件。在数据表的底部将出现分页控件的大致外观的图形。
Page Designer 中的分页控件的可视化形式是一个占位符图像,并不真正反映将显示的页数,因为页数要在浏览器中装入页面时才能确定。
- 保存页面。
如果您愿意,可以使用不同样式的分页控件和页面统计信息组件来进行实践,从而找出最适用于该页面的分页控件和页面统计信息组件。
以列表形式对组框中的组件进行布局
不需要让数据表的每一列都有一个输出组件,在列中组合多个元素就可以获得更美观的布局。您将使用组框来对各组件进行排列,方式与使用隐藏的 HTML 表类似。具体地说,在添加图像组件以增强站点的视觉效果之后,您将抽取有关每个广告的大部分文本式信息并将它放置到单个数据表列中,然后将该列标记为 DETAILS。
- 将面板 - 组框组件从“选用板”的“Faces 组件”抽屉中拖至数据表的 TITLE 列。将打开“选择类型”窗口。
- 在“选择类型”窗口中选择列表作为组框类型,然后单击确定。
列表组框以单列或单行的形式来布置组框内的组件,并且既可以按垂直方向排列,又可以按水平方向排列。
- 单击组框以选择它。
- 通过使用“属性”视图,将方向更改为垂直。
- 将 {TITLE} 组件拖到列表组框中。一旦将组件添加至组框,组框中的指示性文本就会消失。
- 将图像组件从“选用板”的“Faces 组件”抽屉拖放到列表组框中。它有助于将图像组件放在组框的底部边缘上以确保图像将放置在标题下方。
- 单击刚刚添加的图像组件。
- 使用“属性”视图的大小区域来将宽度设置为 60 像素,并将高度设置为 50 像素。这样可确保无论图像在数据库中的大小如何,它们在页面上始终将显示为 60x50 大小。
- 通过将 all_recordlist 的 PHOTO 列从“页数据”视图中拖动到图像组件上来将图像组件绑定至该 PHOTO 列。这将使图像组件显示在每条记录的 PHOTO 列中找到的图像数据。
- 在“属性”视图的“基本”选项卡上,单击类型字段旁边的选择页数据对象
按钮。将打开“选择页数据对象”窗口。
- 单击 + 符号以展开 all_recordlist 关系记录列表。
- 单击 IMAGETYPE (String)。
- 单击确定。
- 保存页面。
您的页面现在看起来应该类似于下图:

以网格形式对组框中的组件进行布局
组框还可用类似于表的格式排列组件。列表类型组框只可具有一行或一列,但网格类型组框可具有任意数目的行和列。在下面的步骤中,将把 {PRICE} 和 {PHONE} 组件移动到数据表的 DESCRIPTION 列中(同时也移动这些组件的标签)。
- 将“面板 - 组框”组件从“选用板”的“Faces 组件”抽屉中拖至数据表的 DESCRIPTION 列。将打开“选择类型”窗口。
- 单击网格作为要添加的组件类型并单击确定。
- 单击新的网格组框。
- 使用“属性”视图来将此组框的列数设置为 2。
- 将输出组件从“选用板”的“Faces 组件”抽屉拖放到网格组框中。
此输出组件将是待售商品描述的标签。每个输出组件将具有的标签类似表左边单元格中的那个标签。
- 单击输出组件(它在 Page Designer 中显示为 outputText)并使用“属性”视图来把它的值指定为描述:。
- 将页面的现有 {DESCRIPTION} 组件拖动到网格组框的底部边缘。
如果将组件拖动到组框的右边位置时遇到问题,则尝试按下鼠标按键并观察光标。光标在组框中的位置指示当释放鼠标按键时组件将出现的位置。对于本练习,应在光标位于前一个组件的右边时释放鼠标按键。
- 将另一个输出组件从“选用板”拖放到组框的右边。
- 使用“属性”视图将它的值指定为价格:。
- 将现有 {PRICE} 输出组件拖放到“价格”输出文本的右边。
- 以上述同样方式拖动 {PHONE} 组件标签的新输出组件,然后将它标记为“电话号码:”。
- 将现有 {PHONE} 组件拖到“电话号码”输出文本右边的网格组框中。页面现在看起来应该类似于下图:

- 拖动现有更新列表超链接并将它放到 DESCRIPTION 列中,而不是放在网格组框中。
为此,最好的方法是单击并按住链接图标本身
并将它直接拖到网格组框下面。使用这种方法,将会同时移动文本标签和链接图标,使链接仍然起作用。如果只移动了链接或文本,则链接将不再起作用。如果发生这种情况,则从菜单栏中单击编辑 > 撤销,然后再试。
- 删除数据表的空 PRICE、PHONE 和 UPDATE 列。
要删除某列,单击该列并打开“属性”视图。接着,从视图左边的 HTML 标记列表中单击 h:dataTable,从视图右边的列表中选择想要删除的列,然后单击除去。
- 单击“描述”列的标题并使用“属性”视图将它的值字段更改为详细信息。
页面看起来应该类似于下图:

- 保存页面。
应用样式表规则
级联样式表(CSS)不仅是控制 Web 站点外观的最佳方法之一,它们也可以控制各个
JavaServer Faces 组件的外观。在下一节中,将使用项目中提供的 CSS 文件来更改此页面的外观。具体说来,您将对列标题应用一条规则并对行应用两条规则,以便创建使数据表中的每一行相互区别开来的交替颜色效果。
- 通过单击其中一个列标题选择数据表。
- 在“属性”视图中,单击 h:dataTable。
- 单击“属性”视图右上方的所有属性按钮
。
- 在属性名称下面单击 headerClass 项。此设置控制数据表标题行的外观。
- 然后,单击选择类
按钮(它按 headerClass 顺序出现在值字段中)。
将打开“选择类”窗口,显示项目样式表中的所有可用样式。目前,此项目只有一个样式表。
- 展开样式表并单击 .columnHeaderClass。
- 单击确定。

- 接下来,单击属性名称下面的 rowClasses 项,然后单击值字段中的选择类
按钮以再次打开“选择类”窗口。rowClasses 选项控制数据表中行的出现方式。
- 展开样式表,这一次同时选择 .rowClass1 和 .rowClass2
规则,方法是按住 Ctrl 键同时单击这两者。这两条规则具有不同的颜色方案,同时选择它们将会产生交替的行颜色。
- 单击确定。
- 最后,保存页面并在测试服务器上运行它。
如果您尚不熟悉在服务器上运行的应用程序,参阅练习 1.3:测试 Web 站点。
当测试页面时,它看起来应该类似于下图:

现在,您知道了一些技巧,可以使用这些技巧来使数据表变得更加生动。
现在,您可以开始进行练习 2.3:使用文件上载组件了。