Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Flex 4 Skinning - Nashville Flex Camp
Semelhante a Flex 4 Skinning - Nashville Flex Camp (20)
Último
Último (20)
Flex 4 Skinning - Nashville Flex Camp
- 1. Skinning in Flex 4 Mike Orth http:/mikeorth.com
- 2. Disclaimer This is all based on Flex 4 Beta 1 Some things may change spark.skins.default.* package changed to spark.skins.spark.* on Monday, June 15.
- 3. Concepts Types of Skins / Spark vs. Halo CSS Creating/Applying Skins Examples QA
- 4. What is Skinning? Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. The skin controls all visual elements of a component, including layout.
- 5. Importance of Skinning Branding Sets your application apart from others User Experience Great skinning makes you forget it’s a Flex app Cool != functional
- 6. Halo vs. Spark The Halo theme has “the Flex look” Mostly backwards compatible with Flex 3 Spark is the new theme
- 7. Types of skins Graphical Artwork, PNG, GIF <mx:ButtonupSkin="@Embed(source=‘up_skin.gif')”/> Programmatic Extend ProgrammaticSkin, UIComponent, Border, etc.. Drawing API override updateDisplayList
- 8. Types of skins Stateful One file containing all states (up, down, disabled, etc…), usually a .swc file. Create assets and package them (CS3 or 4) Spark Skins are Stateful skins
- 9. CSS – New Additions Namespaces ID Selectors Descendant Selectors Pseudo Selectors
- 10. CSS Namespaces @namespace mx "library://ns.adobe.com/flex/halo"; @namespace s "library://ns.adobe.com/flex/spark"; s|Button { color: #FF0000; } mx|Panel { styleName: “myStyle”;}
- 11. CSS ID selectors #submitButton { color: blue;} Descendant Selector s|Forms|TextInput{ font-weight: bold;} Pseudo/State selectors s|Button:over{ alpha: 1; }
- 12. Examples
- 14. Spark Skinning Spark Skins & Containers Skinning Contracts Applying Skins
- 15. Spark Skinning
- 16. Spark Skinning In Flex 4, Skins are more powerful (you must decide to use it for good or for evil) Created in MXML, Skin includes Text Images FXG graphics Transitions Filters States
- 17. Containers Groups Lightweight, simply a mechanism to layout visual children Not Skinnable Spark Containers Use as base class for skinning containers SkinnableComponent, SkinnableContainer Layout children using contentGroup
- 18. Skinning Contracts A skinning contract between a skin class and component class defines how the component displays its skins. Valid contract contains: Host Component Skin Parts Skin States A bowl of only Brown M&M’s
- 19. Skinning Contracts Host Component Skin Class Specify the host component. Declare the skin states, and define their appearance. Define the appearance of the skin parts. Define the skin class Identify the skin states that it supports with the SkinStatesmetadata tag. Identify the skin parts that it uses with the SkinPartmetadata tag.
- 20. Example Usage <s:Skin> <Metadata> [HostComponent("spark.components.Button")] </Metadata> … <s:states> <s:State name=“up”/> <s:State name=“down”/> … </s:states> // Define appearance… </s:Skin>
- 21. FXG Graphics interchange format Defines shapes using mark-up Rect, Circle, Path
- 22. Skin states alpha=“.8” alpha.over=“1” includeIn / excludeFrom
- 23. References http://mikeorth.com http://livedocs.adobe.com/flex/gumbo/html/ http://danorlando.com/?p=374
- 24. Thanks!
Notas do Editor
- I’m Mike Orth, I’ve been doing Flex development for nearly 3 years now. I’m going to go over a lot of the new concepts and procedures for skinning in Flex 4. I have an hour slot but it may not take the whole time because since it’s so new, there’s limited information I can give you w/o it changing.
- While it needs to look cool, it still has to be functional.
- Halo has the “Flex look”,Halo containers are huge and contain complex logic for layout, measuring, borderMetrics, Scrollingsome style names have changedHalo is the old set of components
- override updateDisplayList, implement getters/setters, create stylable properties-PROG - use the drawing api to draw shapes and lines. Gives you precise control over the way it looks.
- We’ll go over Spark skinning later
- Don’t have to use namespaces for class selectors (dot notation)
- to style a particular component by it’s id, so it will style anything that matches that id Pseudo – Similar to Html/cssa:hover
- Skin is base classSparkSkin is used by the framework for Spark Components, it adds some additional functionality such as the ability to exclude colors from filters.
- Groups don’t provide scrollingChildren are put in contentGroup
- Show SuperBasicButton example or create a new button
- Similar to degrafa