In this example we will work on the tree component of ADF faces. We use a hierarchal tree which is showing department as a root node and all the employees under that department as leaf nodes. Along with that we have an employee form which will show the employee details when user will click on the particular employee name in the tree.

1) Create a view object with name “DeptTreeViewObj” with following query:-SELECT department_id,department_name,manager_id,location_id FROM departments

2) Create another view object with name “EmpTreeViewObj” with following query:-SELECT employee_id , first_name , last_name,email,phone_number,job_id,salary,commission_pct ,manager_id,department_idFROM employees

3) Create a view link “DeptEmpViewLink” as:-

4) Add the above created view object and the view link objects in the AM.

5) Create a JSPX page name Tree.jspx.6) Add the panelHorizontal component from the Component palette inside the page.7) Drag and drop the DeptTreeViewObj1 from the Data Control palette on the

panelHorizonatl component.

And select the TreeADF tree from the context menu.

8) Tree Binding editor will appear where select the “DeptTreeViewObj” from the “Data Collection Definition panel”. Select “DepartmentId” and “DepartmentName” from the DisplayAttribute and select “EmpTreeViewObj” from the “Branch Accessor”.

And click on the Add New Rule button. This rule will display the Department as the root node.

Here the Data Collection Definition: section specifies the view object which will populate the tree nodes. Display Attribute section specifies the attributes to be displayed in the tree node. And Branch Rule Accessor section specifies the view link which is related to the view object selected in the Data Collection Definition section.

9) Again select the “EmpTreeVieObj” from the “Data Collection Defination” section , select “FirstName” from the “Display Attribute” section. And click on the “Add New Rule” button. And click Ok .

This rule will display the employee’s first name as the leaf node.

10) Run your page to see the hierarchical tree.

11) Now we will bind the tree with the bean. Create a java class under your viewController with name “TreeManagedBean” and copy paste following code in it. import javax.faces.context.FacesContext;import javax.faces.el.ValueBinding;import javax.faces.event.ActionEvent;

import oracle.adf.model.binding.DCIteratorBinding;import oracle.adf.share.ADFContext;import oracle.adf.view.faces.component.core.data.CoreTree;import oracle.adf.view.faces.component.core.layout.CorePanelForm;import oracle.adf.view.faces.component.core.nav.CoreCommandLink;import oracle.adf.view.faces.context.AdfFacesContext;import oracle.adf.view.faces.model.PathSet;

import oracle.adf.view.faces.model.TreeModel;

import oracle.adfinternal.view.faces.model.binding.FacesCtrlHierBinding;

import oracle.jbo.uicli.binding.JUCtrlHierNodeBinding;

public class TreeManagedBean { private CoreTree treeHandler; private CorePanelForm formHandler;

public TreeManagedBean() { }

public void nodeSelected(ActionEvent actionEvent) { String rowKeyStr = getTreeHandler().getRowKey().toString(); System.out.println("rowKeyStr="+rowKeyStr); String[] path = rowKeyStr.split(", "); if(getTreeHandler().getDepth()==1) { int deptIndx = new Integer(path[0].substring(1)).intValue(); int empIndx = new Integer(path[1].substring(0,path[1].indexOf("]"))).intValue(); System.out.println("deptIndx="+deptIndx); System.out.println("empIndx="+empIndx); FacesContext fctx = FacesContext.getCurrentInstance(); ValueBinding vb = fctx.getApplication().createValueBinding("#{bindings.DeptTreeViewObj1Iterator}"); DCIteratorBinding dciterLocationsView = (DCIteratorBinding)vb.getValue(fctx); dciterLocationsView.getRowSetIterator().setCurrentRow(dciterLocationsView.getRowAtRangeIndex(deptIndx)); vb = fctx.getApplication().createValueBinding("#{bindings.EmpTreeViewObj2Iterator}"); DCIteratorBinding dciterEmployeesView = (DCIteratorBinding)vb.getValue(fctx); int empRangeSize = dciterEmployeesView.getRangeSize(); System.out.println("empRangeSize="+empRangeSize); int empRangeIndx = 0; int empRowIndx = 0; if (empIndx + 1 > empRangeSize) { empRangeIndx = empIndx/ empRangeSize; empRowIndx = empIndx % empRangeSize; dciterEmployeesView.getRowSetIterator().setRangeStart(dciterEmployeesView.getRangeSize()*empRangeIndx); empIndx = empRowIndx; } dciterEmployeesView.getRowSetIterator().setCurrentRow(dciterEmployeesView.getRowAtRangeIndex(empIndx)); AdfFacesContext.getCurrentInstance().addPartialTarget(formHandler); } }

public void setTreeHandler(CoreTree treeHandler) { this.treeHandler = treeHandler; }

public CoreTree getTreeHandler() {

return treeHandler; }

public void setFormHandler(CorePanelForm formHandler) { this.formHandler = formHandler; }

public CorePanelForm getFormHandler() { return formHandler; }}

12) Now bind your tree component to above bean. Select the af:tree component from the structure window and select “Binding” property from the Property inspector and select “Managed Bean” as “TreeManagedBean” and property to “treeHandler”. And click ok.

This step will bind your tree component to the bean created in step 11.

13) Now select the af:outputtext from the structure window and set the value property of it to “#{node.DepartmentName}”.

14) Set the Rendered property of the af:outputtext to #{TreeManagedBean.treeHandler.depth ==0}

to set this property click on the “Bind Data” icon in the property inspector against the Rendered property of the af:outputtext item.

15) Add a command link under the f:facet- nodeStamp.16) Set the following properties of the newly added command link

text #{node.FirstName}rendered #{TreeManagedBean.treeHandler.depth==1}actionListener #{TreeManagedBean.nodeSelected}partialSubmit trueId NodeLink

17) Select the Employee view instance under the “DeptTreeViewObj1” from the Data control palette and then select the FormADF tree from the context menu.

18) Set the following properties of the af:PanelForm:-binding #{TreeManagedBean.formHandler}partialTriggers NodeLink

19) Run your page now.