Flex Performance Tips & Tricks

1. Flex Performance Tips & Tricks Evtim Georgiev | Computer Scientist, Flex SDK | http://evtimmy.com Steve Shongrunden | Computer Scientist, Flex SDK | http://flexponential.com

2. Flex Performance Tips & Tricks • Performance Metrics • From MX to Spark • Item Renderers • MXML Graphics and FXG • Mobile Skins • Q & A

3. Performance Metrics

4. Performance Metrics • Metrics • Types of Execution Time • Startup / validation time • Frame rate (fps) • Memory • SWF Size • Perceived Performance

5. Where’s Time Spent? Critical Areas: Object Creation, Measurement/Layout, Render Effects, Scrolling, Transitions Startup, Navigation, Data processing

6. Rules of Thumb • Use the best component for the job • Cache and queue external content • Set cacheAsBitmap on graphics that change infrequently but redraw often

7. From MX to Spark

8. From MX to Spark • MX • Rich components • Lightweight skins, styles • Spark introduces new component model • Declarative Skins - rich, toolable, extreme customization but heavier than MX • Lightweight graphic primitives (MXML Graphics) • Lighter-weight modularized components

9. More Choices with Spark • Types of Groups • Group – a generic container + MXML Graphics support • DataGroup – ItemRenderers + virtualization • Groups are lighter than Containers • No built-in scrolling • Chromeless • Clipping is off by default

10. Group vs. Container

11. More Choices with Spark • BitmapImage • GraphicElement • Remote loading, scaling and Caching (Flex 4.5) • Spark Image (Flex 4.5) • Skinnable component • Uses BitmapImage • Progress, broken icon, chrome

12. BitmapImage, Spark Image vs. MX Image

13. Spark Image and BitmapImage Tips • Caching and Queuing (New in Flex 4.5) • ContentCache class • Cache on by default • Queue off by default • contentLoaderproperty on Spark Image, BitmapImage • IContentLoaderinterface • Use PNGs • Avoid runtime scaling

14. More Choices with Spark

15. Spark Text Components • Label • Single-styled • Can use in Mobile for static text • RichText • Multi-styled • RichEditableText • Selection, edit • Used by TextInput and TextArea in non-Mobile projects • StyleableTextField (New in Flex 4.5) • Mobile support for edit and selection (turn off if not needed!) • Used by TextInput and TextArea in Mobile projects • Can’t use directly in MXML

16. Spark Text Components • Text performance is very platform dependent • Order of performance • OK: RichEditableText • Better: RichText • Best: Label • Best (for Mobile): StyleableTextField

17. ItemRenderers

18. ItemRenderers in Spark • Creating ItemRenderers in MXML is quick and simple • Avoid creating heavy ItemRenderers • Don’t use heavy (text) components • Cache and queue external content requests • Use cacheAsBitmap (carefully!) • Turn off “autoDrawBackground” if not needed • Filters / drop shadows • Avoid complex binding expressions • Reduce number of nested Groups • Beware itemRendererFunction since it prevents renderer recycling • For Mobile - uber-optimized IconItemRenderer and LabelItemRenderer

19. Optimizing MXML ItemRenderer

20. Optimizing MXML ItemRenderer <s:ItemRenderer ...> <s:Rect left="0" right="0" top="0" bottom="0"> <s:fill><s:SolidColor color="0" alpha="0"/></s:fill> </s:Rect> <s:Line left="0" right="0" bottom="0" height="0"> <s:stroke><s:SolidColorStroke .../></s:stroke> </s:Line> <s:HGroup verticalAlign="middle" left="15" right="15" top="0" bottom="0" gap="10”> <s:BitmapImage id="icon" source="{data.graphic}” ... /> <s:VGroup width="100%" height="100%" gap="12” ...> <s:RichText width="100%" text="{data.callLetters}"/> <s:RichText width="100%" text="{data.name}” .../> </s:Vgroup> <assets:Chevron/> </s:Hgroup> </s:ItemRenderer>

21. MXML ItemRenderer, Baseline Numbers

22. Replacing RichText with Label <s:ItemRenderer ...> <!-- background fill --> <s:Rect ... /> <!-- bottom separator --> <s:Line ... /> <s:HGroup ...> <s:BitmapImage .../> <s:VGroup ...> <s:Label width="100%" text="{data.callLetters}"/> <s:Label width="100%" text="{data.name}” .../> </s:VGroup> <assets:Chevron/> </s:Hgroup> </s:ItemRenderer>

23. Replacing RichText with Label

24. Adding ContentCache <s:ItemRenderer ...> <fx:Script> <![CDATA[ importspark.core.ContentCache; staticpublicconsts_imageCache:ContentCache = newContentCache(); ]]> </fx:Script> <s:Rect ... <s:Line ... <s:HGroup ...> <s:BitmapImage id="icon" source="{data.graphic}” contentLoader="{s_imageCache}"/> <s:VGroup ...> <s:Label .../> <s:Label ... /> </s:Vgroup> <assets:Chevron/> </s:Hgroup> </s:ItemRenderer>

25. Adding ContentCache

26. Set “caheAsBitmap” on the Decorator <s:ItemRenderer ...> <fx:Script> <![CDATA[ ... ]]> </fx:Script> <s:Rect ... <s:Line ... <s:HGroup ...> <s:BitmapImage .../> <s:VGroup ...> <s:Label .../> <s:Label ... /> </s:VGroup> <assets:Chevron cacheAsBitmap="true"/> </s:HGroup> </s:ItemRenderer>

27. Set “cacheAsBitmap” on the Decorator

