You are here

Home » Blogs » Yannick's blog

Creating your own TreeModel in ADF 11g

published by Yannick on 22 February, 2011 - 08:20

Building your own tree in ADF does not seem that easy at first sight but in fact it is not that hard if you know what to do. On the forum at OTN you often find questions about building your own model.
In this post you will find the steps needed to build your own model. In the example i just use some static data but you can rewrite it to use whatever you want.

Attached to this post you can find the TreeExample.zip which contains the example application with a very simple tree. We will build a tree that has 2 nodes in the root and the first node has 2 children.

Our TreeModel contains objects of the type TreeItem. TreeItem is not a build in class. I call it TreeItem but you can name it whatever you want. It is a regular bean with getters and setters. In order to build a tree, the class should have a method that returns its children.
This is the TreeItem class we will be using:

  1. public class TreeItem {
  2.     private String text,action;
  3.     private List<TreeItem> children;
  4.    
  5.     public TreeItem() {
  6.         super();
  7.     }
  8.    
  9.     public TreeItem(String text,String action){
  10.       super();
  11.       this.text = text;
  12.       this.action = action;
  13.     }
  14.  
  15.     public void setText(String text) {
  16.         this.text = text;
  17.     }
  18.  
  19.     public String getText() {
  20.         return text;
  21.     }
  22.  
  23.     public void setAction(String action) {
  24.         this.action = action;
  25.     }
  26.  
  27.     public String getAction() {
  28.         return action;
  29.     }
  30.  
  31.     public void setChildren(List<TreeItem> children) {
  32.         this.children = children;
  33.     }
  34.  
  35.     public List<TreeItem> getChildren() {
  36.         return children;
  37.     }
  38. }

As you can see, the TreeItem has 3 properties:

  • text: containing the text that we will be using to show the node in the tree
  • action: this is the action that will be set to the action property of the commandLink in the tree. This way we can use the tree for navigation.
  • children: this contains a list of the children of the current node. This is vital for building a tree.

You are free to add more properties. Every property you add to the TreeItem you can use it in the tree itself.

Next we need to create our managed bean. This will contain the TreeModel itself.
In fact we just create the rootNode and use a default TreeModel from ADF. This is the ChildPropertyTreeModel.

We will build the tree in the constructor of the bean:

  1.     public TreeExample() {
  2.         root = new ArrayList<TreeItem>();
  3.         TreeItem node1 = new TreeItem("Node1","node1");
  4.         TreeItem node2 = new TreeItem("Node2","node2");
  5.         root.add(node1);
  6.         root.add(node2);
  7.        
  8.         ArrayList<TreeItem> node1Children = new ArrayList<TreeItem>();
  9.         TreeItem node1Child1 = new TreeItem("Child 1","child1");
  10.         TreeItem node1Child2 = new TreeItem("Child 2","child2");
  11.       node1Children.add(node1Child1);
  12.       node1Children.add(node1Child2);
  13.       node1.setChildren(node1Children);
  14.      
  15.       setListInstance(root);
  16.     }
  17.  
  18.   public void setListInstance(List instance) {
  19.     this.instance = instance;
  20.     model = null;
  21.   }

The af:tree component requires a TreeModel as value so we need to create such a property as well:

  1.   public TreeModel getModel() {
  2.     if(model == null)
  3.         model = new ChildPropertyTreeModel(instance,"children");
  4.     return model;
  5.   }

In this methode we will create the actual TreeModel based upon the root we created in the constructor. As you can see we also need to specify the name of the method that will return the children. By specifying "children" as a second parameter of the ChildPropertyTreeModel constructor, we tell the framework to call getChildren() in order to retreive the list of children.

When this is done, we need to register the bean to the faces-config.xml:

  1. <managed-bean>
  2.     <managed-bean-name>TreeExample</managed-bean-name>
  3.     <managed-bean-class>view.beans.TreeExample</managed-bean-class>
  4.     <managed-bean-scope>request</managed-bean-scope>
  5.   </managed-bean>

As a final step we need to add the tree to the page:

  1. <af:tree value="#{TreeExample.model}" var="node">
  2.    <f:facet name="nodeStamp">
  3.       <af:commandLink text="#{node.text}" action="#{node.action}"/>
  4.   </f:facet>
  5. </af:tree>

When you run the application, the tree should be there with some nodes.

Category: 
ADF
Attachment: 
TreeExample.zip
  • Share/Save
  • Yannick's blog

Comments

Submitted by senthilkumar (not verified) on 15 March, 2011 - 12:19.

Your article is good, if possible can you provide step by step with screen shot, it will help me.

Submitted by subu (not verified) on 19 April, 2011 - 13:50.

above all of the codings are working.
but while i clicking the child it has to go to the particular .jspx file

Submitted by Raj Purohit (not verified) on 30 December, 2011 - 14:39.

Very nice illustrated example to create a tree with static value..Nicely written...
I have followed your approach..now I want to add images to the nodes.
For that I have added a property String icon in the java class and I am passing the location of image in the string.However I am not getting the image.Please give suggestions ...

Submitted by julie (not verified) on 23 February, 2012 - 18:21.

Hello. I have the same question as the previous post. How do you suggest adding an icon to the nodes? I added a new text property for the icon path, but no icon image is displaying. An example would be great. Thanks!

Submitted by 網站設計 (not verified) on 1 May, 2012 - 05:33.

nice blog. That's exactly what I was looking for.

Submitted by Chakradhar (not verified) on 4 May, 2012 - 08:00.

Your Article is really good , can you please let me know how to create a ADF tree component pro grammatically using MAP/TreeMap Collection.Can you please let me know the steps how to do that / if possible attach the code snippet in this blog.Hope to hear from you soon regarding this.

Submitted by PankajB (not verified) on 4 May, 2012 - 13:34.

This is very helpful post. Can you please suggest what provision should be made to highlight the selected tree node.

Submitted by manoj (not verified) on 4 September, 2012 - 14:43.

Hi
This is very good example. But my requirement is different. I want set a child at run time. please help me.

Submitted by Priyesh (not verified) on 14 September, 2012 - 10:02.

Simply superb !!!

Submitted by amit (not verified) on 25 September, 2012 - 16:27.

Wonderful and very useful article...

Submitted by Rama (not verified) on 6 October, 2012 - 02:26.

I tried putting trinidad-api-1.2.9.jar but JDeveloper is throwing the errors. Can you clarify on which trinidad jar I should include in the classpath?

Submitted by Yannick on 6 October, 2012 - 12:31.

The tree is an ADF component. Not an older trinidad one. You should create an ADF application.

Submitted by Henrique (not verified) on 25 October, 2012 - 18:46.

Hello...
I used your code and implemented my own. Beside my rules, i need the action do link to a Task-Flow method, called celula. For that i made:
TreeItem node1Child1 = new TreeItem("Child 1","celula");

For when i click on my Child 1, the action goes for adf-config.xml. At adf-config.xml i have all my other stuff's and actions working properly.

I Dont know why the action at Child is not working, could you share knowledge?
Thanks

Submitted by Jennifer (not verified) on 30 October, 2012 - 21:08.

Could you help with the changes needed to build this but for a Treetable. In advance many thanks.

I had been trying with a lot of examples but they are just not as clear as yours.

Add new comment

More information about text formats

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

Theme by Danetsoft and Danang Probo Sayekti inspired by Maksimer