Flex 3 para Flex 4 : Estilos

Criar estilos no Flex 4 é quase igual a criar no Flex 3, atento apenas em pequenas mudanças devido essa fase de transição e suporte ao Halo. veja as mudanças.

Flex 3 para aplicar estilo na sua aplicação você fez:

1
2
3
4
5
6
7

< ?xml version="1.0" encoding="utf-8"?>
<mx : Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx : Style source="Estilo.css"/>
 
 
</mx>

No Flex 4 você faz:

1
2
3
4
5
6
7
8
9

< ?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">
	<fx :Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx>
	<fx :Style source="Estilo.css"/>
</s>

Absolutamente não existe diferença entre o uso de um para o outro. Esse exemplo é apenas para uso de CSS externo ao código mxml. Uma vez que você não é tão inocente em escrever o CSS da sua aplicação dentro do próprio arquivo mxml do application.

Mudanças no namespace

Nem tudo são flores, você achou que isso ia passar direto, você pode usar e continuar usando seus componentes do Flex 3 restrito apenas alguns, contanto que respeitem as novas regras de ciclo de vida, você não terá problemas aparente.
O que mudou é que se você continuar usando seus componentes do Flex 3 com o Flex 4 para funcionar os estilos você terá que adicionar um namespace ao arquivo de CSS e também um seletor na frente de cada tag padrão do componente. Por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* CSS file */
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
 
 
/*
 Para estilizar seu componente Button do Flex 3 você tem
que fazer isso
*/
mx|Button{
	  /* suas preferencias do CSS aqui */
}
 
/*
	Para usar o Button do pacote Spark você usa assim
*/
s|Button {
	/* suas preferencias do CSS aqui */
}

Veja que não só os css do Flex 3 ainda funcionam como também você poderá mesclar ambos os css, tanto do 4 quanto do 3.

Suporte da ferramenta Flash Builder para CSS:

Você estáva acostumado a ter o Flex Builder com sua facilidade absurda em criar CSS e customizar suas telas, deixando-as cute cute para seus usuários finais. Porém o time de desenvolvimento do Flash Builder (novo nome para o antigo Flex Builder), decidiu tirar o suporte ao CSS da ferramenta e obriga-lo a usar o Flash Catalyst e forcar você a ser um pouco mais ninja. Vai ver algum desenvolvedor com alma boa tenha portado o Flex 3 Style Explorer para o Flex 4 e assim facilitar novamente sua vida.