28. Set “cacheAsBitmap” and “opaqueBackground” on the ItemRenderer <s:ItemRenderer ... opaqueBackground="0xFFFFFF” cacheAsBitmap="true"> <fx:Script> <![CDATA[ ... ]]> </fx:Script> <s:Rect ... <s:Line ... <s:HGroup ...> <s:BitmapImage .../> <s:VGroup ...> <s:Label .../> <s:Label ... /> </s:VGroup> <assets:Chevron .../> </s:HGroup> </s:ItemRenderer>

29. Set “cacheAsBitmap” and “opaqueBackground” on the ItemRenderer

30. IconItemRenderer and LabelItemRenderer • Optimized for Mobile • Use StylableTextField • Lightweight layout • Add more sophisticated ContentCache management • Configurable • Use styles, properties to control the layout, text, etc. • Extensible • Sub-class to tweak layout, parts, etc.

31. IconItemRenderer + “opaqueBackground” and “cacheAsBitmap” <s:List ...> <s:itemRenderer> <fx:Component> <s:IconItemRenderer labelField="callLetters" messageField="name" iconField="graphic" iconWidth="48" iconHeight="48" decorator="{assets.Chevron}” opaqueBackground="0xFFFFFF" cacheAsBitmap="true"> <fx:Script> <![CDATA[ import assets.Chevron; ]]> </fx:Script> </s:IconItemRenderer> </fx:Component> </s:itemRenderer> </s:List>

32. IconItemRenderer + “opaqueBackground” and “cacheAsBitmap”

33. MXML Graphics and FXG

34. UIComponent vs. GraphicElement • UIComponent • Rich feature set • Interactivity • Focus • States • Styles • GraphicElement • Lightweight graphic primitives for drawing

35. GraphicElements Share DisplayObjects

36. Initialization Time Comparison

37. GraphicElement vs. FXG • GraphicElements • Lightweight graphic primitives • FXG • Static compile-time optimized graphics

38. Initialization Time Comparison

39. MainApplication.mxml <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:Button text="Hello World" x="150"/> <s:Rect id="myRect1" width="100" height="100"> <s:fill><s:SolidColor color="#FF0000" /></s:fill> </s:Rect> <s:Rect id="myRect2" width="100" height="100" x="20" y="20"> <s:fill><s:SolidColor color="#00FF00" /></s:fill> </s:Rect> <s:Rect id="myRect3" width="100" height="100" x=”40" y=”40"> <s:fill><s:SolidColor color="#0000FF" /></s:fill> </s:Rect> </s:Application> Example of GraphicElements in MXML

40. MainApplication.mxml MyGraphic.fxg <s:Application ... xmlns:assets="*"> <s:Button text="Hello World" x=“150" /> <assets:MyGraphic /> </s:Application> <Graphicxmlns="http://ns.adobe.com/fxg/2008"> <Rect width="100" height="100"> <fill> <SolidColor color="#FF0000" /> </fill> </Rect> <Rect width="100” ... x="20" y="20"> <fill> <SolidColor color="#00FF00" /> </fill> </Rect> <Rect width="100" ... x="20" y="20"> <fill> <SolidColor color="#0000FF" /> </fill> </Rect> </Graphic> Example of Compiler Optimized FXG

41. FXG Scaling Fidelity JPG <s:Image source="MyStar.jpg" /> FXG <assets:MyStar/> width=50 width=100 width=200

42. Scale Grid in FXG With scale grid Without scale grid Original Size Scaled down Scaled up <s:Graphic xmlns="http://ns.adobe.com/fxg/2008" viewWidth="100" viewHeight="60" scaleGridLeft="20" scaleGridRight="80" scaleGridTop="20" scaleGridBottom="40">

43. Converting from GraphicElement to FXG • Create .fxg file and copy the shape • Change to the FXG namespace • Change color values from “0xFF0000” or “red” to “#FF0000” • Convert constraints to absolute values • Specify scale grid properties correctly (if desired) FXG: MXML GraphicElement: <s:Rect top="0" left="0" right="0" bottom="0"> <s:fill> <s:SolidColor color="red” /> </s:fill> </s:Rect> <Rect x="0" y="0" width="100" height="100"> <fill> <SolidColor color="#FF0000" /> </fill> </Rect>

44. Tips on Working with FXG • Incorrect scale grid settings can lead to artifacts • Avoid elements positioned in negative space • Avoid elements positioned outside the viewWidth / viewHeight • Must not overlap • Set alpha on fill/stroke instead of on the shape • Avoid strokes • Paths sometimes render with less anti-aliasing • FXG Group is not the Spark Group

45. Optimizing Skins

46. Mobile Optimized Skins • Larger default size • Different look on different device DPIs • Performance

47. Components with Mobile Optimized Skins • Button • CheckBox • RadioButton • HSlider • HScrollbar • VScrollbar • TextInput • TextArea • List • ActionBar • ViewNavigator • …

48. How was Performance Optimized?

49. Optimizing a Custom MXML Button Skin • Convert MXML GraphicElements to FXG files • Convert from MXML extending Skin to ActionScript extending MobileSkin • ButtonSkin uses StyleableTextField instead of Label • Same process can be applied to other skins

50. Un-optimized Button Skin <s:SparkButtonSkin ... alpha.disabled="0.5"> <s:Rect id="shadow" radiusX.down=“0" radiusX.up=“5" /> <s:Rect id="fill" left="1" right="1" top="1" radiusX="2" /> <s:Rect id="lowlight" left="1" right="1" top="1" radiusX="2" /> <s:Rect id="highlight" left="1" right="1" top="1" radiusX="2" /> <s:Rect id="highlightStroke" left="1" excludeFrom="down" /> <s:Rect id="hldownstroke1" left="1" includeIn="down" /> <s:Rect id="hldownstroke2" left="2" includeIn="down" /> <s:Rect id="border" left="0" right="0" radiusX="2" /> <s:Label id="labelDisplay" /> </s:SparkButtonSkin>