Creating Styles

Any of the default skins for the advancedTree component can have their appearance altered by style formats. Style formats are instances of com.flashloaded.ui.graphic.StyleFormat and contain text and color information that skins use when rendering. With no style formats are applied to a advancedTree component instance, a default style format is created behind the scenes using grays for colors and unembedded Arial black as a textformat. A non-styled component appears as the following:

Default Style Format

To use and apply a single style format for the component, follow the following steps and API.

1. If you are manually placing the component on the stage in the IDE, uou first need to create your styles in the first frame of your movie, then place the advancedTree instance in the next or later frame. YOU CANNOT INSTANTIATE THE STYLE FORMATS IN THE SAME FRAME IN WHICH THE COMPONENT IS PLACED UNLESS YOU ARE USING ACTIONSCRIPT TO ATTACH THE COMPONENT.
   
   For this example, a two frame movie has been made with styles being defined in the first frame and the component being placed in teh second frame with a stop() action to halt the timeline.
2. In the ActionScript for the first frame in your movie (or in any frame BEFORE the tree is placed on the stage), enter the following code:

   // imports the StyleFormat class
   import com.flashloaded.ui.graphic.StyleFormat;
   
   // creates a new style format to act as the default format for the tree
   defaultFormat = new StyleFormat("defaultFormat");
   

   In this line, we create a new StyleFormat and pass in a name that we can later reference, if necessary. This style format will have the default color and fonts unless we change them, as:

   // makes the text white using Tahoma
   defaultFormat.textFormat = new TextFormat("Tahoma", 11, 0xFFFFFF);
   // font is embedded and exported from the library defaultFormat.embedFonts = true;

3. To apply this style format to the component, a new StyleManager must be created, which holds the references to all formats globally to be accessed by all components and subcomponents of the advancedTree. The default format is passed to the StyleManager in its constructor.

   // new StyleManager is created and passed a style format to apply to all components
   var styleManager:StyleManager = new com.flashloaded.ui.managers.StyleManager(defaultFormat);

   The results of this code can be seen in the following:
   
   
4. Adding a few more lines to the style format before passing it to the StyleManager constructor yields the following results:

   defaultFormat = new StyleFormat("defaultFormat");
   defaultFormat.textFormat = new TextFormat("Tahoma", 11, 0xFFFFFF);
   defaultFormat.embedFonts = true;
   defaultFormat.face = 0x000000;
   defaultFormat.lineColor = 0x999999;
   defaultFormat.icon = 0xFFFFFF;
   

5. Border, shadow and highlight are also supported in the default skins of the component, as well as selection color for the tree.

   defaultFormat = new StyleFormat("defaultFormat");
   defaultFormat.textFormat = new TextFormat("Tahoma", 11, 0xFFFFFF);
   defaultFormat.embedFonts = true;
   defaultFormat.face = 0x000000;
   defaultFormat.lineColor = 0x999999;
   defaultFormat.icon = 0xFFFFFF;
   defaultFormat.border = 0x666666;
   defaultFormat.shadow = 0x970198;
   defaultFormat.highlight = 0xFF99FF;
   defaultFormat.selected = 0xFF99FF;
   

6. Style formats can also define colors for different states, such as selected (down) or highlighted (over).

   defaultFormat = new StyleFormat("defaultFormat");
   defaultFormat.textFormat = new TextFormat("Tahoma", 11, 0xFFFFFF);
   defaultFormat.highlightTextFormat = new TextFormat("Tahoma", 11, 0xFFFFAA);
   defaultFormat.selectedTextFormat = new TextFormat("Tahoma", 11, 0x000000);
   defaultFormat.embedFonts = true;
   defaultFormat.face = 0x000000;
   defaultFormat.lineColor = 0x999999;
   defaultFormat.icon = 0xFFFFFF;
   defaultFormat.border = 0x666666;
   defaultFormat.shadow = 0x970198;
   defaultFormat.highlight = 0xFF99FF;
   defaultFormat.selected = 0xFF99FF;
   defaultFormat.background = 0xFFFFFF;
   defaultFormat.selectedIcon = 0x000000;
   

7. Finally, scrollwell color and connector line width can be set through the style format as well.

   defaultFormat = new StyleFormat("defaultFormat");
   defaultFormat.textFormat = new TextFormat("Tahoma", 11, 0xFFFFFF);
   defaultFormat.highlightTextFormat = new TextFormat("Tahoma", 11, 0xFFFFAA);
   defaultFormat.selectedTextFormat = new TextFormat("Tahoma", 11, 0x000000);
   defaultFormat.embedFonts = true;
   defaultFormat.face = 0x000000;
   defaultFormat.lineColor = 0x999999;
   defaultFormat.icon = 0xFFFFFF;
   defaultFormat.border = 0x666666;
   defaultFormat.shadow = 0x970198;
   defaultFormat.highlight = 0xFF99FF;
   defaultFormat.selected = 0xFF99FF;
   defaultFormat.background = 0xFFFFFF;
   defaultFormat.highlightIcon = 0x000000;
   defaultFormat.selectedIcon = 0x000000;
   defaultFormat.scrollwell = 0x454545;
   defaultFormat.lineWidth = 3;

Supported Style Format Properties

What follows is the full list of style format supported by the default skins of the advancedTree component.

Property:	Applies to:
face	up state of buttons and scrollers, scrollpane back
background	down state of buttons
border	one pixel border around components
highlight	one pixel along the top and left side of components
shadow	one pixel along the bottom and right side of components
selected	rollover state of buttons and selected row of tree
icon	scrollbar button icon
selectedIcon	over state of scrollbar button icon
highlightIcon	rollover state of scrollbar button icon
disabledIcon	disabled state of scrollbar button icon
disabledFace	disabled state of buttons
scrollwell	scrollbar scrollwell
lineColor	connector lines in tree
lineWidth	thickness of connector lines in tree
textFormat	text in tree
selectedTextFormat	text in tree when selected
highlightTextFormat	text in tree on rollover
disabledTextFormat	text in tree when disabled
embedFonts	all text formats for style format