Posts Tagged ‘getStyle()’

IMPORTANT POINTS ABOUT STYLE IN Flex 4 or Flash Builder

January 28th, 2011 by aabhaanjan

1. The default style sheets

Flex includes defaults.css style sheets in the following SWC files:

a.) flex4.swc (Spark theme style sheet)

b.)  frameworks.swc (default framework style sheet)

By default  all applications use these style sheets. These style sheets apply consistent styles across all components.

2. Local style definitions

We Use the <fx:Style> tag to define styles that apply to the current document and its children. The <fx:Style> tag contains style sheet definitions that adhere to the CSS syntax.

The <fx:Style> tag uses the following syntax to define local styles:

[xml]

<fx:Style>

@namespace namespace_identifiernamespace_string;

selector_name {

style_property: value;

[…]

}

</fx:Style>

[/xml]


3. StyleManager class

Using the StyleManager, we  can define new CSS style declarations and apply them to controls in the applications.

Setting styles with the StyleManager

To set a value using the StyleManager, use the following syntax:

styleManager.getStyleDeclaration(style_name).setStyle(“property”, value);

4. getStyle() and setStyle() methods

we use the setStyle() and getStyle() methods to manipulate style properties on instances of controls. The following example sets the fontSize to 15 and the color to 0x9933FF on only the myButton instance:

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”

creationComplete=”initApp()”>

<fx:Script><![CDATA[

public function initApp():void {

myButton.setStyle(“fontSize”,15);

myButton.setStyle(“color”,0x9933FF);

}

]]></fx:Script>

<s:Button id=”myButton” label=”Sample of setStyle”/>

</s:Application >

[/xml]

5. Inline styles

Use attributes of MXML tags to apply style properties. These properties apply only to the instance of the control.

The following example sets the fontSize to 15 and the color to 0x9933FF on the myButton instance:

[xml]

<?xml version=”1.0″?>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:mx=”library://ns.adobe.com/flex/mx”

xmlns:s=”library://ns.adobe.com/flex/spark”>

<s:Button id=”myButton” color=”0xFF0033″ fontSize=”15″ label=”Sample of InlineStyle”/>

</s:Application>

[/xml]

6. Setting global styles

To set a global style that is inheritable, we set its value on the container.

All children of that container, including other containers, inherit the value of that style property.

By using global styles, we can apply noninheritable styles to all controls that do not explicitly override that style.

Flex provides the following ways to apply styles globally:

a.) StyleManager global style

b.) CSS global selector

Tags: , , , , , , , , , ,