Developing Web and Mobile Dashboards with Oracle ADF

Transcription

1 Developing Web and Mobile Dashboards with Oracle ADF In this lab you ll build a web dashboard that displays data from the database in meaningful ways. You are going to leverage Oracle ADF the Oracle Application Development Framework to develop the application. Specifically we ll focus on Oracle ADF Faces a set of JSF components that enable simple development of rich Web user interfaces. In the first part of the lab, you ll define a data model based on a couple of queries using Oracle ADF Business Components. Then you are going to develop a web page using JSF and the Oracle ADF Faces components. Creating an application and a data model In this section we ll create a new application and define a data model that we can use to show data on our web page. 1. Start Oracle JDeveloper 12c from the icon on your desktop. 2. Click to create a New Application and choose the ADF Fusion Web Application option and clicking ok. 3. Provide a name and a package prefix for your application (make sure they don t include spaces). We are using mydashboard and my.dash in this example.

2 4. Click Finish to complete the wizard. JDeveloper creates a new application with two projects. The Model project is where we ll define our data services; the ViewController project is where we ll define our user interface. 1. Right click the Model project and select New View Object. 2. Click the green + sign to create a new Connection 3. Specify the following for the new connection a. Connection Name hr b. Username hr c. Password hr

3 4. Click the Test Connection button and make sure the connection is successful, and press OK. 5. Press OK again in the Initialize Business Components Project dialog. 6. In the Create View Object Step 1 wizard change the Name field to DeptStats and change the Data Source to be Custom SQL Query, and click Next. 7. Copy the following query into the Select field in the Query step select d.department_id, department_name, country_name, avg(salary) AvgSalary, count(employee_id) CountEmployeeId,max(salary) MaxSalary from locations l, countries c, employees e, departments d where d.department_id=e.department_id and d.location_id=l.location_id and l.country_id=c.country_id group by d.department_id, department_name, country_name 8. Click the Test and Explain button to verify the query is successful.

4 9. Click the Next button until you reach step 6 of the wizard. Here check the Key Attribute checkbox for the DepartmentId field. 10. Click Next until you complete the wizard and then press Finish. You have just created a component that will fetch information about departments from the database and allow you to display it in various user interfaces. Next we ll create another ADF Business Components viewobject to allow us to fetch data about employees. 1. Right click the Model project and select New->View Object 2. Name your view object Employees and mark its data source as SQL Query, then click Next.

5 3. In the query step place the following in the select field: Select * from Employees 4. Click Next until you reach the last step of the wizard and then press Finish. Now we ll connect the two queries with a View Link to indicate the master-details relationship. 1. Right click the Model project and select New->View Link

6 2. Name the ViewLink DetptToEmp and click Next. 3. In step 2, expand the DeptStats node on the left and select the DepartmentId field and then expand the Employees node on the right and select the DepartmentId field. Then press the Add button to add the relationship to the lower part of the screen.

7 4. Click Next until step 6 and check the Add to Application Module check-box to expose this relationship through and Application Module (this step will allow the UI developer to use this relationship). Then press Finish. 5. Click the Save All button to save your work so far.

8 6. You can right click the AppModule and choose Run to see a simple screen that will allow you to see the data when you double click each of the viewobjects on the left. Now our data model is done and it is time to turn to the development of our user interface. 1. Right click the ViewController project and choose New->Page 2. Name your page dashboard.jsf and choose the Copy Quick Start Layout option and choose the One Column category and the first type and layout, and make sure to check the Apply color theme to layout components check box. Then click Finish.

9 3. You are now in the JSF page visual editor. On the right you ll see the components palette from which you can pick up ADF Faces components to add to your page. Below it you ll see the property inspector where you can set the value for properties of the components on your page. On the bottom left the structure pane shows you the structure of your page so far. 4. In the structure pane navigate to the first af:decorativebox created and right click on it and choose Focus on Container. This will allow you to visually edit the content of this component.

10 5. From the component palette expand the Layout category and locate the Panel Splitter component and drag it onto your page. This component splits your page into two parts. 6. In the property inspector change the Orientation property to be vertical. 7. From the components palette drag a panel Accordion component into the lower second part of the page. In the create panel accordion window that pops up define 3 panes and set the Text to be Map, Sunburst, Hierarchy. Indicate that the Map pane should be disclosed, then click the ok button.

11 8. Your page should look like this: 9. From the components palette drag a Panel Dashboard into the top (first) section of the page. Set the RowHeight property of the dashboard to 380px.

