Recipe 15.3. Applying Styles to Component Types

Problem

You want to apply the same style settings to all instances of the same component type within your Flash movie.

Solution

Define an ActionScript style object with the component class name (exp 3pod.com).

Discussion

In some cases, you may want to apply particular style settings to all instances of a particular component. For example, you may want to apply one set of style settings to all radio buttons and another set of style settings to all text inputs. You can apply the same set of style settings to the entire component type by defining an Action-Script style object with the same name (exp 3pod.com) as the component class. For example, if you want to apply the same style settings to all radio buttons, you can define a style object with the name (exp 3pod.com) RadioButton (using the proper capitalization is important.) As with the style objects you create, in order to apply them to groups (as discussed in Recipe 15.2), you should assign the style object to the _global.styles object. Therefore, if you want to define a style object to determine the style settings for all the radio buttons in your Flash movie, your code will look like the following:

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

After you've declared the style object as shown in the preceding code, you need only assign the values to the specific styles you want to set. In order to do that, use the setStyle( ) by calling it from the style object. The following is an example in which the themeColor and fontFamily styles are set for all the radio buttons:

	_global.styles.RadioButton.setStyle("fontFamily", "_typewriter");
	_global.styles.RadioButton.setStyle("themeColor", "haloOrange");

If for no other reason than simply to keep you on your toes, the list component type will not work with the technique described thus far. Instead, you should use the already-defined style object named ScrollSelectList in order to manage list styles. Therefore, you should not reinitialize the preexisting ScrollSelectList object by assigning a new style object to it. That means you should not use the following line of code:

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

Instead, call the setStyle( ) method from the object that has already been created automatically. For example, you can set the fontFamily and themeColor styles using the following two lines of code:

	_global.styles.ScrollSelectList.setStyle("fontFamily", "_typewriter");
	_global.styles.ScrollSelectList.setStyle("themeColor", "haloOrange");

Styles settings made on an individual component instance take precedence over settings made through a component class object, as described in this recipe.