Your SlideShare is downloading. ×

Flex Mobile Skinning Workshop

3,996

Published on

3.5 hours lab on building custom skins for Flex Mobile.

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
3,996
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Deep Dive intoMobile FlexSkinning
  • 2. Who are You?
  • 3. Agenda• Introduction to Skinning• Concepts• Skinning Components• Conclusions
  • 4. Not a hands on workshop
  • 5. Why?
  • 6. Lots and lots of little details
  • 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. Be like a crazyHTML standardsfacist
  • 9. No presentationin markup
  • 10. Starting
  • 11. Finishing
  • 12. WHY SKIN
  • 13. CSS• Font Changes – Family – Color – Size• Flex UI Changes – Color – Flex CSS Properties
  • 14. Skinning• Changing Behavior• Radical change in look and feel• Implementation of custom graphics
  • 15. CLASSES YOU NEED TOKNOW
  • 16. StylableTextField• Lightweight• Can be Styled• Can used for editable and static text• It can’t be used in MXML markup though
  • 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. SkinableComponent• Like a Group, but you can skin it.
  • 19. IconItemRenderer• High performance renderer• Handles a lot of cases.• Can be extended.
  • 20. CONCEPTS
  • 21. Performance iskey
  • 22. ActionScriptComponentsPerform Best
  • 23. Almost all ofyour skins willbe ActionScript Skins
  • 24. CSS
  • 25. What I use CSS for• As much font selection as possible• Class specifications
  • 26. Why?
  • 27. setStyle is relativelyexpensive
  • 28. SKIN LIFECYCLE
  • 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. Final ThoughtBefore we get intoComponents
  • 31. I will break every best practice I just mentioned in this class
  • 32. WORKING WITHCOMPONENTS
  • 33. APPLICATION
  • 34. Compare
  • 35. Skinning Application
  • 36. Assigning a Skin in CSSs|ViewNavigatorApplication{ skinClass: ClassReference("skins.AppSkin");}
  • 37. Why• Prevents you from cluttering up Flex with presentational information
  • 38. Dealing with DPIswitch (applicationDPI){ case 320: { break; } case 240: { break; } default: { break; }}
  • 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. LABEL
  • 41. You cannotskin a label
  • 42. CUSTOM COMPONENT
  • 43. Compare
  • 44. Skinning CustomComponent
  • 45. Removing theBackgroundoverride protected function drawBackground( unscaledWidth:Number, unscaledHeight:Number):void{}
  • 46. Why• Almost all components have a background that will look dumb once you start adding custom ui.
  • 47. WORKING WITH FONTS
  • 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. 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. Embedding fonts withFlash Professional
  • 51. BUTTON
  • 52. Compare
  • 53. Skinning Button
  • 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. VIEW
  • 56. Compare
  • 57. Skinning View
  • 58. Hide ActionBaroverride protected function childrenCreated():void{ super.childrenCreated(); this.actionBar.height = 0;}
  • 59. ITEMRENDERER
  • 60. Compare
  • 61. Working with anIterator
  • 62. Deal with layoutoverride protected functionlayoutContents(unscaledWidth:Number, unscaledHeight:Number):void{ super.layoutContents(unscaledWidth, unscaledHeight); }
  • 63. TEXT AREA
  • 64. Compare
  • 65. Skinning Text Area
  • 66. CONCLUSIONS
  • 67. Typical Process• Remove the background• Slap in graphics• Account for DPI• Account for redraws
  • 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. Follow up?• Feel free to contact me – terry.ryan@adobe.com – http://terrenceryan.com – Twitter: @tpryan

×