ADF 数据可视化组件简介 — 图形、计量器、地图、数据透视表和甘特图

目的

在本教程中，您将使用 Oracle ADF 中的 DVT 组件构建数据的某些图形表示，如饼形图、计量器、甘特图和地理地图。您还将探究数据透视表的使用。

所需时间

45 分钟

主题

本教程包括以下主题：

	概述
	情景
	前提条件
	创建一个主从定单页面
	添加饼形图
	添加计量器
	添加地理地图
	创建数据透视表
	创建甘特图
	总结

查看屏幕截图

将鼠标置于此图标上以加载和查看本教程的所有屏幕截图。（警告：因为此操作会同时加载所有屏幕截图，所以网速较慢时，响应时间可能会比较长。）

注：此外，您还可以在下列步骤中将鼠标放在每个单独的图标上，从而仅加载和查看与该步骤相关的屏幕截图。可以通过单击各个屏幕截图来将其隐藏。

概述

ADF 数据可视化组件是一组丰富的交互式 ADF Faces 组件，可以为数据分析提供重要的图形和表格化功能。执行完前提条件部分后，本教程将向您演示如何使用 ADF DVT 组件以图形方式表示数据。

返回主题列表

情景

构建主从页面之后，您将向应用程序中添加图形数据以试验某些高级特性。您将向该页面中添加新的选项卡并使用专用的 ADF DVT 组件。您将使用一个基于 ADF 业务组件的预定义应用程序模型。

返回主题列表

前提条件

开始本教程的任何部分之前，您应该：

	下载所需的组件并启动 JDeveloper 11g
	安装数据库模式
	上载启动应用程序
	创建数据库连接

返回主题列表

下载所需的组件并启动 JDeveloper 11 g

在以下步骤中，您将下载 JDeveloper 11g 和本教程所需的其他文件。

1.	可以访问或已安装了 Oracle JDeveloper 11g。可以从 Oracle 技术网下载它。
2.	从 OTN 下载 FOD 模式 zip 文件，或者右键单击以下 链接并从上下文菜单中选择 目标另存为... 将 storefront_techpreview2.zip 文件下载到您选择的本地目录中。
3.	将 Tutorial.zip 文件解压缩到您选择的本地目录（即 temp）。
4.	启动 JDeveloper。双击 JDeveloper 可执行文件 jdeveloper.exe ，该文件位于您解压缩它的根目录（ <jdev 主目录> ）中。 如果 Migrate User Settings 对话框打开，请单击 NO。 如果系统提示您选择一个用户角色，则选择 Default。 关闭 Tip of the Day 窗口。
5.	现在应显示 JDeveloper IDE。

返回主题

返回主题列表

安装数据库模式

在本部分中，您将使用 JDeveloper 应用程序安装数据库模式并使用相应的数据填充 FOD 模式。

1.	单击 Open Application 链接，或从工具菜单中选择 File | Open。 在解压缩 storefront_techpreview2.zip 文件的目录中找到工作区 infrastructure.jws，该目录为 d:\temp\Infrastructure。 单击 Open。 如果提示您移植项目，单击 Yes 确认。
2.	在 Application Navigator 中，展开 MasterBuildScript | Resources 节点并双击 build.properties 在编辑器中打开它。
3.	设置 build.properties 文件中的相应值（jdeveloper.home 以及所有 jdbc.* 和 db.* 设置）。相关的设置为： jdeveloper.home JDeveloper 的安装位置，即 d:/jdev/jdev11gjdbc。 jdbc.urlBase 数据库的基本 URI，即 jdbc:oracle:thin:@localhost jdbc.port 数据库的端口号，即 1521 jdbc.sid 数据库实例名，即 XE 或 ORCL db.adminUser 具管理员权限的数据库用户，即 system。 db.adminUser.password 具管理员权限的数据库用户的口令，即 welcome db.demoUser 要创建的数据库用户和模式的名称，即 fod db.demoUser.password 要创建的数据库用户的口令，即 fusion db.demoUser.tablespace 用户表空间的名称，即 USERS db.demoUser.tempTablespace 临时表空间的名称 ，即 TEMP
4.	在 MasterBuildScript 项目中，选择 build.xml 文件。
5.	在 Structure 窗口中，右键单击 refreshSchema 目标并选择 Run Target "refreshSchema"。
6.	确认 Log 窗口没有报告任何错误。它应该看起来像这样：
7.	单击 Infrastructure 应用程序名称旁边的向下箭头 并选择 Remove Application from IDE。
8.	单击 JDeveloper 菜单栏上的 Save All 图标或选择 File | Save All。

