練習 3.3:新增樹狀結構元件

開始之前,您必須先完成練習 3.2:新增標籤畫面元件

插入和配置樹狀結構元件

  1. 插入樹狀結構元件:
    1. 確定 JSP 檔是開啟的。請在您的標籤畫面中選取樹狀結構畫面。
    2. 在「選用區」中,按一下 Faces 用戶端元件抽屜來開啟它。
    3. 拖曳樹狀結構元件,將它放在「設計」視圖的「樹狀結構」畫面中。
  2. 配置樹狀結構元件的內容:
  3. 確定您已備妥用戶端資料。 如果您已完成這個指導教學的其他區段,「頁面資料」視圖中可能已有一個 Bean,「用戶端資料」視圖也會有對應的 Bean。 如果沒有的話,請依照練習 2.2:新增伺服器端資料練習 2.3:建立和配置用戶端資料所說明來建立它們。
  4. 將資料連結至樹狀結構元件。 您希望樹狀結構顯示使用者及其投資組合的清單。
    1. 將 Root Bean 從「用戶端資料」視圖拖曳至樹狀結構中。 您將提供樹狀結構的起點(作為樹根的根物件),再指示樹狀結構的第一層次應該使用這個根節點的哪些內容。 對於樹狀結構中的每個節點,您將指定如何遵循資料來尋找子項節點。
    2. 在「內容」視圖中,按一下樹狀結構,選取樹狀結構節點清單標籤。
    3. 展開所有節點,選取 rootusersportfolios. 您可以變更對映、選取其他節點,再查看它們如何影響樹狀結構的呈現。 如果給定節點有多個子項,您可以挑選多個子項。 即使節點在資料結構中間(比方說,投資組合有一份位置清單,每個位置都有一項股票),您也不需要選取任何子項節點,使這個所選節點成為葉節點。 當選取 root(隱含地選取)、usersportfolios 時,您便告訴樹狀結構只顯示資料的這個特定路徑,並停止在投資組合上。
    4. 您可以自訂每個節點的呈現方式。您可以執行下列動作:
      • 如果節點有任何內容,您可以選取節點標籤要用的內容。
      • 如果節點沒有內容,您可以輸入一個值來作為節點標籤。
      • 您可以指定節點展開或收合時的圖示來置換預設資料夾和檔案圖示。

      rootportfolios 節點只有一個內容,很適合預設選項。 不過,User 類別有許多內容。 請按一下 users 類別,選取標籤值欄位的 @{lastName} 內容,使用者節點會顯示使用者的姓。

      您的任何自訂作業都是以類別為基礎。 這表示如果樹狀結構的許多位置顯示以例如 User 類別為基礎的節點,這些節點就會有相同的自訂選項。 不論在資料結構中參照了多少次 User,都只有一個 User 類別。
標籤畫面中的樹狀結構元件

設定和管理事件處理常式

Faces 用戶端元件的事件處理常式是利用快速編輯視圖來撰寫的。 對於資料格線或樹狀結構元件,您可以利用併入的事件處理常式,也可以撰寫您自己的自訂事件處理常式。以下是所包括的兩種事件處理常式:

樹狀結構也支援在使用 JavaScript 的瀏覽器中發生的多個用戶端事件。 如果您選取整個樹狀結構元件,在快速編輯視圖中,您可以見到以任何方式來操作樹狀結構中的任何節點時,能夠執行 Script 作業的下列廣域事件:

onnodecollapse
當使用者收合節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。 如果特定節點已有 oncollapse 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
onnodeexpand
當使用者展開節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。 如果特定節點已有 onexpand 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
onnodehighlight
當使用者強調顯示任何節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。 比方說,引起某項運算、將呼叫的 URL,或頁面的變更。 如果特定節點已有 onhighlight 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
onnodeselect
當選取任何節點時,會呼叫這個事件。 您必須啟用「選取節點」,才會發動這個事件。 如果特定節點已有 onselect 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
onnodeunselect
當取消選取先前選取的任何節點時,會呼叫這個事件。 您必須啟用「選取節點」,才會發動這個事件。 如果特定節點已有 onnodeunselect 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
如果您選取樹狀結構中的某個別節點,快速編輯視圖會顯示下列本端事件:
oncollapse
當使用者收合節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。
onexpand
當使用者展開節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。
onhighlight
當使用者強調顯示指定的節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。 比方說,引起某項運算、將呼叫的 URL,或頁面的變更。
onselect
當選取指定的節點時,會呼叫這個事件。 您必須啟用「選取節點」,才會發動這個事件。
onunselect
當取消選取指定的節點時,會呼叫這個事件。 先前必須已選取它,且您必須啟用「選取節點」,才會發動這個事件。

節點所套用的自訂作業會針對個別類別來進行;因此,比方說,如果您實作 User 類別的事件處理常式,這個事件會套用在 User 類別呈現為樹狀結構節點的各個位置上。

附註:

編輯樣式

如果您需要自訂樹狀結構元件的外觀與操作方式,請編輯稱為 tree.css 的預設階式樣式表 (CSS)。 您可以在專案瀏覽器中,找到專案中的這個檔案,位置如下:/WebContent/theme/tree.css

現在您已準備好開始進行練習 3.4:新增圖形元件

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