About Tree-Structured Data

Some data is naturally tree-structured. Consider a small tree of data, for example, the categories, subcategories and items in a shopping application. The top or root node is "Shop," and under it are the nodes "Books" and "Hardware," which contain their own subnodes.

Hierarchical tree: Shop. Books and Hardware.

In ADF UIX, each node in the tree is a DataObject containing key-value pairs. Each DataObject in the tree may contain any set of key-value pairs. The hierarchical tree above written in UIX XML would look like this:


Example in UIX XML:

<nodes text="Shop"
       destination="http://www.oracle.com"
       destinationText="More Information"
       expandable="expanded">
  <nodes text="Books"
         destination="http://www.oracle.com"
         destinationText="More Information"
         description="Instructions: buy, buy, buy!"
         expandable="expanded">
    <nodes text="Sale"
           destination="http://www.oracle.com"
           expandable="expanded">
      <nodes text="Paperbacks"
             destination="http://www.oracle.com"/>
    </nodes>
    <nodes text="Fiction"
           destination="http://www.oracle.com"/>
    <nodes text="Nonfiction"
           destination="http://www.oracle.com"/>
  </nodes>
  <nodes text="Hardware"
         expandable="expanded">
    <nodes text="Desktops"
           destination="http://www.oracle.com"/>
    <nodes text="Notebooks"
           destination="http://www.oracle.com"/>
  </nodes>
</nodes>

In UIX XML, a node is referred to by the value associated with the 'text' key, e.g., the root of the tree above is referred to as the "Shop" node. A node queried with the key 'nodes' will return a DataObjectList containing its children. For example when the "Shop" node is queried with the 'nodes' key, a DataObjectList containing the nodes "Books" and "Hardware" is returned.

The tree component and the browseMenu component are designed to view tree-structured data. These components can show two different views of the same data source. The hierarchical tree above rendered in a browser by a tree component would look like this:

Root Shop with Books and Hardware subnodes

The same hierarchical tree rendered in a browser by a browseMenu component would look like this:

Browse menu title, 6 categories

Both components let the user navigate through the tree hierarchy. The hierarchy of the data as displayed by the tree component is clear. The root node is Shop and it has two child nodes, Books and Hardware. Under Books are the children Sale, Fiction, and Nonfiction. The Sale node is a non-leaf node, while the Fiction and Nonfiction nodes are leaf nodes. Paperbacks is the child of Sale. Under Hardware are the children Desktops and Notebooks. The tree component ignores the 'description' key, and uses the 'expandable' key to determine whether the children of a node should be displayed.

In the browseMenu component, however, the entire hierarchy is not seen, but the path from the root (Shop) to the current node (Books) is seen in the breadcrumbs at the top. The children of the current node (Sale, Fiction, Nonfiction) are links under the "Categories" and "Items" headers. Links under the "Categories" header are non-leaf nodes, while links under the "Items" header are leaf nodes. Clicking on the links in the breadcrumbs or the links under the header "Categories" should display a similar page. For example if we clicked on the link that says "Sale" we should see a similar page with the breadcrumbs "Shop> Books> Sale" at the top and the link "Paperbacks" under the "Items" header. The browseMenu component ignores the 'expandable' key, but uses the 'description' key to display text (e.g., "Instructions: buy, buy, buy!") below the node.