One of the data visualization tags required by the teams working on the Oracle Fusion Application Module for Human Resource Management, was a component capable of rendering organization charts. Hierarchical structures from CEO all the way down to the youngest trainee. In a pleasing, graphically interesting, somewhat animated fashion. And so the ADF team developed the Hierarchy Viewer. And since they developed it anyway, we can now make use of it as well. While it may not be the component you will most frequently use, it is certainly an interesting presentation option for special data structures. This component can work against the same tree data binding you would use for tree tables or trees, and can therefore be configured in a very simple, declarative fashion.
In this article some simple examples of how to use this new component. This article is the short summary of a presentation and demonstration I did at the recent ODTUG Kaleidoscope 2009 conference (late June, Monterey). It demonstrates how the conference’s session schedule can be represented in the Hierarchy Viewer.
The Hierarchy Viewer provides a visual overview of the hierarchical data model. This overview can be presented in various ways: top to bottom, left to right, as a tree and radially (the last option is somewhat different, see in a different article).
The user can interact with the view in various ways:
– open, close nodes
– hover over nodes to see details
– navigate through the ‘cards’ (or panels) in a node
– move the hierarchy, zoom in or out, change the hierarchy orientation
Steps for configuring an Hierarchy View
1. Create ViewObjects to represent the hierarchical model – including ViewLinks and the Application Module’s data model
2. (Create a new JSF page and) Drag the Top Level ViewObject (Collection) from the Data Control Palette to the page; drop it as Hierarchy View
3. Specify the Node Rules in the Tree Data Binding Dialog
4. Configure the node level contents, possibly defining panelCards
Let’s go over these steps in some detail, to illustrate how you can get going fairly rapidly.
1. The Model side of things
The main table under the Session Schedule:
create table agenda_items ( id varchar2(10) not null , when date , end_time date , what varchar2(100) , location varchar2(100) , who varchar2(10) , description varchar2(2000) , keywords varchar2(200) , actors varchar2(200) , topic varchar2(100) )
The data was loaded using the SQL Developer import function from a CSV file (made available by John Jeunette).
What we need to have is a set of ViewObjects that I can use for creating the Tree Level Rules in the Tree Data Binding. I discern four levels:
- The conference level
- The day of the conference level
- The timeslot of the day
- The session itself
I need four interconnected ViewObjects to support these levels.
My first ViewObject: EventsView, readonly with a simple SQL statement:
select 'ODTUG Kaleidoscope 2009' title , 1 id from dual
The second ViewObject: EventDaysView:
select to_char( when, 'DAY DDth MONTH YYYY') title , trunc(when) dayDate , 1 event_id , count(*) countItems from agenda_items group by to_char( when, 'DAY DDth MONTH YYYY') , trunc(when) , 1 ORDER BY dayDate
This view has a ViewLink to the EventsView, tying the event_id to the id attribute in the EventsView.
The third level is the EventDaySlotsView:
select trunc(when) dayDate , to_char(when, 'HH:MI AM') startTimeLabel , when - trunc(when) startTime , 1 event_id , count(*) countItems from agenda_items group by trunc(when) , to_char(when, 'HH:MI AM') , when - trunc(when) , 1 ORDER BY daydate, startTime
This View ties to EventDaysView joining on event_id and dayDate.
Finally the meat of the hierarchy is at the fourth level, with the sessions themselves:
select trunc(when) dayDate , to_char(when, 'HH:MI AM') startTimeLabel , when - trunc(when) startTime , 1 event_id , what title , actors actors , end_time end_time , location location , description description , id id , topic topic from agenda_items ORDER BY dayDate, startTime, location
This View has a ViewLink to EventDaySlotsView joining on event_id, daydate and starttime.
Set up the Application Module’s Data Model with the hierarchy presented by these ViewObjects and their ViewLinks:
2. (Create a new JSF page and) Drag the Top Level ViewObject (Collection) from the Data Control Palette to the page; drop it as Hierarchy View
3. Configure the Hierarchy Viewer & the Tree Data Binding Dialog
Choose the style of Hierarchy:
Specify the Node Rules in the Tree Data Binding Dialog
At each level, indicate which zoom levels are explicitly supported. This means that for example when the user zooms in, from helicoper view (25%) to detail view (100%), other and typically more details become available. We can indicate which attributes should be displayed at each zoom level. Later on we can configure the zoom levels in more detail.
4. Configure the node level contents, possibly defining panelCards
In the page editor, we can specify the content for each node level (a node level corresponds with a tree level). A node supports up to four facets: facet100, facet75, facet50, facet25.
<dvt:hierarchyViewer inlineStyle="width:100%;height:600px;" id="hv1"
var="node"
value="#{bindings.EventsView1.treeModel}"
selectionListener="#{bindings.EventsView1.treeModel.makeCurrent}"
layout="hier_horz_left">
<dvt:link linkType="orthogonalRounded" id="l1"/>
<dvt:node type="model.hierarchy.EventsView" width="233"
height="233" id="n3">
<f:facet name="zoom100">
</f:facet>
</dvt:node>
<dvt:node type="model.hierarchy.EventDaysView" width="233"
height="233" id="n4">
<f:facet name="zoom100">
</f:facet>
</dvt:node>
<dvt:node type="model.hierarchy.EventDaySlotsView" width="233"
height="233" id="n2">
<f:facet name="zoom100">
</f:facet>
</dvt:node>
<dvt:node type="model.hierarchy.EventActivitiesView" width="233"
height="233" id="n1">
<f:facet name="zoom100">
</f:facet>
<f:facet name="zoom75">
</f:facet>
</dvt:node>
</dvt:hierarchyViewer>
Inside the nodes, we can use most other ADF Faces components, such as outputText, panelGroupLayout, image and others. Note: no input components can be used inside the Hierarchy Viewer.
One of the components that can be used in the Hierarchy Viewer, is the panelCard. The panelCard contains showDetailItem components that each represent a card in the panel:
<f:facet name="zoom100">
<dvt:panelCard id="pc1" effect="node_flip_horz">
<af:showDetailItem text="Session Overview" id="sdi3">
<af:panelGroupLayout inlineStyle="width:100%;height:100%;padding:3px"
layout="horizontal" valign="middle"
id="pgl6">
...
</af:showDetailItem>
<af:showDetailItem text="Session Logistics" id="sdi1">
<af:panelFormLayout inlineStyle="width:100%;height:100%;"
id="pfllog">
<af:panelLabelAndMessage label="Speaker"
labelStyle=" font-family:tahoma;font-size:16px;color:#5A6A7A"
id="plam11">
...
</af:showDetailItem>
<af:showDetailItem text="Session Details" id="sdi2">
...
</af:panelGroupLayout>
</af:showDetailItem>
Using the Hierarchy Viewer is a straightforward process. Drag a hierarchical data collection, drop it as Hierarchy Viewer, configure the nodes and possibly multiple zoom levels per node. That’s really all there is to it.
Extra styling & layout options
We can set the shape for the nodes in the hierarchy: ellipse, rect, roundedRect (the default). Also height and weight can be specified. The controls to be shown on the nodes can be configured as well.
Extra interaction options
You can invoke a popup window by specifying values for the af:showPopupBehavior tag and invoking it from a command component (for example, af:commandButton). You must nest the command component that invokes the popup window inside an f:facet element in a node of the hierarchy viewer component. Note that the triggerType property of an af:showPopupBehavior tag used in this scenario supports only the values action and mouseHover.
You can configure a node component (dvt:node) within a hierarchy viewer to invoke a menu by using the af:menu component. You can configure one or more af:commandMenuItem elements for the af:menu component.
Resources
Live demo of the Hierarchy Viewer: http://rea.oracle.com/faces/index.
Hi Lucas,
do you know if there is a way to configure the Hierarchy Viewer component to “wrap” its items ? I mean, for example if I want to display 3 items on a line then 3 on an other line, etc ?
Thanks a lot.