打印 打印机视图 寄送 寄送此页面 书签 书签
 结合使用 JDeveloper 11g ADF 和 ADF DVT 组件

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

目的

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

所需时间

45 分钟

主题

本教程包括以下主题：

概述
情景
前提条件
创建一个主从定单页面

添加饼形图
添加计量器
添加地理地图
创建数据透视表
创建甘特图
总结

查看屏幕截图

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

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

概述

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

返回主题列表

情景

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

返回主题列表

前提条件

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

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

返回主题列表

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

在以下步骤中，您将下载 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。