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.
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
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
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.
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
27. TRICKS’N’TIPS
Don’t interfere expensive process of parsing
data into view when doing a transition.
Use BusyIndicator before or after transition.
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.