使用 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.	在 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 以保存图表。

返回主题列表

使用布局组件设计页面

要创建主页面和数据控件，执行以下步骤：

返回主题列表

ADF 表组件和 ADF 绑定

要创建一个数据控件并将其绑定到 ADF 表组件，执行以下步骤：

返回主题列表

测试主页面

要测试主页面，执行以下步骤：

返回主题列表

使用 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.	关闭浏览器窗口。

返回主题列表

使用菜单

要在您的页面上实现菜单功能，执行以下步骤：

返回主题列表

使用输入组件

现在您希望创建一个 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.	在 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。

返回主题列表

向主页面添加拖放功能

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