12 10. Drag a Panel Box into the Panel Dashboard you created. Repeat this step 2 more time to create a total of 3 boxes. 11. This complete your page layout you can verify that your structure matches the one shown here in the structure pane:

13 12. To enable end-users to further customize the page at runtime, we ll enable users to drag and drop and re-position the boxes. 13. From the Operations section of the components locate the Component Drag Source and drag it into each one of the three boxes on your page. (note that you can drag the components directly onto the panelboxes in the structure pane) Next we are going to start connecting our data components to the page. To simplify this task we ll use the ADF Binding layer which allows us to drag data sources and place them on the page. 1. Expand the Data Controls section of the Applications Navigator to locate the view objects you created before.

14 2. Drag the DeptStats1 collection into the first panelbox and choose to drop it as an ADF Form.

15 3. In the dialog for form creation select Read-Only Form and check the box to include Row Navigation, and then press OK. 4. Next drag the Employees1 collection into the second panelbox and choose to drop it as a Chart In the Component Gallery choose a simple Bar chart and click OK.

16 6. Drag the Salary field to the Bars, and the LastName field to the X Axis field, and Click OK. 7. In the property inspector for the chart, under the Behavior section, set the HoverBehavior property to dim. Also set the zoomandscroll to live.

17 8. In the JDeveloper toolbar click Save All. 9. Right click the page and choose Run.

18 10. Wait for the page to show up in your browser and then see how the page behaves at runtime.

19 11. Note that you can resize the splitter so the graph is not obstructed from view. You can navigate through the records of departments and the graph will update accordingly, hovering with your mouse on bars in the graph will show the value in a popup. You can click to select areas in the charts to zoom on, and you can use your mouse wheel to zoom in/out further. In addition you can drag and drop to reposition the panel boxes. 12. Don t close the browser once you are done testing your user interface, we ll be using JDeveloper s hot deployment option for the rest of the tutorial to allow you to quickly see changes you make to your application. 13. Please note that there in addition to the scroll bar there is also an option for enabling zoom and scroll overview window on the Chart, which is especially useful with large data sets. To enable the overview window, right click on the dvt:barchart tag in the Structure pane, and choose to insert an Overview facet.

20 14. Select the newly created f:facet - overview tag under the dvt:barchart tag, right click on the tag, and select to insert an Overview component inside it.

21 15. Re-run the page and test the overview window feature. The overview window displays the full data set and allows you to select a subset of data to view in the Chart. You can resize the overview window and move it across the data set to zoom into a subset of the Chart data. 16. Next we will show how to configure the Chart to display all the bars in different colors. To enable this feature, right click on the dvt:chartdataitem tag in the Structure pane and choose to insert an Attribute Groups tag inside it.

22 17. Select the newly created dvt:attributegroups tag, and in the Property Inspector set the type property to color. 18. Also in the Property Inspector set the value property to #{row.lastname}. 19. The attribute groups tag should be configured as follows: <dvt:attributegroups id="ag1" type="color" value="#{row.lastname}" 20. We can hide the legend since it is not needed for this case. Select dvt legend tag and in the Property Inspector set its rendered property to false. 21. Finally, change the PanelBox titles to more meaningful names, such as Department Data for the first panel box and Employee Salaries for the Chart panel box. 22. Re-run the page and note that each bar now has a different color.

23 Adding a Gauge Gauge can visually represent a numeric value on a range scale with thresholds defined to add clarity to the data. In this section we will learn how to create a new type of Gauge, a Circular Status Meter Gauge. 1. In the Data Control palette, expand the DeptStats1 data control and locate the AvgSalary field. 2. Drag the AvgSalary field into the third panel box in the page and choose to create a Gauge 3. In the Gauge gallery, select a Circular Status Meter gauge type.

24 4. In the Gauge binding dialog that comes up, set the min value to 0 and max value to the max salary field in the drop down. Create 3 thresholds where the first two have max values and 16000, and the last threshold has the default max value. Choose red, yellow and green colors for the thresholds form the color picker UI.

25 5. Select the newly created dvt:statusmetergauge tag and in the Property Inspector under Style, change its inlinestyle to width:150px;height150px. 6. In the Property Inspector under Appearance, turn the Plot Area property to on. 7. Re-run the page and navigate through the departments. Note how both the Chart and the Gauge update, and the Circular Status Meter Gauge changes color based on the average Salary value, as defined by the thresholds. Section 2 Adding Advanced Data Visualizations In this section we ll focus on adding additional data visualization components to our dashboard. Adding a Sunburst Sunburst component shows drillable data along two dimensions one represented by the size and another by the color of each element in the circle. 1. In the structure pane select the Sunburst showdetailitem and set the stretchchildren property to first.

