Your SlideShare is downloading. ×
0
Customizing theLook of MobileFlex
Agenda•   Design Considerations•   CSS vs Skinning•   Introduction to Skinning•   Conclusions
DESIGN CONSIDERATIONS
Work witha designer
640x920Start asHighResolutionas possible
Scale Down
• Custom graphics              look like crap if you              design for too small              a screen.            •...
• Get PSD               • Pull into to                 Fireworks               • Use Fireworks to                 export p...
SKIN VS CSS
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
CONCEPTS
Performance iskey
ActionScriptComponentsPerform Best
Almost all ofyour skins willbe ActionScript    Skins
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 break everybest practice
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.
WORKING WITHCOMPONENTS
Starting
Finishing
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...
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
CONCLUSIONS
BEAUTY
Why care about  beauty?
Beauty is the differencebetweenApps people have to use   Apps people want to use
Beauty is the differencebetweenApps people have to use   Apps people want to use
Finicky
Typical Process•   Do as much in css as possible•   Drop to skins•   Remove the background•   Slap in graphics•   Account ...
Good resources• Deep Dive Into Flex Mobile Item Renderers  – http://www.slideshare.net/JasonHanson/deep-    dive-into-flex...
Follow up?• Feel free to contact me  – terry.ryan@adobe.com  – http://terrenceryan.com  – Twitter: @tpryan
Upcoming SlideShare
Loading in...5
×

Customizing the Look of Mobile Flex

2,633

Published on

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
2,633
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Customizing the Look of Mobile Flex"

  1. 1. Customizing theLook of MobileFlex
  2. 2. Agenda• Design Considerations• CSS vs Skinning• Introduction to Skinning• Conclusions
  3. 3. DESIGN CONSIDERATIONS
  4. 4. Work witha designer
  5. 5. 640x920Start asHighResolutionas possible
  6. 6. Scale Down
  7. 7. • Custom graphics look like crap if you design for too small a screen. • But smaller DPIDeal with devices are usually less powerfulDPI meaning pushing around larger images is ineffiecient
  8. 8. • Get PSD • Pull into to Fireworks • Use Fireworks to export pngs andDealing with jpgs.PSD’s
  9. 9. SKIN VS CSS
  10. 10. CSS• Font Changes – Family – Color – Size• Flex UI Changes – Color – Flex CSS Properties
  11. 11. Skinning• Changing Behavior• Radical change in look and feel• Implementation of custom graphics
  12. 12. CONCEPTS
  13. 13. Performance iskey
  14. 14. ActionScriptComponentsPerform Best
  15. 15. Almost all ofyour skins willbe ActionScript Skins
  16. 16. What I use CSS for• As much font selection as possible• Class specifications
  17. 17. Why?
  18. 18. setStyle is relativelyexpensive
  19. 19. SKIN LIFECYCLE
  20. 20. 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
  21. 21. Final ThoughtBefore we get intoComponents
  22. 22. I break everybest practice
  23. 23. CLASSES YOU NEED TOKNOW
  24. 24. StylableTextField• Lightweight• Can be Styled• Can used for editable and static text• It can’t be used in MXML markup though
  25. 25. BitmapImage• Lightweight image component• Doesn’t have ability to load dynamic content… yet.• This is fine, skin assets should be embedded• Fast performing
  26. 26. SkinableComponent• Like a Group, but you can skin it.
  27. 27. IconItemRenderer• High performance renderer• Handles a lot of cases.• Can be extended.
  28. 28. WORKING WITHCOMPONENTS
  29. 29. Starting
  30. 30. Finishing
  31. 31. APPLICATION
  32. 32. Compare
  33. 33. Skinning Application
  34. 34. Assigning a Skin in CSSs|ViewNavigatorApplication{ skinClass: ClassReference("skins.AppSkin");}
  35. 35. Why• Prevents you from cluttering up Flex with presentational information
  36. 36. Dealing with DPIswitch (applicationDPI){ case 320: { break; } case 240: { break; } default: { break; }}
  37. 37. WORKING WITH FONTS
  38. 38. 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
  39. 39. 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
  40. 40. Embedding fonts withFlash Professional
  41. 41. BUTTON
  42. 42. Compare
  43. 43. Skinning Button
  44. 44. CONCLUSIONS
  45. 45. BEAUTY
  46. 46. Why care about beauty?
  47. 47. Beauty is the differencebetweenApps people have to use Apps people want to use
  48. 48. Beauty is the differencebetweenApps people have to use Apps people want to use
  49. 49. Finicky
  50. 50. Typical Process• Do as much in css as possible• Drop to skins• Remove the background• Slap in graphics• Account for DPI• Account for redraws
  51. 51. 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/mobile- skinning-part1.html – http://www.adobe.com/devnet/flex/articles/mobile- skinning-part2.html – http://www.adobe.com/devnet/flex/articles/mobile- skinning-part3.html• Holly Schinsky – http://devgirl.org/2011/05/09/styling-the-flex-4-5- mobile-application-tabs-and-actionbar/
  52. 52. 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.

×