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.
- Faça o download do arquivo fxpl disponibilizado pelo Eduardo.
- Importe o fxpl no FlashBuilder
- 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.
- Após importado, vamos criar o skin do ButtonBar.
- Agora vamos trocar os skins dos botões do WizzardButtonBarSkin que criamos no passo 4, usando os skins criado pelo Eduardo.
- Agora é só utilizar o novo skin e ver o resultado. Lembre-se de importar a biblioteca no seu projeto Flex.
- 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]
[cc_actionscript]
[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.