返回主题

返回主题列表

上载启动应用程序

在创建任何组件之前，您必须先打开启动应用程序。为此，执行以下步骤：

1.	下载 Gantt.zip 文件。右键单击以下 链接并从上下文菜单中选择 Save Target As...，将 Gantt.zip 文件下载到您选择的本地目录。
2.	将 Gantt.zip 文件解压缩到您选择的本地目录（即 temp）。
3.	从工具菜单中，选择 File | Open。 找到工作区 c:\temp\Gantt\BrowseEditApp.jws。 单击 Open。 如果提示您移植项目，单击 Yes 确认。
4.	该应用程序加载到 JDeveloper 中。

返回主题

返回主题列表

创建数据库连接

您需要创建一个到 FOD 模式的数据库连接。为此，执行以下步骤：

1.	从菜单栏中选择 View | Database Navigator。
2.	在 Database Navigator 中，右键单击 BrowseEditApp 并从上下文菜单中选择 New Connection。
3.	输入连接名称，选择连接类型并输入用户名和口令。在本示例中，连接名称为 FOD，用户名为 fod，口令为 fusion。
4.	单击 Test Connection 确认您可以连接。 如果连接成功，单击 OK。
5.	在 Application Navigator 中，单击 Application Resources 打开该面板。
6.	在 Application Navigator 中，展开 Application Resources 面板中的 Connections 和 Database 节点以查看您刚刚创建的 FOD 连接。您可以展开 FOD 节点以查看数据库对象。

返回主题

返回主题列表

探究启动应用程序

启动应用程序使用 Orders、OrderItems 和 ProductsBase 实体对象及其对应的视图对象。它还在需要时使用您发现的其他视图对象。

1.	打开 Application Navigator 并展开 Model 项目节点。注意现有的实体、视图、链接对象和 FODModule。 Model 项目包含应用程序所需的所有必需组件。折叠 Model 项目。
2.	要在业务组件测试器中测试该模块，在 Application Navigator 中右键单击 FODModule 并选择 Run。
3.	在 Business Component Configuration 对话框中，单击 Connect。 等待 Browser 窗口打开。
4.	在 Business Component Browser 中，双击 OrdersItemsOrdersFkLink1。
5.	使用导航按钮浏览定单。
6.	关闭 Business Component Browser 窗口。
7.	展开 ViewController 项目节点。注意创建融合 Web 应用程序时默认创建的现有组件。

返回主题

返回主题列表

创建一个主从定单页面

启动应用程序使用 Orders、OrderItems 和 ProductsBase 实体对象和它们对应的视图对象。它还在需要时使用您发现的其他视图对象。

