Desenvolvendo em Flex: style

Muitas vezes precisamos que uma mesma aplicação fique com aparências diferentes de acordo com o gosto de cada um, por isso vou mostrar como carregar um ou vários CSS em runtime no Flex.

Procurando na internet sobre isso, me deparei com o blog do Fabio Silva dizendo como fazer, então resolvi implementar e mostrar para vocês como fazer.

Como faz?

O css deve ser compilado, (no FlashBuilder) basta clicar com o botão direito do mouse no arquivo do CSS e marcar a opção "Compile CSS to SWF", com isso o CSS será compilado como um arquivo externo, no formato ".swf", ao rodar sua aplicação basta usar a função:

StyleManager.loadStyleDeclarations("./css/css.swf");

Exemplo:

Para fazer o download do fonte clique com o botão direito e depois em "view source".
ou

Código Fonte:

<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600"
               minWidth="955"
               viewSourceURL="srcview/index.html"
               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:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void {
                //função que carrega o CSS
                StyleManager.loadStyleDeclarations("./css/css.swf");
            }
            
            protected function button2_clickHandler(event:MouseEvent):void {
                //função que carrega o CSS
                StyleManager.loadStyleDeclarations("./css/css2.swf");
            }
        ]]>
    </fx:Script>

    <s:Label text="Label Spark"/>

    <mx:Label text="Label MX"/>

    <s:Button label="carregar CSS 1"
              click="button1_clickHandler(event)"/>

    <mx:Button label="carregar CSS 2"
               click="button2_clickHandler(event)"/>
</s:Application>

Por hoje é isso!!!

Sigam o blog e comentem!!

Fontes:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/styles/StyleManager.html
http://fabiophx.blogspot.com/2010/09/carregando-css-em-run-time.html