Styling components
Requirements
User level
All
Required products
- Flex (Download trial)
Styles are useful for defining the look and feel (appearance) of your Adobe Flex applications. You can use them to change the appearance of a single component, or apply them across all components.
There are many ways to apply styles in Flex. Some provide more granular control and can be performed programmatically. Others are not as flexible, but can require less computation. In Flex, you can apply styles to controls in the following ways:
Flex does not support controlling all visual aspects of a component with Cascading Style Sheets (CSS). Properties such as x, y, width and height are properties, not styles, of the UIComponent class and, therefore, cannot be set in CSS. You must also be aware of which properties your theme supports. The default theme in Flex does not support all style properties.
A theme is a set of styles that define the look and feel of a Flex application. A theme can define something as simple as the color scheme or common font for an application, or it can be a complete reskinning of all the components used by the application. Themes usually take the form of a SWC file. However, themes can also be a CSS file and embedded graphical resources, such as symbols from a SWF file.
Note: For more information on supported style properties in themes see "About themes" in the Flex 4 documentation. To determine the styles that a specific visual component supports, see the styles section of the component in ActionScript 3 Reference for the Adobe Flash Platform.
Using local style definitions
You can create local style definitions in your MXML files using the <fx:Style> tag. This tag contains style sheet definitions that adhere to the CSS 2.0 syntax. These definitions apply to the current document and all children of the current document.
The following example creates two class selectors, .fontStyle and .backgroundColor. The BorderContainer , Button, and one of the Labels apply the styles using their styleName properties. As this example shows, using class selectors lets you give different styles to instances of the same component.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- StylesStyleTag -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="150" height="140">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.fontStyle {
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
color: maroon;
}
.backgroundColor {
background-color: #ffffcc;
}
</fx:Style>
<s:BorderContainer styleName="backgroundColor" width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="10" horizontalAlign="center" paddingTop="10"/>
</s:layout>
<s:Label text="Unstyled Text"/>
<s:Label text="Styled Text" styleName="fontStyle"/>
<s:Button styleName="fontStyle" label="Submit"/>
</s:BorderContainer>
</s:Application>
Tip: If you want all instances of a certain component to share the same style, you can use a CSS type selector. For example, by using the following type selector, all BorderContainer instances in your application will have a background color of blue.
BorderContainer{ backgroundColor: #ccffff; }
Result
Using external style sheets
Flex supports external CSS style sheets. To apply a style sheet to the current document and its child documents, use the source property of the <fx:Style> tag. External style sheet files should be in the folder that contains your MXML source files. By default, this is the src folder in your MXML project.
Note: You should try to limit the number of style sheets used in an application, and set the style sheet only at the top-level document in the application (the document that contains the <s:Application> tag). If you set a style sheet in a child document, unexpected results can occur.
The following example defines two CSS class selectors in an external CSS file called external.css. You use an external CSS file in a Flex application by specifying its path and file name in the source property of the <fx:Style> tag.
Example:
External CSS file
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.fontStyle {
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
color: blue;
}
.backgroundColor {
background-color: #ccffff;
}
MXML file
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="150" height="140">
<!-- StylesExternal.mxml -->
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Style source="styles/external.css"/>
<s:BorderContainer styleName="backgroundColor" width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="10" horizontalAlign="center" paddingTop="10"/>
</s:layout>
<s:Label text="Unstyled Text"/>
<s:Label text="Styled Text" styleName="fontStyle"/>
<s:Button styleName="fontStyle" label="Submit"/>
</s:BorderContainer>
</s:Application>
Result
Using the setStyle() method
Use the setStyle() method to manipulate style properties on instances of controls in ActionScript. This method of applying styles requires a greater amount of processing power on the client than style sheets. However setStyle() provides more granular control over how styles are applied.
The setStyle() method takes two arguments: the style name and the style value.
Tip: When you are instantiating an object and setting the styles for the first time, you should try to apply style sheets rather than use the setStyle() method, which is computationally expensive. You should use this method only when you are changing an object's styles during run time.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- StylesSetStyle.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="160" height="160"
creationComplete="application_creationCompleteHandler(event)">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
public function application_creationCompleteHandler(e:Event):void {
styleManager.getStyleDeclaration("global").setStyle("fontSize", 14);
styleManager.getStyleDeclaration("global").setStyle("color", "blue");
styleManager.getStyleDeclaration("spark.components.BorderContainer").setStyle("backgroundColor", "#ffddff");
}
]]>
</fx:Script>
<s:BorderContainer width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="10" horizontalAlign="center" paddingTop="10"/>
</s:layout>
<s:Label id="myLabel" text="Styled Text"/>
<s:Button id="myButton" label="Submit"/>
</s:BorderContainer>
</s:Application>
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