1.	在 Application Navigator 中，右键单击 ViewController 节点并从上下文菜单中选择 New。
2.	在 New Gallery 中，选择 Web Tier | JSF 类别并选择 JSF Page 项。 单击 OK。
3.	将 File Name 域设置为 OrdersAndStocks。 单击 OK。
4.	新页面在 Design 编辑器中打开。
5.	在 Component Palette 中，使用 ADF Faces | Layout 库将 Panel Tabbed 组件拖放到页面上。 在 Property Inspector 中，使用 Style | Box 选项卡将 Width 设置为 100 Percent，将 Height 设置为 600 Pixel。
6.	选择 showDetailItem，在 Property Inspector 中使用 Common 选项卡在 Text 域中输入 MDOrders。
7.	在 Application Navigator 中，展开 Data Controls 面板和 FODModuleDataControl 节点。
8.	将 OrdersView1 节点拖放到可视化编辑器的页面中。从 Create 上下文菜单中选择 Forms --> ADF Read-only Form。
9.	在 Edit Form Fields 对话框中，选中 Include Navigation Controls 复选框，选择除以下域之外的所有域： OrderId、OrderDate、OrderStatusCode、OrderTotal 和 CustomerId。然后单击 Delete 。 单击 OK。
10.	在 Data Controls 面板中，展开 OrdersView1 节点。将 OrderItemsView2 节点拖放到表单底部。
11.	从 Create 上下文菜单中选择 Tables --> ADF Read-only Table。
12.	在 Edit Table Columns 对话框中，选择 Row Selection 和 Sorting。选择除以下列之外的所有列： LineItemId、Quantity、UnitPrice 和 ProductName。单击 Delete 。 然后单击 OK。
13.	选择了新表后，在 Property Inspector 中选择 Style | Box 选项卡，在 Width 域中输入 100 Percent。在 Height 域中输入 100 Pixel。 选择 Common 选项卡，在 Id 域中输入 orderItemsTable。
14.	页面应如下所示：
15.	单击 JDeveloper 菜单栏上的 Save All 图标或选择 File | Save All。
16.	在该页面内单击右键，然后从上下文菜单中选择 Run。
17.	该页面加载到您的浏览器中。
18.	试验导航按钮。
19.	试用列出的任一详细信息列上的 排序功能。
20.	关闭浏览器窗口。 此时，您已经有了一个工作页面，您将添加条形图、计量器、甘特图、地理信息等图形组件并创建一个数据透视表。

返回主题列表

向页面中添加饼形图

在本部分中，您首先向 OrdersAndStocks 页面中添加一个基于仓库信息的基本饼形图，然后使用 Advanced Graph 增强饼形图的特性。

	创建基本饼形图
	转换为高级图形

返回主题列表

创建基本饼形图

基于视图 WarehouseStockLevelsView，您可以向 OrdersAndStocks 页面的 MDOrders 选项卡中添加一个饼形图，以显示指定定单中的各种产品在各个仓库位置中的相应库存级别。WarehouseStockLevelsView 视图通过产品 Id 属性链接到 OrderItemsView。

1.	返回 JDeveloper，展开 Model | Application Sources | oracle.fod.model，双击 WarehouseStockLevelsView 视图在编辑器中打开它。
2.	在编辑器中，单击 Query 选项卡显示 SQL 语句。注意，视图返回以下列：仓库 id、仓库名称、产品 id 以及现有数量（针对具有该产品的任何美国仓库 id）。 SELECT Warehouses.Warehouse_id, Warehouses.Warehouse_Name, WarehouseStockLevels.Product_Id, WarehouseStockLevels.Quantity_On_Hand, Addresses.Address1, Addresses.City, Addresses.State_Province, Addresses.POSTAL_CODE, Addresses.Country_Id FROM WAREHOUSES Warehouses, Warehouse_Stock_Levels WarehouseStockLevels, Addresses Addresses WHERE Warehouses.warehouse_id = WarehouseStockLevels.warehouse_id and Addresses.address_id = Warehouses.address_id and Addresses.Country_id='US'
3.	在编辑器窗口中，单击 OrdersAndStocks 选项卡显示该页面。
4.	在 Data Controls 面板中，展开 OrdersView1 | OrderItemsView2 节点。选择 WarehouseStockLevelsView1 节点并将它拖放到 Structure 窗格的 OrderItems 从表下面。 从 Create 上下文菜单中选择 Graphs --> Pie。注意，推荐了其他不同图形，而且使用 Advanced Graph 选项还可以通过更多选项创建特定图形。您会在后面的部分看到。
5.	在 Create Graph Binding 对话框中， — 取消选择 Include Child Accessors。 在 Data Points 部分中， - 确认 已选择 Typed Attributes 选项，然后单击 Add 。 - 从 Usage 下拉列表中选择 Numeric Value。 - 从 Data Attribute 下拉列表中选择 QuantityOnHand。 - 在 Label 域中输入 Quantity。 在 Group By 部分中， - 选择 In Legend (Slices)，然后单击 Add 。 - 从 Group Attribute 下拉列表中选择 WarehouseId。 - 从 Group Label Attribute 下拉列表中选择 WarehouseName。
6.	单击 Preview 选项卡。连接到数据库后，将显示图表。 单击 OK。
7.	在 Property 选项板中，使用 Appearance 组设置以下属性： Style Comet 并开 Image 节点 ，设置以下属性： ImageHeight 300 ImageWidth 400 ImageFormat Flash 3D Effect true
8.	在 Behavior 选项卡中，将 PartialTriggers 设置为 orderItemsTable，以便图形与定单项行选择同步。
9.	在 Structure 窗格中，选择 dvt:pieGraph 组件，然后在 Components Palette 中单击 ADF Data Visualization | Graph | General | seriesSet。seriesSet 应插入 Structure 窗格的 dvt:graph 组件中。
10.	右键单击 Structure 窗格中的 seriesSet 组件，选择 Insert Inside --> Series。
11.	在 Property Inspector 的 Common 选项卡中，将 PieSliceExplode 设置为 100 以指明分解的饼块离主饼的距离。 在 Advanced 选项卡中，将 Id 设为 0。
12.	保存您的工作，单击工具栏中的 Run 按钮 运行该页面。
13.	该页面加载到浏览器中。注意，默认情况下显示每个饼块的百分比，每个系列标签与不同的颜色相关联。将鼠标移到每个饼块上可以查看工具提示标签（仓库名称和数量）。 关闭浏览器窗口。

