目的

在本教程中，您將學習如何使用 Oracle ADF Faces 富客戶端 (RC) 創建 JSF 頁面。Oracle ADF Faces 富客戶端是一組包括內置 Ajax 功能的標準 JSF 組件。盡管 Ajax 允許類似于富客戶端的應用程序在標準的互聯網技術上運行，但 JSF 提供了服務器端控件，可以減少典型 Ajax 應用程序對大量 JavaScript 的依賴性。

所需時間

60 分鐘

主題

本教程包括下列主題：

	概述
	情景
	前提條件
	打開啟動應用程序
	創建頁面流
	使用布局組件設計頁面
	ADF 表組件和 ADF 綁定
	測試主頁面
	使用 Image 和 Gauge 組件
	使用菜單
	使用輸入組件
	實現部分頁面呈現
	向主頁面添加彈出功能
	向主頁面添加拖放功能
	使用皮膚更改應用程序的外觀
	總結

查看屏幕截圖

將鼠標置于此圖標上以加載和查看本教程的所有屏幕截圖。（警告：因為此操作會同時加載所有屏幕截圖，所以網速較慢時，響應時間可能會比較長。）

注： 此外，您還可以在下列步驟中將鼠標放在每個單獨的圖標上，從而僅加載和查看與該步驟相關的屏幕截圖。可以通過單擊各個屏幕截圖來將其隱藏。

概述

本教程將介紹如何創建 ADF 富客戶端 JSF 頁面，并介紹一些易于實現的功能（如拖放、彈出和圖像）。

返回主題列表

情景

從一個現有的應用程序開始，創建一個具有兩個頁面的頁面流圖。

主頁面一側包含購物車的內容，另一側顯示可選的商品。您實現拖放功能，通過移動購物車區域中的所選商品將其放入購物車中。您還可以創建選項卡和折疊面板 (Accordion)，并添加一個彈出窗口。

Edit 頁面顯示商品詳細信息并允許您更新所選商品的特性。

返回主題列表

前提條件

開始本教程之前，您應該：

1.	可以訪問或已安裝了 Oracle JDeveloper 11 g 。可以從 Oracle 技術網 下載它。有關安裝和啟動 JDeveloper 的更多詳細信息（例如，系統需求、在其他操作系統上安裝、配置 JDeveloper 存儲項目和用戶設置的位置，等等），請參見 JDeveloper 安裝指南 。
2.	下載啟動應用程序。右鍵單擊以下 鏈接 并從上下文菜單中選擇 Save Target As.. ，將 Tutorial.zip 文件下載到您選擇的本地目錄。
3.	將 Tutorial.zip 文件解壓縮到您選擇的本地目錄。
4.	啟動 JDeveloper。雙擊 JDeveloper 可執行文件 jdeveloper.exe ，該文件位于您解壓縮它的根目錄（ &ltjdev 主目錄> ）中。 如果 Migrate User Settings 對話框打開，請單擊 NO 。 如果系統提示您選擇一個用戶角色，則選擇 Default 。 關閉 Tip of the Day 窗口。
5.	現在應顯示 JDeveloper IDE。

返回主題列表

打開啟動應用程序

在創建任何組件之前，您必須先打開啟動應用程序。為此，執行以下步驟：

1.	在 Application Navigator 中，單擊 Open Application 。
2.	在 Select Application to add 對話框中，找到您解壓縮 Tutorial.zip 文件的目錄并選擇 Tutorial.jws 。 單擊 Open 。如果系統提示一條移植警告消息，請接受移植。
3.	該應用程序加載到 Application Navigator 中。
4.	展開 adffacesrc 節點。Application Navigator 應如下所示：

返回主題列表

創建頁面流

您將使用 JDeveloper 的 JSF 導航建模器以圖表方式設計和創建應用程序的頁面以及頁面之間的導航。

