Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What’s under your skin


Published on

Best practices for Flex components with skins and layouts

Published in: Technology
  • Be the first to comment

  • Be the first to like this

What’s under your skin

  1. 1. What’s Under Your Skin? Understanding best practices in Flex 4 Skinning Jeff Tapper Digital Primates
  2. 2. Agenda <ul><li>Review the Spark Component Model </li></ul><ul><li>Describe the roles of a component, layout and skin </li></ul><ul><li>What goes in a skin </li></ul><ul><li>SkinState and SkinParts </li></ul><ul><li>Component / Skin communications </li></ul><ul><li>Explore a few real skinned components </li></ul>
  3. 3. Who am I <ul><li>Jeff Tapper ( </li></ul><ul><li>Senior Consultant – Digital Primates </li></ul><ul><li>Building Internet Applications since 1995 </li></ul><ul><li>Authored 11 books on internet technologies </li></ul><ul><li>Adobe Certified Instructor for all Flex, AIR, Flash, and ColdFusion courses </li></ul><ul><li> </li></ul><ul><li>Twitter: jefftapper </li></ul>
  4. 4. Who are you <ul><li>Developers who: </li></ul><ul><ul><li>Have some experience with Flex </li></ul></ul><ul><ul><li>Want to understand more about Flex 4 skinning </li></ul></ul><ul><ul><li>Have a sense of humor </li></ul></ul><ul><li>If this isn’t you, you should just leave </li></ul>
  5. 5. Understanding the Spark Component Model <ul><li>Component – what does it do </li></ul><ul><li>Skin – what does it look like </li></ul><ul><li>Layout – how are children arranged </li></ul>
  6. 6. Components <ul><li>Raw Logic </li></ul><ul><li>No Layout </li></ul><ul><li>No UI </li></ul><ul><li>Component delegates layout and look to other classes </li></ul><ul><li>Ponder the List (mx.controls.List vs spark.components.List) </li></ul>
  7. 7. Layouts <ul><li>Component Agnostic </li></ul><ul><li>Responsible for positioning children </li></ul><ul><li>Optionally implementing virtualization </li></ul><ul><ul><li>updateDisplayList checks useVirtualLayout </li></ul></ul><ul><ul><li>VerticalLayoutSample: </li></ul></ul><ul><ul><ul><li>if (useVirtualLayout) </li></ul></ul></ul><ul><ul><ul><li>updateDisplayListVirtual(); </li></ul></ul></ul><ul><ul><ul><li>else </li></ul></ul></ul><ul><ul><ul><li>updateDisplayListReal(); </li></ul></ul></ul>
  8. 8. Skins <ul><li>Responsible for entire look and feel of component </li></ul><ul><li>Component specific </li></ul><ul><li>Component dictates required elements (skinparts / skinstates) </li></ul>
  9. 9. Skins vs Styles <ul><li>In Flex 3, far more control was available from style sheets </li></ul><ul><li>Flex 4 components expose less control to CSS </li></ul><ul><ul><li>Assumptions are that more will be done in skins </li></ul></ul><ul><li>Font related styles still available from CSS </li></ul><ul><li>Your skins can expose additional styles </li></ul><ul><li>More info: </li></ul>
  10. 10. Adding CSS Support <ul><li>Add metadata to the component </li></ul><ul><ul><li>[ Style(name=&quot;backgroundColor&quot;, type=&quot;uint&quot;, format=&quot;Color&quot;)] </li></ul></ul><ul><li>Leverage getStyle() in the skin </li></ul><ul><ul><li><s:Rect width=&quot;100%&quot; height=&quot;100%&quot;> </li></ul></ul><ul><ul><li><s:fill> </li></ul></ul><ul><ul><li><s:SolidColor color=&quot;{getStyle('backgroundColor')}&quot;/> </li></ul></ul><ul><ul><li></s:fill> </li></ul></ul><ul><ul><li></s:Rect> </li></ul></ul>
  11. 11. What goes in a skin <ul><li>Design </li></ul><ul><ul><li>Borders </li></ul></ul><ul><ul><li>Backgrounds </li></ul></ul><ul><ul><li>Dropshadow </li></ul></ul><ul><ul><li>Etc. </li></ul></ul><ul><li>Controls (ie. Components) </li></ul><ul><li>States </li></ul>
  12. 12. Understanding skinState <ul><li>Host component has a state, which can (optionally) be passed to skin </li></ul><ul><ul><li>To notify skin of state change use invalidateSkinState() </li></ul></ul><ul><ul><li>Be sure to override getCurrentSkinState() </li></ul></ul><ul><li>UI State changes done in skin, not in component </li></ul><ul><li>Functional changes done in component, not skin </li></ul>
  13. 13. Understanding skinPart <ul><li>Definition of skin properties which can be addressed from component </li></ul><ul><li>override partAdded/partRemoved method in component </li></ul><ul><li>Used to allow component to control skin without knowing details of its internals </li></ul>
  14. 14. Communicating between component and skin <ul><li>Component passes values to skinparts </li></ul><ul><ul><li>Best done in partAdded method </li></ul></ul><ul><li>Skin can address component through “hostCompoment” property, but shouldn’t </li></ul><ul><ul><li>It just makes you feel icky in the morning </li></ul></ul><ul><li>Skin parts broadcast events, to which component listens </li></ul><ul><ul><li>Listeners added in partAdded, removed in partRemoved </li></ul></ul>
  15. 15. Architectural Review 1 <ul><li>ShoppingList Component </li></ul><ul><ul><li>Review component code </li></ul></ul><ul><ul><li>Review skinparts </li></ul></ul><ul><li>ShoppingList Skin </li></ul><ul><ul><li>Labels, button and DataGroup </li></ul></ul><ul><ul><li>DataGroup has itemRenderer </li></ul></ul>
  16. 16. Architectural Review 2 <ul><li>Skinnable Clock </li></ul><ul><li>One clock component can have vastly different views </li></ul>
  17. 17. Architectural Review #2 <ul><li>Clock provides base functionality </li></ul><ul><ul><li>switch between 12/24 hours </li></ul></ul><ul><ul><li>Has “clockFace” skinpart (IClockFace) </li></ul></ul><ul><li>Separate skins for Digital and Analog Clocks </li></ul><ul><ul><li>Each provides a clockFace </li></ul></ul>
  18. 18. DigitalSkin <ul><li>Has background image and DigitalClockFace </li></ul><ul><li>DigitalClockFace is a SkinnableComponent </li></ul><ul><ul><li>Requires skinParts for hour, minute and second indicators </li></ul></ul><ul><ul><li>Uses DigitalClockFaceSkin </li></ul></ul><ul><li>DigitalClockFaceSkin </li></ul><ul><ul><li>Renders hour, minute and second indicators </li></ul></ul>
  19. 19. AnalogSkin <ul><li>Has background image and AnalogClockFace </li></ul><ul><li>AnalogClockFace is a SkinnableComponent </li></ul><ul><ul><li>Requires skinparts for hands </li></ul></ul><ul><ul><li>Knows how to position hands, for either 12/24 hours </li></ul></ul><ul><ul><li>Uses AnalogClockFaceSkin </li></ul></ul><ul><li>AnalogClockFaceSkin </li></ul><ul><ul><li>Renders analog face </li></ul></ul><ul><ul><li>Uses a datagroup for numbers </li></ul></ul><ul><ul><ul><li>Datagroup has custom layout </li></ul></ul></ul><ul><ul><ul><li>Label Item Renderer </li></ul></ul></ul>
  20. 20. Summary <ul><li>Spark component model offers a separation of functionality, layout, and visual appearance </li></ul><ul><li>Skins contain all visual information </li></ul><ul><ul><li>May contain other skinnable components which have their own skins </li></ul></ul><ul><ul><li>Make use of layouts </li></ul></ul><ul><li>SkinParts are used to facilitate a component populating the elements in a skin </li></ul>