Tree Table Component with declarative presentation in ADF, Access childs without custom selection listener

Hello all,
this is my second post on af:treeTable, first post was about creating and overriding tree table selection listener to get node value in managed bean, see
Tree Table Component in Oracle ADF(Hierarchical Representation)

In this post i am going to explain how to

• use multiple detail column in treeTable
• design better UI
• manage child rows
• use link,image,checkbox in treeTable conditionally

so i assume that you all know about creating treeTable, i am using default HR Schema (Employees ,Departments table) to master detail relation in tree and i have to show detail of Employee under Department node

• I have created a treeTable using following details of Employees VO

• Now on running my page it is looking like this, very odd and complex view

 

        xml source-

  <af:treeTable value="#{bindings.Departments1.treeModel}" var="node"
                              selectionListener="#{bindings.Departments1.treeModel.makeCurrent}" rowSelection="single"
                              id="tt1">
                    <f:facet name="nodeStamp">
                        <af:column id="c1" width="500">
                            <af:outputText value="#{node}" id="ot1"/>
                        </af:column>
                    </f:facet>
                    <f:facet name="pathStamp">
                        <af:outputText value="#{node}" id="ot2"/>
                    </f:facet>
                </af:treeTable>

• It shows that all details of employees are clubbed in one column that is nodestamp, now to show details in different columns i have added 5 columns in treeTable, and seperate detail in each column as Email, FirstName,LastName etc
  To add column right click on treeTable and insert-

 In column drop an input text and set its value taking node reference

•  Now run page and see, there is now 5 column with different details but still that clubbed value is shown.

• Now to remove that clubbed detail, go to nodestamp facet of treeTable and see value of output text inside column, it is set to #{node} ,due to this all values available in node are clubbed and displayed in page, now we have to set its value to any of Master table's (Departments) attribute

•  Now run page , only department name is displayed on header, and corresponding value for detail is blank

•  We are done with this part, now try to make its UI somewhat better using some styles, so i have used different background color for header and detail part of treeTable conditionally

• To do this i have set inline style property conditionally , because i have to change color of same column according to master and detail data, see condition



#{node.DepartmentName!=null ? 'background-color:darkgreen' :  'background-color:rgb(239,255,213);'  }



• Now see how to get selected child row without over-riding treeTable's selection listener, to do this i have added a image link in treeTable and created a action listener on that to show current selected detail row
• Bind tree table to managed bean and create two methods to get selected RowIterator and node Key



    /**Tree Table Binding in managed bean*/
    private RichTreeTable treeTabBind;

    public void setTreeTabBind(RichTreeTable treeTabBind) {
        this.treeTabBind = treeTabBind;
    }

    public RichTreeTable getTreeTabBind() {
        return treeTabBind;
    }

    /**Method to get Iterator*/
    public RowIterator getSelectedNodeIterator() {
        if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) {
            for (Object rKey : getTreeTabBind().getSelectedRowKeys()) {
                getTreeTabBind().setRowKey(rKey);
                return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowIterator();
            }
        }
        return null;
    }

    /**Method to get Node Key*/
    public Key getSelectedNodeKey() {
        if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) {
            for (Object rKey : getTreeTabBind().getSelectedRowKeys()) {
                getTreeTabBind().setRowKey(rKey);
                return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowKey();
            }
        }
        return null;
    }



• Now to get currently selected node and row pass Iterator and Node key in this method- see



    public void showCurRowDetail(RowIterator ri, Key selectedNodeKey) {
        Row[] rows = ri.findByKey(selectedNodeKey, 1);

        FacesMessage msg = new FacesMessage(rows[0].getAttribute("FirstName") + "'s data available in this row");
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }



• Now Run application and click on link to see selected row -

• You can use checkboxes in treeTable same as link, for CRUD operation in treeTable see Jobinesh blog- http://www.jobinesh.com/2010/05/crud-operations-on-tree-table.html
• Download Sample ADF Application