Exploring the New ADF Faces Hierarchy Viewer

One of the new JSF components introduced in Oracle JDeveloper 11g 11.1.1.1 is the Hierarchy Viewer (or HV for short).
Visually this is definitely one of the more impressive components in the ADF Faces set of components. It uses flash to render hierarchical relationships in a nice layout.

I played around with it for various demos I developed (including the 11g launch demo). While it is very easy to get started with it there are some tips to get exactly the look you want. I gathered a few tips on how to quickly build and customize your HV in this the following video tutorial

The basic thing to understand is that the component itself is a container component and you can play with the data you show in it by using the normal layout and common components available with ADF Faces. Also note that the default layout uses a lot of inline styles for fonts and fields - and you might want to change those as well.

Here is a basic 10 minute video tutorial on using the HV :
(Note - the video got cut while transferring it to YouTube - the part at the end would have shown you that you can access the cards through the structure pane and edit their content to show whatever you want, you can also add and remove cards).

More information on this component is in the ADF Faces hosted demo (see the features tab), the source code of the demo and the documentation.

Comments:

Good day. Thanks for your blog - many necessary info. Your video presentation - the best. In your previous post you wrote about Tomcat integration in JDeveloper. So i suppose that may be you know how to deploy web service (generated in JDev) to tomcat 6.x??? may be it easy for you to tell me the steps i should to do? I've read a lot - your blog, Dana's blog, tomcat documentation but still i'm sad :( I try to use WAR file for deploying, but can't start service in tomcat/manager. Thanks beforehand.

Posted by August on July 10, 2009 at 07:57 PM PDT #

August, This would better be served by posting on the OTN discussion forum. Did you install a specific Web service implementation on Tomcat? AFAIK it doesn't come with built in support for JAX-WS.

Posted by shay on July 13, 2009 at 03:15 AM PDT #

Looks really nice! Does this mean that ADF components will be based on flash going forward??

Posted by Akhil on July 19, 2009 at 03:17 PM PDT #

Akhil, One nice aspect about JSF is that you can implement the rendering of a component with various technologies. We choose the technology that renders a component based on the needs. In this case, and also in dynamic graphs Flash provided the capability we needed - but I don't think we are going to use Flash for everything. Flash has a cost in terms of memory and performance compared to Ajax - so most of our components right now are using Ajax. That said JSF architecture gives us the flexibility to adopt other technologies as they emerge for the rendering part.

Posted by shay on July 20, 2009 at 12:52 AM PDT #

Is there a way to print ADF Hierarchy Viewer rendered flash? When I use the print meny from the context, it doesn't pull the entire hierarchy. It just displays only part of the tree and prints in only one page

Posted by sk on January 07, 2010 at 01:04 AM PST #

Does anyone know if you can edit the data directly in the viewer, or is it just a viewer? In other words, if someone has a new boss or gets moved to a different group can you drag and drop them into that position and have everything update?

Posted by Steve M on March 02, 2010 at 10:57 PM PST #

The Hierarchy Viewer as the name suggest is a viewer - you can't use the visual aspect to do updates. But you could have updateable fields in there where people can insert/update values.

Posted by shay.shmeltzer on March 03, 2010 at 12:49 AM PST #

Shay, The source code link seems to be broken. Can i get hold of the source code. Also i am looking at an update operation as well, where we could edit the designation or corresponding attributes to the person. Can you throw some light on the same. Regards Vijay

Posted by Vijay on April 29, 2010 at 08:11 PM PDT #

Vijay - The demo was merged into the general ADF Faces demo - I updated the links at the end of the post to point to the new location.

Posted by shay.shmeltzer on April 30, 2010 at 07:04 AM PDT #

Hey Shay, nice and helpful demo. Me cuurently working in Jdeveloper and I have been trying to implement this particular component in my appliction but without using the DATA CONTROL MODELS. Can it be done in any way? I mean to say, for populating the root/child nodes can I use any explicit java class which would be returning my required set of LOV(list of values) object? Please suggest on this. I am stuck up for last couple of days...... Appreciate ur help in advance, Abhijeet

Posted by Abhijeet on July 01, 2010 at 11:17 PM PDT #

Abhijeet , Yes the HV can be based on a simple JSF managed bean. See the code sample that comes as part of the ADF Faces components demo: http://www.oracle.com/technology/products/adf/adffaces/11/doc/demo/adf_faces_rc_demo.html

Posted by shay.shmeltzer on July 02, 2010 at 12:01 AM PDT #

Thanks Shay for the reply. I did download the particular demo but the sad thing is I'm not yet able to make out any information about the hierarchy viewer component I was/am looking for. Where can I find the description about the node bindings to the JSF managed bean. What I can see are only designs,skinning,demos etc etc. Please help! Regards, Abhijeet

Posted by Abhijeet on July 05, 2010 at 07:20 PM PDT #

Once you open the WAR in JDeveloper you'll see the source for the pages as well as the backing beans. You can ctrl+click your way from the JSPX source to the specific bean that is used for the HV in each of the demo pages. There you'll see the implementation details. The HV demos are under the "Features Demos" section -> Data Visualization Tools

