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

​四、案例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，数据显示如下