練習 2.5:連結資料和自訂顯示畫面
開始之前,您必須完成練習 2.4:配置資料格線元件。
連結資料和自訂顯示畫面
您要在資料格線中顯示投資組合內容位置(購買的股票),讓使用者能夠檢視給定投資組合的內容、翻看資料、排列資料和編輯數量,以執行一些簡單的分析工作。
- 在「用戶端資料」視圖中,導覽至 root.users.portfolios.positions 節點,將它拖曳至「設計」視圖的資料格線上。
Position 類別所有欄位基本資料的顯示,都會自動設定資料格線。

- 確定已選取資料格線,再按一下「內容」視圖中,在 odc:dataGrid 之下的直欄標籤來自訂直欄。
您可以利用上和下按鈕來重新安排直欄的次序。
您也可以利用新增和移除按鈕來新增或移除直欄。
當您選取一列時,您可以輸入直欄標頭的標籤、寬度和值。
依預設,會利用屬性值來作為直欄標頭。
這個指導教學將執行下列動作:
- 移除 refNum 屬性。
- 依適合您的方式來重新排列直欄。
- 輸入比較具有描述性的直欄標頭。
- 選取資料格線中的任何資料格,再選取「內容」視圖中的直欄詳細資料標籤。
「內容」視圖標籤的內容是動態的,它會自動變更來反映所選的直欄。
在「直欄」標籤中,您可以:
- 配置「直欄」標頭(您先前也可以在「直欄清單」標籤中執行這個動作)
- 指定直欄的對齊方式
- 指定直欄的寬度(像素)
- 指定直欄應該顯示唯讀資料或可編輯的欄位
- 指定直欄的資料格內容應不應該有底線,以作為使用者點按之後所產生之特殊行為的視覺化提示
這個指導教學將執行下列動作:
- 選擇
quantity, price, purchased date
的右側對齊。
- 選取
quantity
的可以編輯直欄內容。
- 您也可以配置個別直欄的顯示方式。請按一下直欄詳細資料標籤,這時會出現格式清單,其中有四個選項:
- String 是不含任何格式的基本欄位,即使欄位的基礎資料是數字或日期也是如此
- Number 會將直欄當作數字來格式化,指定樣式和格式之類的項目
- Date/Time 可讓您自訂日期、時間或日期/時間格式
- Mask 可讓您建立輸入遮罩
這個指導教學將執行下列動作:
- 將
Purchased Date
直欄設為 Date/Time。如果您在資料格線中顯示日期,您實際上會將直欄設成採用 Date 格式,這一點非常重要。
否則,就會顯示 January 1, 1970, 00:00:00 GMT 之後的毫秒數,因為它是 Java 或 JavaScript 的 Date 物件內部表示法。
- 將
price
和 quantity
直欄設為 Number。
設定和管理事件處理常式
Faces 用戶端元件的事件處理常式是利用快速編輯視圖來撰寫的。
對於資料格線或樹狀結構元件,您可以利用併入的事件處理常式,也可以撰寫您自己的自訂事件處理常式。以下是所包括的兩種事件處理常式:
- 設定所選物件作為目標元件中的根 - 這個處理常式會採用現行控制項中所選取的物件(選擇性地,這個物件內的特定參照),使它成為目標控制項中的根物件。
對於這類型的事件處理常式,目標控制項可以是 Web 服務以外的任何 Faces 用戶端元件,以及 Faces 用戶端所支援的標準 JavaServer Faces 元件,它們會連結至與事件起源物件相同種類的物件。
出現的配置對話框會顯示可能的目標控制項清單。
當您要樹狀視圖(來源)中所選取的物件判斷資料格線(目標)所顯示的內容時,請使用這個事件處理常式。這個處理常式不會變更資料來源的任何資料值,但它會設定所選控制項的顯示內容。
- 將所選的物件連結至另一個物件 - 這個處理常式會採用所選物件的值(選擇性地,這個物件內的特定參照),將它連結到另一個資料物件。
這個事件處理常式會設定資料物件所儲存的資料值,比方說,Java Bean、關聯式資料庫記錄等。
比方說,在 Faces 用戶端投資組合範例中,當使用者從資料格線中選擇特定股票時,這個股票物件中的欄位值會複製至 placeHolderStock 資料物件中,後來會利用它作為 Web 服務的輸入參數。
處理常式會變更這個物件所儲存的值。
如果您選取資料格線,快速編輯視圖會顯示下列事件:
- onhighlight
- 當使用者強調顯示某一列時,會呼叫這個事件,這個事件可讓開發人員在回應中實作任意邏輯。
比方說,引起某項運算、將呼叫的 URL,或頁面的變更。
- onselect
- 當選取列時,會呼叫這個事件。您必須啟用「選取列」,才會發動這個事件。
- onunselect
- 當取消選取列時,會呼叫這個事件。先前必須已選取它,且您必須啟用「選取列」,才會發動這個事件。
附註:當您在快速編輯視圖中選取某事件,再按一下程式碼畫面時,您會見到一些說明事件目的之註解,最重要的是,還會說明它的參數及其預期的傳回類型和值。
編輯樣式
如果您需要自訂資料格線的外觀與操作方式,請編輯稱為 datagrid.css 的預設階式樣式表 (CSS)。
您可以在「專案導覽器」中,找到專案中的這個檔案,位置如下:/WebContent/theme/datagrid.css。
進一步瞭解元件樣式。
現在您已準備好開始進行練習 2.6:在伺服器中測試。