This document provides an overview and tips for optimizing mobile apps built with Flex. It begins with a quick introduction to key concepts like ViewNavigatorApplication and ViewNavigator. It then discusses optimizations that can be made for bitmaps, text, lists, skins, and more. Some tricks and tips are provided, such as using cached bitmaps, avoiding complex bindings, and keeping the display list flat. The document also discusses using the Robotlegs framework for mobile development. It concludes by asking attendees how they approach multiscreen development.

1. MAKING MOBILE FLEX APPS
BLAZING FAST
Michał Wróblewski

2. ABOUT
 @wrobel221
 Live in Poznań, Poland
 We make games in
BlackMoon Design
 I come from Świebodzin

3. QUICK OUTLINE
 Quick intro to Flex Mobile.
 A hard way from 5 FPS to 30+ FPS?
 Tricks’n’Tips
 The Robotlegs Way
 Q&A

4. SOMETHING ABOUT YOU
 How many of you got your hands dirty with mobile
(especially Flex Mobile) development?

5. QUICK INTRO - VIEWNAVIGATORAPPLICATION
 You can choose one of these:
ViewNavigatorApplication
TabbedViewNavigatorApplication
SplitViewNavigatorApplication
(coming with Flex 4.6)

6. QUICK INTRO - VIEWNAVIGATORAPPLICATION
 Contains an instance(s) of
ViewNavigator(s).
 You setup some global properties of
your app e.g, ActionBar content

7. QUICK INTRO - VIEWNAVIGATORAPPLICATION

8. QUICK INTRO - VIEWNAVIGATORAPPLICATION

9. QUICK INTRO - VIEWNAVIGATOR
 Manages moving between views.
 Has a stack of view data objects
 By default only one view exists, others are
destroyed after remove (only data persists)
 Setup of default transitions
 Access to current view

10. QUICK INTRO - VIEWNAVIGATOR
 Navigation methods:
 replaceView,
 pushView,
 popView,
 popToFirstView,
 popAll

11. QUICK INTRO - VIEWNAVIGATOR
 Skin states:
 portrait,
 landscape,
 portraitAndOverlay,
 landscapeAndOverlay

12. QUICK INTRO - VIEW
 Visual container for a view of your mobile app.
 You should only add mobile-optimised Flex
components here
 Accepts data passed in pushView
 Returns data by overriding createReturnObject()
 Has destructionPolicy (default – auto) to control
whether the view should be destroyed on pop or
just cached.
 Setup menu by placing ViewMenuItem in a
<s:viewMenuItems> tag.

13. QUICK INTRO – COMMONS
 Label
 Icon
 actionContent
 navigationContent

14. OPTIMIZATION

15. OPTIMIZATION - BITMAPS

16. OPTIMIZATION - BITMAPS
 BitmapImage:
 Extends GraphicElement
 Remote loading
 Scaling
 Caching

17. OPTIMIZATION - BITMAPS
 Image (spark)
 Extends SkinnableComponent
 Has BitmapImage
 Supports progress
 Broken image icon
 Custom skinning

18. OPTIMIZATION - BITMAPS
 BitmapImage 3x faster than spark Image
 Try to avoid compressed image formats like JPG
 Do caching (on by default) and queuing (off by
default) by using ContentCache. Assign it to
contentLoader property of BitmapImage and Image

19. OPTIMIZATION - TEXT
 RichEditableText
 RichText
 Label
 StyleableTextField (new in Flex 4.5)
 StageText (coming in Flex 4.6)

20. OPTIMIZATION - TEXT
 Only StyleableTextField extends flash.text.TextField
 Can’t use StyleableTextField directly in MXML, so
you’re quite pushed to use it in AS3.

21. OPTIMIZATION – LISTS AND ITEMRENDERERS
 All mentioned before apply
 uber-optimized LabelItemRenderer and
IconItemRenderer

22. OPTIMIZATION – LISTS AND ITEMRENDERERS
 Mobile item renderers – if possible use bundler
uber-optimized LabelItemRenderer and
IconItemRenderer, they were shown in all Flex
Mobile demos.
 Avoid complex binding expressions.
 Turn off autoDrawBackground if not needed.
 Use cacheAsBitmap, but be careful.
 Use opaqueBackground
 itemRendererFunction prevents pooling and
recycling.
 Favor FXG over spark graphic elements (if
possible)

23. OPTIMIZATION - SKINS
 Extend MobileSkin instead of SparkSkin
 AS3 version will perform better than MXML
 Use FXG for static vector graphics, use where
possible
 Use GraphicElement as lightweight graphic
primitives. E.g. Backgrounds, borders etc.

24. TRICKS’N’TIPS
 Adding platform specific UI patterns
 CSS media rules
 Separate projects with common code base
 Ready multiplatform mobile themes

25. TRICKS’N’TIPS
 Handlingmulti DPI devices with
MultiDPIBitmapSource

26. TRICKS’N’TIPS
 Be sure not to put references to view
instances anywhere.

27. TRICKS’N’TIPS
 Don’t interfere expensive process of parsing
data into view when doing a transition.
 Use BusyIndicator before or after transition.

28. TRICKS’N’TIPS
 Don’t
cheat by testing your app on a high-end
smartphone

29. TRICKS’N’TIPS
 Please don’t use filters.

30. TRICKS’N’TIPS
 Have memory usage and limitations in mind

31. TRICKS’N’TIPS
 On every level make your display list as flat
as possible.
 Use Shaun’s script to show more info about
the display list tree

32. TRICKS’N’TIPS
 At the end:
[profile, test, optimize].loop()

33. THE ROBOTLEGS WAY

34. THE ROBOTLEGS WAY
 “I and my team have been using Robotlegs to build
several apps for many months, and I've never had
any issues caused by Robotlegs”
Paul Robertson

35. THE ROBOTLEGS WAY
 Views are being destroyed when you push a new
view.
 The same will happen with Mediators

36. THE ROBOTLEGS WAY
 You’ll need an instance of ViewNavigator in your
navigator manager.

37. THE ROBOTLEGS WAY
 Don’t hesitate to use viewManager in your View.
 Dispatch a command only if you need some data
from the rest of the application.

38. THE ROBOTLEGS WAY

39. A QUESTION TO YOU
 Howdo you approach multiscreen
development?

40. THANKS!
 Any questions?