Using TreeView controls

You can use TreeView controls in your application to represent relationships among hierarchical data. An example of a TreeView implementation is PocketBuilder’s Browser. The tab pages in the Browser contain TreeView controls.

Figure 11-8: Tree view panes in the PocketBuilder Browser

The sample shows the System Tab of the Browser. In a pane at the left is a Tree View with text entries and associated icons that uses indentation to represent a hierarchy. Highlighted is the window entry under the graphic object node. In the right pane is a list of Properties for a window.

Smartphone platforms PocketBuilder application users can use the arrow keys on the Smartphone to navigate the items in a TreeView control, but you must program a menu item or soft key to move the focus from the TreeView to another control in the same main window.

Adding TreeView items and pictures

A TreeView consists of TreeView items that are associated with one or more pictures. You add images to a TreeView in the same way you add images to a ListView, except that you use the Pictures tab page instead of the Large Picture or Small Picture tab pages.

You can choose from a group of stock images provided by PocketBuilder, or use BMP, GIF, ICO, JPEG, or PNG files for the images that you add to a TreeView. You cannot add a PNG file to a picture control in the PocketBuilder UI, only in script. (PNG files are not supported on the desktop, only on Pocket PC devices and emulators.)

Dynamically changing image size The image size can be changed during execution by setting the PictureHeight and PictureWidth properties when you create a TreeView.

For more information, see “PictureHeight” and “PictureWidth” in the online Help.

To add items to a TreeView:

Write a script in the TreeView constructor event to create TreeView items

For more information about populating a TreeView, see the chapter on using lists and tree views in the Resource Guide.

Adding state pictures to TreeView items

A “state” picture is an image that appears to the left of the TreeView item, indicating that the item is not in its normal mode. A state picture can indicate that a TreeView item is being changed, or that it is performing a process and is unavailable for action.

Figure 11-9: TreeView control showing a state picture

Shown is a tree view showing a list of Composers. In addition to the top level Composers node, it shows lower level nodes labeled Adams and Bach. Under these nodes are lists of compositions. Each has an icon of musical notes to its left. One entry in the Bach folder has an additional icon or state picture to the left of its notes icon.

To specify a state picture for a TreeView item:

Select the TreeView control to display its properties in the Properties view and then select the State tab.
Do one of the following:
- Use the StatePictureName drop-down list to select stock pictures to add to the TreeView
- Use the Browse button to select a BMP, ICO, GIF, or JPEG file

Working with the rows in the State or Pictures tab page in the Properties view is the same as working with rows in the State, Small Picture, or Large Picture tab pages in a ListView control. For information, see “Using ListView controls”.

To activate a state picture for a TreeView item:

Write a script that changes the image when appropriate

For example, the following script gets the current TreeView item and displays the state picture for it.
```
long           ll_tvi
treeviewitem   tvi

ll_tvi = tv_foo.finditem(currenttreeitem! , 0)
tv_foo.getitem(ll_tvi , tvi)
tvi.statepictureindex = 1
tv_foo.setitem(ll_tvi, tvi)
```
For more information on the TreeView control, see the chapter on using lists and tree views in the Resource Guide.

Setting other properties

You can modify other properties of the TreeView control on the tab pages of the control’s Properties view.

To specify other TreeView properties:

Select the TreeView control to display its properties in the Properties view and then select the General tab.
Enter a name for the TreeView in the Name text box and specify other properties as appropriate.

Among the properties you can specify on the General properties page are:
- The border style
- Whether the TreeView has lines showing the item hierarchy
- Whether the TreeView includes collapse and expand buttons
- Whether the user can delete items
- Whether the user can drag and drop items into the TreeView

For other options, choose the tab appropriate to the property you want to specify:

Choose this tab	To specify
Pictures	The images used to represent TreeView items
State	The state images for the TreeView items
Font	The font size, family, and color for TreeView items
Others	The size and position of the TreeView

For more information about TreeView properties, right-click in any tab page in the Properties view and select Help from the pop-up menu, or see Objects and Controls in the online Help. Because of differences in the target platform, some of the properties listed for PowerBuilder objects and controls do not apply to PocketBuilder objects and controls.

For more information on the TreeView control, see the chapter on using lists and tree views in the Resource Guide.