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
技术交流,技术讨论,欢迎加入
Technology Blog Created By Oracle ERP - 鲍新建