| Flex 2 Developer's Guide > Customizing the User Interface > Using Styles and Themes > Using the StyleManager class | |||
|
|||
|
|||
|
|||
The StyleManager class lets you access class selectors and type selectors in ActionScript. It also lets you apply inheritable and noninheritable properties globally. Using the StyleManager, you can define new CSS style declarations and apply them to controls in your Flex applications.
To set a value using the StyleManager, use the following syntax:
mx.styles.StyleManager.getStyleDeclaration(style_name).setStyle("property", value);
The style_name can be the literal global, a type selector such as Button or TextArea, or a class selector that you define in either the <mx:Style> tag or an external style sheet. Global styles apply to every object that does not explicitly override them.
The getStyleDeclaration() method is useful if you apply a noninheritable style, such as textDecoration, to many classes at one time. This property refers to an object of type CSSStyleDeclaration. Type selectors and external style sheets are assumed to already be of type CSSStyleDeclaration. Flex internally converts class selectors that you define to this type of object.
The following examples illustrate applying style properties to the Button, myStyle, and global style names:
<?xml version="1.0"?>
<!-- styles/USingStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp(event)">
<mx:Style>
.myStyle {
color: red;
}
</mx:Style>
<mx:Script><![CDATA[
import mx.styles.StyleManager;
public function initApp(e:Event):void {
// Type selector; applies to all Buttons and subclasses
// of Button.
StyleManager.getStyleDeclaration("Button").
setStyle("fontSize",24);
// Class selector; applies to controls using the style
// named myStyle. Note that class selectors must be prefixed
// with a period.
StyleManager.getStyleDeclaration(".myStyle").
setStyle("color",0xCC66CC);
// Global style: applies to all controls.
StyleManager.getStyleDeclaration("global").
setStyle("fontStyle","italic");
}
]]></mx:Script>
<mx:Button id="myButton"
label="Click Here"
styleName="myStyle"
/>
<mx:Label id="myLabel"
text="This is a label"
styleName="myStyle"
/>
</mx:Application>
|
NOTE |
|
If you set either an inheritable or noninheritable style to the |
You can create CSS style declarations by using ActionScript with the CSSStyleDeclaration class. This lets you create and edit style sheets at run time and apply them to classes in your Flex applications. To change the definition of the styles or to apply them during run time, you use the setStyle() method.
The StyleManager also includes a setStyleDeclaration() method that lets you apply a CSSStyleDeclaration object as a selector, so you can apply a style sheet to all components of a type. The selector can be a class or type selector.
The following example creates a new CSSStyleDeclaration object, applies several style properties to the object, and then applies the new style to all Button controls with the StyleManager's setStyleDeclaration() method:
<?xml version="1.0"?>
<!-- styles/StyleDeclarationTypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.styles.StyleManager;
private var myDynStyle:CSSStyleDeclaration;
private function initApp():void {
myDynStyle = new CSSStyleDeclaration('myDynStyle');
myDynStyle.setStyle('color', 'blue');
myDynStyle.setStyle('fontFamily', 'georgia');
myDynStyle.setStyle('themeColor', 'green');
myDynStyle.setStyle('fontSize', 24);
// Apply the new style to all Buttons. By using a type
// selector, this CSSStyleDeclaration object will replace
// all style properties, causing potentially unwanted
// results.
StyleManager.setStyleDeclaration("Button",myDynStyle, true);
}
]]></mx:Script>
<mx:Button id="myButton" label="Click Me"/>
</mx:Application>
When you set a new CSSStyleDeclaration on a type selector, you are replacing the entire existing type selector with your own selector. All style properties that you do not explicitly define in the new CSSStyleDeclaration are set to null. This can remove skins, margins, and other properties that are defined in the defaults.css file or other style sheet that you may have applied already.
To avoid nullifying all style properties, you can use a class selector to apply the new CSSStyleDeclaration object. Because a class selector's style properties do not replace existing type selector properties, the components maintain their default settings, as the following example shows:
<?xml version="1.0"?>
<!-- styles/StyleDeclarationClassSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.styles.StyleManager;
private var myDynStyle:CSSStyleDeclaration;
private function initApp():void {
myDynStyle = new CSSStyleDeclaration('myDynStyle');
myDynStyle.setStyle('color', 'blue');
myDynStyle.setStyle('fontFamily', 'georgia');
myDynStyle.setStyle('themeColor', 'green');
myDynStyle.setStyle('fontSize', 24);
// Apply the new style using a class selector.
// This maintains the values of the existing style
// properties that are not over-ridden by the new
// CSSStyleDeclaration.
StyleManager.setStyleDeclaration(".myButtonStyle",
myDynStyle, true);
// You can also apply the new style by setting the
// value of the styleName property in ActionScript.
myOtherButton.styleName=myDynStyle;
}
]]></mx:Script>
<mx:Button id="myButton"
label="Click Me"
styleName="myButtonStyle"
/>
<mx:Button id="myOtherButton" label="Click Me"/>
</mx:Application>
To remove a CSSStyleDeclaration object, use the StyleManager's clearStyleDeclaration() method, as the following example shows:
<?xml version="1.0"?>
<!-- styles/ClearStyleDeclarationExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.styles.StyleManager;
private var myDynStyle:CSSStyleDeclaration;
private function initApp():void {
myDynStyle = new CSSStyleDeclaration('myDynStyle');
myDynStyle.setStyle('color', 'blue');
myDynStyle.setStyle('fontFamily', 'georgia');
myDynStyle.setStyle('themeColor', 'green');
myDynStyle.setStyle('fontSize', 24);
StyleManager.setStyleDeclaration(".myButtonStyle",
myDynStyle, true);
}
private function resetStyles():void {
StyleManager.clearStyleDeclaration(".myButtonStyle",
true);
}
]]></mx:Script>
<mx:Button id="myButton"
label="Click Me"
styleName="myButtonStyle"
click="resetStyles()"
/>
</mx:Application>
Using the clearStyleDeclaration() method removes only the specified selector's styles. If you apply a class selector to a component, and then call the method on that component's class selector, the component's type selector styles remain.
The setStyleDeclaration() and clearStyleDeclaration() methods are computationally expensive. You can prevent Adobe Flash Player from applying or clearing the new styles immediately by setting the update parameter to false.
The following example sets new class selectors on different targets, but does not trigger the update until the last style declaration is applied:
<?xml version="1.0"?>
<!-- styles/UpdateParameter.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.styles.StyleManager;
private var myButtonStyle:CSSStyleDeclaration =
new CSSStyleDeclaration('myButtonStyle');
private var myLabelStyle:CSSStyleDeclaration =
new CSSStyleDeclaration('myLabelStyle');
private var myTextAreaStyle:CSSStyleDeclaration =
new CSSStyleDeclaration('myTextAreaStyle');
private function initApp():void {
myButtonStyle.setStyle('color', 'blue');
myLabelStyle.setStyle('color', 'blue');
myTextAreaStyle.setStyle('color', 'blue');
}
private function applyStyles():void {
StyleManager.setStyleDeclaration("Button", myButtonStyle, false);
StyleManager.setStyleDeclaration("Label", myLabelStyle, false);
StyleManager.setStyleDeclaration("TextArea", myTextAreaStyle, true);
}
]]></mx:Script>
<mx:Button id="myButton" label="Click Me" click="applyStyles()"/>
<mx:Label id="myLabel" text="This is a label"/>
<mx:TextArea id="myTextArea" text="This is a TextArea"/>
</mx:Application>
When you pass false for the update parameter, Flash Player stores the selector but does not apply the style. When you pass true for the update parameter, Flash Player recomputes the styles for every visual component in the application.
Flex 2.01