返回主题

返回主题列表

转换为高级图形

使用 Convert 选项允许您更改类型可视元素并提供其他属性以定义您的图形组件。

1.	返回 JDeveloper，在 Structure 窗格中右键单击 pieChart 组件并从上下文菜单中选择 Convert。
2.	在 Convert Pie 对话框中，选择 Advanced Graph 并单击 OK。
3.	在 Edit Graph Binding 对话框中，单击 Preview。注意，默认情况下，显示的图形是条形图。
4.	在 Preview 中，单击 Change Graph 按钮。
5.	探究每个图形类型中包含的各种图形子类型。然后选择 Pie 作为类型，并选择 Pie 作为子类型。 单击 OK。
6.	返回 Create Graph 对话框，选中 Use new graph type 复选框。 单击 OK。
7.	在 Confirm Convert 对话框中，单击 OK 接受删除警告。
8.	现在已经选择了 dvt:graph，您会看到更多属性现在已添加到 Property Inspector 中。 在 Property Inspector 中，在 Appearance 选项卡的 Line Graph 部分中，从下拉列表中将 MarkerTooltipType 设置为 MTT_PERCENT_VAL_VALUES。
9.	在 Property Inspector 中，在 Appearance 选项卡的 Series 部分中，将 SeriesRolloverBehavior 设置为 RB_HIGHLIGHT，将 SeriesEffect 设置为 SE_GRADIENT。
10.	在 Property Inspector 中，在 Appearance 选项卡的 Style 部分中，将 StylePath 设置为 Comet。（这是在转换操作期间删除的属性。）
11.	要替换针对每个饼块显示的百分比值，右键单击 Structure 窗格中的 dvt:graph 组件并选择 Insert Inside --> ADF Data Visualization。 在 Item 列表中，选择 Slice Label 并单击 OK。
12.	在 Property Inspector 的 Common 选项卡中，将 TextType 设置为 LD_TEXT。
13.	从 Component Palette 中，将一个 Legend Area 拖放到图形组件中。
14.	在 Property Inspector 的 Common 选项卡中，将 Rendered 属性设置为 false。
15.	保存您的工作，单击 Run 按钮 运行该页面。
16.	该页面显示在您的浏览器窗口中。
17.	将鼠标移到 一个饼块上，工具提示现在显示每个仓库的数量和百分比，仓库位置现在显示在每个饼块旁边。
18.	在详细信息红选择不同的 lineItem，饼形图应显示有关该不同产品的新情况。
19.	关闭浏览器窗口。

返回主题

返回主题列表

为库存级别使用计量器

根据同一视图，您可以添加一个计量器图形以反映每个仓库的库存级别。