1.	在 Application Navigator 中，展開 Web Content | WEB-INF 節點，然后雙擊 faces-config.xml 文件打開頁面流圖。
2.	空的圖表打開。注意 Diagram 編輯器右邊的 Component Palette。您將使用它為 JSF 導航模型創建組件。
3.	在 Component Palette 的 JSF Navigation Diagram 頁面中，選擇 JSF Page ，單擊希望頁面在圖表上顯示的位置。 將頁面重命名為 main.jspx 。
4.	在 Component Palette 的 JSF Navigation Diagram 頁面中，選擇 JSF Page ，單擊上一頁面的旁邊。 將該頁面重命名為 edit.jspx 。
5.	在 Component Palette 中選擇 JSF Navigation Case 。單擊源 JSF 頁面 ( main ) 的圖標，然后單擊該導航示例的目標 JSF 頁面 ( edit ) 的圖標。
6.	修改默認標簽“success”，方法是單擊它，然后在其上鍵入 edit 。
7.	在 Component Palette 中選擇 JSF Navigation Case。單擊源 JSF 頁面 ( edit ) 的圖標，然后單擊該導航示例的目標 JSF 頁面 ( main ) 的圖標。
8.	修改默認標簽“success”，方法是單擊它，然后在其上鍵入 save 。
9.	您的圖表現在應如下圖所示。
10.	單擊 JDeveloper 菜單欄上的 Save All 圖標，或從菜單中選擇 File > Save All 以保存圖表。

返回主題列表

使用布局組件設計頁面

要創建主頁面和數據控件，執行以下步驟：

1.	預置的應用程序的頁面流圖中已經定義了 2 個頁面和 2 個導航示例。然而，這兩個頁面目前尚不是 JSF 頁面。
2.	雙擊 main.jspx 圖標創建頁面，然后在編輯器中打開它。
3.	在 Create JSF Page 對話框中，保留文件名為默認值 main.jspx 并選中 Create as XML Document (*.jspx) 復選框。從 Use Page Template 域的下拉列表中選擇 simple 。 單擊 OK 。
4.	main.jspx 顯示為 Application Navigator 的一個新節點，它在加載了 simple.jspx 模板的 Design 編輯器中打開。
5.	在 Component Palette 中，使用 ADF Faces | Layout 庫將 Panel Splitter 組件拖放到 center facet 上。
6.	在 Property Inspector 中，選擇 Style 選項卡并在 StyleClass 域中鍵入 AFVisualRoot 。
7.	將一個 Panel Tabbed 組件拖放到該頁面的“ second ”facet 上。
8.	將一個 Panel Accordion 組件拖放到該頁面的“ first ”facet 上。
9.	在您剛創建的折疊面板內單擊，然后右鍵單擊并從上下文菜單中選擇 Insert after Show Detail Item --> Show Detail Item 。 在 Property Inspector 中，將 Common 選項卡的 Text 域更改為 More 。
10.	在 Structure 窗格中，選擇第一個 af:showDetailItem 組件，將 Text 域設置為 Shopping Carts 。
11.	右鍵單擊該頁面的“ second ”面板，選擇 Insert inside Panel Tabbed --> Show Detail Item 。 在 Property Inspector 中，將 Common 選項卡的 Text 域更改為 Products 。
12.	在該頁面，右鍵單擊您剛創建的新的 Products 詳細信息項，然后從上下文菜單中選擇 Insert after Show Detail Item - Products --> Show Detail Item 。 在 Property Inspector 中，將 Common 選項卡的 Text 域更改為 Specials 。
13.	單擊 second 面板中的 Products 選項卡，然后將一個 Panel Collection 組件從 ADF Faces | Layout 庫拖放到 second 面板上。 頁面設計現在應如下所示：

返回主題列表

ADF 表組件和 ADF 綁定

要創建一個數據控件并將其綁定到 ADF 表組件，執行以下步驟：

1.	我們現在使用 ADF 數據綁定工具從現有的 POJO 類創建數據控件。 在 Application Navigator 中，右鍵單擊 Application Sources | tutorial.model 路徑下的 StoreProducts.java ，然后從上下文菜單中選擇 Create Data Control 。 Application Navigator 應如下所示：
2.	打開 Data Controls 折疊面板。 Data Controls 窗格應如下所示：
3.	將 StoreProducts | products 數據庫控件拖放到 Products 面板上。 從彈出菜單中選擇 Tables --> ADF Read-only Table...
4.	在 Edit Table Columns 對話框中，選擇 Row Selection 和 Sorting 選項。 單擊 OK 。
5.	在 Structure 窗格中選擇了該表之后，使用 Property Inspector 選擇 Behavior 選項卡，并通過下拉列表將 Column Selection 域設置為 multiple 。
6.	單擊 JDeveloper 菜單欄上的 Save All 圖標，或者從菜單中選擇 File | Save All 。
7.	在該頁面中單擊右鍵并從上下文菜單中選擇 Run ，以在您的默認 Web 瀏覽器中運行該頁面。

返回主題列表

測試主頁面

要測試主頁面，執行以下步驟：

