Documente Academic
Documente Profesional
Documente Cultură
TRENDING Create a Native Image Binary Executable for a Polyglot Java Applicati… Search...
YOU ARE AT: Home » Software Development » Development Tools » ADF DVT Speed Date : Meeting The Hierarchy Viewer
ABOUT AUTHOR
Luc Bors
Luc Bors is Expertise Lead ADF and
technical specialist/architect at AMIS,
Nieuwegein (The Netherlands). He developed several
Workshops and training on ADF and also is an ADF and
JHeadstart instructor. Luc is a member of the ADF
Methodology group and publishes articles on ADF in
oracle technology related magazines, on the AMIS
technology blog, (http://technology.amis.nl/blog).
FOLLOW US ON LINKEDIN
Follow 2,777
BY LUC BORS ON MARCH 1, 2013 DEVELOPMENT TOOLS, ORACLE, ORACLE ADF
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 1/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Recently the ADF Special Interest Group at AMIS organized an ADF DVT Speed Date. During this speed date, six ADF specialists POPULAR TAGS
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.
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 cloud container Database
docker DVT enterprise manager html5 integration iot
FOLLOW US ON TWITTER
a family tree.
Tweets by @AMISnl
AMIS Conclusion
@AMISnl
New Article : Node JS application running on GraalVM –
interoperating with Java, Python, R and more
ift.tt/2PIDpcS by Lucas Jellema
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 2/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
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
Node JS application running on GraalVM - inte…
referenced by a node element using animation by, for example, horizontally sliding the content or flipping a node over.
When you install GraalVM, one of the things you get
is a Node runtime environment (GraalVM 19.2.1 is
A hierarchy viewer component requires data collections where a master-detail relationship exists between one or more detail technology.amis.nl
collections and a master detail collection. The hierarchy viewer component uses the same data model as the ADF Faces tree
component. When you add a hierarchy viewer component to a JSF page, JDeveloper adds a tree binding to the page definition file Nov 5, 2019
for the JSF page.
AMIS Conclusion
@AMISnl
The latest The AMIS Oracle Technology Weekly!
paper.li/AMIS_Services/… Thanks to @rexpertalliance
#java #kubernetes
Creating the Business Components Create ADF Business Components from tables. These Business Components will be used as AMIS Conclusion
basis for the Hierarchy Viewer. The connection for this application needs to point to the DVT_USER. (you can use the HR schema @AMISnl
as well if you like. If you do, then don’t use the table prefix LBO that I used in this example) New Article : Switch off Screen Lock on Ubuntu Bionic
Desktop ift.tt/329RGBY by Lucas Jellema
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 3/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Nov 2, 2019
AMIS Conclusion
@AMISnl
New Article : State management in serverless functions –
connection pooling in AWS Lambda leveraging
memoized functions ift.tt/2JAsT3o by Bram Kaashoek
1. Skip the first couple of steps in the wizard. In this hands-on we will use read only view objects
2. In step 3 of the wizard (creation of read only view objects) adjust the package name if you want to.
State management in serverless functions - co…
3. Shuttle the LBO_EMP_DETAILS_VIEW to the right. This view contains all the data that is needed for the hierarchy viewer. The problem Setting up a datastore connection is an
expensive process. The amount of available
Rename the instance to EmpDetails
technology.amis.nl
AMIS Conclusion
@AMISnl
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 4/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
In the next step, create an application module. This is the Application module that is used in this application. META
Log in
Entries RSS
Comments RSS
WordPress.org
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 5/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
In the data in this hands on each employee has a manager (or not). This relationship is used in the hierarchy viewer to display
employees as a child node of their manager. To make this work, a we need a view link. 1. Create a new viewlink to connect
employees and managers. This link is necessary to be able to display hierarchical data.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 6/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Select the EmployeeId and the ManagerId and add the viewlink.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 7/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
The hierarchy will have one root node. This root node is the node that depicts the highest level of employees. In this case it is the
employee with no manager. In order to find the rootnode, you have to create a viewcriteria.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 8/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
With the viewcriteria created, it is now time to tell the viewobject usage to use this viewcriteria.
Open the application module data model. Step one is to add the employees viewobject usage as a child to the existing viewobject
usage.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 9/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Step two is to change the EmpDetails usage and add the isRoot viewCriteria. Select the EmpDetails usage and push the “edit”
button. In the ViewCriteria dialog shuttle the isRoot criteria to the right.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 10/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Select the EmpDetails collection and drag it from the datacontrol on to your page and drop it as an hierarchy viewer.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 11/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
JDeveloper now shows you the hierarchy viewer wizard. In the wizard select the vertical top down layout for the viewer.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 12/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
In the next part of the wizard you need to create the hierarchy. Check all the checkboxes in order to get the hierarchy viewer’s data.
Leave the other zoom levels for now. We will get to that later.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 13/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 14/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
There are several ways to add the facets for extra zoom levels. You can go into hierarchy viewer declaration and enable the zoom
levels and add the attributes that you want to display.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 15/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
However, there is a somewhat more convenient approach. This is by recreating the hierarchy viewer with a different layout. Let’s do
that now. Start with creatin a brand new page.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 16/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 17/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Now select the other quick start layout on the bottom of the wizard.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 18/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
You will see the hierarchy viewer is now preconfigured somewhat different.
1. First you see an Image dropdown box. You can use this to add an image to the hierarchy viewer (duh). Select the employeeId
attribute in the dropdown box in order to create an image based on the employeedId. This will not work, however it prepares the
hierarchy viewer to use the image. We will fix that later.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 19/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Another thing that is different you see when you open any of the zoom levels. JDeveloper already added some of the attributes to
the zoom level facet. The only thing you need to do is to actually add the zoom level to the hierarchy viewer by checking the box.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 20/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
JDeveloper created a hierarchy viewer with an image. This is implemented by the following code fragment.
1 <af:image source="#{node.EmployeeId}"
2 inlineStyle="width:85px;height:120px;"
3 id="i1"/>
1 <af:image inlineStyle="width:108px;height:120px;"
2 source="/resources/images/hv/#{node.EmployeeId}.png"
3 id="i1"/>
You can use any images as long as you put them in a folder called “/resources/images/hv/” and place this under the PUBLIC-HTML
folder. Or better, as long as the source attribute knows where to find the images… On the file system it should look like this:
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 21/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Now you will see the image that corresponds to the employee. Feel free to rename the images if you don’t mind to show an image
that is not actually displaying the real ‘face’ of the employee. Run the application, zoom to 100% and see what happens
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 22/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
The hierarchy viewer has several panelcards. The transition from one panel card to another can be animated in different ways.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 23/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Play with the property and see the effect. Maybe even implement a dropdown in your application so the end user can change the
effect at runtime. This is not described in the hands on; You need a selectoneChoice (can be hardcoded), a managedbean, and set
the effect property to something like “#{mybean.myEffect} Note that in 11gR2 there is an extra value called “cube” which adds even
more animation.
The search function in a hierarchy viewer is based on the searchable attributes or columns of the data collection that is the basis of
the hierarchy viewer data model. Using a query results collection defined in data controls in Oracle ADF, JDeveloper makes this a
declarative task. You drag and drop an ExecuteWithParams operation into an existing hierarchy viewer component on the page.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 24/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 25/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 26/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
On the empDetails view object we also need to create a bindvariable. This is the one that is used to navigate to the node that was
found by the search operation. Go to empDetails and create a bindvariable.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 27/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
1. From the Data Controls panel, select the EmployeesSearch and expand the Operations node to display the ExecuteWithParams
operation. If you don’t see it, refresh the datacontrol palet. 2. Drag the ExecuteWithParams operation and drop it onto the hierarchy
viewer in the visual editor or onto the component in the Structure window. Alternatively, you can drag the parameter onto the
hierarchy viewer.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 28/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
3. In the Create Hierarchy Viewer Search dialog that displays, use the Add icon to specify the list of results to display in the Search
Results panel, and specify the following for each result:
a. Display Label: Select the values for the headers of the nodes in the hierarchy. If you select <default>, then the text for the header
is automatically retrieved from the data binding.
b. Value Binding: Select the columns in the data collection to use for nodes in the tree for the hierarchy viewer.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 29/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
c. Component to Use: Select the type of component to display in the node. The default is the ADF Output Text component. d. In the
Operation dropdown list select the hierarchy root data collection to use when a search result is selected:
d. ExecuteWithParams: Sets the values to the named bind variables passed as parameters.
4. In the Parameter Mapping table, use the dropdown list in the Results Attribute column to select the results collection attribute to
map to the parameter displayed in the Hierarchy Parameter column. In this hands on we need EmployeeId.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 30/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
Resources
The information used in this post can be found in the ADF Developerguide here.
Related Posts:
ADF DVT Hierarchy ADF DVT Speed Date: ADF DVT: Using the ADF DVT: Using the ADF 12c – The
Viewer on demand – Adding Drag & Drop Timeline component Tree Map Hierarchical Mystery
ABOUT AUTHOR
LUC BORS
Luc Bors is Expertise Lead ADF and technical specialist/architect at AMIS, Nieuwegein (The
Netherlands). He developed several Workshops and training on ADF and also is an ADF and
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 31/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
JHeadstart instructor. Luc is a member of the ADF Methodology group and publishes articles on
ADF in oracle technology related magazines, on the AMIS technology blog,
(http://technology.amis.nl/blog).
RELATED POSTS
ADF Performance Monitor: Customer Case: New Server How to use any Oracle JET
Error Diagnostics Infrastructure Halves Server Component in VBCS
Process Time
5 COMMENTS
Hi Luc Bors,
Wonderful article. Can you please come up with a sample ADF project of family tree.
Create table family_tree(
id number,
name varchar2(120),
father_id number,
mother_id number);
Both father_id and mother_id are foreign keys to id column.
It would be a great help.
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 32/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
For some reason the search facility only works in the Flash version, if you run this with Flash diabled no
search facility. Any ideas, I have logged this with Oracle Support and waiting to hear back.
Hi Luc,
This is a very useful post and thanks for sharing your experience.
I made a hierarchy viewer with the knowledge got from this post.I have two problems.
1) When user mouse over a node how to make a tooltip to pops up?
2) I have a description to be shown in each node. The relevant data column is of type VARCHAR2(45Byte) in
the db. That data is not rendered in the view correctly. It shows only 18 characters followed by some dots.
Ex:
actual data – 012345678901234567890123456789012345678901234
how it is shown in the view –
012345678901234567…
How can i show all the data. Better to go for multiple row option? Please help.
Regards!
Sameera
Hi Luc,
Have you tried to creat the Hierarchy viewer inside a JSFF page, in a dynamic region? It seems that the
search funcionality doesn´t work inside a region with jsff page. Can you help me?
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 33/34
06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog
https://technology.amis.nl/2013/03/01/adf-dvt-speed-date-meeting-the-hierarchy-viewer/ 34/34