View comments | RSS feed

Flash 8 Documentation 
Components Language Reference > Tree component (Flash Professional only) > Customizing the Tree component (Flash Professional only) > Using styles with the Tree component

Using styles with the Tree component

A Tree component uses the following styles:

Style

Theme

Description
themeColor

Halo

The base color scheme of a component. Possible values are "haloGreen", "haloBlue", and "haloOrange". The default value is "haloGreen".
backgroundColor

Both

The background color of the list. The default color is white and is defined on the class style declaration. This style is ignored if alternatingRowColors is specified.
backgroundDisabledColor

Both

The background color when the component's enabled property is set to "false". The default value is 0xDDDDDD (medium gray).
depthColors

Both

Sets the background colors for rows based on the depth of each node. The value is an array of colors where the first element is the background color for the root node, the second element is the background color for its children, and so on, continuing through the number of colors provided in the array. This style property is not set by default.

borderStyle

Both

The Tree component uses a RectBorder instance as its border and responds to the styles defined on that class. See RectBorder class.

 

The default border style is "inset".
color

Both

The text color.
disabledColor

Both

The color for text when the component is disabled. The default color is 0x848384 (dark gray).
embedFonts

Both

A Boolean value that indicates whether the font specified in fontFamily is an embedded font. This style must be set to true if fontFamily refers to an embedded font. Otherwise, the embedded font is not used. If this style is set to true and fontFamily does not refer to an embedded font, no text is displayed. The default value is false.
fontFamily

Both

The font name for text. The default value is "_sans".
fontSize

Both

The point size for the font. The default value is 10.
fontStyle

Both

The font style: either "normal" or "italic". The default value is "normal".
fontWeight

Both

The font weight: either "none" or "bold". The default value is "none". All components can also accept the value "normal" in place of "none" during a setStyle() call, but subsequent calls to getStyle() return "none".
textAlign

Both

The text alignment: either "left", "right", or "center". The default value is "left".
textDecoration

Both

The text decoration: either "none" or "underline". The default value is "none".
textIndent

Both

A number indicating the text indent. The default value is 0.
defaultLeafIcon

Both

The icon displayed in a Tree control for leaf nodes when no icon is specified for a particular node. The default value is "TreeNodeIcon", which is an image representing a piece of paper.
disclosureClosedIcon

Both

The icon displayed next to a closed folder node in a Tree component. The default value is "TreeDisclosureClosed", which is a gray arrow pointing to the right.
disclosureOpenIcon

Both

The icon displayed next to an open folder node in a Tree component. The default value is "TreeDisclosureOpen", which is a gray arrow pointing down.
folderClosedIcon

Both

The icon displayed for a closed folder node in a Tree component if no node-specific icon is set. The default value is "TreeFolderClosed", which is a yellow closed file folder image.
folderOpenIcon

Both

The icon displayed for an open folder node in a Tree component if no node-specific icon is set. The default value is "TreeFolderOpen", which is a yellow open file folder image.
indentation

Both

The number of pixels to indent each row of a Tree component. The default value is 17.
openDuration

Both

The duration, in milliseconds, of the expand and collapse animations. The default value is 250.
openEasing

Both

A reference to a tweening function that controls the expand and collapse animations. Defaults to sine in/out. For more information, see Customizing component animations in Using Components.
repeatDelay

Both

The number of milliseconds of delay between when a user first presses a button in the scrollbar and when the action begins to repeat. The default value is 500 (half a second).
repeatInterval

Both

The number of milliseconds between automatic clicks when a user holds the mouse button down on a button in the scrollbar. The default value is 35.
rollOverColor

Both

The background color of a rolled-over row. The default value is 0xE3FFD6 (bright green) with the Halo theme and 0xAAAAAA (light gray) with the Sample theme.

 

When themeColor is changed through a setStyle() call, the framework sets rollOverColor to a value related to the themeColor chosen.
selectionColor

Both

The background color of a selected row. The default value is a 0xCDFFC1 (light green) with the Halo theme and 0xEEEEEE (very light gray) with the Sample theme.

 

When themeColor is changed through a setStyle() call, the framework sets selectionColor to a value related to the themeColor chosen.
selectionDuration

Both

The length of the transition from a normal state to a selected state or back from selected to normal, in milliseconds. The default value is 200.
selectionDisabledColor

Both

The background color of a selected row. The default value is a 0xDDDDDD (medium gray). Because the default value for this property is the same as the default for backgroundDisabledColor, the selection is not visible when the component is disabled unless one of these style properties is changed.
selectionEasing

Both

A reference to the easing equation used to control the transition between selection states. Applies only for the transition from a normal to a selected state. The default equation uses a sine in/out formula. For more information, see Customizing component animations in Using Components.
textRollOverColor

Both

The color of text when the pointer rolls over it. The default value is 0x2B333C (dark gray). This style is important when you set rollOverColor, because the two must complement each other so that text is easily viewable during a rollover.
textSelectedColor

Both

The color of text in the selected row. The default value is 0x005F33 (dark gray). This style is important when you set selectionColor, because the two must complement each other so that text is easily viewable while selected.
useRollOver

Both

Determines whether rolling over a row activates highlighting. The default value is true.

For example, the following code creates a Tree instance first_tr using UIObject.createClassObject(), populates the tree using a data provider, and then uses UIObject.setStyle() to change the indentation of the nodes of the tree to 8 pixels. Drag a Tree component to the current document's library and then add the following to the first frame of the main timeline:

import mx.controls.Tree;

this.createClassObject(Tree, "first_tr", 20);
first_tr.setSize(200, 100);
first_tr.move(0, 120);

var trDP_xml:XML = new XML("<node label='1st Local Folder'><node label='Inbox' data='0'/><node label='Outbox' data='1'/><node label='2nd Local Folder'><node label='Inbox' data='0'/><node label='Outbox' data='1'/></node></node>");
first_tr.dataProvider = trDP_xml;

first_tr.setStyle("indentation", 8);

Version 8

Comments


Vekdeer said on Nov 8, 2006 at 2:06 PM :
Has anyone else noticed that when you remove the "disclosureClosedIcon " and "disclosureOpenIcon" icons it actually removes the indent on the tree component? Any reason why this would do this?
baddriverdave said on Mar 5, 2007 at 12:49 PM :
Is it possible to set backgroundColor to a transparent value?

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/8/main/00004119.html