You can set style formats (the collection of colors and text formats) for the entire tree, for entire levels of the tree, or for individual nodes. To set the tree level style properties, either use the styleProperties parameter in the Flash IDE, or you can use setStyleProperty in ActionScript. To set style formats per node level, use the nodeLevelStyleFormats property. To set a style format for an individual node, use the styleFormat property of TreeNode. Please see Styling the AdvancedTree for more in-depth instruction on how to use these properties.
Leaf nodes display a certain type of icon. Branch nodes display another. Empty branch nodes (those specified as branch nodes but that do not contain children) display yet another. These are controlled by the settings in the AdvancedTree's LEAF_GRAPHIC, BRANCH_GRAPHIC and BRANCH_EMPTY_GRAPHIC skin properties, respectively, which can be set either using the setSkin() method or through the skinDefinitions property in the IDE. If you want to set unique icons on a per node basis, you can explicitly set a node's iconGraphic and emptyIconGraphic properties. The AdvancedTree also has a treeIcons property. This takes a dynamic object that maps node names to the Class to be used to render icons for that type of node. For even more control, you can assign a function to the AdvancedTree's treeIconFunction property. This function should accept a TreeNode instance and return a Class that will be used to render that node's icon. Please see Creating Skins and Icons for more in-depth instruction on how to set icons.
// sets custom skins for the three types of icons
tree.setSkin(TreeSkins.LEAF_GRAPHIC, LeafIcon);
tree.setSkin(TreeSkins.BRANCH_GRAPHIC, BranchIcon);
tree.setSkin(TreeSkins.BRANCH_EMPTY_GRAPHIC, EmptyBranchIcon);
tree.refresh();
// specifies a custom icon just for the root node
tree.rootNode.iconGraphic = RootIcon;
tree.refresh();
// specifies custom icons for nodes named "admin" and "user"
tree.treeIcons = {admin:AdminIcon, user:UserIcon};
tree.refresh();
// specifies that the node icon of a node will be determined by a function
tree.treeIconFunction = getNodeIcon;
// example of function
function getNodeIcon(node:TreeNode):Class {
switch (node.nodeName) {
case "root":
return RootIcon;
case "admin":
return AdminIcon;
case "user":
case "guest":
return UserIcon;
}
return UnknownIcon;
}
Nodes, by default, do not have a graphic that renders behind the label. You can set a graphic for all nodes by assigning a class to the NODE_GRAPHIC skin of the AdvancedTree through either the setSkin() method or through the skinDefinitions property in the IDE. If you want to set a graphic for an individual node, you can assign it to TreeNode's nodeGraphic property. Please see Creating Skins and Icons for more in-depth instruction on how to set skins.
Each node gets its label from its own data. If the AdvancedTree's getLabelFromName is set to true, then the node name of each node is used as its label. If getLabelFromName is set to false, then each node will get its label from the value found in the attribute specified as the labelAttribute for the tree. For more control over how a node's label is determined, you can assign a function to the AdvancedTree's nodeLabelFunction property. This function should accept a TreeNode instance and return a String that will be used for that node's label.
// specifies that the node name of a node will be used as its label,
// so <child /> will get the label "child"
tree.getLabelFromName = true;
tree.refresh();
// specifies that the name attribute of a node will be used as its label,
// so <child name="My Name" /> will get the label "My Name"
tree.getLabelFromName = false;
tree.labelAttribute = "name";
tree.refresh();
// specifies that the node name of a node will be determined by a function
tree.nodeLabelFunction = getNodeLabel;
// example of function
function getNodeLabel(node:TreeNode):String {
// for a node <child ID="23" /> will return the label "child (ID=23)"
return node.nodeName + " (ID=" + node.getAttribute("ID") + ")";
}
Indentation can be set for the entire tree using the AdvancedTree's indentation property. To set indentation on entire levels of nodes (first level nodes, second level nodes, etc.) use the nodeLevelIndentation property of the AdvancedTree. This takes an array where each index corresponds to a node level, so the first index (0 index) determines the indentation of the first level, the second index determines the indentation of the second level, etc. For instance, passing in the value [0, 12, 15] will set the indentation of the first level node to 0 pixels (the first level does not actually indent, so whatever number you pass will be ignored; use the margin.left property to control the entire tree's left margin), the second level nodes to 12 pixels and the third level nodes to 15 pixels. All other nodes will use the setting in indentation.
tree.indentation = 10;
tree.nodeLevelIndentation = [0, 10, 15];
tree.refresh();
In a similar to indentation, node leading, the vertical space between each node, can be set for the entire tree using the AdvancedTree's nodeLeading property. To set leading on entire levels of nodes (first level nodes, second level nodes, etc.) use the nodeLevelLeading property of the AdvancedTree. Just like nodeLevelIndentation, this takes an array where each index corresponds to a node level, so the first index (0 index) determines the leading of the first level, the second index determines the leading of the second level, etc. For instance, passing in the value [3, 5, 6] will set the leading of the first level node to 3 pixels, the second level nodes to 5 pixels and the third level nodes to 6 pixels. All other nodes will use the setting in nodeLeading.
tree.nodeLeading = 3;
tree.nodeLevelLeading = [3, 5, 6];
tree.refresh();
Finally, the height of each node can be set for the entire tree using the AdvancedTree's nodeHeight property, but you can set the height on entire levels of nodes with the nodeLevelHeight property. Just like nodeLevelIndentation, this takes an array where each index corresponds to a node level, so the first index (0 index) determines the height of the first level nodes, the second index determines the height of the second level nodes, etc. For instance, passing in the value [30, 25, 20] will set the height of the first level node to 30 pixels, the second level nodes to 25 pixels and the third level nodes to 20 pixels. All other nodes will use the setting in nodeHeight.
tree.nodeHeight = 18;
tree.nodeLevelHeight = [30, 25, 20];
tree.refresh();