Uma das grandes modificações na arquitetura do Adobe Flex 4 foi a inclusão de skins e a completa separação entre lógica e visualização. Mas o que isso realmente quer dizer ??? Vamos explicar neste artigo.

Você já deve ter percebido que o Flex 4 possui uma nova arquitetura de componentes, chamada de Spark. Esta nova arquitetura trouxe diversas modificações na forma de como se programa em Flex 4. Talvez possa parecer ruim a princípio, principalmente se você está acostumado com o Flex 3, mas após algum tempo de uso verás que as modificações no framework melhoraram o flex de uma forma geral.

Antes de entender skins é preciso entender três letrinhas chamadas FXG: Flash Xml Graphics. O Flex 4 agora suporta todo o processo de desenho baseado em FXG, ou seja, agora é possível desenhar linhas, retângulos, círculos, elipses, fazer preenchimento com cores (fill) e gradientes, realizar filtros e máscaras, alpha e blend. Com estas possibilidades, podemos desenhar praticamente qualquer forma possivel e com ela “desenhar” nossos componentes. Claro que desenhar no Flex 4 é extremamente tedioso, porque não existe (ainda) uma ferramenta gráfica embutida no Flex, mas felizmente pode-se desenhar em um “programinha” chamado Photoshop, ou então o Ilustrator, e exportar o gráfico para FXG. Resumindo então, para entendermos Skins, é preciso saber que o Flex consegue fazer desenhos primários (reta, círculo, fill etc..)

Um exemplo do FXG está na imagem a seguir, retirado do meu artigo na imasters:

Agora podemos explicar melhor as Skins. Uma Skin é um arquivo MXML que contém diversos desenhos FXG, além de outros componentes e um pouco de código. Vamos a um exemplo bastante simples, mas que usa Skins: comboBox. O componente spark ComboBox possui a skin spark.skins.spark.ComboBoxSkin, que possui um código bastante extenso, no qual vamos exibir algumas partes. Inicialmente o desenho do comboBox é o seguinte:

Nesta imagem podemos ver o ComboBox juntamente com o Outline e um pouco do código mxml da Skin. A seta vermelha indica o botão do combobox usado para exibir a lista de itens. O código está compreendido no quadrado vermelho (1), onde temos um s:Button. A seta azul exibe o componente TextInput que faz parte do combobox. O código mxml está na no quadrado azul (2). Como podemos ver, o Combobox é formado por um textInput e um botão.

Repare que o botão possui a sua própria skin (quadrado vermelho, propriedade skinClass). Este botão, apesar de ser s:Button, possui uma seta desenhada, que está definida na classe spark.skins.spark.ComboBoxButtonSkin. Ao analisar esta classe, podemos ver:

Agora o conceito de skins passa a ficar mais claro: é um mxml que define como o componente está desenhado. No próximo artigo, iremos criar uma skin para adicionar um ícone a um  s:Button.