目的
在本教程中，您將學(xué)習(xí)如何使用 Oracle ADF Faces 富客戶端 (RC) 創(chuàng)建 JSF 頁(yè)面。Oracle ADF Faces 富客戶端是一組包括內(nèi)置 Ajax 功能的標(biāo)準(zhǔn) JSF 組件。盡管 Ajax 允許類似于富客戶端的應(yīng)用程序在標(biāo)準(zhǔn)的互聯(lián)網(wǎng)技術(shù)上運(yùn)行，但 JSF 提供了服務(wù)器端控件，可以減少典型 Ajax 應(yīng)用程序?qū)Υ罅?JavaScript 的依賴性。
60 分鐘
本教程包括下列主題：
查看屏幕截圖
將鼠標(biāo)置于此圖標(biāo)上以加載和查看本教程的所有屏幕截圖。（警告：因?yàn)榇瞬僮鲿?huì)同時(shí)加載所有屏幕截圖，所以網(wǎng)速較慢時(shí)，響應(yīng)時(shí)間可能會(huì)比較長(zhǎng)。）
注： 此外，您還可以在下列步驟中將鼠標(biāo)放在每個(gè)單獨(dú)的圖標(biāo)上，從而僅加載和查看與該步驟相關(guān)的屏幕截圖。可以通過(guò)單擊各個(gè)屏幕截圖來(lái)將其隱藏。
本教程將介紹如何創(chuàng)建 ADF 富客戶端 JSF 頁(yè)面，并介紹一些易于實(shí)現(xiàn)的功能（如拖放、彈出和圖像）。
情景
從一個(gè)現(xiàn)有的應(yīng)用程序開(kāi)始，創(chuàng)建一個(gè)具有兩個(gè)頁(yè)面的頁(yè)面流圖。
主頁(yè)面一側(cè)包含購(gòu)物車的內(nèi)容，另一側(cè)顯示可選的商品。您實(shí)現(xiàn)拖放功能，通過(guò)移動(dòng)購(gòu)物車區(qū)域中的所選商品將其放入購(gòu)物車中。您還可以創(chuàng)建選項(xiàng)卡和折疊面板 (Accordion)，并添加一個(gè)彈出窗口。
Edit 頁(yè)面顯示商品詳細(xì)信息并允許您更新所選商品的特性。
開(kāi)始本教程之前，您應(yīng)該：
| 1. |
可以訪問(wèn)或已安裝了 Oracle JDeveloper 11 g 。可以從 Oracle 技術(shù)網(wǎng) 下載它。有關(guān)安裝和啟動(dòng) JDeveloper 的更多詳細(xì)信息（例如，系統(tǒng)需求、在其他操作系統(tǒng)上安裝、配置 JDeveloper 存儲(chǔ)項(xiàng)目和用戶設(shè)置的位置，等等），請(qǐng)參見(jiàn) JDeveloper 安裝指南 。 |
| 2. |
下載啟動(dòng)應(yīng)用程序。右鍵單擊以下 鏈接 并從上下文菜單中選擇 Save Target As.. ，將 Tutorial.zip 文件下載到您選擇的本地目錄。 |
| 3. |
將 Tutorial.zip 文件解壓縮到您選擇的本地目錄。 |
| 4. |
啟動(dòng) JDeveloper。雙擊 JDeveloper 可執(zhí)行文件 jdeveloper.exe ，該文件位于您解壓縮它的根目錄（ <jdev 主目錄> ）中。
如果 Migrate User Settings 對(duì)話框打開(kāi)，請(qǐng)單擊 NO 。 如果系統(tǒng)提示您選擇一個(gè)用戶角色，則選擇 Default 。
關(guān)閉 Tip of the Day 窗口。 |
| 5. |
現(xiàn)在應(yīng)顯示 JDeveloper IDE。
|
在創(chuàng)建任何組件之前，您必須先打開(kāi)啟動(dòng)應(yīng)用程序。為此，執(zhí)行以下步驟：
| 1. |
在 Application Navigator 中，單擊 Open Application 。 |
| 2. |
在 Select Application to add 對(duì)話框中，找到您解壓縮 Tutorial.zip 文件的目錄并選擇 Tutorial.jws 。 單擊 Open 。如果系統(tǒng)提示一條移植警告消息，請(qǐng)接受移植。 |
| 3. |
該應(yīng)用程序加載到 Application Navigator 中。 |
| 4. |
展開(kāi) adffacesrc 節(jié)點(diǎn)。Application Navigator 應(yīng)如下所示：
|
您將使用 JDeveloper 的 JSF 導(dǎo)航建模器以圖表方式設(shè)計(jì)和創(chuàng)建應(yīng)用程序的頁(yè)面以及頁(yè)面之間的導(dǎo)航。
| 1. |
在 Application Navigator 中，展開(kāi) Web Content | WEB-INF 節(jié)點(diǎn)，然后雙擊 faces-config.xml 文件打開(kāi)頁(yè)面流圖。 |
| 2. |
空的圖表打開(kāi)。注意 Diagram 編輯器右邊的 Component Palette。您將使用它為 JSF 導(dǎo)航模型創(chuàng)建組件。 |
| 3. |
在 Component Palette 的 JSF Navigation Diagram 頁(yè)面中，選擇 JSF Page ，單擊希望頁(yè)面在圖表上顯示的位置。 將頁(yè)面重命名為 main.jspx 。
|
| 4. |
在 Component Palette 的 JSF Navigation Diagram 頁(yè)面中，選擇 JSF Page ，單擊上一頁(yè)面的旁邊。
將該頁(yè)面重命名為 edit.jspx 。
|
| 5. |
在 Component Palette 中選擇 JSF Navigation Case 。單擊源 JSF 頁(yè)面 ( main ) 的圖標(biāo)，然后單擊該導(dǎo)航示例的目標(biāo) JSF 頁(yè)面 ( edit ) 的圖標(biāo)。 |
| 6. |
修改默認(rèn)標(biāo)簽“success”，方法是單擊它，然后在其上鍵入 edit 。 |
| 7. |
在 Component Palette 中選擇 JSF Navigation Case。單擊源 JSF 頁(yè)面 ( edit ) 的圖標(biāo)，然后單擊該導(dǎo)航示例的目標(biāo) JSF 頁(yè)面 ( main ) 的圖標(biāo)。
|
| 8. |
修改默認(rèn)標(biāo)簽“success”，方法是單擊它，然后在其上鍵入 save 。 |
| 9. |
您的圖表現(xiàn)在應(yīng)如下圖所示。
|
| 10. |
單擊 JDeveloper 菜單欄上的 Save All 圖標(biāo)，或從菜單中選擇 File > Save All 以保存圖表。 |
要?jiǎng)?chuàng)建主頁(yè)面和數(shù)據(jù)控件，執(zhí)行以下步驟：
| 1. |
預(yù)置的應(yīng)用程序的頁(yè)面流圖中已經(jīng)定義了 2 個(gè)頁(yè)面和 2 個(gè)導(dǎo)航示例。然而，這兩個(gè)頁(yè)面目前尚不是 JSF 頁(yè)面。
|
| 2. |
雙擊 main.jspx 圖標(biāo)創(chuàng)建頁(yè)面，然后在編輯器中打開(kāi)它。 |
| 3. |
在 Create JSF Page 對(duì)話框中，保留文件名為默認(rèn)值 main.jspx 并選中 Create as XML Document (*.jspx) 復(fù)選框。從 Use Page Template 域的下拉列表中選擇 simple 。 單擊 OK 。 |
| 4. |
main.jspx 顯示為 Application Navigator 的一個(gè)新節(jié)點(diǎn)，它在加載了 simple.jspx 模板的 Design 編輯器中打開(kāi)。
|
| 5. |
在 Component Palette 中，使用 ADF Faces | Layout 庫(kù)將 Panel Splitter 組件拖放到 center facet 上。
|
| 6. |
在 Property Inspector 中，選擇 Style 選項(xiàng)卡并在 StyleClass 域中鍵入 AFVisualRoot 。
|
| 7. |
將一個(gè) Panel Tabbed 組件拖放到該頁(yè)面的“ second ”facet 上。
|
| 8. |
將一個(gè) Panel Accordion 組件拖放到該頁(yè)面的“ first ”facet 上。
|
| 9. |
在您剛創(chuàng)建的折疊面板內(nèi)單擊，然后右鍵單擊并從上下文菜單中選擇 Insert after Show Detail Item --> Show Detail Item 。
在 Property Inspector 中，將 Common 選項(xiàng)卡的 Text 域更改為 More 。
|
| 10. |
在 Structure 窗格中，選擇第一個(gè) af:showDetailItem 組件，將 Text 域設(shè)置為 Shopping Carts 。
|
| 11. |
右鍵單擊該頁(yè)面的“ second ”面板，選擇 Insert inside Panel Tabbed --> Show Detail Item 。
在 Property Inspector 中，將 Common 選項(xiàng)卡的 Text 域更改為 Products 。
|
| 12. |
在該頁(yè)面，右鍵單擊您剛創(chuàng)建的新的 Products 詳細(xì)信息項(xiàng)，然后從上下文菜單中選擇 Insert after Show Detail Item - Products --> Show Detail Item 。
在 Property Inspector 中，將 Common 選項(xiàng)卡的 Text 域更改為 Specials 。
|
| 13. |
單擊 second 面板中的 Products 選項(xiàng)卡，然后將一個(gè) Panel Collection 組件從 ADF Faces | Layout 庫(kù)拖放到 second 面板上。
頁(yè)面設(shè)計(jì)現(xiàn)在應(yīng)如下所示：
|
要?jiǎng)?chuàng)建一個(gè)數(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. |
打開(kāi) Data Controls 折疊面板。
Data Controls 窗格應(yīng)如下所示：
|
| 3. |
將 StoreProducts | products 數(shù)據(jù)庫(kù)控件拖放到 Products 面板上。
從彈出菜單中選擇 Tables --> ADF Read-only Table...
|
| 4. |
在 Edit Table Columns 對(duì)話框中，選擇 Row Selection 和 Sorting 選項(xiàng)。
單擊 OK 。 |
| 5. |
在 Structure 窗格中選擇了該表之后，使用 Property Inspector 選擇 Behavior 選項(xiàng)卡，并通過(guò)下拉列表將 Column Selection 域設(shè)置為 multiple 。
|
| 6. |
單擊 JDeveloper 菜單欄上的 Save All 圖標(biāo)，或者從菜單中選擇 File | Save All 。 |
| 7. |
在該頁(yè)面中單擊右鍵并從上下文菜單中選擇 Run ，以在您的默認(rèn) Web 瀏覽器中運(yùn)行該頁(yè)面。
|
要測(cè)試主頁(yè)面，執(zhí)行以下步驟：
| 1. |
頁(yè)面在您的默認(rèn) Web 瀏覽器中加載之后即顯示，包含現(xiàn)有的商品數(shù)據(jù)。
|
| 2. |
使用水平滾動(dòng)條顯示最右邊的列。
|
| 3. |
單擊列標(biāo)題，按照商品 name 或 category 的升序或降序進(jìn)行排序。 |
| 4. |
選擇 name 列，單擊 Freeze 菜單選項(xiàng)。
然后再次使用水平滾動(dòng)條顯示最右邊的列。
注意， name 列仍然可見(jiàn)。 |
| 5. |
通過(guò)截?cái)嗌唐访麃?lái)縮小 name 列的 寬度 。
|
| 6. |
單擊 Wrap 菜單選項(xiàng)。
注意，現(xiàn)在多個(gè)單詞的名稱顯示在多行上。
|
| 7. |
單擊 Detach 菜單選項(xiàng)在瀏覽器中隔離面板的內(nèi)容。
再次單擊 Detach 按鈕，返回上一個(gè)布局。
|
| 8. |
瀏覽 View 的菜單選項(xiàng)，允許您隱藏某些列。
|
| 9. |
瀏覽 Format 的菜單選項(xiàng)，允許您調(diào)整列大小。
|
|
|
關(guān)閉瀏覽器窗口。 |
您可以在 JSF 頁(yè)面中顯示商品的圖像。這些圖像作為啟動(dòng)應(yīng)用程序的一部分提供。要增強(qiáng) JSF 頁(yè)面中的圖像顯示，執(zhí)行以下步驟：
| 1. |
返回 JDeveloper，在 Structure 窗格中，展開(kāi) af:panelTabbed | af:showDetailItem | af:panelCollection | af:table 并展開(kāi)第五個(gè)列（圖像列）的 af:column ，然后選擇 af:outputText 。
注意，圖像列設(shè)置為文本類型的值。為了能夠顯示圖像，您需要轉(zhuǎn)換該列的結(jié)構(gòu)。 |
| 2. |
在 Structure 窗格中，右鍵單擊所選的組件并從上下文菜單中選擇 Convert 。 |
| 3. |
在 Convert Output Text 對(duì)話框中，選擇 Image 組件。 單擊 OK 。
在 Confirm Convert 對(duì)話框中，單擊 OK 。 |
| 4. |
在 Property Inspector 中，針對(duì) af:image 組件將 Source 域設(shè)置為 #{row.image} 。
|
| 5. |
在 Structure 窗格中，展開(kāi) rating 列對(duì)應(yīng)的 af:column 組件（它是列表中的下一個(gè)值）。
|
| 6. |
在 Component Palette 中，選擇 ADF Data Visualization ，然后在 Gauge 列表中選擇 Gauge 組件并將其拖放到 outputText 上方。
|
| 7. |
在 Gauge 組件的 Property Inspector 中，將 Common 選項(xiàng)卡中的 Value 域設(shè)置為 #{row.rating} 。
|
| 8. |
選擇 Appearance 選項(xiàng)卡。確保 Gauge Type 設(shè)置為 <default>，在 Image 部分中，將 ImageHeight 設(shè)置為 100 ，將 ImageWidth 設(shè)置為 100 。
|
| 9. |
在該頁(yè)面設(shè)計(jì)中單擊右鍵并從上下文菜單中選擇 Run ，以在瀏覽器中運(yùn)行該頁(yè)面。
|
| 10. |
該頁(yè)面加載到瀏覽器中，現(xiàn)在針對(duì)每個(gè)商品顯示一個(gè)圖像。
向右滾動(dòng)以顯示 rating 列。
|
| 11. | 關(guān)閉瀏覽器窗口。 |
要在您的頁(yè)面上實(shí)現(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 部分中，通過(guò)下拉列表將 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 部分中，通過(guò)下拉列表將 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)建一個(gè) Edit 頁(yè)面，以顯示商品詳細(xì)信息并允許您進(jìn)行更新。要?jiǎng)?chuàng)建 Edit 頁(yè)面，執(zhí)行以下步驟：
| 1. |
單擊 faces-config.xml 選項(xiàng)卡，顯示頁(yè)面流圖。
|
| 2. |
雙擊 edit.jspx 圖標(biāo)，創(chuàng)建 edit 頁(yè)面。 |
| 3. |
在 Create JSF Page 對(duì)話框中，保留 File Name 為默認(rèn)值，使用 simple 頁(yè)面模板并選中 Create as XML Document 復(fù)選框。 單擊 OK 。 |
| 4. |
新頁(yè)面打開(kāi)，包含模板特性。
|
| 5. |
將 products 從 Data Controls 窗格拖放到 center facet 上。
|
| 6. |
從動(dòng)態(tài)菜單中選擇 Forms --> ADF Form...
|
| 7. |
在 Edit Form Fields 中，選中 Include Navigation Controls 和 Include Submit Button 選項(xiàng)。
單擊 OK 。 |
| 8. |
選擇頁(yè)面上的 Submit 按鈕，使用 Property Inspector 通過(guò)下拉列表將 Action 域設(shè)置為 save 。
|
| 9. |
返回該頁(yè)面，右鍵單擊 rating 項(xiàng)并從上下文菜單中選擇 convert 。
|
| 10. |
在 Convert 對(duì)話框中選擇 Input Number Slider 。
單擊 OK 。 在 Confirm Convert 對(duì)話框中，單擊 OK 接受默認(rèn)值。
|
| 11. |
使用 Property Inspector 將 Input Number Slider 組件的 Minimum 域設(shè)置為 1 。
|
| 12. |
返回頁(yè)面設(shè)計(jì)，選擇 category 項(xiàng)并刪除。
|
| 13. |
在 Data Controls 中，展開(kāi) products 并將 category 拖放到 cost 項(xiàng)上方。
|
| 14. |
從動(dòng)態(tài)菜單中選擇 Single Selections --> ADF Select One Choice ...
|
| 15. |
在 Edit List Binding 對(duì)話框中，單擊 Fixed List 選項(xiàng)，從下拉列表中選擇 category 作為 Base Data Source Attribute。在 Set of Values 窗格中，輸入以下值：
Electronics
單擊 OK 。 |
| 16. |
在 Component Palette 中，從 ADF Faces Common Components 中選擇 Image 組件并將其拖放到 image 項(xiàng)下方。
|
| 17. |
在 Insert Image 對(duì)話框中，單擊 Source 域旁的 Bind 按鈕。
|
| 18. |
在打開(kāi)的 Bind to Data 對(duì)話框中，將組件綁定到以下數(shù)據(jù)。展開(kāi) ADF Binding | bindings | image | inputValue ，然后單擊 Insert Into Selection 將所選內(nèi)容移到 Expression 域中。
單擊 OK 。 |
| 19. |
返回 Insert Image 對(duì)話框，單擊 Finish 。
|
| 20. |
重新打開(kāi)頁(yè)面流圖，右鍵單擊 main.jspx 圖標(biāo)并從上下文菜單中選擇 Run 。
|
| 21. |
展開(kāi) Admin 菜單，選擇 Edit Items 調(diào)用 Edit 頁(yè)面。
|
| 22. |
Edit 頁(yè)面顯示。
|
| 23. |
嘗試 category 域旁的 LOV ，選擇一個(gè)新值。
|
| 24. |
顯示 manufactured 域旁的 日歷 ，選擇一個(gè)新值。
|
| 25. |
更改圖像文件的名稱（即，從 nano 更改為 classic 或從 classic 更改為 nano ）。
注意，即使對(duì)文件的引用發(fā)生了變化，圖像也保持不變。這就是我們將在下一個(gè)有關(guān)部分頁(yè)面呈現(xiàn)部分中解決的問(wèn)題。 |
| 26. | 關(guān)閉瀏覽器，返回 JDeveloper。 |
為了刷新頁(yè)面，例如，當(dāng)您在 Edit 頁(yè)面中更改了圖像文件的名稱后，我們需要設(shè)置部分呈現(xiàn)行為。要實(shí)現(xiàn)該功能，執(zhí)行以下步驟：
| 1. |
返回 JDeveloper，打開(kāi) Edit 頁(yè)面，選擇 Edit 頁(yè)面上的 image 域。
在 Common 選項(xiàng)卡的 Id 域中，鍵入 image1 。
使用 Property Inspector 中的 Behavior 選項(xiàng)卡將 AutoSubmit 設(shè)置為 true 。
|
| 2. |
選擇頁(yè)面上的圖像圖標(biāo)，使用 Property Inspector 在 Behavior 選項(xiàng)卡的 PartialTriggers 域中鍵入 image1 。
單擊 JDeveloper 菜單欄上的 Save All 圖標(biāo)，或者從菜單中選擇 File | Save All 。 |
| 3. |
重新打開(kāi)頁(yè)面流圖，右鍵單擊 main.jspx 圖標(biāo)并從上下文菜單中選擇 Run 。
|
| 4. |
打開(kāi) Admin 菜單項(xiàng)，選擇 Edit Item 選項(xiàng)。
|
| 5. |
Edit 頁(yè)面顯示在您的瀏覽器中。
|
| 6. |
您可以將圖像名稱（即 nano.gif ）更改為其他值（即 classic .gif ）。
注意，將立即反映新的圖像顯示。 |
| 7. |
移動(dòng)滑塊更改 rating 級(jí)別。
單擊 Submit ，提交更改。 |
| 8. |
返回主頁(yè)面，您會(huì)看到該項(xiàng)的圖像已經(jīng)替換，rating 值也已更改。
|
| 9. |
關(guān)閉瀏覽器，返回 JDeveloper。 |
現(xiàn)在，您希望創(chuàng)建一個(gè)彈出窗口以增強(qiáng)特定商品的屬性。要?jiǎng)?chuàng)建該彈出功能，執(zhí)行以下步驟：
| 1. |
在 Design 編輯器中打開(kāi) 主 頁(yè)面，然后選擇 Specials 選項(xiàng)卡。
|
| 2. |
在 Component Palette 中，從 ADF Faces | Layout 中選擇 Panel Box 組件并將其拖放到 Specials 選 |
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
