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.
[like-gate]
upSkin

overSkin e downSkin

disabledSkin

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

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

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.

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

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