1.	頁面在您的默認 Web 瀏覽器中加載之后即顯示，包含現有的商品數據。
2.	使用水平滾動條顯示最右邊的列。
3.	單擊列標題，按照商品 name 或 category 的升序或降序進行排序。
4.	選擇 name 列，單擊 Freeze 菜單選項。 然后再次使用水平滾動條顯示最右邊的列。 注意， name 列仍然可見。
5.	通過截斷商品名來縮小 name 列的 寬度 。
6.	單擊 Wrap 菜單選項。 注意，現在多個單詞的名稱顯示在多行上。
7.	單擊 Detach 菜單選項在瀏覽器中隔離面板的內容。 再次單擊 Detach 按鈕，返回上一個布局。
8.	瀏覽 View 的菜單選項，允許您隱藏某些列。
9.	瀏覽 Format 的菜單選項，允許您調整列大小。
	關閉瀏覽器窗口。

返回主題列表

使用 Image 和 Gauge 組件

您可以在 JSF 頁面中顯示商品的圖像。這些圖像作為啟動應用程序的一部分提供。要增強 JSF 頁面中的圖像顯示，執行以下步驟：

1.	返回 JDeveloper，在 Structure 窗格中，展開 af:panelTabbed | af:showDetailItem | af:panelCollection | af:table 并展開第五個列（圖像列）的 af:column ，然后選擇 af:outputText 。 注意，圖像列設置為文本類型的值。為了能夠顯示圖像，您需要轉換該列的結構。
2.	在 Structure 窗格中，右鍵單擊所選的組件并從上下文菜單中選擇 Convert 。
3.	在 Convert Output Text 對話框中，選擇 Image 組件。 單擊 OK 。 在 Confirm Convert 對話框中，單擊 OK 。
4.	在 Property Inspector 中，針對 af:image 組件將 Source 域設置為 #{row.image} 。
5.	在 Structure 窗格中，展開 rating 列對應的 af:column 組件（它是列表中的下一個值）。
6.	在 Component Palette 中，選擇 ADF Data Visualization ，然后在 Gauge 列表中選擇 Gauge 組件并將其拖放到 outputText 上方。
7.	在 Gauge 組件的 Property Inspector 中，將 Common 選項卡中的 Value 域設置為 #{row.rating} 。
8.	選擇 Appearance 選項卡。確保 Gauge Type 設置為 <default>，在 Image 部分中，將 ImageHeight 設置為 100 ，將 ImageWidth 設置為 100 。
9.	在該頁面設計中單擊右鍵并從上下文菜單中選擇 Run ，以在瀏覽器中運行該頁面。
10.	該頁面加載到瀏覽器中，現在針對每個商品顯示一個圖像。 向右滾動以顯示 rating 列。
11.	關閉瀏覽器窗口。

返回主題列表

使用菜單

要在您的頁面上實現菜單功能，執行以下步驟：

1.	返回 JDeveloper，右鍵單擊 second 面板中的 menu 組件并從上下文菜單中選擇 Insert inside Facets menus --> Menu 。
2.	再次右鍵單擊 menu 組件，然后從上下文菜單中選擇 Insert inside Facets Menu menu 1 --> Menu Item 。
3.	使用 Property Inspector 將 Menu Item 的 Text 域更改為 Edit Items 。在 Menu Action 部分中，通過下拉列表將 Action 域設置為 edit 。
4.	在 Structure 窗格中，右鍵單擊 af:commandMenuItem 組件并從上下文菜單中選擇 Insert after af:commandMenuItem - Edit Items --> Menu Item 。
5.	使用 Property Inspector 將 Menu Item 的 Text 域更改為 Remove Items 。在 Menu Action 部分中，通過下拉列表將 Action 域設置為 edit 。
6.	在 Structure 窗格中，選擇 af:menu - menu1 組件，然后使用 Property Inspector 將 Text 域更改為 Admin 。
7.	單擊 JDeveloper 菜單欄上的 Save All 圖標，或者從菜單中選擇 File | Save All 。

返回主題列表

使用輸入組件

現在您希望創建一個 Edit 頁面，以顯示商品詳細信息并允許您進行更新。要創建 Edit 頁面，執行以下步驟：

