JSF Component Tree as a Real DHTML Tree

JSF components are managed using a conceptual tree data structure which is one of the core elements of the framework. Both Sun RI and myFaces provide utility methods to print the tree using a printstream, also I’ve observed people creating their own algorithms to output the expanded tree to a printstream generally System.out.

Me and my colleague are working on a library that will provide traceability features for the jsf applications and on the way I’ve thought it would be cool to view and traverse the component tree as a DHTML tree in the page containing the components. Well, the tree is ready now, it contains  several types of informations like id, rendered and etc. If the component implements ValueHolder, value is also displayed in the tree, there may be possible additions to these like component type and also I am planning to remove the rendered attribute since it does not vary much. So enough of text, here are some screenshots,

Free Image Hosting at www.ImageShack.us Free Image Hosting at www.ImageShack.us Free Image Hosting at www.ImageShack.us
I’ve created a custom component to represent this tree on a page, currently it is used as <ft:trace showTree=”true”/> I’ve used one of the tree scripts from dynamicdrive and change some parts. Using a recursive tree traversing algorithm, the custom component populates the dhtml tree. Components with children are represented bold and when they are clicked each child is displayed as a leaf, on the other hand if there is no child, the leaf is not clickable.

4 Responses to JSF Component Tree as a Real DHTML Tree

  1. Vofeka says:

    Good stuff dude. This component seems very handy… I might use it

  2. neil says:

    Is this available? I am having trouble debugging my commandButton not invoking the action method in my managed bean. The components are created dynamically and stored in an array list. When I click on the submit button, the page returns immediately and it never goes to the Apply Request phase. I’d like to use the showTree option to look at the custom components that the tree holds. Thanks.

  3. InNeed says:

    This sounds exactly like something I need! Where can I find id?

  4. Cagatay says:

    It’s a feature of the facestrace. See facestrace.sourceforge.net

%d bloggers like this: