MACROMEDIA FLEX-FLEX ACTIONSCRIPT LANGUAGE User Manual download pdf (Page 37)

TUTORIALS POINT

Simply Easy Learning Page 32

You can define styles within UI container component using <fx:Style> tag

Class Level Selector

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

/* class level selector */

.errorLabel {

color: red;

}

</fx:Style>

Assign styles to UI component using styleName property.

<s:Label id="errorMsg" text="This is an error message" styleName="errorLabel"/>

Id Level Selector

Style UI component using id selector.

<fx:Style>

/* id level selector */

#msgLabel {

color: gray;

}

</fx:Style>

<s:Label id="msgLabel" text="This is a normal message" />

Type Level Selector

Style one type of UI Component in one go.

<fx:Style>

/* style applied on all buttons */

s|Button {

fontSize: 15;

color: #9933FF;

}

</fx:Style>

<s:Button label="Click Me!" id="btnClickMe"

click="btnClickMe_clickHandler(event)" />

Flex Style with CSS Example

Let us follow the following steps to check css styling of a Flex application by creating a test application:

Step

Description

1 2 ... 32 33 34 35 36 37 38 39 40 41 42 ... 123 124

No comments

MACROMEDIA FLEX-FLEX ACTIONSCRIPT LANGUAGE User Manual Page 37