1.	單擊 faces-config.xml 選項卡，顯示頁面流圖。
2.	雙擊 edit.jspx 圖標，創建 edit 頁面。
3.	在 Create JSF Page 對話框中，保留 File Name 為默認值，使用 simple 頁面模板并選中 Create as XML Document 復選框。 單擊 OK 。
4.	新頁面打開，包含模板特性。
5.	將 products 從 Data Controls 窗格拖放到 center facet 上。
6.	從動態菜單中選擇 Forms --> ADF Form...
7.	在 Edit Form Fields 中，選中 Include Navigation Controls 和 Include Submit Button 選項。 單擊 OK 。
8.	選擇頁面上的 Submit 按鈕，使用 Property Inspector 通過下拉列表將 Action 域設置為 save 。
9.	返回該頁面，右鍵單擊 rating 項并從上下文菜單中選擇 convert 。
10.	在 Convert 對話框中選擇 Input Number Slider 。 單擊 OK 。 在 Confirm Convert 對話框中，單擊 OK 接受默認值。
11.	使用 Property Inspector 將 Input Number Slider 組件的 Minimum 域設置為 1 。
12.	返回頁面設計，選擇 category 項并刪除。
13.	在 Data Controls 中，展開 products 并將 category 拖放到 cost 項上方。
14.	從動態菜單中選擇 Single Selections --> ADF Select One Choice ...
15.	在 Edit List Binding 對話框中，單擊 Fixed List 選項，從下拉列表中選擇 category 作為 Base Data Source Attribute。在 Set of Values 窗格中，輸入以下值： Electronics Computers Software 單擊 OK 。
16.	在 Component Palette 中，從 ADF Faces Common Components 中選擇 Image 組件并將其拖放到 image 項下方。
17.	在 Insert Image 對話框中，單擊 Source 域旁的 Bind 按鈕。
18.	在打開的 Bind to Data 對話框中，將組件綁定到以下數據。展開 ADF Binding | bindings | image | inputValue ，然后單擊 Insert Into Selection 將所選內容移到 Expression 域中。 單擊 OK 。
19.	返回 Insert Image 對話框，單擊 Finish 。
20.	重新打開頁面流圖，右鍵單擊 main.jspx 圖標并從上下文菜單中選擇 Run 。
21.	展開 Admin 菜單，選擇 Edit Items 調用 Edit 頁面。
22.	Edit 頁面顯示。
23.	嘗試 category 域旁的 LOV ，選擇一個新值。
24.	顯示 manufactured 域旁的 日歷 ，選擇一個新值。
25.	更改圖像文件的名稱（即，從 nano 更改為 classic 或從 classic 更改為 nano ）。 注意，即使對文件的引用發生了變化，圖像也保持不變。這就是我們將在下一個有關部分頁面呈現部分中解決的問題。
26.	關閉瀏覽器，返回 JDeveloper。

返回主題列表

實現部分頁面呈現

為了刷新頁面，例如，當您在 Edit 頁面中更改了圖像文件的名稱后，我們需要設置部分呈現行為。要實現該功能，執行以下步驟：

1.	返回 JDeveloper，打開 Edit 頁面，選擇 Edit 頁面上的 image 域。 在 Common 選項卡的 Id 域中，鍵入 image1 。 使用 Property Inspector 中的 Behavior 選項卡將 AutoSubmit 設置為 true 。
2.	選擇頁面上的圖像圖標，使用 Property Inspector 在 Behavior 選項卡的 PartialTriggers 域中鍵入 image1 。 單擊 JDeveloper 菜單欄上的 Save All 圖標，或者從菜單中選擇 File | Save All 。
3.	重新打開頁面流圖，右鍵單擊 main.jspx 圖標并從上下文菜單中選擇 Run 。
4.	打開 Admin 菜單項，選擇 Edit Item 選項。
5.	Edit 頁面顯示在您的瀏覽器中。
6.	您可以將圖像名稱（即 nano.gif ）更改為其他值（即 classic .gif ）。 注意，將立即反映新的圖像顯示。
7.	移動滑塊更改 rating 級別。 單擊 Submit ，提交更改。
8.	返回主頁面，您會看到該項的圖像已經替換，rating 值也已更改。
9.	關閉瀏覽器，返回 JDeveloper。

返回主題列表

向主頁面添加彈出功能

現在，您希望創建一個彈出窗口以增強特定商品的屬性。要創建該彈出功能，執行以下步驟：

1.	在 Design 編輯器中打開 主 頁面，然后選擇 Specials 選項卡。
2.	在 Component Palette 中，從 ADF Faces | Layout 中選擇 Panel Box 組件并將其拖放到 Specials 選

使用 JSF 開發基于 Ajax 的用戶界面：ADF Faces 富客戶端組件簡介