1.	返回 JDeveloper，在编辑器窗口的 OrdersAndStocks.jspx 页面上的 MDOrders 选项卡中单击右键，从上下文菜单中选择 Insert after Show Detail Item --> Show Detail Item。
2.	在 Property Inspector 中，使用 Common 选项卡将 Text 设置为 StockLevels。
3.	打开 Data Controls 折叠面板，选择 FODModuleDataControl | OrdersView1 | OrderItemsView2 | WarehouseStockLevelsView1。将它拖放到 StockLevels 窗格中。
4.	选择 Tables --> ADF Read-only Table。
5.	在 Edit Table Column 对话框中，选择 Row Selection 和 Sorting 复选框。删除 以下属性： WarehouseId、Address1 和 PostalCode。 单击 OK。
6.	在 Property Inspector 中，对于表组件使用 Style | Box 选项卡，将 width 设置为 100 percent，将 Height 设置为 600 pixel。
7.	使用 Behavior 选项卡将 Partial Triggers 属性设置为 orderItemsTable。
8.	在 Component Palette 中，从 ADF Data Visualization 中选择 Gauge 组件并将其拖放到 Quantity 列上。
9.	在 Structure 窗格中，右键单击 outputText #{row.Quantity} 并选择 Delete 删除它。
10.	在 Structure 窗格中，选择 dvt:gauge 组件，在 Property Inspector 中，设置以下属性：在 Common 选项卡中，将 Gauge Type 设置为 STATUSMETER。在 Value 域旁边，从列表中选择 Expression Builder。 在 Expression Builder 对话框中，展开 JSP Objects | Row 并选择 QuantityOnHand，然后使用 Insert into Expression 按钮将其移到 Expression 窗格中。 单击 OK。
11.	选择 Gauge Data 选项卡，在 MinValue 域中输入 0，在 MaxValue 域中输入 1000，假设我们的简单示例中每个仓库的单个产品的库存级别都不超过 1000。
12.	选择 Style 选项卡，在 Width 域中输入 100 Percent，在 Height 域中输入 80 Pixel。
13.	在 Structure 窗格中选择 Gauge 组件上的 af:column，在 Property Inspector 的 Appearance 选项卡中将 Width 设置为 200。
14.	在接下来的几个步骤中，您将向计量器中添加阈值，以允许您在我们的示例中指定最小和最大库存级别指示器。 在 Structure 窗格中，选择 gauge 组件，在 Component Palette 中，单击 Threshold Set 组件。这自动将该组件添加到 gauge 中。
15.	在 Structure 窗格中选择了 Threshold Set 后，在 Component Palette 中右键单击 Threshold 3 次以在 Threshold Set 中添加 3 个阈值。
16.	在 Structure 窗格中，选择第一个 Threshold 组件。在 Property Inspector 中，将 ThresholdMaxValue 设置为 30，这是我们希望设置的最小库存级别警报。 在 Advanced 选项卡中，将 Id 域设置为 t0。
17.	在 Structure 窗格中，选择第二个 Threshold 组件。在 Property Inspector 中，将 ThresholdMaxValue 设置为 700，这是我们希望拥有的最佳库存级别。 在 Advanced 选项卡中，将 Id 域设置为 t1。
18.	在 Structure 窗格中，选择第三个 Threshold 组件。在 Property Inspector 中，保留 ThresholdMaxValue 为空。在 Advanced 选项卡中，将 Id 域设置为 t2。
19.	在接下来的几个步骤中，您将设置您所希望的量度和刻度标记的显示方式。 在 Structure 窗格中，选择 gauge 组件，在 Component Palette 中，单击 Tick Label 组件。这将自动将该组件添加到 gauge 中。
20.	在 Structure 窗格中，选择 tickLabel 组件，并在 Component Palette 的 ADF Data Visualization | Shared Child Tags 中，单击 Number Format 组件。这将自动将该组件添加到 tickLabel 中。
21.	在 Property Inspector 中，针对 Number Format 标记使用 Common | Scale 选项卡将 ScaleFactor 属性设置为 SCALEFACTOR_NONE。
22.	在 Structure 窗格中，选择 gauge 组件，并在 Component Palette 的 ADF Data Visualization | Gauge 中，单击 Metric Label 组件。这将自动将该组件添加到 gauge 中。
23.	使用 Common 选项卡，将 Metric Label 的 Position 属性设置为 LP_INSIDE_GAUGE_RIGHT。
24.	在 Structure 窗格中，选择 metricLabel 组件，并在 Component Palette 的 ADF Data Visualization | Shared Child Tags 中，单击 Number Format 组件。这将自动将该组件添加到 metricLabel 中。
25.	在 Property Inspector 中，针对 Number Format 标记使用 Common | Scale 选项卡将 ScaleFactor 属性设置为 SCALEFACTOR_NONE。
26.	页面应如下所示：
27.	单击 Run 按钮 运行该页面。使用导航按钮选择一个定单，然后选择一个 orderItem。
28.	单击 StockLevels 选项卡以通过计量器显示相应的库存级别。
29.	库存级别显示达到最小警报级别的产品。
30.	您可以使用另一个定单试验从 MDOrders 选项卡切换到 StockLevels 选项卡。
31.	关闭浏览器窗口。

