Posts tagged hierarchy viewer
ADF 12c – The Hierarchical Mystery Tour – Treemap, Sunburst, Treetable, Hierarchy Viewer and Thematic Map0
Hierarchical data is common phenomenon in the real world. Presenting such data to allow users to quickly grasp the composition of numbers, to compare quantities, to navigate through a data set and to have a pleasant experience with potentially dreary facts is quite valuable. ADF 12c (as well as previous releases) offer a wealth of components that help us present data in interesting, meaningful ways. For hierarchical data, components that come to mind include the Hierarchy Viewer, the Treemap and Sunburst components and if the data is of a geographical nature the Map components. Of course the tree and treetable and pivot table can be used to present such data as well.
This article demonstrates the use of a number of these components on population statistics for cities, countries, continents and regions. I hope you spot the hierarchical pattern in this list. This YouTube movie (4.20 minute, no sound) shows the components in actions. The resources section of this article makes the JDeveloper 12c (12.1.2) application available for download, with all the source code inside.
Recently the ADF Special Interest Group at AMIS organized an ADF DVT Speed Date. During this speed date, six ADF specialists from our team presented their favorite Data Visualization Component from the DVT library. In a series of blog posts we share the information with a broader audience. In this post you get introduced to the Hierarchy Viewer – which was my own date for this party.
Introduction : The Hierarchy Viewer
A Hierarchy viewer is typically used to display hierarchical data. Examples of this are for instance a tree of life or a mindmap or even a family tree.
The ADF hierarchy viewer consists of several ADF components.
- dvt:hierarchyViewer : This element wraps the dvt:node and the dvt:link elements
- dvt:node : The dvt:node element supports the use of one or more f:facet elements that display content at different zoom levels (100%, 75%, 50%, and 25%).
- dvt:link : connects one node with another node
- dvt:panelCard : The panel card element provides a method to dynamically switch between multiple sets of content referenced by a node element using animation by, for example, horizontally sliding the content or flipping a node over.
A hierarchy viewer component requires data More >
This morning, I noticed the following email sitting in my Inbox: “Hello, Lucas.
I found Hierarchy Viewer demo from http://technology.amis.nl/blog/5786/adf-11gr1-new-hierarchical-viewer-for-visually-pleasing-representation-of-data-structures.
But i need to implement some kind of solution. I attached my expected mockup and table structure.
Is it possible? If possible, please suggest me how to do that and put your solution based on your experience.
I’m looking forward to hearing from you soon.”
Obviously, I normall completely ignore such emails – I do have a job you know, and some semblance of a normal life too. However, this email triggered me in some way. And between other more important things, I tried to create the desired hierarchy. The mock up looks like this:
The most challenging part is probably to get the query right. Once that query is defined – in a ViewObject with a selfrefencing ViewLink – creating the hierarchy is very straightforward. Some final styling is required – and a different design to the Radio Buttons, because those are not supported in the Hierarchy Viewer – but otherwise I think I did the job. My end result looks like this (from far away):
Note that the More >