Recipe 15.7. Working with Border and Background Styles

Problem

You want to apply styles to the border and background of a component or components.

Solution

Use the backgroundColor, borderColor, or borderStyle style property.

Discussion

You can set the background and border colors for components using the appropriate styles. For the background, just assign a value to the backgroundColor property. For example, the following code applies a red background to a list named clProducts:

	clProducts.setStyle("backgroundColor", "red");

The background color is one of the styles that does not inherit properly when you apply it globally. That means that it will not take effect for some types of components if you use the following line of code:

	_global.style.setStyle("backgroundColor", "red");

It does inherit correctly for some types of components, such as the combo box, numeric stepper, window, date chooser, and date field. However, it does not properly inherit for other component types, such as list, text input, and text area. One solution is to apply the styles to each component instance, or perhaps each componentclass. However, that could prove rather unnecessarily tedious. Instead, as a workaround, you can apply the style settings globally as normal. But in addition, define the class style objects for the necessary classes. By just defining the class style object, the global styles will then inherit properly. The following is an example in which you can apply the backgroundColor style globally. If your document contains a combo box, a list, a numeric stepper, and a text area, the combo box and numeric stepper automatically inherit the style setting properly. However, because the list and text area components do not properly inherit the styles, you need to define the corresponding class style objects. Remember, as discussed in Recipe 15.3, you should not define the class style object for components such as List and tree. Instead, you should define the class style object for their parent classScrollSelectList:

	_global.style.setStyle("backgroundColor", "red");
	_global.styles.TextArea = new mx.styles.CSSStyleDeclaration();
	_global.styles.ScrollSelectList = new mx.styles.CSSStyleDeclaration();

The borders for each of the components utilize the same set of styles. That includes the borders of text inputs, text areas, lists, date fields, checkboxes, etc. The number of border style properties depends on which theme you are using. Figure 15-1 shows the parts of the border and their corresponding style properties for a default inset border for the Halo theme.

Figure 15-1. The border sections and their corresponding style properties for the Halo theme

Alternatively, if you are using the Sample theme, or a derivative of that theme, the border styles map to the components differently. Figure 15-2 shows the parts of the border and their corresponding style properties for a default inset border for the Sample theme.

As with the backgroundColor style property, some of the border style properties don't inherit properly on some components. In particular, the borderColor property doesn't seem to get applied to list components (as well as the related datagrid and tree components) when used globally. You can use the same technique as is described for getting backgroundColor to work correctly: define the correct class style object. For the list component, define the ScrollSelectList class style object as follows:

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

You can also affect how the border is displayed. By default, the border for most components is displayed as in inset border. Inset borders give the appearance that the content they frame is recessed (for the Halo theme, but it is the inverse for the Sample theme). You can control the how the border is displayed using the borderStyle style property. The default value is inset. But you can also specify outset, solid, or none. An outset border is the inverse of the inset border. A solid border displays a solid rectangular border around the component using the borderColor style property value to determine the border color. Solid borders give a two-dimensional appearance to the component(s). And if you assign a value of none to the borderStyle style property, the component(s) will not have a visible border.

	_global.styles.setStyle("borderStyle", "none");

The text input and text area components do not properly inherit the borderStyle property when it is applied globally. You can handle that in one of the usual ways.

You cannot change the borderStyle setting for a button component.