Customizing the Look of Mobile Flex

2,913 views

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,913
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×