Creating the Context for the TreeView

Before you create the context for the TreeView, you must decide which data you want to display in the tree. This includes visible data, for example the text of a node, and invisible data, for example, whether a node can be selected.

The objective of this example application is to display a file structure in a tree and display the name of the selected file. This means that you need an attribute in the context in which the currently selected name is stored and can be displayed. Several context attributes are required for the nodes of the tree. The application requirements are as follows:

·        Each node must be labeled

·        A file must have a different icon to a folder

·        A file is a leaf and can therefore have no further leaves or nodes

·        A node must already be opened

·        Selecting a file must trigger an event that displays the name of the file on the screen; selecting a folder must not trigger an event.

This results in several context attributes that you create in the TreeView context.

The TreeView is already contained in the template.

Procedure

1. To open the View Designer, double-click TreeView in the project structure.
2. Choose the Context tab page.
3. Create the nodes and attributes displayed in the table below and set the properties.

Context Element	Type	Properties	Value
treeNode	Value node
childNode	Recursion Node	repeatedNode	TreeView.treeNode
hasChildren	Value attribute	Type	boolean
iconSource	Value attribute	Type	string
ignoreAction	Value attribute	Type	boolean
isExpanded	Value attribute	Type	boolean
text	Value attribute	Type	string
textOfSelectedNode	Value attribute	Type	string

A tree represents a hierarchy as it is saved in the context. If, unlike in this example, the tree is not recursive, you must implement the whole structure in the context by using nodes and attributes. Make sure that the context nodes to which the tree and the TreeNodes are bound have their singleton property set to false, unless they are independent context nodes located directly under the context root node (that is, at the top level).

 

The treeNode context element later displays a folder or a file in the tree of the TreeView. The name of the folder or the file is saved in the text attribute. The hasChildren attribute specifies whether the node is to be a node or a leaf. You can use this attribute to set the iconSource to a folder icon or file icon. The isExpanded attribute is required to expand a node initially. You use the ignoreAction attribute to define whether or not the event onAction is triggered when this node is selected.

The recursive childNode node links to the treeNode, which can thus be nested as deeply as you like.

Result

The TreeView context is defined and its file structure can be nested as deeply as is required. It also has the corresponding properties for displaying the tree as requested.

Next step:

Creating Actions for the Tree