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

目的

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

所需时间

45 分钟

主题

本教程包括以下主题：

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

查看屏幕截图

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

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

概述

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

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

1.	可以访问或已安装 Oracle JDeveloper 11g 产品。可以从 Oracle 技术网下载它。
2.	从 OTN 下载 FOD 模式 zip 文件，或者右键单击以下链接并从上下文菜单中选择 Save Target As... 将 FOD_11.zip 文件下载到您选择的本地目录中。
3.	将 FOD_11.zip 文件解压缩到您选择的本地目录（即 temp）。
4.	选择 Start > All Programs > Oracle Fusion Middleware > JDeveloper Studio 11.1.1.0.0 启动 JDeveloper。如果 Migrate User Settings 对话框打开，请单击 NO。如果系统提示您选择一个用户角色，则选择 Default。关闭 Tip of the Day 窗口。
5.	现在应显示 JDeveloper IDE。

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

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 节点以查看数据库对象。

1.	打开 Application Navigator 并展开 Model 项目节点。您会看到现有的实体、视图、链接对象和 FODModule。 Model 项目包含应用程序所需的所有必需组件。
2.	右键单击 Model 项目节点，并从上下文菜单中选择 Project Properties。
3.	在 Project Properties 对话框中，选择 Business Components 节点并从 Connection 域的可用列表中选择 FOD 连接。然后，单击 Update 按钮。
4.	在 Connection 对话框中，单击 Test Connection 按钮并确保操作已成功。单击 OK 关闭对话框，然后再次单击 OK。
5.	要在业务组件测试器中测试该模块，在 Application Navigator 中右键单击 FODModule 并选择 Run。等待 Browser 窗口打开。
6.	在 Business Component Browser 中，双击 OrdersItemsOrdersFkLink1。
7.	使用导航按钮浏览订单。
8.	关闭 Business Component Browser 窗口。
9.	折叠 Model 项目。展开 ViewController 项目节点。您会看到创建融合 Web 应用程序时默认创建的现有组件。

1.	在 Application Navigator 中，右键单击 ViewController 节点并从上下文菜单中选择 New。
2.	在 New Gallery 中，单击 Current Project Technologies 选项卡，然后选择 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 域中输入 OrdItem。
14.	页面应如下所示：
15.	单击 JDeveloper 菜单栏上的 Save All 图标或选择 File \| Save All。
16.	在页面中右键单击，然后从上下文菜单中选择 Run 或单击 Run 按钮运行该页面。
17.	该页面加载到您的浏览器中。
18.	试验导航按钮。
19.	试用列出的任一详细信息列上的排序功能。
20.	关闭浏览器窗口。此时，您已经有了一个工作页面，您将添加条形图、计量器、甘特图、地理信息等图形组件并创建一个数据透视表。

1.	返回 JDeveloper，选择 dvt:barGraph 组件，并在 Appearance 部分中，将 SeriesEffect 设置为 SE_GRADIENT，将 SeriesRolloverBehavior 设置为 RB_HIGHLIGHT。
2.	在 Appearance \| Animation 部分中，将 AnimationOnDataChange 设置为 ON，将 AnimationOnDisplay 设置为 Auto。注意：如果将 animateOnDisplay 设置为 on，则图形会在首次显示在页面上时播放动画；如果将 AnimateOnDataChange 设置为 on，则图形会在每次数据更改或在您单击表中的行时播放动画。
3.	在 Structure 窗格中，展开 dvt:barGraph，然后在 Legend Area 中，将 Rendered 属性设置为 Default (TRUE)，将 AutomaticPlacement 设置为 AP_NEVER。
4.	保存您的工作，单击 Run 按钮运行该页面。
5.	该页面显示在您的浏览器窗口中。注意在达到最后一个值位置前的条形动画。
6.	将鼠标置于某个条形上后，您会看到其他条形显示为阴影。
7.	选择另一个条形以更改高亮显示的流程。您会看到右侧的图例也相应地高亮显示了。
8.	单击 Next 按钮更改订单。您会看到动画（不断增高的条形上出现三角形）…… 一直进行到最后一个条形表示。然后，将鼠标停留在一个条形上。
9.	您可以在图例部分试验选择一个仓库名称以高亮显示另一个条形。
10.	关闭浏览器窗口。

1.	返回 JDeveloper，在编辑器窗口的 OrdersAndStocks.jspx 页面上的 MDOrders 选项卡中单击右键，从上下文菜单中选择 Insert after Show Detail Item --> Show Detail Item。
2.	在 Property Inspector 中，使用 Common 节点将 Text 设置为 StockLevels。
3.	单击 StockLevels 选项卡，然后打开 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 属性设置为 ::OrdItem。
8.	在 Component Palette 中，从 ADF Data Visualization 中选择 Gauge 组件并将其拖放到 Quantity 列上。在 Create Gauge 对话框中，选择 Status Meter 类别，然后选择 Horizontal Status Meter with Thresholds。单击 OK。
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 将其移动到 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 \| ThresholdSet 组件。
15.	您会看到 Threshold Set 中有 3 个阈值。
16.	在 Structure 窗格中，选择第一个 Threshold 组件。在 Property inspector 中，将 Id 域设置为 t00，将 ThresholdMaxValue 设置为 30（这是我们希望设置的最小库存级别警报），并在 Text 域中键入 mini。
17.	在 Structure 窗格中，选择第二个 Threshold 组件。在 Property inspector 中，将 Id 域设置为 t01，将 ThresholdMaxValue 设置为 700（这是我们希望拥有的最佳库存级别），并在 Text 域中键入 maxi。
18.	在 Structure 窗格中，选择第三个 Threshold 组件。在 Property Inspector 中，保留 ThresholdMaxValue 为空。在 Advanced 节点中，将 Id 域设置为 t02。
19.	在 Structure 窗格中，右键单击 tickLabel 组件并从上下文菜单中选择 Insert inside dvt:tickLabel --> Number Format。
20.	在 Property Inspector 中，针对 Number Format 标记使用 Scale 选项卡将 ScaleFactor 属性设置为 SCALEFACTOR_NONE。
21.	在 Structure 窗格中，选择 Metric Label 组件。使用 Common 节点，将 Metric Label 的 Position 属性设置为 LP_INSIDE_GAUGE_RIGHT。
22.	在 Structure 窗格中，右键单击 metricLabel 组件并从上下文菜单中选择 Insert inside dvt:metricLabel --> Number Format。
23.	在 Property Inspector 中，针对 Number Format 标记使用 Scale 选项卡将 ScaleFactor 属性设置为 SCALEFACTOR_NONE。
24.	页面应如下所示：
25.	单击 Run 按钮运行该页面。
26.	单击 StockLevels 选项卡以通过计量器显示相应的库存级别。库存级别计量器显示了产品如何针对最小和最大警告级别在仓库中执行操作。将鼠标置于计量器上以显示相应的数量。
27.	您可以使用另一个订单试验从 MDOrders 选项卡切换到 StockLevels 选项卡。
28.	关闭浏览器窗口。

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.	单击 Pivot Table 选项卡，然后在 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.	关闭浏览器窗口。

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

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

目的

主题

查看屏幕截图

概述

情景

前提条件

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

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

安装数据库模式

上载启动应用程序

创建数据库连接

探究启动应用程序

创建一个主从订单页面

向页面中添加条形图

创建基本条形图

改进基本条形图

为库存级别使用计量器

创建地理地图

创建数据透视表

创建甘特图

总结

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

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

安装数据库模式

上载启动应用程序

创建数据库连接