Trabalhando com CSS no Adobe Flex Builder 3

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

image

Criando um .CSS; 

image

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.

image 

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.image 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.

image

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:

image

Com esse código gerado pelo FlexBuilder:
 image

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/

9 thoughts on “Trabalhando com CSS no Adobe Flex Builder 3

  1. Pingback: Manifesto Flex brasil - Rodrigo Fraga - RIA Evangelist

  2. Harry Potter

    Oh! What a super internet site. I received here by situation, as a result of my friend’s blogging site. I like your texts. They’re fairly exciting. And I’m thinking if I could use a part within your texts in my term peper. Please write me again if I can. Thanks.

    Like

    Reply
  3. Selma Semel

    Hi y’all, I’m new to all this blogging stuff But, I’ve just recently started my own website, and I really like your site. I located it while looking for interesting articles on bing. I’m going to add it to my favorites to view future posts. You can take a look at my blog at http://www.appsagents.com to see what you think.

    Like

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s