Styling the AdvancedTree
Styles contain text and color information that skins use when rendering. There are a number of ways you may style an instance of the AdvancedTree. The easiest way is to set individual style properties that will be used globally for the tree. You can also set style formats for different levels of the tree, so the top level node has one style, second level nodes have another, and so on. Finally, you can set style formats for individual nodes, when needed.Setting Global Style Properties
If you are using the default skins for the AdvancedTree (i.e., you are not assigning custom classes to draw the skins), you can alter their appearance through the use of the setStyleProperty() method in ActionScript, or the styleDefinitions parameter in the Flash IDE. The supported style properties that may be set can be found here. The component has default styles properties. A non-styled component appears as the following:
To modify the style properties for the entire component, you can call setStyleProperty() on the tree instance, passing in values for each of the supported style properties you wish to override:
import com.flashloaded.ui.tree.graphic.TreeStyles;
tree.setStyleProperty(TreeStyles.TEXT_FORMAT, new TextFormat("Tahoma", 11, 0xFFFFFF));
tree.setStyleProperty(TreeStyles.HIGHLIGHT_TEXT_FORMAT, new TextFormat("Tahoma", 11, 0xFFFFAA));
tree.setStyleProperty(TreeStyles.SELECTED_TEXT_FORMAT, new TextFormat("Tahoma", 11, 0x000000));
tree.setStyleProperty(TreeStyles.EMBED_FONTS, true);
tree.setStyleProperty(TreeStyles.FACE, 0x000000);
tree.setStyleProperty(TreeStyles.ROLLOVER_FACE, 0xFF99FF);
tree.setStyleProperty(TreeStyles.SELECTED_FACE, 0xFF99FF);
tree.setStyleProperty(TreeStyles.CONNECTOR_LINE_COLOR, 0x999999);
tree.setStyleProperty(TreeStyles.CONNECTOR_LINE_WIDTH, 3);
tree.setStyleProperty(TreeStyles.ICON, 0xFFFFFF);
tree.setStyleProperty(TreeStyles.ROLLOVER_ICON, 0x000000);
tree.setStyleProperty(TreeStyles.SELECTED_ICON, 0x000000);
tree.setStyleProperty(TreeStyles.SCROLLWELL, 0x454545);
tree.setStyleProperty(TreeStyles.BACKGROUND, 0x000000);
tree.setStyleProperty(TreeStyles.BORDER, 0x666666);
tree.setStyleProperty(TreeStyles.SHADOW, 0x970198);
tree.setStyleProperty(TreeStyles.HIGHLIGHT, 0xFF99FF);
tree.setStyleProperty(TreeStyles.ROLLOVER_HIGHLIGHT, 0x572955);
tree.setStyleProperty(TreeStyles.SELECTED_HIGHLIGHT, 0xFF99FF);
Alternatively, if you are dragging and dropping the component to the stage, you can use the styleProperties parameter in the Parameters panel to pass in all the styles:
Both methods produce the following result:
Setting Node Level Style Formats
You can specify a collection of style properties for each node level in the tree. This collection is referred to as a style format. The relevant properties for a node level style format are the text properties (text-font, text-size, text-color, etc.). To set up node level style formats, you would import the StyleFormat class, create the style formats for the node levels that required specific, non-global formats, then use the AdvancedTree's nodeLevelStyleFormats property to assign the format for each level. Each index in the array would correspond to the node level, so the first index would be the first node level, the second index would be the second node level, etc.
The following creates style formats for the top three levels of nodes in an AdvancedTree instance.
import com.flashloaded.ui.tree.graphic.TreeStyles;
import flash.text.TextFormat;
level0Format = new StyleFormat("level0Format");
level0Format.setProperty(TreeStyles.TEXT_FORMAT, new TextFormat("Annifont FG", 18, 0x302F25));
level0Format.setProperty(TreeStyles.EMBED_FONTS, true);
level1Format = new StyleFormat("level1Format");
level1Format.setProperty(TreeStyles.TEXT_FORMAT, new TextFormat("Annifont FG", 16, 0x302F25));
level1Format.setProperty(TreeStyles.EMBED_FONTS, true);
level2Format = new StyleFormat("level3Format");
level2Format.setProperty(TreeStyles.TEXT_FORMAT, new TextFormat("Annifont FG", 12, 0x302F25));
level2Format.setProperty(TreeStyles.EMBED_FONTS, true);
tree.nodeLevelStyleFormats = [level0Format, level1Format, level2Format, level2Format];
Setting Individual Node Style Formats
If you wish to set a style format for a specific node in the tree, you can assing a style format using TreeNode's styleFormat property. This will not immediately refresh the view of the tree, so refresh() will have to be explicitly called.
The following snippet assigns a specific style format to a specific node in the tree.
import com.flashloaded.ui.tree.graphic.TreeStyles;
import flash.text.TextFormat;
var styleFormat:StyleFormat = new StyleFormat("someFormat");
styleFormat.setProperty(TreeStyles.TEXT_FORMAT, new TextFormat("Tahoma", 18, 0xFFFFFF));
styleFormat.setProperty(TreeStyles.EMBED_FONTS, true);
tree.selectedNode.styleFormat = styleFormat;
tree.refreshSelected();