The data tree allows you to display hierarchical data, such as
an organization chart. In an organization chart, each department would be
a node. The user can expand and collapse the nodes to view different parts
of the organization.
Note: Data Tree <odc:tree> and Chart <odc:graphDraw> have
been enabled to use Server Data.
Use the following
steps to put a data tree on a JSP page.
- In the Web perspective, open your JSP page and the Enhanced Faces
Components drawer from the palette.
- Drag the Data Tree control onto the JSP
page.
- From the Page Data view, select and drag the property that will
be the root of the tree onto the Data Tree component. This step binds the
page data to the Data Tree.
- Select the Data Tree component on the JSP page.
- Go to the Properties view to set the attributes.
- On the Tree Node List tab, select the nodes to display from the
client data and which attributes to display on each node. For
example, the department name or the manager of the department.
- Save and run the JSP page on a test server when you have finished
Example of a tree bound to page data code:
<odc:tree enableSelect="false" rootVisibleFlag="true" id="tree1" styleClass="tree" value="#{pc_Tf.root}">
<odc:treeNodeAttr attributeName="name" className="com.ibm.odcb.tutorial.businessobjects.Root"
id="treenodeattr1" referenceName="users">
</odc:treeNodeAttr>
<odc:treeNodeAttr className="com.ibm.odcb.tutorial.businessobjects.User"
id="treenodeattr2" attributeName="lastName" referenceName="portfolios">
</odc:treeNodeAttr>
<odc:treeNodeAttr className="com.ibm.odcb.tutorial.businessobjects.Portfolio"
id="treenodeattr3" attributeName="portfolioName" referenceName="positions">
</odc:treeNodeAttr>
<odc:treeNodeAttr className="com.ibm.odcb.tutorial.businessobjects.Position"
id="treenodeattr4" attributeName="quantity">
</odc:treeNodeAttr>
</odc:tree>