目的

在本教程中，您將學(xué)習(xí)如何使用 Oracle ADF Faces 富客戶端 (RC) 創(chuàng)建 JSF 頁面。Oracle ADF Faces 富客戶端是一組包括內(nèi)置 Ajax 功能的標(biāo)準(zhǔn) JSF 組件。盡管 Ajax 允許類似于富客戶端的應(yīng)用程序在標(biāo)準(zhǔn)的互聯(lián)網(wǎng)技術(shù)上運行，但 JSF 提供了服務(wù)器端控件，可以減少典型 Ajax 應(yīng)用程序?qū)Υ罅?JavaScript 的依賴性。

所需時間

60 分鐘

主題

本教程包括下列主題：

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

查看屏幕截圖

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

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

概述

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

返回主題列表

情景

從一個現(xiàn)有的應(yīng)用程序開始，創(chuàng)建一個具有兩個頁面的頁面流圖。

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

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

返回主題列表

前提條件

開始本教程之前，您應(yīng)該：

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

返回主題列表

打開啟動應(yīng)用程序

在創(chuàng)建任何組件之前，您必須先打開啟動應(yīng)用程序。為此，執(zhí)行以下步驟：

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

返回主題列表

創(chuàng)建頁面流

您將使用 JDeveloper 的 JSF 導(dǎo)航建模器以圖表方式設(shè)計和創(chuàng)建應(yīng)用程序的頁面以及頁面之間的導(dǎo)航。

1.	在 Application Navigator 中，展開 Web Content | WEB-INF 節(jié)點，然后雙擊 faces-config.xml 文件打開頁面流圖。
2.	空的圖表打開。注意 Diagram 編輯器右邊的 Component Palette。您將使用它為 JSF 導(dǎo)航模型創(chuàng)建組件。
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 ) 的圖標(biāo)，然后單擊該導(dǎo)航示例的目標(biāo) JSF 頁面 ( edit ) 的圖標(biāo)。
6.	修改默認(rèn)標(biāo)簽“success”，方法是單擊它，然后在其上鍵入 edit 。
7.	在 Component Palette 中選擇 JSF Navigation Case。單擊源 JSF 頁面 ( edit ) 的圖標(biāo)，然后單擊該導(dǎo)航示例的目標(biāo) JSF 頁面 ( main ) 的圖標(biāo)。
8.	修改默認(rèn)標(biāo)簽“success”，方法是單擊它，然后在其上鍵入 save 。
9.	您的圖表現(xiàn)在應(yīng)如下圖所示。
10.	單擊 JDeveloper 菜單欄上的 Save All 圖標(biāo)，或從菜單中選擇 File > Save All 以保存圖表。

返回主題列表

使用布局組件設(shè)計頁面

要創(chuàng)建主頁面和數(shù)據(jù)控件，執(zhí)行以下步驟：

1.	預(yù)置的應(yīng)用程序的頁面流圖中已經(jīng)定義了 2 個頁面和 2 個導(dǎo)航示例。然而，這兩個頁面目前尚不是 JSF 頁面。
2.	雙擊 main.jspx 圖標(biāo)創(chuàng)建頁面，然后在編輯器中打開它。
3.	在 Create JSF Page 對話框中，保留文件名為默認(rèn)值 main.jspx 并選中 Create as XML Document (*.jspx) 復(fù)選框。從 Use Page Template 域的下拉列表中選擇 simple 。 單擊 OK 。
4.	main.jspx 顯示為 Application Navigator 的一個新節(jié)點，它在加載了 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.	在您剛創(chuàng)建的折疊面板內(nèi)單擊，然后右鍵單擊并從上下文菜單中選擇 Insert after Show Detail Item --> Show Detail Item 。 在 Property Inspector 中，將 Common 選項卡的 Text 域更改為 More 。
10.	在 Structure 窗格中，選擇第一個 af:showDetailItem 組件，將 Text 域設(shè)置為 Shopping Carts 。
11.	右鍵單擊該頁面的“ second ”面板，選擇 Insert inside Panel Tabbed --> Show Detail Item 。 在 Property Inspector 中，將 Common 選項卡的 Text 域更改為 Products 。
12.	在該頁面，右鍵單擊您剛創(chuàng)建的新的 Products 詳細(xì)信息項，然后從上下文菜單中選擇 Insert after Show Detail Item - Products --> Show Detail Item 。 在 Property Inspector 中，將 Common 選項卡的 Text 域更改為 Specials 。
13.	單擊 second 面板中的 Products 選項卡，然后將一個 Panel Collection 組件從 ADF Faces | Layout 庫拖放到 second 面板上。 頁面設(shè)計現(xiàn)在應(yīng)如下所示：

返回主題列表

ADF 表組件和 ADF 綁定

要創(chuàng)建一個數(shù)據(jù)控件并將其綁定到 ADF 表組件，執(zhí)行以下步驟：

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

返回主題列表

測試主頁面

要測試主頁面，執(zhí)行以下步驟：

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

返回主題列表

使用 Image 和 Gauge 組件

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

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

返回主題列表

使用菜單

要在您的頁面上實現(xiàn)菜單功能，執(zhí)行以下步驟：

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 域設(shè)置為 edit 。
4.	在 Structure 窗格中，右鍵單擊 af:commandMenuItem 組件并從上下文菜單中選擇 Insert after af:commandMenuItem - Edit Items --> Menu Item 。
5.	使用 Property Inspector 將 Menu Item 的 Text 域更改為 Remove Items 。在 Menu Action 部分中，通過下拉列表將 Action 域設(shè)置為 edit 。
6.	在 Structure 窗格中，選擇 af:menu - menu1 組件，然后使用 Property Inspector 將 Text 域更改為 Admin 。
7.	單擊 JDeveloper 菜單欄上的 Save All 圖標(biāo)，或者從菜單中選擇 File | Save All 。

返回主題列表

使用輸入組件

現(xiàn)在您希望創(chuàng)建一個 Edit 頁面，以顯示商品詳細(xì)信息并允許您進行更新。要創(chuàng)建 Edit 頁面，執(zhí)行以下步驟：

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

返回主題列表

實現(xiàn)部分頁面呈現(xiàn)

為了刷新頁面，例如，當(dāng)您在 Edit 頁面中更改了圖像文件的名稱后，我們需要設(shè)置部分呈現(xiàn)行為。要實現(xiàn)該功能，執(zhí)行以下步驟：

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

返回主題列表

向主頁面添加彈出功能

現(xiàn)在，您希望創(chuàng)建一個彈出窗口以增強特定商品的屬性。要創(chuàng)建該彈出功能，執(zhí)行以下步驟：

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

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