O Adobe Flex é resposável por cuidar da camada view de um sistema, só que em nível de desenvolvimento o Flex não é apenas Visual, mas exige uma certa analize sobre como será arquiteturado e etc…

Logo, o ideal é que o desenvolvimento seja divido em 2, uma parte que cuida do controle das telas, lógicas de telas, e a  comunicação com o Beck-end.

Outra parte é o Design do sistema, este que gera componentes, padrões de cores e etc.. Estes fatores as vezes desconsiderado por muitos, mas sempre lembro: O usuário ve tela, não ve código!.

Hoje gostaria de apresentar a vocês, algumas de minhas experiências com Design, (É também gosto de dar uma de web designer) e todo Designer sabe o quão terrível é montar padrões de tela com html/js/css fatores como: Falta de uma boa IDE, Fazer CSS compátiveis para os browsers.

Já no Flex, com o Flex Builder 3, facilita muito a vida do designer, pois através do plugin visual, é capaz de se realizar quase todas as configurações de Layout e design.

Vamos a um exemplo:

Crie um novo projeto no Flex Builder 3;
*O Compiler deve usar o Flex SDK 3

Criando um .CSS; 

Selecionando um componente para personalizar;

Após criar o css, o Builder já disponibiliza um modo visual para que você possa trabalhar os styles de cada componente, para isso clique no botão new Style, e selecione um componente.

 

A caixa de diálogo aberta, lhe da 4 opções:
All Components
(Aplicar o estilo a todos os componentes)

All Components with style name
(Aplica o estilo usando o método ‘styleName’ dos componentes)

Specific Component
(Aplica o estilo a um específico componente)

Specific Component with style name
(Aplica o estilo a um específico componente usando o método ‘styleName’ dos componentes) No meu caso, vou selecionar o Componente TitleWindow  para a personalização. Paineis de personalização do CSS;

Como na figura abaixo, podemos ver que o FlexBuilder dá a você n opções para realizar a personalização do seu componente.

Perceba que no FlexProperties, existe alguns botões “Edit” quando se clica ali, o flex builder automaticamete cria um filho do css, este podendo ser reaproveitado por outros componentes.

Ex: O StatusBar do TitleWindow, pode ser o mesmo style do StatusBar do Panel.

Componente Personalizado Após umas rápidas clicadas, meu componente ficou assim:

Com esse código gerado pelo FlexBuilder:
 

Percebam que com um control+espaço, posso ter mais várias opções de personalização.

Adicionando o .CSS ao Application;

Para adicionar é muito fácil, é só você ir no seu Application, e colocar a seguinte tag:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
    layout=”absolute”>

    <mx:Style source=”styles.css”/>
</mx:Application>

Ao compilar com um CSS no Application, o compilador irá analizar todo o CSS e verificar se todos os styles estão sendo usados, isso é interessante pois se você criar um stiyle e não usar, o compilador irá avisar lançando um Warning.

Bom acredito que com esse breve tutorial consegui deixar claro como trabalhar com CSS no FlexBuilder 3.

Abraço pessoal e até logo!!

o/