使用 JSF 开发基于 Ajax 的用户界面：ADF Faces 富客户端组件简介

目的

在本教程中，您将学习如何使用 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 11g。可以从 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 选项卡上。 在 Property Inspector 的 Text 域中，键入 Today's Special。
3.	在 Component Palette 中，将一个 Panel Box 组件拖放到 Shopping Carts 面板内。
4.	在 Property Inspector 中，为 panelBox 的 Text 域键入 Your Shopping Cart。
5.	在 Component Palette 中，将 ADF Faces Common Components 库中的一个 Output Label 拖放到 Today's Specials 组件上。 在 Property Inspector 中，为 Value 域键入 Special Promotion。
6.	在 Component Palette 中，将 ADF Faces Common Components 库中的一个 Output Text 拖放到 Special Promotion 标签旁边。
7.	在 Property Inspector 中，删除 Value 域中的值，单击 Value 域旁边的向下箭头图标。从列表中选择 Expression Builder。
8.	在 Expression 对话框中，清除 Expression 域，然后在 Variable 窗格中展开 JSF Managed Beans | backing_dnd | todaySpecialProduct 并选择 name。单击 Insert into Selection 按钮将选定项移到 Expression 域。 单击 OK。这将 Oracle JDeveloper 显示为辅助 bean 的名称变量的值。
9.	将 ADF Faces Common Components 中的一个 Button 组件拖放到 Oracle JDeveloper 输出文本旁边。
10.	在 Property Inspector 的 Text 域中键入 More Info。
11.	从 Component Palette 的 ADF Faces | Operations 中将一个 Show popup Behavior 拖放到 More Info 按钮上。
12.	在 Property Inspector 的 PopupId 域中键入 popmore，通过下拉列表将 Align 域设置为 afterEnd。
13.	从 Component Palette 的 ADF Faces| Common Components 中，将一个 Popup 拖放到 Structure 窗格中的 outputText 组件下方。
14.	在 Structure 窗格中，右键单击 af:popup 组件并从上下文菜单中选择 Insert inside af:popup --> Panel Window。
15.	将一个 Output Text 从 Component Palette 拖放到面板窗口上。
16.	从 Component Palette 中将一个 image 组件拖放到 structure 窗格的上一个输出文本上方。
17.	在 Insert Image 对话框中，单击 Source 域旁的 Bind 按钮。 在 Bind to Data 对话框中，展开 JSF Managed Beans | backing_dnd | todaySpecialProduct 并选择 image。单击 Insert into Selection 按钮将选定项移到 Expression 域。 单击 OK， 然后单击 Finish。
18.	在 Structure 窗格中选择输出文本，使用 Property Inspector 单击 Value 域旁边的向下箭头，然后从列表中选择 Expression Builder。
19.	在 Expression Builder 对话框中，清除 Expression 值并键入 Special Price。然后展开 JSF Managed Beans | backing_dnd | todaySpecialProduct 并选择 cost。单击 Insert into Selection 按钮将选定项移到 Expression 域。 单击 OK。
20.	单击 JDeveloper 菜单栏上的 Save All 图标，或者从菜单中选择 File | Save All。

返回主题列表

向主页面添加拖放功能

现在，我们希望在今日特价商品和购物车之间创建一个拖放，以允许您使用简单的拖放操作将今日特价商品放入购物车内。要实现该拖放操作，执行以下步骤：

