Styles in Flex

Flex provides many ways to apply styles to UI components and make the UI appealing. It has been designed to provide a very attractive UI and interaction which other technologies lack to provide. Lets looks at some the facilities Flex provide to modify the appearance of Flex components.

Flex components have properties can define the size of a font or text colour or the background colour of a container. In Flex, some styles are inherited from parent containers to their children, and across style types and classes. This means that you can define a style once, and then have that style apply to all controls of a single type or to a set of controls. Like CSS in HTML, you can override individual properties for each control at a local, component, or global level, giving you great flexibility in controlling the appearance of your applications. At the same time, Flex does not support controlling all aspects of component layout with CSS. Properties such as x, y, width, and height are properties, not styles, of the UIComponent class and, therefore, cannot be set in CSS. Other properties, such as left, right, top, and bottom are style properties and are used to manipulate a component’s location in a container.

We will go through three different methods of applying the styles. They are: External style sheets, Local style definitions and Inline style definitions.

External Style Sheets:

You can use the CSS files apply styles to a document or across entire applications. You can point to a style sheet with simple tag. The following example shows how to add an external CSS file to a Flex application.

<mx:script source=”test.css”>

You can include the CSS files that come with the SDK to get a better look and feel. Also you can create style using photoshop.

Local Style Definitions:

You can set the style for a MXML file or application using the tag. In this case the style becomes local to that particular file. You can apply different style attributes like color, font attributes, padding etc on any components.The following example shows how to apply style locally:

<?xml version="1.0"?>
<mx:application mx="http://www.adobe.com/2006/mxml">
<mx:style>
.redFont {
fontSize: 15;
color: #FF0000;
}
</mx:Style>
<mx:button stylename="redFont" label="Red Font">
<mx:button label="No Style Applied">
</mx:Application>

Inline Style Definitions:

Another alternative method is to apply style to a component inline. These properties apply only to the instance of the control. This is the most efficient method of applying instance properties because no ActionScript code blocks or method calls are required. In this case we apply styles in the component tag itself. For example if we want to apply font size 15 to the button we write:

<mx:button fontsize="15" label="A button"/>

Similarly, we can apply other styles like color, theme color etc.

For now we have talked about the ways to apply styles using the tag. You can make use of Action Script also to apply styles. You can make use of setStyle() method to set the style to any components. Another way is to use Style Manager to manipulate the style of components.I will talk about these methods later as a separate blog entry.