返回主题列表

创建地理地图

在先前针对位于美国的仓库使用的同一视图上，您可以使用 Oracle 的空间功能向现有页面中的新选项卡添加一个地图，指明相关仓库的地理位置。

1.	返回 JDeveloper，在 OrdersAndStocks 页面的 StockLevels 选项卡中单击右键，并选择 Insert after Show Detail Item --> Show Detail Item。
2.	在 Property Inspector 中，使用 Common 选项卡将 Text 更改为 Location。 使用 Style | Box 选项卡将 Width 设置为 100 Percent，将 Height 设置为 600 Pixel。
3.	在 Data Controls 面板中，展开 OrdersView1 | OrderItemsView2 节点。选择 WarehouseStockLevelsView1 节点并将其拖放到包含 OrderItems 从表和图形的拆分窗口下方的页面上。
4.	从 Create 上下文菜单中，选择 Geographic Map -> ADF Map and Point Theme。
5.	在 Create Geographic Map 对话框中，单击 Add 创建一个新的 Map Configuration。
6.	单击 MapViewer URL 域旁边的 Add 按钮 。 输入以下 URL 信息： Name： MapViewer URL： http://elocation.oracle.com/mapviewer 单击 Test Connection 按钮。连接应该成功。 单击 OK。
7.	针对 Geocoder 域重复前面的步骤，提供以下 URL 信息： Name： Geocoder URL： http://elocation.oracle.com/geocoder/gcserver 单击 Test Connection 按钮。连接应该成功。 单击 OK。 单击 OK。返回 Map Configuration 对话框，单击 OK。
8.	在显示的地图上，单击 左上箭头将北美洲（这是与查询相对应的位置）重新调到地图中央，或者在 Starting X 域中输入 100，在 Staring Y 域中输入 40，以将北美洲调到地图中央。单击 Refresh。 单击 OK。
9.	Create Map Point Theme Binding 对话框出现。对于 Address，选择 US (street, city, state, zip) 并选择以下域： Street Address1 City City State StateProvince Zip Code:PostalCode Label WarehouseName 在 Point Data 下指定：Data： Quantity on Hand· Label： Quantity。单击 OK 插入地图。
10.	在 Structure 窗口中，选择 dvt:map 组件。在 Property Inspector 的 Behavior 选项卡中，将 PartialTriggers 属性设置为 orderItemsTable（表的 ID）。
11.	在 Appearance 选项卡中，将 MapZoom 设置为 1。
12.	要向地图中添加工具栏以提供缩放、区域选择和其他功能，从 Component Palette 中选择 Toolbar 组件并将其拖放到编辑器中的地图顶部。
13.	在 Insert Toolbar 对话框中，在 MapId 域中输入 map（地图组件的名称）。 单击 Finish。
14.	该页面应如下所示：
15.	单击 JDeveloper 菜单栏上的 Save All 图标或选择 File | Save All。
16.	单击 Run 按钮 运行 OrdersAndStocks.jspx 页面。选择一个定单项产品存储在几个位置的定单。
17.	单击 StockLevels 选项卡查看库存级别。
18.	单击 Location 选项卡查看指明仓库地理位置的地图。
19.	减小右下角的窗口嵌入，单击您选择的 红点弹出一个显示 位置名称和 数量的窗口。
20.	试用工具栏按钮，例如，单击 Zoom in 按钮并在地图中单击。
21.	试验其他功能，例如，选择 Area 按钮并单击 Rectangular 选择按钮，然后在地图中单击以在地图上选择一个矩形区域。
22.	系统计算并显示所选的区域面积。
23.	关闭浏览器窗口。

