練習 1.2:使用關聯式記錄清單和資料表元件

開始之前,您必須先完成練習 1.1:匯入必要的資源

這個指導教學中的網站利用動態網頁來存取資料庫之類的資料來源,並將這些資料來源的資訊顯示在頁面中。 在這個練習中,您將設定 all_records.jsp 頁面來顯示資料庫中的所有分類廣告。 在之後的練習中,您要將其他頁面連接到資料庫,以便建立新的分類廣告、編輯舊的分類廣告,以及顯示過濾的廣告清單。

這個指導教學使用兩個利用 Java Server Faces 將頁面連接到資料庫的元件:關聯式記錄和關聯式記錄清單。這些元件代表資料庫中的資料,因此,資料能夠在頁面中顯示成資料表或一般 HTML 表格的形式。 這些元件使用 Data Access JavaBean;進一步學習 Data Access 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. 按一下建立新 DB 連線。這時會開啟「新建資料庫連線」視窗。
  11. 確定已選取選擇資料庫管理程式和 JDBC 驅動程式,再按下一步

指定資料庫連線資訊

顯示說明文件

您必須告訴記錄清單,要在哪裡找到它所要呈現的資料。 這是利用新建資料庫連線視窗來完成的。 在這個情況下,您要指定您在上一個練習中匯入之檔案所包括的 Cloudscape 資料庫。 建立好之後,整個網站都會使用這個連線,因此,在指導教學中,您只需要執行這個動作一次。

  1. 在「新建資料庫連線」精靈中,指定資料庫管理程式:
    1. 選取資料庫管理程式之下,展開 Cloudscape
    2. 選取 5.1 版
  2. 指定資料庫位置:
    1. 按一下資料庫位置旁的瀏覽按鈕。
    2. 瀏覽至下列目錄:

      <workspace>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database

      其中 <workspace> 是包含您目前所在之工作區的目錄。

    3. 選取 database 資料夾,再按一下確定

    您不需要新增使用者 ID 或密碼來存取資料庫。 「新建資料庫連線」精靈看起來應該像下面這樣:

    「新建資料庫連線」視窗
  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 伺服器中的外觀。

    資料表和 JavaServer Faces 元件有許多格式化選項。 部分選項會涵蓋在下一個模組(模組 2:新增進階特性)中。 您也可以在頁面中,自行探索各種 JavaServer Faces 元件(如資料表和個別輸出元件)的「內容」視圖。

現在您已準備好開始進行練習 1.3:測試網站

讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.