What’s Under Your Skin? Understanding best practices in Flex 4 Skinning Jeff Tapper Digital Primates
Agenda <ul><li>Review the Spark Component Model </li></ul><ul><li>Describe the roles of a component, layout and skin </li>...
Who am I <ul><li>Jeff Tapper (jtapper@digitalprimates.net) </li></ul><ul><li>Senior Consultant – Digital Primates </li></u...
Who are you <ul><li>Developers who: </li></ul><ul><ul><li>Have some experience with Flex  </li></ul></ul><ul><ul><li>Want ...
Understanding the Spark Component Model <ul><li>Component – what does it do </li></ul><ul><li>Skin – what does it look lik...
Components <ul><li>Raw Logic </li></ul><ul><li>No Layout </li></ul><ul><li>No UI </li></ul><ul><li>Component delegates lay...
Layouts <ul><li>Component Agnostic </li></ul><ul><li>Responsible for positioning children </li></ul><ul><li>Optionally imp...
Skins <ul><li>Responsible for entire look and feel of component </li></ul><ul><li>Component specific </li></ul><ul><li>Com...
Skins vs Styles <ul><li>In Flex 3, far more control was available from style sheets  </li></ul><ul><li>Flex 4 components e...
Adding CSS Support <ul><li>Add metadata to the component </li></ul><ul><ul><li>[ Style(name=&quot;backgroundColor&quot;, t...
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...
Understanding skinState <ul><li>Host component has a state, which can (optionally) be passed to skin </li></ul><ul><ul><li...
Understanding skinPart <ul><li>Definition of skin properties which can be addressed from component </li></ul><ul><li>overr...
Communicating between component and skin <ul><li>Component passes values to skinparts </li></ul><ul><ul><li>Best done in p...
Architectural Review 1 <ul><li>ShoppingList Component </li></ul><ul><ul><li>Review component code </li></ul></ul><ul><ul><...
Architectural Review 2 <ul><li>Skinnable Clock </li></ul><ul><li>One clock component can have vastly different views </li>...
Architectural Review #2 <ul><li>Clock provides base functionality </li></ul><ul><ul><li>switch between 12/24 hours </li></...
DigitalSkin <ul><li>Has background image and DigitalClockFace </li></ul><ul><li>DigitalClockFace is a SkinnableComponent <...
AnalogSkin <ul><li>Has background image and AnalogClockFace </li></ul><ul><li>AnalogClockFace is a SkinnableComponent </li...
Summary <ul><li>Spark component model offers a separation of functionality, layout, and visual appearance </li></ul><ul><l...
Upcoming SlideShare
Loading in …5
×

What’s under your skin

2,244 views

Published on

Best practices for Flex components with skins and layouts

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,244
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 (jtapper@digitalprimates.net) </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>http://blogs.digitalprimates.net/jefftapper </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: http://www.jamesward.com/2010/07/30/how-to-define-styles-on-skins-in-flex-4/ </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>

×