Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Deep Dive into Flex Mobile Item Renderers

26,954 views

Published on

2011 360|Flex Presentation by Jason Hanson on Flex Mobile Item Renderers

Published in: Technology
  • Login to see the comments

Deep Dive into Flex Mobile Item Renderers

  1. 1. DEEP DIVE into FLEXMOBILE ITEM RENDERERS Flex SDK 4.5 (Hero)
  2. 2. • Jason Hanson • twitter @jayfour000 • flexfood.blogspot.com • www.jasonhanson.com• Building for Flash Platform since 1999• Working with Hero SDK since Aug, 2010 (beta)
  3. 3. DISCLAIMER• Intended to be a 300 level session (I’ll let you judge that for yourself :)• You should be familiar with the concept of writing Flex components in AS3• Knowledge of the Flex component lifecycle helpful• We will be looking at CODE
  4. 4. Stuff to check out if you get bored• http://www.jasonhanson.com/360flex © @atomic_playboy
  5. 5. • Special thanks to Ryan Frishberg for technical review. @frishy• All photos © Michael Schoenewies @atomic_playboy
  6. 6. New Project Type in Flash Builder 4.5• Flex Mobile Project
  7. 7. Rendering a Listof Items is Hard
  8. 8. Scrolling a Listof Items is Harder
  9. 9. Scroll Performance & User Experience• Slow or jerky scrolling comes off as an error in your app• Makes your app seem sluggish• Distracting at best• Causes loss of user at worst
  10. 10. Rendering Items is Expensive• Look! new data. • commitProperties()• How big am I? • measure()• Update display • updateDisplayList()• > Draw background • > drawBackground()• > Layout • > layoutContents()
  11. 11. Draw Faster & Draw Less Often• Regular Spark ItemRenderer just not fast enough for most mobile devices• Adobe SDK devs spent months optimizing List scrolling and mobile ItemRenderers• Slightly different approach then standard Flex
  12. 12. What About the MXML ItemRender.as• Extends Group• Has significant overhead• Encourages data binding (expensive)• Layouts are expensive• States add weight• Very convenient features, but they all add up to lower performance on mobile
  13. 13. New Classes on Next Slide (Don’t Panic)
  14. 14. New Classes• spark.components.supportClasses • StyleableTextField.as• spark.components • LabelItemRenderer.as • > IconItemRenderer.as• spark.primitives • BitmapImage.as (updated in 4.5)• spark.core • ContentCache.as
  15. 15. Sample ItemRenderer (show code)
  16. 16. StyleableTextField.as• Lightweight text control that supports Styles
  17. 17. • The StyleableTextField class is a text primitive for use in ActionScript skins and item renderers.• It cannot be used in MXML markup and is not compatible with effects.• styleName• setStyle()
  18. 18. LabelItemRenderer.as• Optimized default ItemRenderer
  19. 19. • Extends UIComponent• Limited Style Support alternatingItemColors, chromeColor, downColor, focusColor, paddingBottom, paddingTop, rollOverColor, selectionColor, symbolColor, verticalAlign• Great for simple text renderers• Renders the ‘data’ property as a string• Inherits the labelField and labelFunction from the s:List
  20. 20. IconItemRenderer• Image and text
  21. 21. • Uses ContentCache to cache the ‘icon’ images so that they don’t flash when scrolled to again• The ‘decorator’ and ‘iconPlaceholder’ should be an embeded asset for best performance• Supports both a ‘label’ and ‘message’
  22. 22. BitmapImage• Lightweight image component
  23. 23. ContentCache• LIFO Cache Object
  24. 24. • .maxCacheEntries• .maxActiveRequests
  25. 25. What If I’m Special?
  26. 26. Roll Your Own• Options • Extend UIComponent • Extend LabelItemRenderer • Extend IconItemRenderer
  27. 27. • Write the custom component in AS3, not in MXML• Look to LabelItemRenderer and IconItemRenderer for best practices• Extending UIComponent is more complicated since you have to implement IItemRenderer
  28. 28. iconDisplay
  29. 29. labelDisplayiconDisplay
  30. 30. labelDisplay iconDisplaymessageDisplay
  31. 31. labelDisplay iconDisplay decoratorDisplaymessageDisplay
  32. 32. Custom Component starRating
  33. 33. ItemPreviewImageRenderer (Show Code) • set defaults in constructor • override createChildren() • override createLabelDisplay() • override createMessageDisplay() • set labelFunction • set messageFunction • set iconFunction • override layoutContents() • override measure()
  34. 34. Renderer Virtualization• Ensure useVirtualLayout="true"• Recycles itemRenderers by setting the data property to null when off screen• Saves time on createChildren() calls• Essential for longs lists of data• Set to true by default
  35. 35. Tips!• getting style cheaper then setting style• setElementSize() is cheaper then setting width / height• setElementPosition() is cheaper then setting x / y• Use ContentCache to prevent image flicker
  36. 36. END
  37. 37. Intentional Left Blank
  38. 38. • Extra Slides After This Point
  39. 39. A Note onDisplayObjectSharingMode • Can reuse a displayobject in multiple location (TODO: fill this out)
  40. 40. MultiDPIBitmapSource• Optional source object for images

×