练习 1.2:使用关系记录列表和数据表组件

在开始之前,必须完成练习 1.1:导入必需的资源

此教程中的 Web 站点使用动态 Web 页面来访问数据源(例如,数据库),并在页面上显示来自这些数据源的信息。在此练习中,将设置 all_records.jsp 页以显示数据库中的所有分类信息广告。在以下几个练习中,您将把其它页面连接至数据库,以便能创建新的分类信息广告、编辑旧广告并显示经过过滤的广告列表。

此教程将使用两个组件:关系记录和关系记录列表,它们都使用 Java Server Faces 来将页面连接至数据库。这些组件表示数据库中的数据,以便可以用数据表或普通 HTML 表的形式将这些数据显示在页面上。这些组件使用数据访问 JavaBeans;更多地了解数据访问 bean更多地了解 JavaServer Faces 和 Faces 组件

创建新的关系记录列表

演示

在这些步骤中,将创建一条关系记录列表来表示数据库中的所有分类信息广告。然后将连接至数据库,并在关系记录表中选择保存所需信息的表。最后,将在页面上的数据表中显示此关系记录列表。

  1. 在“项目资源管理器”视图中,展开动态 Web 项目 > ClassifiedsTutorial > WebContent
  2. WebContent 文件夹中双击 all_records.jsp。all_records.jsp 文件就会在编辑器中打开。
  3. 删除缺省文本将内容放在此处
  4. 在“选用板”视图中,单击数据抽屉以展开该抽屉。
  5. 关系记录列表组件从“选用板”拖放到空白内容区域上。

    还可能会提示您保存 all_records.jsp 文件。如果真的发出了提示,则单击确定

    将打开“添加关系记录列表”窗口。

  6. 名称字段中输入 all_recordlist

    关系记录列表和关系记录的名称必须符合变量名的 Java 标准命名约定(例如,这些名称不能包含任何空格)。

  7. 确保选择了添加数据控件

    如果选择了添加数据控件,向导就会创建数据表以在页面上显示记录列表。否则,向导将只创建记录列表而不创建该数据在页面上的任何表示。现在,将让向导创建缺省数据表,稍后您将定制该数据表。“添加关系记录列表”窗口看起来应该如下图所示:

    “添加关系记录列表”窗口

  8. 单击下一步
  9. 连接名称字段中,单击新建以创建新的数据库连接。

    将出现新建连接对话框。注意,连接名称字段将自动填充名称 ClassifiedsTutorial_Con1

  10. 单击创建新的数据库连接。将出现“新建数据库连接”窗口。
  11. 确保选择了选择数据库管理器和 JDBC 驱动程序,然后单击下一步

指定数据库连接信息

演示

必须告诉记录列表在何处可以找到您想要它表示的数据。这是通过使用新建数据库连接窗口完成的。在本例中,您将指定包括在前一个练习中导入的文件中的 Cloudscape 数据库。一旦创建之后,此连接将用于整个 Web 站点,因此,对于教程,将只需要执行一次此操作。

  1. 在“新建数据库连接”向导中,指定数据库管理器:
    1. 选择数据库管理器下面,展开 Cloudscape
    2. 选择 V5.1
  2. 指定数据库位置:
    1. 单击数据库位置旁边的浏览按钮。
    2. 浏览至以下目录:

      <workspace>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database

      其中 <workspace> 是包含当前正在使用的工作空间的目录。

    3. 选择数据库文件夹并单击确定

    不需要添加用户标识或密码就可以访问数据库。“新建数据库连接”向导看起来应该如下图所示:

    “新建数据库连接”窗口
  3. 单击完成以关闭“新建数据库连接”向导。
  4. 在“新建连接”向导中,单击完成。您会返回到“添加关系记录列表”向导。
  5. 既然已经创建了与 Cloudscape 数据库的连接,就需要选择要表示的表或记录列表。“添加关系记录列表”向导显示数据库中的表。在此教程中,大多数情况下您将使用 W5SAMPLE.ADS 表。

  6. 字段中单击 W5SAMPLE.ADS 表。

    “添加关系记录列表”窗口

    向导中的其余页面使您能够从记录列表中排除列并执行高级选项,例如,定义主键、添加与其它表的关系以及指定过滤和排序条件。您将在后面的练习中了解有关这些页面的更多信息。
  7. 单击完成

调整缺省数据表

演示

“页数据”视图现在显示 ADS 表中的列的列表,而 all_records.jsp 文件包含了此数据在数据表中的可视化形式。现在,缺省数据表包含太多信息。在此教程中,只需要显示每个分类信息广告的标题、描述、类别、价格和电话号码。遵循下列步骤以修剪和重组数据表:

  1. 单击数据表中的任何位置。
  2. 打开“属性”视图。

    “属性”视图通常在工作台底部的中央。如果找不到“属性”视图,则转至菜单栏,并单击窗口 > 显示视图 > 属性

  3. 在“属性”视图中,从视图左边 HTML 标记的列表中单击 h:dataTable
  4. 在视图的右边,单击标签下面的 ID 列,然后单击除去。就会从数据表中除去 ID 列。
  5. 重复此过程以除去数据表中除了下面各列之外的每一列:TITLE、DESCRIPTION、MAINCATEGORY、PRICE 和 PHONE。“属性”视图现在看起来应类似于如下内容:

    属性视图

    您的页面现在看起来应该类似于下图:

    页面的当前外观

    列的顺序并不适合于分类信息广告。以下顺序将更有意义:

    1. TITLE
    2. DESCRIPTION
    3. MAINCATEGORY
    4. PRICE
    5. PHONE
  6. 要对列进行重新排序,返回到“属性”视图中列的列表。单击 TITLE 标签,然后单击上移,直到将 TITLE 移至列表顶部为止。TITLE 列现在是数据表中的第一列。
  7. 类似地,一次选择一个其它列并对它们重新排序。“属性”视图的“列”部分看起来应该如下图所示:

    “属性”视图中的“列”

  8. 保存该页面。

    在下一个练习(即,练习 1.3:测试 Web 站点)中,将看到此页面在实际 Web 服务器上的外观。

    有许多用于格式化数据表和 JavaServer Faces 组件的选项。某些选项包含在下一个模块(即,模块 2:添加高级功能)中。您自己也可以研究页面上的各种 JavaServer Faces 组件(例如,数据表和各个输出组件)的“属性”视图。

您可以开始进行练习 1.3:测试 Web 站点了。

反馈
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.