X

Shay Shmeltzer's Oracle Development Tools Tips

  • July 9, 2009

Exploring the New ADF Faces Hierarchy Viewer

Shay Shmeltzer
Director of Product Management - Oracle

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.

Join the discussion

Comments ( 29 )
  • August Saturday, July 11, 2009
    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.
  • shay Monday, July 13, 2009
    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.
  • Akhil Sunday, July 19, 2009
    Looks really nice!
    Does this mean that ADF components will be based on flash going forward??
  • shay Monday, July 20, 2009
    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.
  • sk Thursday, January 7, 2010
    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
  • Steve M Wednesday, March 3, 2010
    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?
  • shay.shmeltzer Wednesday, March 3, 2010
    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.
  • Vijay Friday, April 30, 2010
    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
  • shay.shmeltzer Friday, April 30, 2010
    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.
  • Abhijeet Friday, July 2, 2010
    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
  • shay.shmeltzer Friday, July 2, 2010
    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
  • Abhijeet Tuesday, July 6, 2010
    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
  • shay.shmeltzer Tuesday, July 6, 2010
    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
  • Abhijet Mohanty Wednesday, July 7, 2010
    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
  • shay.shmeltzer Wednesday, July 7, 2010
    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?
  • Abhijeet Mohanty Thursday, July 8, 2010
    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
  • Abhijeet Monday, November 29, 2010
    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
  • shay.shmeltzer Monday, November 29, 2010
    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.
  • Miguel ANgel Thursday, January 6, 2011
    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.
  • shay.shmeltzer Thursday, January 6, 2011
    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
  • Daniel Friday, July 15, 2011

    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


  • Shay Monday, July 18, 2011

    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.


  • Daniel Monday, July 18, 2011

    Many thanks Shay, that solved my problems.


  • guest Friday, August 12, 2011

    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.


  • Shay Friday, August 12, 2011

    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.


  • guest Monday, August 15, 2011

    Thank you and much good


  • darragh duffy Monday, September 23, 2013

    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.


  • Shay Monday, September 23, 2013

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


  • Darragh Tuesday, September 24, 2013

    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.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.