使用 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 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 富客户端组件简介