Mudando o Skin do ButtonBar a partir de um FXPL

Colocado por DClick Team na(s) categoria(s): 1, 2009, 4, 6, action, Actionscript, Adobe, app, AR, arte, Artigo, bar, BI, blog, botão, Botões, Catalyst, class, Componente, Componentes, components, DataProvider, demo, Documentação, Download, Eclipse, flash, flash builder, Flex, for, html, ide, IE, if, image, label, layout, library, menu, mg, MXML, O, on, platform, pt, reference, RIA, Ria’s Geral, safari, screen, Screencast, screencasts, Sem categoria, skins, spark, tag, TAT, Twitter, UI, vs, XML, XP, zend em 02 28th, 2011 | Sem comentários

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

xml version=“1.0″ encoding=“utf-8″?>
“http://ns.adobe.com/mxml/2009″
? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″>
? ?
? ? ? ?
? ?
? ?
? ? “{vs}”
? ? ? ? ? ? ? ?? skinClass=“components.WizarButtonBar”
? ? />
? ?
? ? “vs”>
? ? ? ? “Step1″>
? ? ? ? ? ?
? ? ? ? ? ? ? ? text=“Wizard step 1″ />
? ? ? ? ? ?
? ? ? ?
? ? ? ? “Step2″>
? ? ? ? ? ?
? ? ? ? ? ? ? ? text=“Wizard step 2″ />
? ? ? ? ? ?
? ? ? ?
? ? ? ? “Step3″>
? ? ? ? ? ?
? ? ? ? ? ? ? ? text=“Wizard step 3″ />
? ? ? ? ? ?
? ? ? ?
? ?
? ?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

“http://ns.adobe.com/mxml/2009″
? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark”
? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″>
? ?
? ? ? ?
? ?
? ?
? ? “{vs}”
? ? ? ? ? ? ? ?? skinClass=“components.WizarButtonBarSkin”
? ? />
? ?
? ? “vs”>
? ? ? ? “Step1″>
? ? ? ? ? ?
? ? ? ? ? ? ? ? text=“Wizard step 1″ />
? ? ? ? ? ?
? ? ? ?
? ? ? ? “Step2″>
? ? ? ? ? ?
? ? ? ? ? ? ? ? text=“Wizard step 2″ />
? ? ? ? ? ?
? ? ? ?
? ? ? ? “Step3″>
? ? ? ? ? ?
? ? ? ? ? ? ? ? text=“Wizard step 3″ />
? ? ? ? ? ?
? ? ? ?
? ?
? ?

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:

1
2
3
4
5

“dataGroup” width=“100%” height=“100%”>
? ? ? ?
? ? ? ? ? ? “-31″/>
? ? ? ?

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.

Veja o post original no blog do autor aqui!