Como personalizar aparência do botão no Adobe Flex

Se você precisa personalizar a aparência do botão padrão do Adobe Flex, a melhor saída é utilizar estilos com CSS.

Para tanto vamos fazer um exemplo demonstrando passo-a-passo como chegar no resultado obtido na figura abaixo.

O Adobe Flex possui 4 propriedades no CSS para representar os 4 estados possíveis de um botão ou qualquer elemento clicável, que são: upSkin, overSkin, downSkin e disabledSkin.

Essas propriedades recebem uma imagem como parâmetro, com Embed.

Agora é preciso criar as imagens para as 4 propriedades, como as figuras abaixo.

upSkin

overSkin e downSkin

disabledSkin

Após criadas as imagens, é preciso criar o CSS, com o código abaixo:

1
2
3
4
5
6
7

.buttonStyle
{
   	upSkin:Embed(source="up.png");
   	overSkin:Embed(source="down.png");
   	downSkin:Embed(source="down.png");
   	disabledSkin:Embed(source="disabled.png");
}

Adicione a referência do arquivo CSS ao seu aplicativo Flex e referenciar o botão ao estilo criado com a sintaxe:

1
2
3
4
5
6

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Style source="estilo.css" />
	<mx:Button x="10" y="10" label="Botão com estilo clássico - Adobe Flex" height="20"/>
	<mx:Button x="10" y="40" label="Botão com fundo personalizado" width="243" height="20" styleName="buttonStyle"/>		
	<mx:Button x="10" y="70" label="Botão Desativado com fundo personalizado" width="243" height="20" styleName="buttonStyle" enabled="false"/>		
</mx:Application>

Executando a aplicação, você perceberá que o fundo foi alterado, porém esticou para se ajustar ao tamanho do botão.

Para que a imagem não fique distorcida, é necessário usarmos as propriedades: scaleGridTop, scaleGridBottom, scaleGridLeft, scaleGridRight dentro do CSS.

Essas propriedades recebem como parâmetros valores inteiros das posições que ficarão fixas.

Para entender como funciona é preciso primeiro dissecar a imagem de fundo.

Perceba que o recorte (linhas azuis) mostra quais são as dimensões em pixel onde estão localizados os cantos arredondados. Os pontos são Esquerda=10, Direita=40, Topo=9 e Base=11, a partir dessas coordenadas, o Adobe Flex fixará as posições dos cantos e somente esticará o conteúdo que estiver fora das coordenados.

Então substistua o código do CSS pelo código abaixo.

1
2
3
4
5
6
7
8
9
10
11

.buttonStyle
{
 	upSkin:Embed(source="/assets/button_background_up.png",
		scaleGridTop="9", scaleGridBottom="11", scaleGridLeft="10", scaleGridRight="40");
   	overSkin:Embed(source="/assets/button_background_down.png",
		scaleGridTop="9", scaleGridBottom="11", scaleGridLeft="10", scaleGridRight="40");
   	downSkin:Embed(source="/assets/button_background_down.png",
		scaleGridTop="9", scaleGridBottom="11", scaleGridLeft="10", scaleGridRight="40");
   	disabledSkin:Embed(source="/assets/button_background_disabled.png",
		scaleGridTop="9", scaleGridBottom="11", scaleGridLeft="10", scaleGridRight="40");
}

Pronto! Execute a aplicação para ver que a imagem de fundo do botão não estará esticada. Dessa forma você pode criar aplicações com interfaces customizadas utilizando o Adobe Flex de uma maneira bastante simples.

Apenas como um requinte no CSS, vou finalizar o artigo com a definição das cores do label do botão conforme o seu estado incluindo o código abaixo dentro do .buttonStyle.

1
2
3
4

	color:#FFFFFF;
	text-roll-over-color:#FFFFFF;
	text-selected-color:#FFFFFF;
	disabled-color:#000000;

Divirta-se!