Posted by shay.shmeltzer on July 06, 2010 at 01:35 AM PDT #

Hey Shay, Thanks!!! Yeah, I did it already. Am able to make out the exact class/method calls right fron the jspx. The data showing up in the indicidual nodes are parsed from a hardcoded xml file itself. So could you please suggest if in my case I 'have to' first populate such a xml file with data from the database and then parse the same and show it in HV??? Is there any other way round where we can omit the involvement of xml files and all? Please reply! Regards, Abhijeet

Posted by Abhijet Mohanty on July 06, 2010 at 09:07 PM PDT #

All you need to do is replace the methods that read from XML to read from your DB instead - it's all about creating the right data model for the HV - the actual source of data doesn't matter. That being said - if your data is in a database, why not just use ADF BC or JPA and the native ADF binding to save you all the coding?

Posted by shay.shmeltzer on July 07, 2010 at 04:02 AM PDT #

Yes Shay, I have been trying to do the same. Looks very tedious to me though. :P And using BC of ADF.. I can't, because thats not in the development requirements. :) SAD! Neways Shay, handfull of thanks to u for ur earnest reply and being so patient. Thanking again!! Abhijeet

Posted by Abhijeet Mohanty on July 08, 2010 at 03:08 PM PDT #

Hi Shay, I'm back again! :P Well almost everthing worked fine with the hierarchy viewer thing... Got it as required. Thnx 2 u again. But now I'm stuck up with a new problem.. Could you please suggest if we can catch the mouse click event on the children expansion icon [ "+" sign appearing right below the node] ? This would help me to process my business logic in the backing bean and restructure the hierarchy according to the result I obtain on each mouse click. Hope you understand the problem. Thanks In Advance, Abhijeet

Posted by Abhijeet on November 28, 2010 at 04:15 PM PST #

I don't think you can overwrite the HV expand/collapse operation. You can have a command component in the card of the HV and write logic for that action.

Posted by shay.shmeltzer on November 29, 2010 at 05:45 AM PST #

Hi Shay, The source code link seems to be broken. Can i get hold of the source code. I canĀ“t find the new location of it. Thanks.

Posted by Miguel ANgel on January 06, 2011 at 01:27 AM PST #

Hi Miguel, Thanks for noting the broken link - I fixed it to point to the new location: http://www.oracle.com/technetwork/testcontent/adf-faces-rc-demo-083799.html

Posted by shay.shmeltzer on January 06, 2011 at 01:33 AM PST #

Shay, is it possible to find a specific node through a query and go directly to it by clicking on a search result?
Seems simple, but I can't find any flexibility in it for this function. Got any tips? Thanks in advance,

Daniel

Posted by Daniel on July 14, 2011 at 11:37 PM PDT #

Daniel,
Check out the new search option in the Hierarchy Viewer - part of the ADF Faces Components demo:
http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/hv/hvSearch.jspx
Get the source for the demos from the ADF Faces page on OTN.

Posted by Shay on July 18, 2011 at 02:48 AM PDT #

Many thanks Shay, that solved my problems.

Posted by Daniel on July 18, 2011 at 05:35 AM PDT #

Hello.

Thank you for your example to work with HierarchyViewer. I need to built the hierarchy of university departments. When I scroll through the list to the right subdivisions hierarhivever hangs. But it works in Tree. Please tell me what's the problem.

Posted by guest on August 11, 2011 at 05:00 PM PDT #

guest - it is hard to say what specifically is wrong in your scenario - have a look at the WebLogic log window to see if you can spot any exceptions, turn on ADF BC logging and see if there are any specific activity going on there.

Posted by Shay on August 12, 2011 at 02:27 AM PDT #

Thank you and much good

Posted by guest on August 14, 2011 at 06:06 PM PDT #

Hi Shay, maybe something very small, but when I drag the EmployeeView Data control onto my JSF page I only see following options (using 11.1.2.4)

Carousel
From
Multiple Selection
Navigation
Sinlge Selection
Table
Tree

No option for Hierarchy Viewer is this
the option is hidden somewhere else in the newer version or
have not followed the example correctly

thanks for your time, much appreciated.

Posted by darragh duffy on September 23, 2013 at 05:29 AM PDT #

Darragh , this usually mean that either your project JSP libraries doesn't include the ADF Data Visualization components, or it might be that your JSF header is missing the reference to these libraries.
So add the library in your project properties, and then create a new JSF page - this should enable the HV (as well as graphs and more).

Posted by Shay on September 23, 2013 at 10:21 AM PDT #

thanks Shay for the tip. I ended up re-installing 11.x.4 and that seemed to work. I had not checked the project libs, I had assumed they should have already been there. But never thought of checking them, kinda new to JDeveloper I am only interested in the Hierarchy Viewer, using EXTJS & Sencha JS libs for all other software.

Posted by Darragh on September 24, 2013 at 12:45 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
About

me
I'm a Director of Product Management for the Oracle Java Development Tools.
Follow me:
Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today