AS 3.0/ Flex

Posso mudar propriedades do CSS em run-time?

Recebi um e-mail hoje de uma desenvolvedora Flex, e como é muito comum receber de vários outros ( piars), comum esse nome aqui no Rio Grande do Sul, resolvi dá uma certa prioridade para ele.

Bom, em resposta, é sim possível, fácil e rápido, por exemplo:

* Mudando a cor do background da mx:Application

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
<mx:Application initialize="mudaBackGround()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
 
<mx:Script>
	<![CDATA[
 
               import mx.controls.ColorPicker;
 
       public var novaCor:ColorPicker;
 
       private function mudaBackGround():void
        {
        	novaCor = new ColorPicker();
        	novaCor.x = 20;
        	novaCor.y = 20;
        	addChild(novaCor);
 
 
novaCor.addEventListener(ColorPickerEvent.CHANGE,dispara);
        }
        private function dispara(event:ColorPickerEvent):void
        {
            // uso o método setStyle, e ele seta para eu o novo valor
           // A propriedade do CSS que tou mudando é backgroundColor
           mx.core.Application.application.setStyle("backgroundColor",novaCor.selectedColor);
         }
	]]>
</mx:Script>
</mx:Application>

* Mudando o Corner Radius de meu Panel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Script>
		<![CDATA[
 
			public var novoValor:int = 0;
			public function setaRadius():void
			{
				painel.setStyle("cornerRadius",novoValor);
 
			}
			public function redondo():void
			{
				painel.setStyle("cornerRadius",20);
			    painel.setStyle("roundedBottomCorners",true);
			}
		]]>
	</mx:Script>
 
	<mx:Panel cornerRadius="20" id="painel" width="300" height="300" x="140" y="24">
		<mx:Button label="Setar cornerRadius = 0" click="setaRadius()"/>
		<mx:Button click="redondo();" label="Setar Bordas acima  e abaixo redondas"/>
	</mx:Panel>
</mx:Application>

Qualquer propriedade do CSS é acessível dessa forma, o uso disso pode ser aplicado na troca de telas ou configuração de telas amigáveis para usuários costumizarem da forma que eles bem entenderem a tela que eles trabalham no dia-a-dia.