返回主题列表

创建数据透视表

根据您刚刚创建的视图，您可以向页面流图中添加一个新页面，然后在该新页面中创建数据透视表。

1.	返回 JDeveloper，展开 Model | Application Sources | oracle.fod.model，双击 SalesPivotTable 视图在编辑器中打开它。
2.	在编辑器中，单击 Query 选项卡显示 SQL 语句。注意，该视图汇总了各个产品类别、各个产品名称和美国各个州的销售情况。 SELECT category_translations.CATEGORY_NAME as "Category", products_base.product_name as "Product", addresses.state_province as "State", sum(order_items.QUANTITY * order_items.UNIT_PRICE) as "Sales" FROM products_base, product_categories_base, category_translations, orders, order_items, addresses WHERE products_base.product_id = order_items.product_id and products_base.CATEGORY_ID = product_categories_base.CATEGORY_ID and product_categories_base.CATEGORY_ID = category_translations.CATEGORY_ID and orders.SHIP_TO_ADDRESS_ID = addresses.ADDRESS_ID and orders.order_id = order_items.ORDER_ID and addresses.COUNTRY_ID = 'US' GROUP BY category_translations.CATEGORY_NAME, products_base.product_name, addresses.state_province order by category_translations.CATEGORY_NAME, products_base.product_name
3.	单击 OrdersAndStocks 选项卡打开该页面，在 Location 选项卡中右键单击并选择 Insert after Show Detail Item --> Show Detail Item 。
4.	在 Property Inspector 中，使用 Common 选项卡将 Text 更改为 PivotTable。 使用 Style | Box 选项卡将 Width 设置为 100 Percent， 将 Height 设置为 600 Pixel。
5.	在 Data Controls 面板中，将 SalesPivotTable1 数据控件拖放到该页面的新选项卡上。
6.	从 Create 上下文菜单中选择 Tables -> ADF Pivot Table。
7.	Create Pivot Table Binding 对话框出现。将 Category 和 Product 拖放到行边界，将 State 拖放到列边界，将 Sales 拖放到右侧的数据区域。 然后，单击 Data Aggregation 选项卡。
8.	在 Data Aggregation 中，单击 Add 按钮 创建一个新的 Total。选择/输入以下值： Attribute： Product， Function： Sum（默认值）， Aggregate Value Display： After， Aggregate Value Label： Total Product。
9.	单击 Preview 选项卡预览该设计。 单击 OK 将 PivotTable 插入页面中。
10.	在 Structure 窗口中，选择 dvt:pivotTable 组件。在 Property Inspector 的 Style | Box 选项卡中，将 Width 属性设置为 800 Pixel，将 Height 设置为 100 Percent。
11.	单击 JDeveloper 菜单栏上的 Save All 图标或选择 File | Save All。
12.	单击 Run 按钮 运行该页面。
13.	OrdersAndStocks 页面在浏览器中打开，单击 PivotTable 选项卡。
14.	显示销售表的默认视图。注意列总数。
15.	测试数据透视功能，例如，选择 Product 列并将其移到 State 行下方。
16.	新表显示各个州的产品销售情况。注意新的总数。
17.	选择 Product 行，并将它放回原始位置。您可以试验移动其他列/行。例如，选择 product category 列并将它移到 State 行上方以显示在各个州的销售的每种产品。 注意，您还可以交换层，例如，通过将一个层拖放到另一个层上来交换 Category 和 State。
18.	关闭浏览器窗口。

返回主题列表

创建甘特图

在本部分中，您将向页面中添加一个新选项卡用于创建甘特图。根据通过主从关系链接的两个现有视图 OrderShippingSummary 和 OrderShippingDetails，您可以向页面中添加一个新选项卡，然后在新页面中创建甘特图表。

