利用 JavaServer Faces 在網頁上顯示動態資訊 > 單元 1：建立含資料連線的網頁 >
< 上一個課程 | 下一個課程 >

第 1.2 課：連接資料庫和在網頁上顯示資料

在這一課，您將瞭解如何連接資料庫和在網頁上顯示資料記錄。您也會學到如何在網頁上加入關聯式記錄清單。

本指導教學中的網站使用動態網頁和 JavaServer Faces 元件來存取資料庫和在頁面上顯示資訊。 本指導教學利用關聯式記錄和關聯式記錄清單來呈現資料庫中的資料，讓頁面以資料表或普通的 HTML 表格來顯示資料。 這些元件使用 Java™ Access Bean。

進一步瞭解 Data Access Bean

Data Access Bean 是 Enterprise Bean 的 Java Bean 表示法。它們通常用在使用 JavaServer Pages (JSP) 檔、Servlet 或連結其他 Enterprise Bean 之 Enterprise Bean 的用戶端程式中。 Access Bean 讓您不須面對管理 Enterprise Bean 生命週期的複雜性。這表示設計 Enterprise Bean 就像設計 Java Bean 一樣簡單， 不僅簡化 Enterprise Bean 用戶端程式，也縮短整體開發時間。

進一步瞭解 JavaServer Faces 和 Faces 元件

JavaServer Faces 技術協助您建置在伺服器中執行的動態 Web 應用程式的使用者介面。JavaServer Faces 組織架構會跨越不同的伺服器要求來管理 UI 狀態，它提供了用戶端所啟動之伺服器端事件的簡單開發模型。JavaServer Faces 以模型視圖控制器 (MVC) 組織架構為基礎。 對 JavaServer Faces 而言，這表示控制器是 Servlet，模型由 JavaBeans™ 表示，而視圖由只含很少（或根本不含）應用程式碼的 JavaServer Faces 元件組成。 這個模型的用途是將內容和呈現分開。

Faces 元件這類工具可協助您在 Web 應用程式中使用這個技術。Faces 元件內含在頁面內表現 JavaServer Faces 介面的 JavaServer Pages (JSP) 自訂標示庫。這個精靈可協助您建立能夠使用 Faces 元件的 JSP 檔。Faces 元件可讓您在「選用區」視圖中，將 Faces 抽屜中的元件拖放到您建立的網頁中，來開發 Web 應用程式。

比方說，您可以將輸入文字欄位拖曳至頁面表單中。 之後，您可以將「送出」按鈕拖放到輸入文字欄位旁。 最後，您可以將輸入文字欄位連接至您的資料來源。 這會使一般使用者能夠將 Web 應用程式中的資料輸入到您的資料來源中。

利用 Faces 元件建置應用程式的另一個好處是使用者介面的呈現與基礎程式邏輯無關。 這表示應用程式可以在不同平台上執行和存取資料，例如瀏覽器或掌上型裝置。
選用區的「加強型 Faces 元件」抽屜。

新增關聯式記錄清單

在這一課，您將建立關聯式記錄清單來呈現資料庫中所有的分類廣告。 接著，您將連接資料庫，並選取表格來保存您在關聯式記錄清單中需要的資訊。 最後，您會將這個關聯式記錄清單顯示在資料表的頁面上。
  • 關聯式記錄只連接資料庫中的一筆記錄。在這個情況下，關聯式記錄代表範例資料庫中的單一分類廣告。 您可以利用關聯式記錄來建立新記錄、編輯現有的記錄，或刪除舊記錄。
  • 關聯式記錄清單連接資料庫中的多筆記錄。 在這個情況下，關聯式記錄清單代表範例資料庫中從兩個分類廣告以至於所有分類廣告的任何位置。
  • 資料表將關聯式記錄清單的資料顯示在頁面上。 資料表只會指派記錄清單的位置；它們不會如同 HTML 表格那樣，將資料格式化成為列和直欄。
    進一步瞭解資料表

    資料表是 Faces JSP 頁面中的一個元件，用來存放關聯式記錄清單之類的資料物件。 雖然資料表也有類似 HTML 表格的列和欄，但用法並不像 HTML 表格。 若要像在表格中一樣來格式化輸入及輸出控制項，您必須在「選用區」的「加強型 Faces 元件」抽屜中使用「面板 - 群組框」。 「第 2.2 課：格式化資料表」有這方面的討論。

    由於資料表是 Faces 元件，不是 HTML 元件，因此，它們是用「內容」視圖來控制，而不是用 Page Designer 視圖來控制。 當使用「內容」視圖時，您可以利用多種方式來自訂資料表：
    • 新增、移除和變更直欄次序
    • 格式化文字和背景
    • 新增標頭、標底和邊距
    • 新增結果顯示的分頁

