< 上一课 | 下一课 >

课程 2.1：格式化数据表

all_records.jsp 页上的数据表具有实用的外观。它显示数据库中的所有记录以及指向它打算链接至的其他页面的链接，但外观不是很吸引人。在此练习中，将通过添加分页控件、样式规则和待售商品的图片来改善此数据表。

将列标题重命名

很多情况下，您可能不希望数据表中的列标题正好就是数据库中的列名。下列步骤将说明如何将数据表列标题重命名为更适当的名称。
  1. 在“企业资源管理器”视图中双击 all_records.jsp 页面
  2. 单击数据表中的 Maincategory 列标题。
  3. 在“属性”视图中，单击 h:outputText 选项卡并将值文本字段从 Maincategory 更改为 Category。
  4. 如果您愿意，可以重命名其他列。
  5. 保存该页面。

格式化输出组件

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

对数据进行排序

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

添加分页控件

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

以列表形式对组框中的组件进行布局

不需要让数据表的每一列都有一个输出组件，在列中组合多个元素就可以获得更美观的布局。您将使用组框来对各组件进行排列，与使用隐藏的 HTML 表的方式类似。具体地说，在添加图像组件以增强站点的视觉效果之后，您将获取有关每条广告的大部分文本式信息并将它放置到单个数据表列中，然后将该列标记为 DETAILS。
  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. 单击确定，然后保存该页面。
您的页面现在应该类似于下图：
该页面的当前外观。

使用组框网格来优化布局

组框还可用类似于表的格式排列组件。列表类型组框只可具有一行或一列，但网格类型组框可具有任意数目的行和列。在下面的步骤中，将把 {PRICE} 和 {PHONE} 组件及其标签移动到数据表的 DESCRIPTION 列中。
  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。在本课程中，您已经学习了如何使用各种方法来格式化数据表。
您学习了如何完成下列任务：
  • 更改列标题。
  • 对表中的数据进行排序。
  • 添加分页控件以将数据分成多个较小的 Web 页面。
  • 使用组框并以多种方式来更改表在 Web 页面上的布局。
< 上一课 | 下一课 >
反馈