ADF_ADF Faces系列4_ADF数据可视化组件简介之建立BarChart/Gauge/ExportExcel

2013-05-01 Created By BaoXinjian

一、摘要


本文介绍,通过Oracle演示资料,开发一个Web Application, Data Model基于演示资料FOD,如何使用ADF业务组件

在Web Client Side,使用JavaServer Faces JSF

创建一个Master-Detail Order页面,再通过加入图表改善用户体验,如饼图、甘特图、地图、数据透视图等 

Part 1: Validating the Model and Starting Building the UI 

Step 1: Create and Populate the Database Schema

Step 2: Get the Starter Application Ready

Step 3: Explore the Starter Application

Step 4: Create the Master Detail Order Page Close

Part 2: Starting Using Graphic ComponentsClose

Step 1: Create a Basic Bar Chart in the Page

Step 2: Refine the Basic Bar Chart

Step 3: Display Stock Levels Using a Gauge

Step 4: Add an 'Export to Excel' Functionality

Part 3: Adding Other Complex Graphical Presentations to the PageClose

Step 1: Create a Geographic Map

Step 2: Create a Pivot Table

Step 3: Create a Gantt Chart

Part 4: Using the Thematic Map Component

Step 1: Add a New View Object and Expose it

Step 2: Create the Product Popularity page tab

 

二、案例1 - Create a Basic Bar Chart in the Page


Step1. 查看所引用的VO中Query 

Step2. 引用Warehouse Stock中的数据,创建Bar 

Step3. 查看页面组件中的内容,Bar组件显示Page Structure中 

Step4. 定义数据的变更响应来源的Partial Trigger

Step5. 运行测试,数据显示如下,柱状图显示正常

Step6. 数据的Order Header变化时,柱状图因动作响应,自动刷新图表

Step7. 数据的Order Lines变化时,柱状图因动作响应,自动刷新图表

 

三、案例2 - Refine the Basic Bar Chart


Step1. 修改柱状图的显示参数

 

Step2. 增加雾化效果,当数据选中某条记录时,其他记录雾化

Step3. 当数据值更新时,显示新值和旧值的比较,最终显示增加还是减少

Step4. 其他显示结果如下图

 

四、案例3 - Display Stock Levels Using a Gauge


Step1. 从Data Control中绑定数据

Step2. 新增Gauge图,如下

Step3. 定义甘特图结构

Step4. 定义甘特图的值的数据来源

Step5. 增加Partial Trigger,

Step6.  定义甘特图的最大值,最小值,合格值,以显示数据的合格性

Step7. 最后显示的甘特图如下结构

 

五、案例4 - Add an 'Export to Excel' Functionality


Step1. 增加一个按钮,为Export to Excel

 

Step2.  在该栏位时定义增加Export Collection Action Listener

 

Step3. 定义导出Excel文档的Filename和Title

Step4. 运行测试结构

Step5. 打开Excel,数据显示如下

 

Thanks and Regards

参考:Oracle - Oracle JDeveloper 11g Release 2 Tutorials

posted on 2015-01-25 13:51  东方瀚海  阅读(162)  评论(0编辑  收藏  举报