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 -