1. ADF DVTA Picture Paints a 1000 Words ODTUG Kaleidoscope 2011 – Long Beach, California Luc Bors, AMIS, The Netherlands

2. Overview The DVT Component in ADF Architecture Using DVT for data analysis Interactive Graphs Maps XAJA

3. DVT in ADF Architecture Desktop Browser-Based Metadata Services (MDS) JSF JSP Office ADFSwing Mobile View ADF Faces JSF Struts ADF Controller ADF Binding Model Business Services EJB BAM ADFbc Portlets BI BPEL Web Services Java Data Services

4. Before It gets complicated Creating Basic Graphs is easy

5. Using DVT for data analysis From plain numbers to interactive data analysis

7. Demand ?

9. Use Gauges as an indicator

10. Bar Graphs : Beyond the Defaults Default coloring can be confusing Default coloring can be ugly Overwrite Default colors <dvt:seriesSetdefaultColor="#0000ff">

12. 500 ?

14. Bar Graphs : Beyond the Defaults Use a Custom ClickListener In Listener iterate, compare and highlight clickListener="#{backingBeanScope.barGraphBean.clickHandler}" //iterate over the row data for (inti = 0; i < rowCount; ++i) { // when row is found, color it RED barGraph.getSeriesSet().getSeries(rwIndex, true).setColor(Color.RED); // when row is NOT found, color it BLUE barGraph.getSeriesSet().getSeries(rwIndex, true).setColor(Color.BLUE);

16. Grouping Sales : Sales overview Create a graph based on a ‘read only’ viewObject that produces the query result select products_base.product_id, sum(quantity) total , product_nameprd, order_datedt from orders , order_items , products_base where ………. group by ……..

17. Bar Graph : the Basics Per day, the amount ordered for this item in this warehouse 2 1 3

18. Grouping Sales : Sales overview Display sold items as percentage of total What was the ‘percentage sold’ in a given week ?

19. Grouping Sales : Sales overview Create a graph based on a ‘read only’ viewObject that produces the query result select sum(quantity) total , product_nameprdnam ,to_char(order_date, 'IW') week from orders, order_items, products_base Where …… group by …..

20. Pie Graphs Add some ‘flashy’ behaviour <dvt:pieGraph id="pieGraph1" value="#{bindings.OrderTotalsPie1.graphModel}" subType="PIE" threeDEffect="true" animationOnDisplay="flipLeft" animationDuration="2000" clickListener="#{pieClickListenerBean.processClick}" imageFormat="FLASH" seriesRolloverBehavior="RB_HIGHLIGHT" seriesEffect="SE_GRADIENT" dynamicResize="DYNAMIC_SIZE" interactiveSliceBehavior="explode"visualEffects="AUTO"> <dvt:background> <dvt:specialEffectsgradientDirection="GD_RADIAL" fillType="FT_GRADIENT" gradientNumStops="4"/> </dvt:background> <dvt:graphPieFrame/> <dvt:seriesSet> <dvt:series/> </dvt:seriesSet> <dvt:legendAreaautomaticPlacement="AP_NEVER" position="LAP_TOP"/> <dvt:sliceLabelautoPrecision="off" scaling="auto" textType="LD_PERCENT"/> <dvt:pieLabel rendered="false"/> </dvt:pieGraph>

21. Pie Graphs What is behind the information in the Pie ? public void clickListener (ClickEvent event){ ComponentHandle handle = event.getComponentHandle(); System.out.println(handle.getName()+" is clicked."); }

22. Do you remember this one ? Per day, the amount ordered for this item in this warehouse Let get some more detail here….

23. Time Selector : Component info Using the TimeSelector Component to ‘drill down’ TimeSelectorComponent can select date ranges in graph Can be difficult to use with existing datamodels Needs date range with no gaps Option: Create a view to fill in date gaps

24. Time Selector : Example (1) Add timeSelector component to Graph Use the TimeSelectorListener, for instance to use start and end dates in a filter. <dvt:timeSelector timeSelectorListener="#{timeSelectorBean.processTimeSelector}“ explicitStart="#{timeSelectorBean.startDate} explicitEnd="#{timeSelectorBean.endDate}“ mode="EXPLICIT" fillColor="#ff7d7d“ borderColor="#ff0000" id="tsl1“ fillTransparent="true"/> public void processTimeSelector(TimeSelectorEventtimeSelectorEvent) { Date sdate = new Date(timeSelectorEvent.getStartTime()); Date edate = new Date(timeSelectorEvent.getEndTime()); // convert dates and use them OperationBinding ob = bindings.getOperationBinding("ExecuteWithParams"); Map params = ob.getParamsMap(); params.put("b_startDate", Minorderdate); params.put("b_endDate", Maxorderdate); ob.execute();

25. Time Selector : Example (2) Show what customers placed order in that particular time frame.

