Mudando o Skin do ButtonBar a partir de um FXPL

Neste artigo irei dar continuidade a série de posts que o Eduardo anda fazendo sobre catalyst, em especial o post que explica como exportar o fxpl de um “menu wizard” no catalyst. Neste post você vai ver como importar o arquivo fxpl, criar um skin para o ButtonBar, modificar e aplicar o skin criado pelo Eduardo no novo skin do ButtonBar.

Para quem ainda não viu o screencast do Beck sobre skins, vale a pena conferir. Neste screencast o Beck foca bastante no skin do Button, e mostra as regras básicas para se criar um skin. Como o post do Eduardo fala sobre um ButtonBar, irei focar neste componente.

Antes de mais nada, vamos olhar a documentação do ButtonBar:


Pela documentação fica claro que o skin default do ButtonBar (spark.skins.spark.ButtonBarSkin) é composto por 4 partes, sendo 3 delas as partes que representam botões do ButtonBar, o primeiro botão (firstButton), os botões do meio (middleButton) e o último botão (lastButton). Vamos usar os botões que o Eduardo criou para mudar os skins dos botões.

1. Faça o download do arquivo fxpl disponibilizado pelo Eduardo.
2. Importe o fxpl no FlashBuilder




3. Após importar o arquivo, podemos ver a criação de um projeto library, que contém todos os componentes criados no Catalyst e também todos os assets necessários. Vamos nos atentar a 3 arquivos no projeto, Step1ToggleButton que vai ser o firstButton, o Step2ToggleButton que vai representar o middleButton e o Step3ToggleButton que vai ser o lastButton.



4. Após importado, vamos criar o skin do ButtonBar.




5. Agora vamos trocar os skins dos botões do WizzardButtonBarSkin que criamos no passo 4, usando os skins criado pelo Eduardo.

[cc_actionscript]

























[/cc_actionscript]


6. Agora é só utilizar o novo skin e ver o resultado. Lembre-se de importar a biblioteca no seu projeto Flex.

[cc_actionscript]
























[/cc_actionscript]



7. Para finalizar, vamos arrumar o espaço entre os botões do ButtonBar. Para fazer isso é simples, é só editar o Skin que criamos no passo 4, e diminuir o gap do layout de -1 para -31, como segue:

[cc_actionscript]





[/cc_actionscript]

A arte final fica assim:

Agora voce já sabe como criar um skin para o ButtonBar e como você pode criar uma biblioteca de componentes usando o arquivo fxpl exportado do Catalyst.