Recipe 15.2. Applying Styles to Component Groups

Problem

You want to apply the same style settings to more than one component instance, or you want to apply a lot of styles to a single component instance.

Solution

Create a new ActionScript style object, assign the style values, and then apply it to the component instance or instances.

Discussion

The setStyle( ) technique discussed in Recipe 15.1 is great if you want to apply just a few styles to a single component. However, if you want to apply those same settings to other components, the first technique doesn't provide you with a very convenient way to do that. Furthermore, although you can apply as many styles as you want to a single component by calling the setStyle( ) method many times, this approach is slightly inefficient. Each time the setStyle( ) method is called for the component instance, it is redrawn. If you are applying 10 style settings, the component will be redrawn 10 times, even though it really needs to be redrawn only onceafter all the settings have been made. Although there is no visible effect that the user can see, it is a rather inefficient use of processing.

Creating and applying an ActionScript style object resolves both of the aforementioned issues. By working with a style object, you can define the settings once, and then apply them to as many component instances as you want. Additionally, because a style object is defined and then applied to the component or components, no matter how many styles you set, the component or components will need to redraw only once.

To create an ActionScript style object, use the CSSSTyleDeclaration constructor in a new statement. In order to work properly with the components, the style object must be assigned to a property of the _global.styles object. (_global.styles is automatically created for you whenever you have added at least one component to your Flashdocument's library.) You get to make up the name of the property, though it is certainly recommended that you use a name that indicates what the style represents. For example, the following code creates a new style object and assigns it to a property named menuStyles:

 _global.styles.menuStyles = new mx.styles.CSSStyleDeclaration(); 

The CSSStyleDeclaration class is in the mx.styles package. Simply put, that means you must use the full name of mx.styles. CSSStyleDeclaration when calling the constructor. The only exception is if you have used an import statement to import the class previously. Classes, packages, and importing are beyond the scope of this book, however. So for a fail-safe technique, make sure you provide the full name, as shown in the preceding code.

After you have defined the new style object, define the style settings with the following syntax:

 _global.styles.styleObjName.styleName = styleValue; 

You can repeat that same syntax for as many styles as you want to set. The following example defines three style properties for the menuStyles style object. Those properties are themeColor, fontFamily, and fontStylestyle properties you can read about in the recipes in this chapter.

 _global.styles.menuStyles.themeColor = "haloOrange"; _global.styles.menuStyles.fontFamily = "_typewriter"; _global.styles.menuStyles.fontStyle = "italic"; 

After defining the style settings, the next step is to apply the style object to the component or components for which you want the styles to take effect. You can do that using the setStyle( ) method for each component. When you call the setStyle( ) method in order to apply a style object's settings, you need call the method only once per component instance. The first parameter should be styleName, and the second should be the name of the style object in quotation marks and without the _global.styles prefix. For example, the following code applies the menuStyles object's settings to two component instancesccbProducts and clPreferences:

 ccbProducts.setStyle("styleName", "menuStyles"); clPreferences.setStyle("styleName", "menuStyles");