Usando CSS no Flex
O FlexBuilder agiliza muito a criação de interfaces, só que se você construir uma aplicação sem mudar em nada os estilos padrão do Flex, seu programa vai ficar com exatamente a mesma cara da aplicação do teu colega, o que não é muito legal.
Existem recursos avançados para se criar skins no flex, onde você define os estilos de cada cantinho da sua aplicação. Isso pode ser feito, por exemplo, com o próprio Flash, onde você define novos estilos para os botões, barras de rolagem, combo boxes e tudo o mais que você possa imaginar.
Mas neste breve artigo pretendo cobrir um assunto mais simples: a modificação da interface padrão através do uso de arquivos CSS.
Assim como no HTML, o Flex pode usar o CSS para modificar a aparência da aplicação, só que ele possui propriedades diferentes daquelas encontradas em arquivos CSS para formatação de páginas web. Aliás, ele possui muitas propriedades a mais, diga-se de passagem. Para se ter uma idéia do que é possível modificar somente usando CSS, dê uma olhada no Flex Style Editor.
Para usar o editor visual do CSS no FlexBuilder é muito simples: crie um novo arquivo CSS em uma pasta qualquer do seu projeto (botão direito na pasta, “New” e em seguida “CSS File”) e abra-o. Perceba que, apesar de não se tratar de um arquivo MXML, você ainda tem as opções “Source” e “Design”. Ao clicar em Design, você já estará no editor visual do seu arquivo CSS. Caso queira ver/editar o fonte do CSS, clique em “Source”.
No combo Style aparecem os componentes que você escolheu modificar. Para adicionar algum componente à lista, clique no botão “New style…”, e para remover as configurações para um componente (ou classe), clique em “Delete style”. Veja que você pode definir configurações para um componente específico (como todos os Buttons da sua aplicação), para componentes específicos que pertencem a uma determinada classe (classe aqui é de configurações do CSS, e não da orientação a objetos, assim como no HTML), para uma determinada classe (independente do tipo do componente) ou para todos os componentes.
Quando você estiver editando as configurações globais (que servirão para todos os componentes), escolha um componente como exemplo para visualizar como as configurações serão aplicadas.
Caso você queira modificar as características dos botões da sua aplicação, adicione-o à lista de estilos disponíveis através do botão “New style…”. Você verá uma série de botões em vários estados diferentes, que servem de exemplo para você ver como ficará o seu componente em cada um daqueles estados. Repare que as características dos botões mudam conforme você muda suas configurações no painel “Flex Properties”, no canto direito da tela.
Depois de modificar tudo do jeito que mais lhe agrade, é necessário especificar na sua aplicação que ela deverá usar o seu arquivo CSS para formatar os componentes. Para isso, basta adicionar a seguinte tag ao seu arquivo MXML:
<mx:Style source="caminho/para/o/seu/arquivo.css" />
Agora basta rodar sua aplicação para ver que a cara dela não é mais a mesma!
Caso deseje modificações mais “profundas” (o que vale muito a pena), leia a um artigo sobre como criar skins com Flash, Photoshop Illustrator ou Fireworks, . Uma visita ao ScaleNine também te dará uma noção bem clara sobre o que é possível fazer com skins.
Poderia avaliar este artigo, por favor? |
  Loading ... |