若要建立新的關聯式記錄清單：

  1. 在 Web 視景的「專案瀏覽器」視圖中，展開 ClassifiedsTutorial > WebContent。
  2. 在 WebContent 資料夾中，按兩下 all_records.jsp。 這時 all_records.jsp 檔會在編輯器中開啟。
  3. 刪除預設文字 bodyarea 的預設內容。
  4. 在「選用區」視圖中，展開「資料」抽屜。
  5. 將選用區中的關聯式記錄清單元件拖曳到空白內容區域中。 這時會開啟「新增關聯式記錄清單」視窗。
  6. 在「名稱」欄位中，鍵入 all_recordlist。 關聯式記錄清單和關聯式記錄名稱必須符合 Java 標準的變數名稱命名慣例（例如，不能有任何空格）。
  7. 確定已選取新增資料控制項。 當已選取新增資料控制項，精靈就會建立一個資料表，以將記錄清單顯示在頁面中。否則，精靈只會在頁面上建立記錄清單，不會建立該資料的外觀呈現。目前是由精靈來建立預設資料表，您稍後再加以自訂。 「新增關聯式記錄清單」視窗如下所示：
    「新增關聯式記錄清單」視窗。

    按下一步。

  8. 在精靈的下一頁，在連線名稱欄位中按一下新建，建立新的資料庫連線。 這時會開啟新建 JDBC 連線對話框。 選取建立新的連線圓鈕，再按下一步。
  9. 在選取資料庫管理程式清單中，展開 Derby，再選取 10.1。
  10. 在「資料庫位置」欄位中，按一下瀏覽， 選取 <workspace_location>\ClassifiedsTutorial\WebContent\\database， 其中，<workspace_location> 是現行工作區的目錄。 按一下確定，關閉「瀏覽資料夾」視窗。
  11. 在「類別位置」欄位中，鍵入實作 JDBC 驅動程式類別的 JAR 位置， 或按一下瀏覽，從檔案系統中選取位置。 選擇 JAR 檔的位置之後，請按一下開啟。
  12. 您可能需要輸入「使用者 ID」才能存取資料庫。不需要密碼。 「新建資料庫連線」精靈應該看起來如下：
    「新建資料庫連線」視窗。
  13. 在「新建 JDBC 連線」精靈中，按一下完成。這時會回到「新增關聯式記錄清單」精靈。
  14. 按一下配置專案的資料庫連線。 這時會開啟「JDBC 連線內容」視窗。
  15. 在「執行時期連線詳細資料」區段旁邊按一下編輯。 選取使用驅動程式管理員連線做為執行時期連線類型。 按一下完成，再按一下確定，回到「新增關聯式記錄清單」對話框。 現在已建立 Derby 資料庫的連線， 您必須選擇要呈現的表格或記錄清單。「新增關聯式記錄清單」精靈會顯示資料庫中的表格。
  16. 展開 W5SAMPLE，選取 ADS。按下一步。精靈中的其餘頁面可讓您排除記錄清單中的直欄以及執行進階選項，如定義主鍵、新增指向其他表格的關係，以及指定過濾器和排序條件。 在稍後的練習中，您將進一步瞭解這些頁面。
    「新增關聯式記錄清單」視窗。
  17. 在對話框的「新增關聯式記錄」頁面中， 您將指定要加入關聯式記錄清單中的直欄。按下一步。
  18. 在本指導教學中，您只需要顯示每個分類廣告的標題、說明、種類、價格及電話號碼。 依預設會選取所有直欄；除了保留下列直欄，請按一下來清除其他所有直欄：
    • MAINCATEGORY: String
    • TITLE: String
    • DESCRIPTION: String
    • PRICE: BigDecimal
    • PHONE: String
  19. 您可以修改資料表在網頁上的組織。若要重新排序直欄，請選取直欄，然後按上移鍵和下移鍵，讓直欄移至您要的位置。
    依照下列次序來安排直欄：
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
    按一下完成。
    網頁現在如下所示：
    頁面目前的外觀。
  20. 儲存頁面。
在下一課，您將會看到這個頁面在實際 Web 伺服器上的外觀。 資料表和 JavaServer Faces 元件有許多格式化選項。 下一個單元說明其中部分選項。您也可以在頁面中，自行探索各種 JavaServer Faces 元件（如資料表和個別輸出元件）的「內容」視圖。

課程回顧

您已完成第 1.2 課。在這一課，您學到如何連接資料庫，也學到在網頁上利用關聯式記錄清單來顯示資料記錄。

< 上一個課程 | 下一個課程 >