Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos...
-
Upload
rebeca-viveiros -
Category
Documents
-
view
223 -
download
1
Transcript of Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos...
![Page 1: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/1.jpg)
Skinning Flex 3Gabriela Trindade Perry
![Page 2: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/2.jpg)
Definitions
Skinning• Imagens, swf e classes• CSS (estilos
personalizados)• Programaticamente
Themes• “Nativos” ou de terceiros• Personalizados
![Page 3: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/3.jpg)
SIMPLE SKINNINGSkinning a Button and a ScrollBar
![Page 4: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/4.jpg)
Skinning com imagens
resulta
usa
![Page 5: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/5.jpg)
Skinning com Classes
![Page 6: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/6.jpg)
Skinning com MC do flash
Salvo no projeto
![Page 7: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/7.jpg)
Skinning com MC do flash
![Page 8: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/8.jpg)
THE ASSETS.FLA FILESkinning a DataGrid
![Page 9: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/9.jpg)
Using the “assets.fla” file
Como mexer no cursorStretch?
![Page 10: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/10.jpg)
CSS SKINNINGDefining a custom style and styling the ScrollBar
![Page 11: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/11.jpg)
Custom style
usa
![Page 12: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/12.jpg)
Skinning ScrollBar
O único trabalho é criar todas as imagens e aplicar no ScrollBar.Para esses casos, as propriedades scaleGrid são muito importantes.
![Page 13: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/13.jpg)
PROGRAMMATIC SKINNINGSkinning ScrollBars
![Page 14: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/14.jpg)
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.
![Page 15: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/15.jpg)
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.
![Page 16: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/16.jpg)
Skinning a Button (again)
Extende PanelSKinAplica no CSS
![Page 17: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/17.jpg)
Skinning a Button (again)
![Page 18: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/18.jpg)
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.
![Page 19: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/19.jpg)
Solução I
• Cria um estilo• Aplica no Button?
![Page 20: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/20.jpg)
Solução II
• Define uma classe para upSkin do ComboBox?
![Page 21: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/21.jpg)
Solução III• Define um estilo para o
Button e usa dentro da skin?
![Page 22: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/22.jpg)
Skinning Panel
Como quero colocar a imagem no chrome, precisa olhar PanelSkin
![Page 23: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/23.jpg)
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
![Page 24: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/24.jpg)
AND AN EXAMPLESkinning NumericStepper
![Page 25: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/25.jpg)
Skinning NS?
Como mudar a aparência do botão do NumericStepper?
Método da força bruta (o único que conheço...)
![Page 26: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/26.jpg)
Skinning NS: source
1. Quem são os botões?
![Page 27: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/27.jpg)
Skinning NS: source
2. Quais os estilos que eles usam?
![Page 28: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/28.jpg)
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...
![Page 29: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/29.jpg)
Skinning NS?
1. Existe algum estilo pronto? O que ele recebe?
![Page 30: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/30.jpg)
Skinning NS: source
2. Onde isso está definido?
![Page 31: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/31.jpg)
Skinning NS: source
3. Como o link entre a classe e o componente é feito?
![Page 32: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/32.jpg)
Skinning NS: source
4. Extende a classe e muda o estilo
![Page 33: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/33.jpg)
Skinning NS: source
5. Muda o CSS
![Page 34: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/34.jpg)
USING THEMESUsing Flex3´s themes + Creating your own theme
![Page 35: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/35.jpg)
Using Flex 3´s ThemesEscolhe o tema
Passa para o compilador
![Page 36: Skinning Flex 3 Gabriela Trindade Perry. Definitions Skinning Imagens, swf e classes CSS (estilos personalizados) Programaticamente Themes “Nativos” ou.](https://reader035.fdocument.pub/reader035/viewer/2022062411/570638481a28abb8238f44a8/html5/thumbnails/36.jpg)
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