HierarchyTreeView helps in presenting the tree-like hierarchy modeled by an INodeHierarchy implementation in a mx.controls.Tree.

Example 3.8, “Setting up a HierarchyTreeView” presents the setup of a HierarchyTreeView for displaying the hierarchical organization of a grouped graph.

// 'graph' is of type com.yworks.graph.model.IGraph.

// Retrieve the hierarchy of nodes.
var hierarchy:INodeHierarchy = graph.lookup(INodeHierarchy) as INodeHierarchy;

// Display the hierarchy in a Tree control.
if (hierarchy != null) {
  // 'treeView' is a mx.controls.Tree.
  new HierarchyTreeView(treeView, hierarchy);
}

Alternatively, the HierarchyTreeView can be set directly as data provider for a Tree control. Example 3.9, “Setting up a HierarchyTreeView in MXML” demonstrates the use of a HierarchyTreeView in MXML syntax.

<!-- 'graphCanvas' is the GraphCanvasComponent which displays the graph. -->
<mx:Tree>
  <mx:dataProvider>
    <yworks:HierarchyTreeView id="htv" graphCanvasComponent="{graphCanvas}"/>
  </mx:dataProvider>
</mx:Tree>

HierarchyTreeView adds the nodes of the hierarchy to the Tree and uses the first node label as the descriptive text to be displayed. Figure 3.11, “Graph view provided by HierarchyTreeView” shows a Tree placed on the left side inside an application's window that displays the hierarchical organization of a grouped graph.

Figure 3.11. Graph view provided by HierarchyTreeView

In tutorial demo application GroupingDemo further aspects of presenting a graph in a Tree can be observed.