Home Tutorial Flex Flex4 Components Global style in Flex4

 
 

Global style in Flex4
Posted on: June 22, 2010 at 12:00 AM
You can set the style using global selector. It set the same style property foe all components in the application.

Global style in Flex4:

You can set the style using global selector. It set the same style property foe all components in the application. You can use the setStyle() method for set the style globally for all components. In this example you can see how we can use global style using simple way and setStyle() method.

Example:

<?xml version="1.0" encoding="utf-8"?>

<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"

minWidth="955" minHeight="600" creationComplete="init(event)">

<!-- Global Style -->

<fx:Style>

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

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

global{

font-family:"Verdana";

font-weight:bold;

button-height:50px;

button-width:100px;

color:#003366;

text-decoration:underline;

chrome-color:#7578ef;

}

</fx:Style>

<fx:Script><![CDATA[

public function init(e:Event):void {

// Global Style using styleManager

styleManager.getStyleDeclaration("global").setStyle("fontSize", 12);

styleManager.getStyleDeclaration("global").setStyle("color", 0x003366);

}

]]>&</fx:Script>

<s:Panel title="Global Style Example/font>" width="337" height="156">

<s:Button x="130" y="27" label="Button"/>

<s:Label x="63" y="78" text="This is a Global style example"/>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for Global style in Flex4:


Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.