• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Adding a Tree

The Tree component allows a user to view hierarchical data. The tree appears within a box like the List component, but each item in a tree is called a node and can be either a leaf or a branch. By default, a leaf is represented by a text label beside a file icon and a branch is represented by a text label beside a folder icon with a disclosure triangle that a user can open to expose children. The children of a branch can either be leaves or branches themselves.

Add a Tree Component

Open the Components panel.

Click the UI Components Expand triangle.

Drag the Tree component onto the Stage, and then select the tree.

Open the Component Inspector panel, and then click the Parameters tab.

Select from the following Tree parameters:

  • multipleSelection. Click the value field, and then select whether the visitor can select multiple items (true), or single items (false).

  • rowHeight. Click the value field, and then enter a numerical value for the height of each row in pixels.

Create a unique instance name for the Tree component in the Property Inspector.

Open the Actions panel, and then enter the script as shown in the illustration into Frame 1 on the Timeline.

This Script creates a trace action inside the handler and sends a message to the Output panel every time an item in the tree is selected.

Add the remaining script to Frame 1 in the Timeline to complete the Tree component structure.

The previous code creates an XML object called myTreeDP. Any XML object on the same frame as a Tree component automatically receives all the properties and methods of the TreeDataProvider API. The second line of code creates a single root node called Local Folders.

Click the Control menu, and then click Test Movie.

In the .swf file, you can see the XML structure displayed in the Tree. Click the triangle next to Local Folders to expand the list. Each time you click on an item in the list, the trace action in the change event handler sends the data “was selected” to the Output panel.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint