rafael-reed
Uploaded by
36 SLIDES
495 VUES
360LIKES

Customizing Skins and Styles in Flex 3 Applications

DESCRIPTION

Discover the principles of skinning in Flex 3 with Gabriela Trindade Perry. This guide details the process of applying customized themes and styles to components such as buttons and scrollbars. Learn how to programmatically skin various elements, define a unique style, and troubleshoot common issues that arise with component styling conflicts. With practical examples and guidance on using the "assets.fla" file, this resource empowers developers to enhance the visual appearance of their applications while ensuring seamless functionality.

1 / 36

Télécharger la présentation

Customizing Skins and Styles in Flex 3 Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Skinning Flex 3 Gabriela Trindade Perry

  2. Definitions Skinning Themes “Nativos” ou de terceiros Personalizados • Imagens, swf e classes • CSS (estilos personalizados) • Programaticamente

  3. Skinning a Button and a ScrollBar Simple Skinning

  4. Skinning com imagens usa resulta

  5. Skinning com Classes

  6. Skinning com MC do flash Salvo no projeto

  7. Skinning com MC do flash

  8. Skinning a DataGrid The assets.fla file

  9. Using the “assets.fla” file Como mexer no cursorStretch?

  10. Defining a custom style and styling the ScrollBar CSS Skinning

  11. Custom style usa

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

  13. Skinning ScrollBars programmatic Skinning

  14. 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.

  15. 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.

  16. Skinning a Button (again) Extende PanelSKin Aplica no CSS

  17. Skinning a Button (again)

  18. 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.

  19. Solução I • Cria um estilo • Aplica no Button ?

  20. Solução II • Define uma classe para upSkin do ComboBox ?

  21. Solução III • Define um estilo para o Button e usa dentro da skin ?

  22. Skinning Panel Como quero colocar a imagem no chrome, precisa olhar PanelSkin

  23. 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

  24. Skinning NumericStepper And an example

  25. Skinning NS? Como mudar a aparência do botão do NumericStepper? Método da força bruta (o único que conheço...)

  26. Skinning NS: source • Quem são os botões?

  27. Skinning NS: source 2. Quais os estilos que eles usam?

  28. 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...

  29. Skinning NS? • Existe algum estilo pronto? O que ele recebe?

  30. Skinning NS: source 2. Onde isso está definido?

  31. Skinning NS: source 3. Como o link entre a classe e o componente é feito?

  32. Skinning NS: source 4. Extende a classe e muda o estilo

  33. Skinning NS: source 5. Muda o CSS

  34. Using Flex3´s themes + Creating your own theme USING themes

  35. Using Flex 3´s Themes Escolhe o tema Passa para o compilador

  36. Creating your own themes • Cria um New Library Project • 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

More Related