1.	选择绑定到 todaySpecial 辅助 bean 的 outputText 组件。 从 Component Palette 的 ADF Faces | Operations 中，将一个 Client Attribute 组件拖放到 Structure 窗格中的 Special Promotion 的输出文本组件下方。 在 Property Inspector 中，键入 Item 作为 Name，单击 Value 域旁边的向下箭头并从列表中选择 Expression Builder。
2.	在 Expression Builder 对话框中，清除 Expression 值，然后展开 JSF Managed Beans | backing_dnd | todaySpecialProduct，选择 name 将其绑定到一个辅助 bean。单击 Insert into Selection 按钮将选定项移到 Expression 域。 单击 OK。
3.	从 Component Palette 的 ADF Faces | Operations 中，将一个 Attribute Drag Source 组件拖放到 Structure 窗格中的 af:clientAttribute 下方。
4.	在 Insert Attribute Drag Source 对话框的 Attribute 域中，键入 Item。 单击 Finish。
5.	单击 JDeveloper 菜单栏上的 Save All 图标，或者从菜单中选择 File | Save All。
6.	现在，在购物车面板一侧操作，将一个 Data Flavor 组件从 Component Palette 拖放到 Shopping Carts 窗格上。
7.	在 Insert Data Flavor 对话框的 FlavorClass 中，键入 java.lang.String。 单击 Next，然后单击 Finish。
8.	右键单击 Structure 窗格中的 af:dataFlavor，然后选择 Surround With... 在 Surround With 对话框中，选择 Drop Target， 然后单击 OK。 在 Insert Drop Target 对话框中，单击 Finish，我们不需要填充任何值。
9.	在 Property Inspector 中高亮显示的 DropListener 属性中，单击 dotted 按钮。
10.	在 Edit Property 对话框中，从下拉列表中为 Managed Bean 域选择 backing_dnd，为 Method 选择 handleDrop。 单击 OK。
11.	在 Structure 窗格中，选择 second 窗格标记中的 af:popup 组件。在 Property Inspector 的 Common 选项卡的 Id 域中输入 popmore。
12.	在 Structure 窗格中，选择 first 标记重新同步页面编辑器。为了显示购物车内的东西，从 Component palette 中使用 ADF Faces | Common Components 选择一个 Output Text 组件，然后将其拖放到 Shopping Carts 窗格中的 Your Shopping Cart panelBox 下方。
13.	在 Property Inspector 中，单击 Value 域旁边的向下箭头从列表中选择 Expression Builder。 删除 Expression 窗格中的文本，然后在 Variables 部分中选择 JSF Managed Beans | backing_dnd | dndValue 并单击 Insert Into Selection 按钮。 单击 OK。 在 Property Inspector，为 Output Text 标记选择 Style 选项卡，在 InlineStyle 域中输入 color:Green。这将在页面中显示 Cart is Empty 消息。
14.	单击 JDeveloper 菜单栏上的 Save All 图标，或者从菜单中选择 File | Save All。
15.	返回页面流图，右键单击 Main.jspx 图标并从上下文菜单中选择 Run。
16.	该页面加载到您的浏览器中。
17.	单击 Specials 选项卡。 单击 More Info 按钮以将特价商品作为弹出窗口显示。 关闭弹出窗口。
18.	现在，选择 Today's Specials 标签，将其拖放到左侧窗格中的 Your Shopping Cart 上。
19.	购买的商品现在出现在您的购物车中。
	关闭您的浏览器窗口。

返回主题列表

使用皮肤更改应用程序的外观

最后在本部分中，您将了解如何使用可参数化的 css 文件更改整个应用程序的外观。要实现该功能，执行以下步骤：

1.	在 Application Navigator 中，展开 Web Content | WEB-INF 节点，然后双击 trinidad-config.xml 文件在编辑器中打开页面流图。
2.	该文件包含一个使您能够使用其他 css 文件的参数。
3.	在 Application Navigation 中，注意 skins | princess 文件夹中有一个 princess.css 文件。
4.	重新打开 faces-config 文件，右键单击主页面图标，从上下文菜单中选择 Run 再次运行该应用程序。
5.	在浏览器窗口中，加载了主页面之后，将以下字符串 &skin=princess 附加在 URL 的末尾，然后按 Enter 键。
6.	注意页面外观的变化。颜色、选项卡和折叠面板现在都是用 princess css。
7.	关闭浏览器。您已经成功完成了此 OBE。

总结

在本教程中，您了解了如何创建 ADF 富客户端 JSF 页面以及如何使用一些高级特性。

	打开启动应用程序
	创建页面流
	创建主页面
	测试主页面
	向主页面添加图像
	创建 Edit 页面
	向主页面添加弹出功能
	向主页面添加拖放功能
	更改应用程序的外观 本文转自：http://www.oracle.com/technology/global/cn/obe/obe11jdev/11/rich_client/adfrichclient.htm