Hierarchical ADFTree with JDeveloper 11g

There are different manners to display hierarchical data. One of the most intuitive ways is using a tree structure like a file browser. This enables the ability of simple navigation without losing the context. The brand new JDeveloper 11g offers a very impressive set of Rich Internet Components. One of these components is the ADFTree component, for presenting this kind of information.

For a little demo we use the Employees table standard shipped with the Oracle Database.

Starting point is a new Fusion Web Application with a Model and ViewController project. Create for the HR.EMPLOYEES table the default EntityObject (Employee) and ViewObject (EmployeeView). The association and the viewlink for the pig’s ear is automatically made.

Inspecting the data form SQL with an hierarchical query:

select rpad(' ', level*3)||emp.first_name||' '||emp.last_name
from employees emp
connect by emp.manager_id = prior emp.employee_id
start with emp.manager_id is null

The start with clause filters only the root-nodes shown on top of the tree, in this case only “Steven King”. When presenting this data in an ADFTree we also have to filter the root-nodes. One way to do is to add a new ViewObject (RootEmployeeview) for selecting only the root-nodes. Use “Employee.manager is null” for the where clause. Also we have to define the relation between the manager and themanaged employees. By defining the accessors for the link pay attention to the Accessor name for the destination. This accessor name must have a different name than in de default created link for the pig’s ear. Don’t forget to add the new made ViewObject to the application module. The data model must look like:

This is all for the model. In the View project add a Panel Collection on the page. This panel collection adds some extra functionality as collapsing the tree. Now it’s time to drag the RootEmployeeView from the Data controls on the Panel Collection. Choose ADF Tree in the populated poplist and define the bindings for the Tree.

The result is a full functional Tree with all the employees presented.

For adding extra functionality you can add a select listener to the Tree component. To do this select the Tree on the JSF page and add a Selection listener which calls a backing bean method. Extract the selected rowkeys from the event and retrieve the data.

  public void TreeNodeSelected(SelectionEvent selectionEvent) {
    RowKeySet rks = selectionEvent.getAddedSet();
    if (rks != null) {
      System.out.println("Selected Employees:");
      // multiple values in case of rowSelection="multiple"
      RichTree fowTree = (RichTree)selectionEvent.getComponent();
      Iterator iter = rks.iterator();
      while (iter.hasNext()) {
        fowTree.setRowKey(iter.next());
        FacesCtrlHierNodeBinding rowData = (FacesCtrlHierNodeBinding)fowTree.getRowData();
        System.out.println(" - " + rowData.getAttribute("FirstName") + rowData.getAttribute("LastName"));
      }
    }
  }