Deep Dive intoMobile FlexSkinning
Who are You?
Agenda•   Introduction to Skinning•   Concepts•   Skinning Components•   Conclusions
Not a hands on  workshop
Why?
Lots and lots of  little details
Content• https://github.com/tpryan/SkinExample   – Complete, no shortcuts• https://github.com/tpryan/SkinExampleExercise  ...
Be like a crazyHTML standardsfacist
No presentationin markup
Starting
Finishing
WHY SKIN
CSS• Font Changes  – Family  – Color  – Size• Flex UI Changes  – Color  – Flex CSS Properties
Skinning• Changing Behavior• Radical change in look and feel• Implementation of custom graphics
CLASSES YOU NEED TOKNOW
StylableTextField•   Lightweight•   Can be Styled•   Can used for editable and static text•   It can’t be used in MXML mar...
BitmapImage• Lightweight image component• Doesn’t have ability to load dynamic  content… yet.• This is fine, skin assets s...
SkinableComponent• Like a Group, but you can skin it.
IconItemRenderer• High performance renderer• Handles a lot of cases.• Can be extended.
CONCEPTS
Performance iskey
ActionScriptComponentsPerform Best
Almost all ofyour skins willbe ActionScript    Skins
CSS
What I use CSS for• As much font selection as possible• Class specifications
Why?
setStyle is relativelyexpensive
SKIN LIFECYCLE
Important Methods• Constructor  – Very beginning  – No Children available  – Good for manipulating “this” and setting vari...
Final ThoughtBefore we get     intoComponents
I will break every   best practice I  just mentioned    in this class
WORKING WITHCOMPONENTS
APPLICATION
Compare
Skinning Application
Assigning a Skin in CSSs|ViewNavigatorApplication{    skinClass: ClassReference("skins.AppSkin");}
Why• Prevents you from cluttering up Flex with  presentational information
Dealing with DPIswitch (applicationDPI){    case 320:    {        break;    }    case 240:    {        break;    }    defa...
Why• Custom graphics look like crap if you  design for too small a screen.• But smaller DPI devices are usually less  powe...
LABEL
You cannotskin a label
CUSTOM COMPONENT
Compare
Skinning CustomComponent
Removing theBackgroundoverride protected function drawBackground(       unscaledWidth:Number, unscaledHeight:Number):void{}
Why• Almost all components have a background  that will look dumb once you start adding  custom ui.
WORKING WITH FONTS
Font Recap• There are 2 font rendering engines in  Flash• This means 2 ways of embedding fonts  – TLF  – NonTLF• Most Mobi...
Consequence• You have to embed both TLF and NonTLF  fonts• You can do this with Metadata• I’ve never done it that way• Bec...
Embedding fonts withFlash Professional
BUTTON
Compare
Skinning Button
Replacing the Borderoverride protected function getBorderClassForCurrentState():Class{    if (currentState == "down"){    ...
VIEW
Compare
Skinning View
Hide ActionBaroverride protected function childrenCreated():void{   super.childrenCreated();   this.actionBar.height = 0;}
ITEMRENDERER
Compare
Working with anIterator
Deal with layoutoverride protected functionlayoutContents(unscaledWidth:Number, unscaledHeight:Number):void{   super.layou...
TEXT AREA
Compare
Skinning Text Area
CONCLUSIONS
Typical Process•   Remove the background•   Slap in graphics•   Account for DPI•   Account for redraws
Good resources• Deep Dive Into Flex Mobile Item  Renderers  – http://www.slideshare.net/JasonHanson/deep-    dive-into-fle...
Follow up?• Feel free to contact me  – terry.ryan@adobe.com  – http://terrenceryan.com  – Twitter: @tpryan
Upcoming SlideShare
Loading in...5
×

Flex Mobile Skinning Workshop

4,052

Published on

3.5 hours lab on building custom skins for Flex Mobile.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,052
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flex Mobile Skinning Workshop

  1. 1. Deep Dive intoMobile FlexSkinning
  2. 2. Who are You?
  3. 3. Agenda• Introduction to Skinning• Concepts• Skinning Components• Conclusions
  4. 4. Not a hands on workshop
  5. 5. Why?
  6. 6. Lots and lots of little details
  7. 7. Content• https://github.com/tpryan/SkinExample – Complete, no shortcuts• https://github.com/tpryan/SkinExampleExercise – Finished version of class exercise but incomplete due to shortcuts• https://github.com/tpryan/SkinExampleStarted – Starting point for class
  8. 8. Be like a crazyHTML standardsfacist
  9. 9. No presentationin markup
  10. 10. Starting
  11. 11. Finishing
  12. 12. WHY SKIN
  13. 13. CSS• Font Changes – Family – Color – Size• Flex UI Changes – Color – Flex CSS Properties
  14. 14. Skinning• Changing Behavior• Radical change in look and feel• Implementation of custom graphics
  15. 15. CLASSES YOU NEED TOKNOW
  16. 16. StylableTextField• Lightweight• Can be Styled• Can used for editable and static text• It can’t be used in MXML markup though
  17. 17. BitmapImage• Lightweight image component• Doesn’t have ability to load dynamic content… yet.• This is fine, skin assets should be embedded• Fast performing
  18. 18. SkinableComponent• Like a Group, but you can skin it.
  19. 19. IconItemRenderer• High performance renderer• Handles a lot of cases.• Can be extended.
  20. 20. CONCEPTS
  21. 21. Performance iskey
  22. 22. ActionScriptComponentsPerform Best
  23. 23. Almost all ofyour skins willbe ActionScript Skins
  24. 24. CSS
  25. 25. What I use CSS for• As much font selection as possible• Class specifications
  26. 26. Why?
  27. 27. setStyle is relativelyexpensive
  28. 28. SKIN LIFECYCLE
  29. 29. Important Methods• Constructor – Very beginning – No Children available – Good for manipulating “this” and setting variables• onChildrenCreate – After everything is done setting up – Good for set once display properties• layoutContents – After any thing that requires a redistribution of elements – Good for reacting to location and content changes
  30. 30. Final ThoughtBefore we get intoComponents
  31. 31. I will break every best practice I just mentioned in this class
  32. 32. WORKING WITHCOMPONENTS
  33. 33. APPLICATION
  34. 34. Compare
  35. 35. Skinning Application
  36. 36. Assigning a Skin in CSSs|ViewNavigatorApplication{ skinClass: ClassReference("skins.AppSkin");}
  37. 37. Why• Prevents you from cluttering up Flex with presentational information
  38. 38. Dealing with DPIswitch (applicationDPI){ case 320: { break; } case 240: { break; } default: { break; }}
  39. 39. Why• Custom graphics look like crap if you design for too small a screen.• But smaller DPI devices are usually less powerful meaning pushing around larger images is ineffiecient
  40. 40. LABEL
  41. 41. You cannotskin a label
  42. 42. CUSTOM COMPONENT
  43. 43. Compare
  44. 44. Skinning CustomComponent
  45. 45. Removing theBackgroundoverride protected function drawBackground( unscaledWidth:Number, unscaledHeight:Number):void{}
  46. 46. Why• Almost all components have a background that will look dumb once you start adding custom ui.
  47. 47. WORKING WITH FONTS
  48. 48. Font Recap• There are 2 font rendering engines in Flash• This means 2 ways of embedding fonts – TLF – NonTLF• Most Mobile components use NonTLF• Label uses TLF
  49. 49. Consequence• You have to embed both TLF and NonTLF fonts• You can do this with Metadata• I’ve never done it that way• Because Flash Professional makes this very easy
  50. 50. Embedding fonts withFlash Professional
  51. 51. BUTTON
  52. 52. Compare
  53. 53. Skinning Button
  54. 54. Replacing the Borderoverride protected function getBorderClassForCurrentState():Class{ if (currentState == "down"){ labelDisplay.setStyle("color",0xFFFFFF); return downBorderSkin; } else{ labelDisplay.setStyle("color",0x48250A); return upBorderSkin; }}
  55. 55. VIEW
  56. 56. Compare
  57. 57. Skinning View
  58. 58. Hide ActionBaroverride protected function childrenCreated():void{ super.childrenCreated(); this.actionBar.height = 0;}
  59. 59. ITEMRENDERER
  60. 60. Compare
  61. 61. Working with anIterator
  62. 62. Deal with layoutoverride protected functionlayoutContents(unscaledWidth:Number, unscaledHeight:Number):void{ super.layoutContents(unscaledWidth, unscaledHeight); }
  63. 63. TEXT AREA
  64. 64. Compare
  65. 65. Skinning Text Area
  66. 66. CONCLUSIONS
  67. 67. Typical Process• Remove the background• Slap in graphics• Account for DPI• Account for redraws
  68. 68. Good resources• Deep Dive Into Flex Mobile Item Renderers – http://www.slideshare.net/JasonHanson/deep- dive-into-flex-mobile-item-renderers-7501594• Jason San Jose – http://www.adobe.com/devnet/flex/articles/mo bile-skinning-part1.html – http://www.adobe.com/devnet/flex/articles/mo bile-skinning-part2.html – http://www.adobe.com/devnet/flex/articles/mo
  69. 69. Follow up?• Feel free to contact me – terry.ryan@adobe.com – http://terrenceryan.com – Twitter: @tpryan
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×