練習 3.3:新增樹狀結構元件
開始之前,您必須先完成練習 3.2:新增標籤畫面元件。
插入和配置樹狀結構元件
- 插入樹狀結構元件:
- 確定 JSP 檔是開啟的。請在您的標籤畫面中選取樹狀結構畫面。
- 在「選用區」中,按一下 Faces 用戶端元件抽屜來開啟它。
- 拖曳樹狀結構元件,將它放在「設計」視圖的「樹狀結構」畫面中。
- 配置樹狀結構元件的內容:
- 寬度和高度(像素或相對大小)可讓您將樹狀結構局限在畫面的控制區域中。
如果樹狀結構比較大,且使用者展開節點,就會出現捲軸,供您檢視樹狀結構的不同區域。
請選取寬度 600 像素和高度 200 像素。
- 是否顯示根節點。這個指導教學保留選取狀態。
- 選取節點,當啟用時,會在樹狀結構各節點旁建立一個勾選框。請勾選啟用選取節點。
- 確定您已備妥用戶端資料。
如果您已完成這個指導教學的其他區段,「頁面資料」視圖中可能已有一個 Bean,「用戶端資料」視圖也會有對應的 Bean。
如果沒有的話,請依照練習 2.2:新增伺服器端資料和練習 2.3:建立和配置用戶端資料所說明來建立它們。
- 將資料連結至樹狀結構元件。
您希望樹狀結構顯示使用者及其投資組合的清單。
- 將 Root Bean 從「用戶端資料」視圖拖曳至樹狀結構中。
您將提供樹狀結構的起點(作為樹根的根物件),再指示樹狀結構的第一層次應該使用這個根節點的哪些內容。
對於樹狀結構中的每個節點,您將指定如何遵循資料來尋找子項節點。
- 在「內容」視圖中,按一下樹狀結構,選取樹狀結構節點清單標籤。
- 展開所有節點,選取 root、users 和 portfolios. 您可以變更對映、選取其他節點,再查看它們如何影響樹狀結構的呈現。
如果給定節點有多個子項,您可以挑選多個子項。
即使節點在資料結構中間(比方說,投資組合有一份位置清單,每個位置都有一項股票),您也不需要選取任何子項節點,使這個所選節點成為葉節點。
當選取 root(隱含地選取)、users 和 portfolios 時,您便告訴樹狀結構只顯示資料的這個特定路徑,並停止在投資組合上。
- 您可以自訂每個節點的呈現方式。您可以執行下列動作:
- 如果節點有任何內容,您可以選取節點標籤要用的內容。
- 如果節點沒有內容,您可以輸入一個值來作為節點標籤。
- 您可以指定節點展開或收合時的圖示來置換預設資料夾和檔案圖示。
root 和 portfolios 節點只有一個內容,很適合預設選項。
不過,User 類別有許多內容。
請按一下 users 類別,選取標籤值欄位的 @{lastName} 內容,使用者節點會顯示使用者的姓。
您的任何自訂作業都是以類別為基礎。
這表示如果樹狀結構的許多位置顯示以例如 User 類別為基礎的節點,這些節點就會有相同的自訂選項。
不論在資料結構中參照了多少次 User,都只有一個 User 類別。
設定和管理事件處理常式
Faces 用戶端元件的事件處理常式是利用快速編輯視圖來撰寫的。
對於資料格線或樹狀結構元件,您可以利用併入的事件處理常式,也可以撰寫您自己的自訂事件處理常式。以下是所包括的兩種事件處理常式:
- 設定所選物件作為目標元件中的根 - 這個處理常式會採用現行控制項中所選取的物件(選擇性地,這個物件內的特定參照),使它成為目標控制項中的根物件。
對於這類型的事件處理常式,目標控制項可以是 Web 服務以外的任何 Faces 用戶端元件,以及 Faces 用戶端所支援的標準 JavaServer Faces 元件,它們會連結至與事件起源物件相同種類的物件。
出現的配置對話框會顯示可能的目標控制項清單。
當您要樹狀視圖(來源)中所選取的物件判斷資料格線(目標)所顯示的內容時,請使用這個事件處理常式。這個處理常式不會變更資料來源的任何資料值,但它會設定所選控制項的顯示內容。
- 將所選的物件連結至另一個物件 - 這個處理常式會採用所選物件的值(選擇性地,這個物件內的特定參照),將它連結到另一個資料物件。
這個事件處理常式會設定資料物件所儲存的資料值,比方說,Java Bean、關聯式資料庫記錄等。
比方說,在 Faces 用戶端投資組合範例中,當使用者從資料格線中選擇特定股票時,這個股票物件中的欄位值會複製至 placeHolderStock 資料物件中,之後會利用它作為 Web 服務的輸入參數。
處理常式會變更這個物件所儲存的值。
樹狀結構也支援在使用 JavaScript 的瀏覽器中發生的多個用戶端事件。
如果您選取整個樹狀結構元件,在快速編輯視圖中,您可以見到以任何方式來操作樹狀結構中的任何節點時,能夠執行 Script 作業的下列廣域事件:
- onnodecollapse
- 當使用者收合節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。
如果特定節點已有 oncollapse 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
- onnodeexpand
- 當使用者展開節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。
如果特定節點已有 onexpand 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
- onnodehighlight
- 當使用者強調顯示任何節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。
比方說,引起某項運算、將呼叫的 URL,或頁面的變更。
如果特定節點已有 onhighlight 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
- onnodeselect
- 當選取任何節點時,會呼叫這個事件。
您必須啟用「選取節點」,才會發動這個事件。
如果特定節點已有 onselect 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
- onnodeunselect
- 當取消選取先前選取的任何節點時,會呼叫這個事件。
您必須啟用「選取節點」,才會發動這個事件。
如果特定節點已有 onnodeunselect 事件的事件處理常式,就會在呼叫這個事件處理常式之前,呼叫該事件處理常式。
如果您選取樹狀結構中的某個別節點,快速編輯視圖會顯示下列本端事件:
- oncollapse
- 當使用者收合節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。
- onexpand
- 當使用者展開節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。
- onhighlight
- 當使用者強調顯示指定的節點時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。
比方說,引起某項運算、將呼叫的 URL,或頁面的變更。
- onselect
- 當選取指定的節點時,會呼叫這個事件。
您必須啟用「選取節點」,才會發動這個事件。
- onunselect
- 當取消選取指定的節點時,會呼叫這個事件。
先前必須已選取它,且您必須啟用「選取節點」,才會發動這個事件。
節點所套用的自訂作業會針對個別類別來進行;因此,比方說,如果您實作 User 類別的事件處理常式,這個事件會套用在 User 類別呈現為樹狀結構節點的各個位置上。
附註:
- 如果在本端環境中,指定給定節點的處理常式,且廣域事件也有處理常式,會先呼叫本端處理常式。如果它傳回 true,就會呼叫廣域處理常式。
- 當您在快速編輯視圖中選取某事件,再按一下程式碼畫面,您會見到一些註解,說明事件目的、參數及其預期的傳回類型和值。
編輯樣式
如果您需要自訂樹狀結構元件的外觀與操作方式,請編輯稱為 tree.css 的預設階式樣式表 (CSS)。
您可以在專案瀏覽器中,找到專案中的這個檔案,位置如下:/WebContent/theme/tree.css。
現在您已準備好開始進行練習 3.4:新增圖形元件。