1.	返回 JDeveloper，展开 Model | Application Sources | oracle.fod.model 节点并选择 OrderShippingSummary 视图对象。
2.	在编辑器中，单击 Query 选项卡查看 SQL 语句。该查询检索每个人的所有定单、最早定单日期以及最后发货日期。该查询如下所示： SELECT persons.PERSON_ID, persons.FIRST_NAME as "First Name", persons.LAST_NAME as "Last Name", min(orders.ORDER_DATE) as "Order Date", max(orders.ORDER_SHIPPED_DATE) as "Shipped Date", concat('Summary', '') as "Task Type" FROM orders, persons WHERE orders.CUSTOMER_ID = persons.PERSON_ID group by persons.person_id, persons.FIRST_NAME, persons.last_name
3.	展开 Model | Application Sources | oracle.fod.model 节点并选择 OrderShippingDetails 视图对象。
4.	在编辑器中，单击 Query 选项卡查看 SQL 语句。该查询检索每个人的所有定单，给出 OrderShippingSummary 的详细信息。该查询如下所示： SELECT persons.PERSON_ID, orders.ORDER_ID, orders.ORDER_DATE as "Order Date", orders.ORDER_SHIPPED_DATE as "Shipped Date", persons.FIRST_NAME as "First Name", persons.LAST_NAME as "Last Name", concat('Normal', '') as "Task Type" FROM orders, persons WHERE orders.CUSTOMER_ID = persons.PERSON_ID
5.	双击 FODModule 查看 OrderShippingSummary 和 OrderShippingDetails 之间的现有关系。
6.	返回 OrdersAndStocks 页面，在 PivotTable 选项卡中右键单击并选择 Insert after Show Detail Item --> Show Detail Item。
7.	在 Property Inspector 中，使用 Common 选项卡将 Text 更改为 OrdersPlanning。 使用 Style | Box 选项卡，将 Width 设置为 100 Percent，将 Height 设置为 600 Pixel。
8.	从 Data Controls 窗格中选择 OrderShippingSummary2 并将其拖放到页面上。
9.	从动态菜单中选择 Graphs --> ADF Gantt (Project)。
10.	在 Create Project Gantt 对话框中，选择 PersonId 属性并单击删除按钮 。在 Tasks 选项卡中，从下拉列表中选择以下值： Task Id PersonId Task Type TaskType Start Time OrderDate End Time ShippedDate 这些值指定了每个人的汇总任务的持续时间，从各个定单的最早订货日期到最后的发货日期。
11.	现在，我们来创建显示各个定单的具体持续时间的子任务。单击对话框中的 Subtasks 选项卡并从下拉列表中选择以下值： Subtasks Accessor OrderShippingDetails Sub Task Id OrderId Sub Task Type TaskType Start Time OrderDate End Time ShippedDate 单击 OK。
12.	在 Property Inspector 的 Common 选项卡中，将 Start Time 和 End Time 时间段更改为 2007-09-01 和 2007-12-31。 在 Style | Box 选项卡中，将 Width 设置为 100 Percent，将 Height 设置为 100 percent。
13.	单击 Run 按钮 运行该页面。
14.	该页面加载到浏览器中。 单击 OrdersPlanning 选项卡。
15.	甘特图显示每个人/客户所有定单的总持续时间。
16.	单击一个人的 + 图标以展开定单详细信息并查看各个定单的状态。
17.	扩大左侧窗格以查看更多列。
18.	注意默认情况下为甘特图创建的工具栏。单击 Zoom out 图标并注意任务上方图例中的更改，将列标签由 week 替换为 months 和 quarters。
19.	在菜单中，单击 View | Time Scale。 您可以选择时间范围的单位。
20.	关闭浏览器窗口。
21.	您已成功完成了该教程。

返回主题列表

总结

在本教程中，您看到了如何创建选项卡式 JSF 页面以及如何使用 ADF DVT 图形特性。

	创建主从页面
	添加饼形图
	添加计量器图表
	添加地理信息
	创建数据透视表
	创建甘特图

返回主题列表

将鼠标置于该图标上可以隐藏所有的屏幕截图。