课程 2.1：格式化数据表

1. 在“项目资源管理器”视图中双击 all_records.jsp 页。
2. 单击数据表中的 Maincategory 列标题。
3. 在“属性”视图中，单击 h:outputText 选项卡并将值文本字段从 Maincategory 更改为 Category。
4. 如果您愿意，可以重命名其他列。
5. 保存该页面。

1. 在页面上单击 {PRICE} 输出组件。
2. 在“属性”视图中，查找类型下拉列表，并选择货币。 现在，每件商品的价格都将以货币样式显示，而不是显示为普通数字。其他样式和格式（如百分比、日期和时间）可用于不同类型的数据。还可以定制输出组件的格式以显示未列示在“属性”视图中的某种类型的数据，例如电话号码。
3. 保存该页面。

1. 在“页数据”视图（窗口 > 显示视图 > 页数据）中，右键单击 all_recordlist（ADS）并单击上下文菜单中的配置。将打开配置关系记录列表窗口。 如果出现警告消息并且声明无法与数据库建立连接，那么原因是在测试 Web 站点之后服务器仍在运行。如果发生这种情况，那么在每个对话框中单击“取消”，并按测试 Web 站点中的“停止服务器”部分中所述停止服务器。
2. 选择从作用域中检索现有记录或记录列表和复用现有记录或记录列表中的元数据定义，然后单击下一步。
3. 在下一个窗口中，单击以选择 ADS，然后单击下一步。
4. 在下一个窗口的右边，单击对结果进行排序。这将打开“排序”窗口。
5. 在“可用的列”窗格中，单击 MAINCATEGORY。
6. 单击“>”按钮以将 MAINCATEGORY 列移到“排序方式”窗格中。该窗口应类似于下图：
   
7. 单击关闭以关闭“排序”窗口。
8. 单击完成以应用更改。现在，数据将按类别排序。可以按数据库中的任何列排序。

1. 单击数据表中的任何位置。
2. 在“属性”视图中，单击视图左边的 HTML 标记列表中的 h:dataTableEx。
3. 单击 h:dataTableEx 下面的显示选项选项卡。
4. 在每页行数字段中，输入 5。
5. 单击添加 Web 样式分页控件旁边的按钮。在数据表的底部将出现分页控件的大致外观的图形。 Page Designer 中的分页控件的可视化形式是一个占位符图像，并不真正反映将显示的页数，这是因为只有在浏览器中装入页面时才能确定页数。
6. 保存该页面。 如果您愿意，可以使用不同样式的分页控件和页面统计信息组件来进行实践，从而找出最适用于该页面的分页控件和页面统计信息组件。

1. 单击“选用板”中的“增强型 Faces 组件”抽屉以打开该抽屉。将面板 － 组框组件拖至数据表的 TITLE 列。将打开“选择类型”窗口。
2. 在“选择类型”窗口中选择框作为组框类型，然后单击确定。 此组框以单列或单行的形式来布置组框内的组件，并且可以按垂直方向或水平方向排列。
3. 单击组框以选择该组框。
4. 通过使用“属性”视图，将方向更改为垂直。
5. 将 {TITLE} 组件拖到列表组框中。一旦将组件添加至组框，组框中的指示性文本就会消失。
6. 将图像组件从“选用板”的“增强型 Faces 组件”抽屉拖放到列表组框中。它有助于将图像组件放在组框的底部边缘上以确保图像将放置在标题下方。
7. 单击刚刚添加的图像组件。
8. 使用“属性”视图的大小区域来将宽度设置为 60 像素，并将高度设置为 50 像素。这样可确保无论图像在数据库中的大小如何，它们始终将以 60x50 显示在页面上。
9. 通过将 all_recordlist 的 PHOTO 列从“页数据”视图中拖动到图像组件上来将图像组件绑定至该 PHOTO 列。这将使图像组件显示在每条记录的 PHOTO 列中找到的图像数据。如果未列示 PHOTO（ByteArray）列，那么在“页数据”视图中，右键单击 all_recordlist（ADS）并从菜单中选择配置。如果“URL”窗口已打开，那么单击确定以关闭该窗口。在“配置关系记录列表”窗口中，单击下一步。选择 ADS，然后单击下一步。单击以选中 PHOTO（ByteArray）旁边的框，然后单击完成。
10. 单击已插入的图形。在“属性”视图的 hx:graphicImageEx 选项卡上，单击类型字段旁边的选择页数据对象按钮 。“选择页数据对象”窗口打开。
11. 单击以展开 all_recordlist（服务数据对象） > all_recordlist（ADS）。
12. 单击 IMAGETYPE (String)。
13. 单击确定，然后保存该页面。

您的页面现在应该类似于下图：

1. 将面板 － 组框组件从“选用板”的“增强型 Faces 组件”抽屉中拖至数据表的 DESCRIPTION 列。将打开“选择类型”窗口。
2. 单击网格作为要添加的组件类型并单击确定。
3. 单击“新建网格”组框。
4. 使用“属性”视图来将此组框的列数设置为 2。
5. 将输出组件从“选用板”的“Faces 组件”抽屉拖放到网格组框中。 此输出组件将是用于描述待售商品的标签。每个输出组件将具有类似表左边单元格中的那个标签。
6. 单击输出组件（它在 Page Designer 中显示为输出文本）并使用“属性”视图将它的值指定为描述：。
7. 将现有 {DESCRIPTION} 组件拖到网格组框的底部边缘。 如果将组件拖动到组框的右边位置时遇到问题，那么尝试按下鼠标按钮并观察光标。光标在组框中的位置指示当释放鼠标按钮时组件将出现的位置。对于本练习，应在光标位于前一个组件的右边时释放鼠标按钮。
8. 将另一个输出组件从“选用板”拖放到组框的右边。
9. 使用“属性”视图将它的值指定为价格：。
10. 将现有 {PRICE} 输出组件拖放到“价格”输出文本的右边。
11. 以上述同样方式拖动 {PHONE} 组件标签的新输出组件，然后将它标记为电话号码：。
12. 将现有 {PHONE} 组件拖到“电话号码”输出文本右边的网格组框中。 您的页面现在应该类似于下图：
    
13. 删除数据表中空的 PRICE 和 PHONE 列。要删除某列，单击该列并打开“属性”视图。接着，单击视图左边的 HTML 标记列表中的 h:dataTable，从视图右边的列表中选择要删除的列，然后单击“除去”。
14. 单击“描述”列的标题并使用“属性”视图将它的值字段更改为详细信息。 该页面应类似于下图：
    
15. 保存该页面并对它进行测试。如果您不熟悉在服务器上运行应用程序，请参阅课程 1.3：测试 Web 站点。

当测试该页面时，它应类似于下图：

任何没有相关图像的广告都将显示一个断开的链接。在下一课程中，将学习如何将文件上载组件添加至页面以添加或更改广告的图像。

您已经完成了课程 2.1。在本课程中，您已经学习了如何使用各种方法来格式化数据表。