1 / 64

Flex Performance Tips & Tricks

Flex Performance Tips & Tricks. Evtim Georgiev | Computer Scientist, Flex SDK | http://evtimmy.com Steve Shongrunden | Computer Scientist, Flex SDK | http://flexponential.com. Flex Performance Tips & Tricks. Performance Metrics From MX to Spark Item Renderers MXML Graphics and FXG

melina
Download Presentation

Flex Performance Tips & Tricks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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 arelighter 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:HGroupverticalAlign="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:IconItemRendererlabelField="callLetters" messageField="name" iconField="graphic" iconWidth="48" iconHeight="48" decorator="{assets.Chevron}” opaqueBackground="0xFFFFFF" cacheAsBitmap="true"> <fx:Script> <![CDATA[ importassets.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:Applicationxmlns: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:Graphicxmlns="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> <Rectx="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 MXMLGraphicElements 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>

More Related