Sunteți pe pagina 1din 34

06/11/2019 ADF DVT Speed Date : Meeting The Hierarchy Viewer - AMIS Oracle and Java Blog

TRENDING Create a Native Image Binary Executable for a Polyglot Java Applicati… Search... 

HOME AMIS VISION CAREERS @ AMIS EVENTS ABOUT CONTACT

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).

View all posts

FOLLOW US ON LINKEDIN

ADF DVT Speed Date : Meeting The Hierarchy Viewer 5

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.

Agile analytical function apex api application container cloud


Introduction : The Hierarchy Viewer service Architecture Azure binding BPEL bpm

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

Java javascript jms json kafka

kubernetes linux maven monitoring node oracle cloud


oracle xml db OSB paas performance tuning plsql

provisioning puppet push python REST saas Scrum

security soa sql Vagrant virtual box


visualization websockets XML

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

The ADF hierarchy viewer consists of several ADF components.

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

Lets start with creating a simple hierarchy viewer.

Python application running on GraalVM and P…


Hierarchy Viewer: The basics
technology.amis.nl GraalVM is among other things a
A hierarchy viewer component can be used to visually display hierarchical data. Hierarchical data contains master-detail polyglot language runtime. It can run applications
relationships within the data. For example, you could create a hierarchy viewer component that renders an organization chart from a paper.li
data collection that contains information about the relationships between employees in an organization. Let’s do that. Create a new
ADF Enterprise application in JDeveloper. Nov 4, 2019

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

Switch off Screen Lock on Ubuntu Bionic Des…


I am running an Ubuntu VM on Virtual Box. A guest
running inside a host system. I am getting quite
technology.amis.nl

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

Oct 31, 2019

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

New Article : Python application running on GraalVM and


Polyglotting with JavaScript, R, Ruby and Java
ift.tt/2poEPhK by Lucas Jellema

Python application running on GraalVM and P…


GraalVM is among other things a polyglot language
runtime. It can run applications written in many
technology.amis.nl

Oct 30, 2019

Embed View on Twitter

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

Finish the wizard.

Connecting the employees

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

Accept all the defaults and click finish.

Defining the root node

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

Now the Business Components part is finished.

Creating the “visible” part.


After finishing the business components it is now time to create the visible part of the hierarchy viewer application. For this you need
to create a new page to hold the hierarchy viewer component.

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.

Note that JDeveloper added several attributes to display by default.

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

Click OK to finish the wizard.

Run the application and expand some nodes in the viewer

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

Supporting different zoom levels


As mentioned erarlier, the hierarchy viewer supports different zoom levels. These zoom levels are implemented by facets.

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

Drag and drop the same (EmpDetails) collection on to the page.

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.

Check the boxes for all the ‘lower’zoom levels.

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

Finish the wizard by clicking OK.

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"/>

Replace that with

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

Changing panelcard transition effects

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.

Adding search functionallity

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.

Preparing Business Components

1. Create a view object that performs the search.

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

Finish the wizard.

Now expose the viewObject in the application module.

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

Adjust the where clause in the empDetails to take on the bindvariable.

Create a databound search with a hierarchy viewer:

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.

Now restart the page and see the search at work.

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

ADF DVT hierarchy viewer visualization

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

APRIL 3, 2019 0 MARCH 21, 2019 0 FEBRUARY 10, 2019 0

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

ASHISH MAN BAISYET on OCTOBER 9, 2015 05:45

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

DARRAGH on OCTOBER 13, 2013 13:29

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.

SAMEERA SAMARASINGHE on SEPTEMBER 27, 2013 04:52

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

PAULO on JULY 2, 2013 15:50

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?

SRIDHARYERRAM on MARCH 2, 2013 18:10

wonderful article thanks alot for your post Kudos…!!!

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

S-ar putea să vă placă și