練習 3.2:新增標籤畫面元件

開始之前,您必須先完成練習 3.1:匯入必要的資源

插入和配置標籤畫面元件

  1. 插入標籤畫面元件:
    1. 確定您已開啟 tutorial.jsp 檔。
    2. 在「選用區」中,按一下 Faces 元件抽屜來開啟它。
    3. 拖曳標籤畫面元件,將它拖曳至「設計」視圖中的任何位置。
  2. 配置標籤畫面元件的內容:
    1. 將標籤畫面的寬度高度分別設成 700 像素和 250 像素。
    2. 在「內容」視窗的左側,選取畫面清單。請確定所有畫面所顯示的顯示完成按鈕內容都是 true。(您也可以利用畫面清單視窗來新增新的畫面,以及移動或自訂現有的畫面)。
    3. 按一下「新增畫面」,因為這個指導教學的顯示畫面需要三個畫面。
    4. 自訂每個畫面的標籤。第一個畫面輸入資料格線,第二個畫面輸入樹狀結構,第三個畫面輸入圖形
    雖然這個指導教學只變更這些內容設定,但標籤畫面元件還有許多其他可用內容設定。比方說:
  3. 選取「資料格線」畫面。將資料格線元件拖曳至「資料格線」畫面中。
「設計」視圖中的標籤畫面

管理事件處理常式

標籤畫面元件利用 JavaScript 來支援瀏覽器中若干重要的用戶端事件。 如果您選取標籤畫面(選取標籤區),快速編輯視圖中會出現下列事件:

事件

說明

onpanelenter

當進入標籤畫面控制項中的任何畫面時,會呼叫這個事件。 這使得網頁開發人員能夠新增這個事件的任意商業邏輯、驗證使用者輸入的資訊,以及準備畫面所要顯示的資訊。

onpanelexit

當結束標籤畫面控制項中的某畫面時,會呼叫這個事件。 這使得網頁開發人員能夠新增這個事件的任意商業邏輯、驗證使用者輸入的資訊及拒絕離開畫面,或控制進入下一畫面的流程。 這個事件非常重要,因為當在精靈模式(含「下一步」和「上一步」按鈕,而不是標籤)中使用標籤畫面時,它可用來建立複式流程。

oninitialpanelshow

當 UI 第一次顯示標籤畫面控制項時,會呼叫這個事件。

onfinish

當使用者按啟用的「完成」按鈕時,會呼叫這個事件。 這使網頁開發人員能夠新增這個事件的商業邏輯,比方說,驗證使用者輸入的資訊。

oncancel

當按下「取消」按鈕時,會呼叫這個事件。

對於 OnCancel 和 OnFinish 事件,您只應併入驗證可以送出或取消標籤畫面的邏輯,再採取適當動作。 請勿從這些處理常式送出表單,因為組織架構會自動完成這個動作。

如果您按一下給定畫面中的空白區域,您會見到下列事件。

事件

說明

onenter

當進入所選的畫面時,會呼叫這個事件。 這個事件的行為完全如同廣域 onpanelenter 事件,不過,它是針對給定畫面,可讓開發人員指定這個畫面專用的邏輯。

onexit

當結束所選的畫面時,會呼叫這個事件。 這個事件的行為完全如同廣域 onpanelexit 事件,不過,它是針對給定畫面,可讓開發人員指定這個畫面專用的邏輯。

如果在本端環境中,指定給定畫面的處理常式,且廣域事件也有處理常式,會先呼叫專用的處理常式。如果它在 OnExit 上傳回非空值,或在 OnEnter 上傳回 true 值,將會呼叫廣域處理常式。

要訣:當您在快速編輯視圖中選取某事件,再按一下程式碼畫面,您會見到一些註解,說明事件目的、參數及其預期的傳回類型和值。

編輯樣式

如果您需要自訂標籤畫面的外觀與操作方式,請編輯稱為 tabpanel.css 的預設階式樣式表 (CSS)。 您可以在「專案導覽器」中,找到專案中的這個檔案,位置如下:/WebContent/theme/tabtree.css

現在您已準備好開始進行練習 3.3:新增樹狀結構元件

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