Temas e CSS no Flex

Fui solicitado a multiplicar o conhecimento que tenho sobre esses assuntos para diminuir o tempo de resposta entre uma “coisinha boba de arrumar” e outra, que apesar de ser boba (entenda uma coisa boba como uma coisa simples), agrega valor à aplicação.

Sei que não entra no mérito deste post, mas vale lembrar que coisas simples são coisas complexas e levam tempo. Geralmente mais que o normal de uma implementação simples de programas não visuais. Se é simples, é porque existe uma complexidade (do caralho, perdão da expressão). Não tente me provar o contrário (o que é bem simples)!

Um premissa até a versão 3 do Flex é que ele não permite que seja carregado, em runtime, arquivos CSS sem pré-compilação. Isso significa que para mudar um estilo sem compilar todo o projeto, é necessário que o CSS que se deseja aplicar esteja compilado. Compilar um CSS quer dizer gerar um SWF contendo as declarações de estilo e seus assets (jpg, gif, outros swf, mp3, etc).

Para fazer isso, nós usamos o compilador do Flex, o mxmlc, e passamos como argumento o CSS que se deseja compilar, seus assets e suas bibliotecas, se houver. Particularmente, prefiro gerar uma biblioteca com os assets, a partir de um projeto de biblioteca, e usá-la na compilação do tema. É menos código pra digitar (se não tiver um build que faça o trabalho de compilar pra você).

Não há diferença entre Tema e CSS. Tema é apenas um conjunto de estilos visuais que dá identidade para a aplicação. O CSS é uma tecnologia de criação destes estilos. No Flex você pode compilar sua aplicação com um tema, por meio de diretivas no compilador; ou apenas pedir para carregar declarações de estilo. Acho esta última, a opção mais elegante e é sobre a qual descrevi no parágrafo anterior.

Há três maneiras de colocar estilo numa aplicação:

1. Arquivo CSS: Mais indicado. É o mesmo que anterior, porém em outro escopo, deixando mais claro os níveis de desenvolvimento em camada, facilitando a manutenção.
2. No corpo do documento: Basta abrir a tag Style, adicionar um seletor (styleName ou nome da classe) e setar as propriedades;
3. Inline: Propriedades adicionadas na própria tag do componente;

Há uma prioridade que o compilador segue em relação ao local onde as propriedades foram setadas, e segue a ordem na qual foi colocada acima. Isso quer dizer que ao setar uma propriedade no arquivo CSS, a mesma no corpo do documento e a mesma inline, a que irá ficar é aquela que está inline. Vamos adotar o estilo de desenvolvimento usando apenas arquivos CSS. Fazer uso dos outros estilos não é proibido. No entanto, aplicando o uso de arquivos CSS, irá facilitar a aplicação de novos temas, como será visto adiante.

Vale lembrar que o CSS do Flex é uma jogada de marketing e aproveitamento de sintaxe. Ele não tem nada a ver com a especificação de CSS do W3C. Muitas coisas que se faz com CSS de HTML, é impossível se fazer em Flex, como por exemplo colocar um float:left ou display:block na declaração de um estilo. Nem faz sentido, se pensar no ciclo de vida de um componente Flex, com todos os estados e métodos específicos para tratar cada comportamento (updateDisplayList, por exemplo).

Outra coisa que sinto falta é a possibilidade de aplicar uma regra em mais de um elemento. Por exemplo, não dá pra criar uma declaração que muda a cor de todos os botões (Button) filhos de ControlBar. Se o CSS do Flex implementasse pelo menos a especificação de nível 1 do W3C para CSS, bastaria criar a declaração “ControlBar Button {...”. Mas isso não é possível! Minha esperança é que há propostas conhecidas pelo time da Adobe (implementar a especificação de nível 2 do CSS), mas sem previsão de entrega e com status de “sob investigação”...

Sobre o detalhe da compilação do CSS para usar com o StyleManager, existe um projeto que implementa o parser Batik CSS, da Apache, em AS3. Esse parser originalmente implementa a especificação do W3C em Java. Na versão AS3, algumas características do Flex, presentes no compilador, não são suportadas por ele, como @font, Embed() e outras (eu nunca precisei usar isso). Acho que este projeto não existe na prática, pois não o encontrei. Vi apenas uma menção num fórum.

Para finalizar, segue abaixo 10 passos para criar, manter e compilar “temas” usando o FlexBuilder 3:

1. Coloque o compilar na path do sistema;


2. Crie um projeto de biblioteca Flex (Flex Library Project);
3. Crie uma pasta src e uma assets, onde ficarão os arquivos CSS e os arquivos de recursos;
4. Crie o arquivo um arquivo chamado defaultTheme.css (por exemplo) com as declarações de estilo (styleNames e nomes de componentes);
5. Os recursos referenciados em defaultTheme.css devem estar na pasta assets. Por exemplo, o ícone de um botão;
6. Gere a biblioteca extraindo o SWF, sempre verificando se todos os recursos estão marcados (nas propriedades do projeto);
7. Abra um prompt de comando e chegue até a pasta bin do projeto em questão;
8. Extraia o arquivo CSS que se deseja compilar, por exemplo com o comando “unzip defaultTheme.css Themes.swf”;
9. Agora vamos compilar o tema usando a biblioteca defaultTheme.swf para garantir que todos os recursos estão lá: “mxmlc –o defaultTheme.swf –include-libraries=Themes.swf defaultTheme.css”:
   • “-o defaultTheme.swf”: É o nome de saída;
   • “-include-libraries=Themes.swf”; Indica que usaremos a biblioteca Themes.swf, o que nos livra de incluir manualmente cada recurso;
   • “defaultTheme.css”: O nome do arquivo que contém as declarações de estilo.
   
10. Pronto! Basta carregar o defaultTheme.swf pelo StyleManager!

Claro que o ideal é ter um build, como disse anteriormente. Mas ainda não tive tempo de criar um, pois as maiorias de minhas atribuições são simples...

Num próximo post, vou explanar a respeito de como preparar componentes para utilizar declarações de estilo personalizadas e sobre o uso do StyleManager.

Boa sexta e bom final de semana!