The Tree View navigation strategy is excellent for large project structures. Instead of a tab strip, which can take up a lot of space, the windows are instead listed out in a Tree View component. Users can double click on an item in the tree view and it will swap out one main window for another. The list is fairly compact, and can contain folders, helping you to group similar windows just like you would in the project browser.










Tree View Navigation Example

  1. Add a Tree View component to a docked window.
    1. Set up some objects using the Tree View customizer. In the image below, there are four objects, each corresponding to a different window.



  2. From Property Editor, find the Items property and click on the Dataset Viewer  icon. 



    This brings up a dataset editor.  You will see a number of columns that identify how each tree view item is displayed, similar to the customizer where each row corresponds to a node in the tree view.

  3. Add a column to the dataset using the Add Column  icon. Call the column windowPath and set it to column position 0. For each row, give it a value of the path to the window within the project browser.



  4. You can then add a script that will use the newly added windowPath to open the correct window when a user double clicks on a node. Right click on the Tree View component and select Scripting.

  5. Select the mouseClicked event handler, and add the following script to the Script Editor tab.

    # If the user performs a double click, open the appropriate window
if event.clickCount == 2:
	row = event.source.selectedItem
	data = event.source.data
	if row != -1:
		# Grab the window path value out of the tree view's items dataset
		windowPath = data.getValueAt(row, "windowPath")
		system.nav.swapTo(windowPath)


  6. Click OK. Now you can save your project and test out the component.

    If you need to add new nodes to the tree, you can still add them with the Customizer, but you will notice that the windowPath column we added does not show up. This is because the customizer only recognizes a certain set of columns, and ignores the others. So after adding new nodes with the Customizer, simply open up the dataset to provide values for the windowPath.