練習 1.1:瞭解 Faces 用戶端

Faces 元件以 JavaServer Faces 技術為基礎。 JavaServer Faces 技術的主要好處之一,是使用者介面的呈現與基礎程式邏輯無關。 您可以利用視覺化方式來建立能夠動態存取資料,且在瀏覽器或手提式裝置中都能同樣執行的應用程式。進一步瞭解 JavaServer Faces。

Faces 用戶端元件的設計是為了補充 Faces 元件。 它們是明確建置來處理用戶端資料的瀏覽器端顯示畫面。 當使用 Faces 用戶端元件時,您可以將使用者介面元件拖曳至頁面來快速建立動態網頁。 在大部分資料驅動的網頁中,資料都會合併在 HTML 控制項中。 當使用者要檢視頁面所未顯示的資料時,瀏覽器會傳送一個要求給伺服器。 伺服器會擷取資料,將它合併在 HTML 中,再傳送新頁面給瀏覽器。 相對地,當使用 Faces 用戶端網頁時,會在控制項之外維護資料。 資料組織在控制項所能連結的正式模型中,且會儲存成每個網頁頂端的 JavaScript 物件。 這個設計可讓多個控制項連結至相同的資料。 使用者不需要與伺服器來回作業,便能檢視這項資料的不同部分,如不同的帳戶。

Faces 用戶端好處

以下是使用 Faces 用戶端的好處:

Faces 用戶端元件

Faces 用戶端元件有四種:資料格線、樹狀視圖、圖形,以及 Web 服務。 Faces 用戶端元件是利用 JavaScript 和 HTML 來建置的;圖形和 Web 服務元件也使用 Macromedia Flash。 這些元件可以彼此互動,因此,您可以將若干這些元件放在相同頁面中,再定義允許元件互動的事件。 比方說,帳戶清單可以顯示在鏈結至資料格線的樹狀結構中。 當使用者強調顯示樹狀結構中的某個帳戶時,資料格線會顯示這個帳戶的交易。 當使用者選取不同的帳戶時,並不需要與伺服器來回作業或重新載入頁面,資料格線便會顯示所選帳戶的交易組。

下圖是展開了 Faces 用戶端元件用戶端抽屜的「選用區」視圖,顯示您很容易拖曳至正在編輯的 JSP 頁面的元件。


「選用區」視圖中的 Face 用戶端抽屜

下表說明您可以利用 Faces 用戶端元件抽屜所提供的元件來執行什麼動作。

Faces 用戶端元件 說明
資料格線 這是一份表格,用來顯示關聯式資料庫的多項記錄或 JavaBean 陣列的多個項目。 它包括下列特性:
  • 按一下直欄標頭來依直欄排序資料格線(升冪或降冪)。
  • 插入頁面控制項,如顯示下一頁、上一頁、第一頁,或最後一頁。
  • 使整個資料格線或特定直欄成為可以編輯。
  • 包括將新列新增到表格中或刪除現有列的控制項。
  • 過濾資料格線所顯示的資料。
圖形 用長條圖、圓餅圖或線條圖來呈現資料。
附註:瀏覽器中必須安裝 Macromedia Flash 7 或更新的版本。
樹狀視圖 建立一個用來顯示階層式資料的樹狀結構。
Web 服務 從現有的 Web 服務中擷取資料,且不重新整理頁面。
附註:瀏覽器中必須安裝 Macromedia Flash 7 或更新的版本。

使用 Faces 用戶端元件

一般而言,開始在應用程式中使用 Faces 用戶端元件之前,您必須執行一些動作:

  1. 建立用戶端資料。所有 Faces 用戶端元件都需要用戶端資料。 您可以從下列物件建立用戶端資料:JavaBean、關聯式記錄清單、關聯式記錄,以及 EGL 記錄。 關聯式記錄清單和關聯式記錄都可以作為 Faces 元件,它們以服務資料物件 (SDO) 機制為基礎。 進一步瞭解 SDO。 如果要建立用戶端資料,請先在「頁面資料」視圖中,建立一個資料元件。 之後,再使用「用戶端資料」視圖中的「新建 > 用戶端資料」功能表。 您不能將「資料」選用區中的資料元件放在 Faces 用戶端元件上。
  2. 在 Web 視景中,建立動態 Web 專案
  3. 建立 Faces JSP 檔。 請務必選取含用戶端資料快取的基本作業作為 Faces JSP 檔的模型。

現在,您可以從「選用區」視圖的抽屜中,使用 Faces 用戶端元件。 請將元件拖曳至「設計」視圖來將元件新增到您的頁面中。

現在您已準備好開始進行練習 1.2:演練範例應用程式

使用條款 | 讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.