Recipe 15.9. Working with List Styles

Problem

You want to apply style settings to list components.

Solution

Use the styles specific to the list components, including alternatingRowColors, rollOverColor, selectionColor, selectionEasing, texTRollOverColor, textSelectedColor, selectionDisabledColor, selectionDuration, and useRollOver.

Discussion

There are quite a few styles that are specific to list components, primarily because they deal with the colors of the list elements as they are moused over and selected. Most of those properties are color properties:

rollOverColor

The color of a row when the user moves the mouse over it

selectionColor

The color of a row when it has been selected

textRollOverColor

The color of the text in a row when the user moves the mouse over it

textSelectedColor

The color of the text in a row when it has been selected

selectionDisabledColor

The color of a row when it is selected and the entire list has been disabled (the enabled property set to false)

Additionally, you can assign a group of color values such that the background colors of the rows are different from the adjacent rows. For example, if you assign the colors of red and yellow, the row colors will alternate between red and yellow. If you assign the colors of blue, green, and magenta, the row colors will repeat that pattern. In order to accomplish this, assign an array of colors to the alternatingRowColors style property. You can use any valid syntax to create the array. However, often the most convenient way is to use array literal notation in which the array definition is denoted by a comma-delimited list between square brackets. The following is an example that assigns the colors red and yellow to the alternatingRowColors style property globally:

 _global.style.setStyle("alternatingRowColors", [0xFF0000, 0xFFFF00]); 

The alternatingRowColors style property is the one color style property that does not allow you to use the color strings. You must specify numeric values for the colors.

You can also tell Flash that you would prefer it did not show a rollover color on rows: assign a value of false to the useRollOver style property. For example:

 _global.style.setStyle("useRollOver", false); 

One additional feature that you can adjust for lists using styles is the animation when a row is selected. If you watch carefully when you select a row in the list, you'll notice that the highlight on the row that is selected quickly opens from the center outward. If another item had previously been selected and becomes deselected, the row closes in the reverse direction as it opened. You can use the selectionEasing and selectionDuration style properties to determine how the rows animate when selected and deselected. You can assign the selectionEasing style property a reference to one of the easing functions listed in Recipe 11.3. The selectionDuration property specifies the duration over which the row animates. The value should be given in milliseconds. You can convert from seconds to milliseconds by multiplying by 1,000. Therefore, if you want the rows to animate over the course of one second, use the following code:

 _global.style.setStyle("selectionDuration", 1000);