Skinning Flex 3Gabriela Trindade Perry

Definitions

Skinning• Imagens, swf e classes• CSS (estilos

personalizados)• Programaticamente

Themes• “Nativos” ou de terceiros• Personalizados

SIMPLE SKINNINGSkinning a Button and a ScrollBar

Skinning com imagens

resulta

usa

Skinning com Classes

Skinning com MC do flash

Salvo no projeto

Skinning com MC do flash

THE ASSETS.FLA FILESkinning a DataGrid

Using the “assets.fla” file

Como mexer no cursorStretch?

CSS SKINNINGDefining a custom style and styling the ScrollBar

Custom style

usa

Skinning ScrollBar

O único trabalho é criar todas as imagens e aplicar no ScrollBar.Para esses casos, as propriedades scaleGrid são muito importantes.

PROGRAMMATIC SKINNINGSkinning ScrollBars

Programmatic skin• The ProgrammaticSkin class implements the

IFlexDisplayObject, ILayoutManagerClient, IInvalidating, and ISimpleStyleClient interfaces, so it is the easiest and most common superclass to use.

• The Border class extends the ProgrammaticSkin class and adds support for the borderMetrics property. Use this class or the RectangularBorder class if your skin defines the component's border.

• The RectangularBorder class extends the Border class and adds support for the backgroundImage style.

• The UIComponent class implements the IStateCleint interface, making it easy to use for stateful skins. It is also the component that you use when implementing skins in MXML.

Exemplo

• Vamos usar PS para fazer o fundo dos Buttons usarem uma imagem.

• A imagem deve ficar tiled no fundo.• Vamos ver que isso vai trazer conflito com

outros componentes que usam Buttons, como o CB.

• E vamos ver duas formas de resolver isso.

Skinning a Button (again)

Extende PanelSKinAplica no CSS

Skinning a Button (again)

Skinning a Button: problema

• Se usarmos um componente que também usa Button, como o CB, ele irá usar a definição do estilo de Button.

Solução I

• Cria um estilo• Aplica no Button?

Solução II

• Define uma classe para upSkin do ComboBox?

Solução III• Define um estilo para o

Button e usa dentro da skin?

Skinning Panel

Como quero colocar a imagem no chrome, precisa olhar PanelSkin

Skinning Panel

Usa uma extensão de PS, e cria uma classe para a ser colocada no chrome.

Extensão de PN

Canvas com Image

AND AN EXAMPLESkinning NumericStepper

Skinning NS?

Como mudar a aparência do botão do NumericStepper?

Método da força bruta (o único que conheço...)

Skinning NS: source

1. Quem são os botões?

Skinning NS: source

2. Quais os estilos que eles usam?

Precisa isso?

Felizmente não :0)

Os docs estão bem organizados, e dá pra saber como fazer estas modificações começando por lá.

Vamos ver como...

Skinning NS?

1. Existe algum estilo pronto? O que ele recebe?

Skinning NS: source

2. Onde isso está definido?

Skinning NS: source

3. Como o link entre a classe e o componente é feito?

Skinning NS: source

4. Extende a classe e muda o estilo

Skinning NS: source

5. Muda o CSS

USING THEMESUsing Flex3´s themes + Creating your own theme

Using Flex 3´s ThemesEscolhe o tema

Passa para o compilador

Creating your own themes

1. Cria um New Library Project2. Passa para o compilador os arquivos e

classes a serem incluídos-include-file assets/css/default.css "F:/Documents and Settings/gabi/Desktop/skinning/src/assets/css/default.css" -include-file assets/images/scrollDownArrow2.jpg "F:/Documents and Settings/gabi/Desktop/skinning/src/assets/images/scrollDownArrow2.jpg" -include-file assets/images/scrollThumb.png "F:/Documents and Settings/gabi/Desktop/skinning/src/assets/images/scrollThumb.png" -include-file assets/images/scrollTrack2.jpg "F:/Documents and Settings/gabi/Desktop/skinning/src/assets/images/scrollTrack2.jpg" -include-file assets/images/scrollUpArrow2.jpg "F:/Documents and Settings/gabi/Desktop/skinning/src/assets/images/scrollUpArrow2.jpg" -include-classes assets.skins.BGSkin assets.skins.BTSkin assets.skins.NSButtonSkin assets.skins.PNSkin assets.skins.StrawbSkin