Sheridan Mobile Summit 2011

Developing for Mobile
with Adobe AIRBy Matthew Fabb

How many designers out there? How many developers? How many Flex developers? Developers familiar with Flex 4?

Who Am I?

EducationSheridan's System Analyst/Computer Programmer in 2000

Sheridan's Interactive Mulitmedia in 2002

I am currently a developer
at StickerYou

I was a technical editor on Wroxs
Professional Flex 3

Authored by:
Joseph Balderson, Andrew Trice, Peter Ent,
Joe Berkovitz, Tom Sugden, Todd Prekaski,
David Hassoun, and Jun Heider.

http://www.mathewfabb.comcontactme@matthewfabb.com@mattthewfabb

Adobe & mobile

Dreamweaver CS5.5jQuery Mobile integration

Allows you to create Android & iOS apps with PhoneGap using HTML, JS & CSS

Adobe WallabyConverts Flash into HTML5 content

Very basic animations, good for banner ads

WebKit only & optimized for iOS

Adobe Edge prototypeHTML5 animation tool

Uses jQuery

Adobe & Mobile

Digital Publishing SuiteCreates digital magazines for iOS, Android & PlayBook (possibly for WebOS in the future)

Photoshop Touch SDK

Flash CS5.5CS5 targeted iOS & now CS5.5 adds Android & Playbook

Flash Builder 4.5Includes Flex SDK 4.5 that has components targeted for mobile

Flash & AIR - Reach

Xoom, Galaxy Tab, Droid2, iPod Touch, iPad and in the browser.

What is Flex?

Flex is an Adobe open source framework to create Flash applications

MXML, an XML-based mark up language is used to layout the interface of the application

ActionScript is used with the MXML for interactivity

CSS can be used to style the application

MXML, CSS & ActionScript is compiled into generated ActionScript which is then compiled into a SWF file

Adobe AIR

AIR for desktop.AIR file for Mac, Linux, PC

AIR for mobile.IPA file for iOS

.APK file for Android

.BAR file for PlayBook

What is Flex?

The Flex compiler is free & open source

Developers can create Flex applications via:Adobe's Flash Builder

3rd party tools such as FlashDevelop or FDT

Any text editor & the Flex compiler

Flex 4.5

Next version of the Flex SDK is 4.5, code named Flex Hero

Additional features were added to regular Flex applications, but the main focus was mobile

Supports hardware keys

Orientation support

Provides API to save data between application sessions & interruptions (such as phone calls)

Has 2 methods of dealing with multiple DPIs on different devices

Mobile Application

supports hardware keyscurrently only back button, but looks like support for menu button is coming in a later releaseorientation supportkeeps track of the device orientation as a Flex stateyou can create a UI that changes with orientation or you can give it a completely different viewprovides API to save data between application sessions & phone callsnote the data that is saved is not
encrypted best not use this for any
sensitive data, unless you add your own
encryption

1024x600170 DPI

854x480
240 DPI

800x480
240 DPI

480x320160 DPI960x640326 DPI

1024x768120 DPI

Goals of Flex 4.5

Hero's 3 main goals of Flex 4.5Spark MaturationFlex 4 Spark components still lag behind MX components

Likely not to catch up completely in 4.5

Large-Application DevelopmentBetter RSLsYou can no use RSLs with monkey patching

More spark componets:DataGrid, Form, PopUpContainer

Text Layout Framework 2.0 integration

Multi-Screen DevelopmentMobile

What Flex 4.5 Mobile is made up of?

Mobile theme

Mobile Application

View & ViewNavigator

Mobile Application Components ActionBar

Text Components

List, Scroller and Touch Gestures

Mobile Splash Screen

Mobile View Menu For Android menu settings hardware button

Functionality to deal with different DPI

Soft keyboard support

Flex 4.5 app breakdown

ActionBar can appear above or bellow the view or both

ActionBar is consistent while the View changes from screen to screen

Mobile theme

Set of skins that are quite different from the regular Spark skins

Designed and optimized for mobile devices

For performance reasons all graphics are FXG and interaction is pure ActionScript

Mobile skins in the preview for the following regular spark components:Button

CheckBox

RadioButton

TextInput

TextArea

List

Scrollbar

More to come
before final release

View & ViewNavigator

The basis of how Flex Hero mobile works

The main area is a stack where views are popped on and off

Only one view is visible at a time

When leaving a view the UI objects are destroyed, but data object persists, keeping the memory footprint small

You can override the destruction of the UI, if it's an expensive UI to build and destroy (detailed chart with lots of visible data)

A history is maintained and when the back button is pressed it cycles through the history

Transitions can be easily added from one screen to another

ActionBar

There's 3 areas of the ActionBarnavigationContent, titleContent and actionContent

All are optional just like the ActionBar itself

TitleContent default has a label displaying the view titleCan be disabled to just have the title of the app or something else similar

Can be used with view transitions to animated in-sync with the view

Mobile text components

Optimized for mobile

TLF (Text Layout Framework) is not used and discouraged for mobileA mobile version of TLF is in the works but is not ready yet

Flex mobile text components use old school TextField which has better performance over the new FTE (Flash Text Engine)

Additional components

Mobile List, ScrollerSimilar to regular list, but optimized using MobileItemRenderer & responds to touch events

Splash screenA graphic or animation to show as your application starts up and initializes

Mobile View MenuNot in the latest build, but in the specification and is a menu that appears when the physical menu button on Android devices is pressed

Dealing with multiple DPIs

Flex Hero has multiple ways displaying content at different DPIs

In dealing with different DPI's, Flex Hero divides it into 3 sections:160 dpi< 200

240 dpi>= 200

< 280

320 dpi