Working With ADF tree-changing icon-expand when click and others

in this post , I will answer some common questions about ADF tree.
1- how to Create a tree  from one self joined table

Answer:
Step 1 : Model layer 
In this scenario , the tree is populated from a view object that query the database table.
there are two VO. they are query the same table. The table has self join relation ship
this is the Root nodes"SysObjetcsRootRo". retrieves all rows with parent key null.


the second view query the same table but  it query all rows."SysObjectsRo"


then you have to create two view links. the first one is between the  SysObjetcsRootRo and SysObjectsRo


The second View link is between the SysObjectsRo and itself
 

Setp 2 : ViewController layer
Drag and drop the  SysObjetcsRootRo from the data control pallet to the page as tree


2- How Can I change the node icons

Answer:
there are many ways.you can render the node stamp component as a link instead of output text and set an icon for it. or you can edit the Skin file.But I something elase.

First, I removed the default tree node icon using this entry in the skin file

af|tree::collapsed-icon-style
{
  background-image: none;
}
af|tree::expanded-icon-style
{
  background-image: none;
}

Second: I added an image item nect to the out put tet as follow

<af:tree value="#{bindings.SysObjetcsRootRo.treeModel}" var="node"
                                 selectionListener="#{pmsReportTree.onTreeSelection}" rowSelection="single" id="t1"
                                 initiallyExpanded="true" varStatus="var" binding="#{pmsReportTree.reporTree}"
                                 clientComponent="true" selectionEventDelay="enabled">
                            <f:facet name="nodeStamp">
                                                                <af:group id="pgl7">
                                            <af:image id="i2" source="/images/#{node.IconName}.png" inlineStyle="position: absolute; margin-left:-17px;
                           border: 2px solid white; width: 15px; height: 10px;"/>
                                            <af:outputText value="#{var.index+1} #{node.NameEn}" id="ot1"/>
                                        </af:group>
                                    </f:facet>
  </af:tree>

in the  line source="/images/#{node.IconName}.png", the IconName attribute is a column in the table that stores the icon name. the icon is located in the public html / images folder



 3- How can I expand the tree when mouse double click or when moue click the node?

Answer:
using Java script
1- in your jsf page or your page fragment that contains the tree add this js code inside af:resource


this is the js code
 function expandNode(event) {
                
                      var _tree = event.getSource();
                      rwKeySet = event.getAddedSet();
                      var firstRowKey;
                     
                      for (rowKey in rwKeySet) {
                          firstRowKey = rowKey;
                          // we are interested in the first hit,
                          //so break out here
                        
                          break;
                         
                      }
                      if (_tree.isPathExpanded(firstRowKey)) {
                      
                          _tree.setDisclosedRowKey(firstRowKey, false);
                      }
                      else {
                     
                          _tree.setDisclosedRowKey(firstRowKey, true);
                      }
                  }

2- add clientListener to the tree

  <af:clientListener method="expandNode" type="selection"/>
run the page.