26. Make graphs Interactive Listeners do the Trick ZoomListeners ScrollListeners ClickListeners

27. Interactive Graphs : add References How to use the ClickListener to change or add a <dvt:referenceObject /> Bind Graph to bean Get Handle to getReferenceObjectSet(); Change the ReferenceObject

28. Interactive Graphs : Update Data In Click Listeners you can do almost anything you like Get to the Data value (if needed) Display or… Process Long clickedValue = (Long)dhandle.getValue(DataComponentHandle.UNFORMATTED_VALUE);

29. Interactive Graphs scrollbarPresenceGroups ZoomListener public void zoomListener (ZoomEvent event){ double zoomMin = event.getAxisMin(ZoomEvent.Y1AXIS); double zoomMax = event.getAxisMax(ZoomEvent.Y1AXIS); intgroupStart = event.getAxisStartGroup(ZoomEvent.O1AXIS); intgroupCount = event.getAxisGroupCount(ZoomEvent.O1AXIS); System.out.println("Y1 Axis range "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax)); System.out.println("O1 Axis starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount)); }

30. Lets take a closer look : Zooming ZoomListener public void zoomListener (ZoomEvent event){ double zoomMin = event.getAxisMin(ZoomEvent.Y1AXIS); double zoomMax = event.getAxisMax(ZoomEvent.Y1AXIS); intgroupStart = event.getAxisStartGroup(ZoomEvent.O1AXIS); intgroupCount = event.getAxisGroupCount(ZoomEvent.O1AXIS); System.out.println("Y1 Axis range "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax)); System.out.println("O1 Axis starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount)); }

31. Interactive Graphs ScrollListener The listener interface for receiving scroll events on the graph. The event triggers when an axis of a graph is scrolled. Here is an example of scrollListener implementation that displays the range of the Y1 Axis and the O1 Axis - public void scrollListener (ScrollEvent event){ double zoomMin = event.getAxisMin(ScrollEvent.Y1AXIS); double zoomMax = event.getAxisMax(ScrollEvent.Y1AXIS); intgroupStart = event.getAxisStartGroup(ScrollEvent.O1AXIS); intgroupCount = event.getAxisGroupCount(ScrollEvent.O1AXIS); System.out.println("Y1 Axis has a range from "+Double.toString(zoomMin)+" to "+Double.toString(zoomMax)); System.out.println("O1 Axis has starting group index of "+Integer.toString(groupStart)+", and a group count of "+Integer.toString(groupCount)); }

32. Do you remember this one ? Where do these customers live ? Lets use a map to plot them

33. Geographical Map Create a viewObject to provide the data. SELECT ………….. adr.ADDRESS1, adr.CITY, …………. adr.POSTAL_CODE, adr.COUNTRY_ID, ord.ORDER_TOTAL , ……… FROM ORDERS ord, PERSONS per, ADDRESSES adr WHERE

34. Geographical Map Points is plotted to a Map

36. Thematic Map : New in 11g R2 Create Map Create Layers

37. Thematic Map : New in 11g R2 Relevant states are highlighted Drilldown Drillup Reset Zoom

38. Interactive DashBoard Demo DEMONSTRATION

39. Feeding the graphs Stock Level changed by: Services ? Batch Process ? …. ? How to inform application ?

40. Active Graphs : Push DB Changes What are the options ? Use ADS via Databinding ? Use ADS via Active Data Proxy ? Use Polling ?

41. Active Graphs : Push DB Changes Use Database ChangeNotification grant change notification to <user>; Set AutoRefresh ‘true’ for ViewObject Use Shared ApplicationModule Use Poll component

42. Active Graphs : Push DB Changes

43. DashBoard DATA PUSHDemo DEMONSTRATION

44. Contextual Events ADF Code Corner Example 17 To Refresh a Region Based on A Graph Click Event in an other Region public void handleEvent(Object payload){ //cast the payload to the ClickEvent. ClickEventclickEvent = (ClickEvent) payload; DataComponentHandledch = (DataComponentHandle)clickEvent.getComponentHandle(); //get the selected row key from the graph (click event) Key rwKey = (Key) dch.getValue(DataComponentHandle.ROW_KEY);

45. Summary Graphs not only display data Interact with Graphs and Maps Use Graphs and Maps clever and whenever needed Get the best out of your Graphs and Maps

46. Final Notes A Picture Paints a Thousand Words… …..And even then there is more to tell Contextual Events in Graphs Saving Graphs as Image Use Graphs in Reports

47. A Picture Paints a 1000 Words ODTUG Kaleidoscope 2011 – Long Beach, California Please Fill Out Your Evaluations Luc Bors, AMIS, The Netherlands Luc.Bors@amis.nl LucBors@gmail.com Follow me on Twitter : @lucb_