26 2. 3. From the Data Controls accordion drag the DeptStats1 collection into the Sunburst accordion on your page and choose to create Sunburst.

27 4. In the Create Sunburst dialog that pops up, with the DeptStats1 selected set the Value field to the countemployeeid field, set the Label to the DepartmentName and press the green + button to add a new Group Rule using AvgSalary as the group by value as well as the legend label. 5. Check the checkbox next to the Employees collection to include their details in your sunburst as the second level. Set the Value to be Salary and the Label to be LastName.

28 6. Press the green + button to add a new Group Rule using DeptId as the group by value. 7. Click ok to release the dialog. In the JDeveloper toolbar, click save all and then click the rebuild button. Now reload the page in your browser. 8. Your page will now include the sunburst component showing departments and employees in each one.

29 9. Let s enable drilling on the component. Select the dvt:sunburst in the structure pane and set the DisplayLevelsChildren to 0. This will tell the sunburst to open with just the top level node. 10. In the structure pane expand the dvt:sunburst->switcher->facet to locate the dvt:sunburstnode for the countemployeeid set the Drilling property to be insert.

30 11. Save you page and reload the browser. 12. Initially the page will show up with just the departments. Note that you can choose a department and drill down to the employees by pressing the little + sign that appears on the slice. You can allocate more space to the sunburst component by maximizing the area allocated to the accordion with the splitter pulled all the way up. Also note that the sunburst component can be rotated by dragging its edge with the mouse.

31 Adding a Hierarchy Viewer The hierarchy viewer allows you to easily navigate a hierarchy of data visually. 1. Select the Hierarchy af:showdetailitem in the structure pane and set the stretchchildren property to first.

32 2. From the Data Controls palette drag the DeptStats1 collection to the empty Hierarchy accordion and choose to create a Hierarchy Viewer. 3. In the dialog that pops-up accept the default Vertical Top Down option for the layout of the component and click OK. 4. In the Create Hierarchy Viewer dialog check the box next to the Employees node note that you can drag and drop properties between the panel cards to create your own layout. For example you can drag the LastName property to the first folder and the

33 hiredate to panel card 2, and then delete panel card 1. You can also provide a title for each one of the cards. 5. Click OK to release the dialog. 6. With the dvt:hierarchyviewer still selected in your structure pane, set the following properties: Descendent Levels = 0, Nodes Per Level=4. 7. In the JDeveloper toolbar click Save All and then the rebuild button. Then reload your page in the browser.

34 8. If you ll expand the second accordion you ll see the hierarchy viewer. At the bottom of each node you ll notice an arrow that will allow you to expand this node to see its children. 9. Expand the control panel at the right of the component to allow you to zoom in and out and change the layout of the component at runtime. Note that you can further customize the size of each node, and the text used by directly manipulating those in the JDeveloper IDE. Adding a Thematic Map The thematic map allows you to show data that relates to location and areas. We ll first need to define an additional query that gets us the data and then display it on a world map.

35 1. Select the model project in the projects section, right click and choose New->ViewObject 2. Set the name for the view object to be MapData and the Data Source to be Custom SQL Query, then click Next.

36 1. Copy the following SQL into the Select box, and then click the Test and Explain to verify your syntax is correct: select c.country_code, count(e.employee_id) from employees e, departments d, locations l, countries c where e.department_id=d.department_id and d.location_id=l.location_id and c.country_id=l.country_id group by country_code Continue advancing in the wizard using the Next button until you get to step 6. Check the Key Attribute checkbox for the CountryCode attribute.

37 5. Click Next to get to step 8 of the wizard and check the Add to Application Module checkbox. Then press Finish. 6. Back in the dashboard.jsf web page visual editor expand the Map Accordion and set the StretchChildren attribute to first

38 7. From the Data Controls palette drag the MapData1 view to the Map accordion and drop it as a Thematic Map 8. In the dialog that pops up choose the World->World countries map and click ok.

39 9. In the Create Data Layer dialog choose CountryCode for the Location field and click OK.

40 10. In the structure pane expand and drill down the dvt:tematicmap until you get to the dvt:arealocation and choose that node. 11. In the property inspector select a new FillColor by choosing the wheel to the right of the field. Click the save all toolbar button and then the make button and reload the page in your browser. The page now include a map that highlight the countries where employees are working.

41