You can drag the Tree component from
the Palette's Basic category to the Visual Designer to create a hierarchical tree structure with nodes that can be expanded and collapsed, like the nodes in the Navigator window. When the user clicks a node, the row will be highlighted. A tree is often used as a navigation mechanism.
A tree contains Tree Node components, which act like hyperlinks. You can use a Tree Node to navigate to another page by setting its url
property. You can also use a Tree Node to submit the current page. If the the Tree Node's action
property is bound to an action event handler, selecting the node automatically submits the page. If the Tree Node's actionListener
property is bound to an action listener, opening or closing the node automatically submits the page. You set Tree Node properties in the Tree Node Component Properties window.
Initially when you drop a tree on a page, it has one root node labeled Tree and one subnode labeled Tree Node 1. You can add more nodes by dragging them to the tree and dropping them either on the root node to create top level nodes or on existing nodes to create subnodes of those nodes. You can also right-click the Tree or any Tree Node and choose Add Tree Node to add a subnode to the node.
Additionally, you can work with the component in the Navigator window, where the component and its child components are available as nodes. You can move a node from level to level easily in the Navigator window, so you might want to work there if you are rearranging nodes. You can also add and delete tree nodes in the Navigator window, just as in the Visual Designer.
The Tree component has properties that, among other things, enable you change the root node's displayed text, change the appearance of the text, specify if expanding or collapsing a node requires a trip to the server, and specify whether node selection should automatically open or close the tree. To set the Tree's properties, select the Tree component in your page and use the Tree Component Properties window.