Flex Mobile Skinning Workshop
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Flex Mobile Skinning Workshop

  • 4,724 views
Uploaded on

3.5 hours lab on building custom skins for Flex Mobile.

3.5 hours lab on building custom skins for Flex Mobile.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,724
On Slideshare
4,724
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
50
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