Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos...
-
Upload
rebeca-viveiros -
Category
Documents
-
view
226 -
download
1
Transcript of Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos...
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