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.
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
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
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…
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.
2. Name the ViewLink – DetptToEmp and click Next.
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.
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…
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.
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.
8. Your page should look like this:
10. Drag a Panel Box into the Panel Dashboard you created. Repeat this step 2 more time to create a total of 3 boxes.
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.
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...
6. Drag the Salary field to the Bars, and the LastName field to the X Axis field, and Click OK.
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.
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.
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.
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.
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.
2.
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.
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.
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.
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.
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
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.
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.
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
1. Select the model project in the projects section, right click and choose New->ViewObject
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
5. Click Next to get to step 8 of the wizard and check the Add to Application Module checkbox. Then press Finish.
7. From the Data Controls palette drag the MapData1 view to the Map accordion and drop it as a Thematic Map…
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.
