Building Apps for Multiple Devices

Terry RyanDeveloper Evangelisthttp://terrenceryan.com@tpryan

Let me start a process here

Poll

• How many have done native mobile?• How many have done mobile

AIR?• How many have done mobile

AIR with Flex?• How many have done it for

multiple platforms?

You can do cross platform mobile

development with Adobe AIR!!!

Wooooooh!!!!!!

We a wrote very good demo project.

Actual mileage may vary.

Noooooo!!!!!!

Please, I beg you, button, stop appearing off-screen

My goal: give you guys an idea of what you

need to do to actually produce multi-screen

apps

Using one code base

Should you do this?

Content

• Design• Develop• Publish

• Flex with a little ActionScript only

Designing for Multiple Devices

Resolution and DPI

DPI FUBAR

So how do we deal with this?

Application DPI

• This is the DPI of the device you are targeting in development• Allows for resizing to

denser devices

Application DPI

• 3 Levels–160–240–320

Media Queries

• CSS media queries allow you to target different DPI screens naturally

Media Queries

@media all and (application-dpi: 160){

s|Button{

color: red;}

}

@media all and (application-dpi: 240){

s|Button{

color: green;}

}

Media Query Options

• ApplicationDPI• OS

Personal Thought on OS Media Queries

• Don’t do it if you want to keep a unified code base• Handle Density and screen

size, but not OS

Demo

Application DPI and Media Queries in Flex

Deeper Dive

Narciso JaramilloDeep Dive Into Multi Density & Multi Platform Application

Development

ActionScript Only

• Roll your own looking at:–stage.fullScreenWidth• In development I’ve had issues with stage.stageWidth

–Capabilities.screenDPI

Demo

Application Sizing in ActionScript

Flash Builder Simulating

• Flex–In Design View–At compile

• ActionScript–At compile

!=

Developing for Multiple Devices

Don’t tweak for devices in code.

If you can avoid it.

But what about diff erences between UI

controls IOS vs Android vs

PlayBook

It depends

Configuring for Multiple Devices

Application Descriptor

• You know that XML file• Special settings for–Android –IOS

BlackBerry Descriptor

BlackBerry Uses Application Descriptor and another file:

blackberry-tablet.xml

BlackBerry Descriptor

• Allows you to make transparent apps and change preview icons.• Transparent apps aren’t

supported on other platforms

Android Settings

• Permissions• Custom URI• Compatibility Filtering• Install Location

Android Permissions

• ACCESS_COARSE_LOCATION• ACCESS_FINE_LOCATION• ACCESS_NETWORK_STATE • ACCESS_WIFI_STATE • CAMERA • INTERNET • READ_PHONE_STATE• RECORD_AUDIO• WAKE_LOCK • WRITE_EXTERNAL_STORAGE

Android Custom URI

• Allow web pages or other android apps to launch your app from a url when the application is installed.

Android Custom URI

<activity> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> <intent-filter> <action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.BROWSABLE"/> <category android:name="android.intent.category.DEFAULT"/> <data android:scheme="myURI"/> </intent-filter> </activity>

URL would be:myURI://com.myApp.uniquename

Where com.myApp.uniquename is the app id from your descriptor

Android compatibility fi ltering

• Permissions assume all or nothing• So if a feature is optional,

you have to set it such or it won’t show up in store• Important for Camera,

Audio

Camera Filtering

<uses-permission android:name="android.permission.CAMERA" /> <uses-feature android:name="android.hardware.camera" android:required="false"/> <uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/> <uses-feature android:name="android.hardware.camera.flash" android:required="false"/>

Android Instal Location

<android> <manifestAdditions> <![CDATA[ <manifest android:installLocation="preferExternal"/> ]]> </manifestAdditions> </android>

IOS Settings

• Models• Resolution• Custom URI• Compatibility Filtering• Exit or Pause

Models

<key>UIDeviceFamily</key> <array> <string>1</string> <!-- iPod/iPhone --> <string>2</string> <!-- iPad --></array>

Resolution

<requestedDisplayResolution>high</requestedDisplayResolution>

High wil l al low you to draw single pixels on a high resolution screen, otherwise 1 pixel = 4 pixels

Custom URI

<key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLSchemes</key> <array> <string>myURI</string> </array> <key>CFBundleURLName</key> <string>com.myApp.uniquename</string> </dict> </array>

URL would be:myURI://com.myApp.uniquename

I f you set this to be the same as your application id you get compatibil ity with Android apps.

IOS compatibility fi ltering

Like Android it’s about discoverability and installation, not usage.

Compatibility Filtering

<key>UIRequiredDeviceCapabilities</key> <array> <string>microphone</string> <string>still-camera</string> </array>

Exit or Pause

<key>UIApplicationExitsOnSuspend</key> <string>YES</string>

Icon sizes

Icon Size Platform

16 Desktop

29 IOS

32 Desktop

36 Android

48 Android, IOS, Desktop

57 IOS

72 Android,IOS

86 PlayBook

114 IOS

128 Desktop

512 IOS

AIR Versions

• There are some issues with AIR version and target–BlackBerry - 2.5–Android - 2.6–IOS -2.6, or 2.0 or 2.7

But that’s hard set

<application xmlns="http://ns.adobe.com/air/application/2.6">

Multiple Descriptors

• Solution:

Publishing for Multiple Devices

Flash Builder

• Publish to all platforms at the same time

Compiling and Packaging

• Flash Builder uses features that are accessible through command line tools • Often using those tools• Therefore before it can be a

feature in Flash Builder, has to be available in command line

Flash Builder vs Command line

• Flash Builder will often lack ui that the command line exposes• So it behooves you to learn

command line

Case in point

• Publishing AIR files compatible with Amazon Store

Command line Compiling

• OS Scripts• ANT (what I use)• Maven

Tools

• ANT• MXMLC• AIR Packagers–ADT–blackberry-airpackager–pfi (no longer needed)

Process

• Compile SWF• Gather External Resources• Package for target device

Compiling

• Requires MXMLC• In ANT requires MXMLC

Task• Despite the name, works

for non MXML apps. • Doesn’t add the Flex

Framework or anything either.

Compiling via ANT

<mxmlc file="${projectFile}" output="${device.swf}" > <load-config filename="${FLEX_HOME}/frameworks/airmobile-

config.xml"/> <source-path path-element= "${FLEX_HOME}/frameworks" /><static-link-runtime-shared-libraries />

<compiler.library-path dir="${FLEX_HOME}/frameworks" append="true"> <include name="libs/*" />

</compiler.library-path></mxmlc>

Compiling via ANT

<load-config filename="${FLEX_HOME}/frameworks/airmobile-config.xml"/>

On Desktops

<load-config filename="${FLEX_HOME}/frameworks/air-config.xml"/>

Demo

Command Line Compiling with ANT

Gathering Files

• SWF• Any assets used in

application• Application descriptor file

Application Descriptor

Most have a line: <content>[This value will be overwritten by Flash Builder in the output app.xml]</content>

It won’t so you have to.

Packaging for Android

<exec executable="${ADT}" dir="${android.collect}"><arg value="-package"/><arg line="-target apk"/><arg line="-storetype pkcs12"/><arg line="-keystore ${cert}" /><arg line="-storepass ${cert.password}" /><arg value="${app.name}"/><arg value="${app.name}-app.xml"/><arg value="${app.name}.swf"/><arg value="assets"/>

</exec>

Packaging for Android

<arg line="-target apk "/>

Options include • apk• apk-debug• apk-emulator

Packaging for IOS

<exec executable="${ADT}" dir="${ios.collect}"><arg value="-package"/><arg line="-target ipa-ad-hoc "/><arg line="-storetype pkcs12 "/><arg line="-keystore ${ios.cert} " /><arg line="-storepass ${ios.certpass} " /><arg line="-provisioning-profile $

{ios.provision} " /><arg value="${app.name}.ipa"/><arg value="${app.name}-app.xml"/><arg value="${app.name}.swf"/><arg value="assets"/>

</exec>

Packaging for IOS

<arg line="-target ipa-ad-hoc "/>

Options include • ipa-test• ipa-debug• ipa-app-store• ipa-ad-hoc

Packaging for BlackBerry

<exec executable="${bb.packager}" dir="${bb.collect}"><arg value="-package"/><arg value="${app.name}.bar"/><arg value="${app.name}-app.bb.xml"/><arg value="${app.name}.swf"/>

</exec>

Tons of options

Packaging for BlackBerry

-package - command to package -target (bar|bar-debug) - target format bar or bar-debug -connect <host> - host ip address for debugging -no-validation - turn off air and bar validation -list-files - list all files in the resulting package -env <var>=<value> - set an extra environment variable for the runtime -barVersion <version> - run in compatibility mode (set older version to be compatible with) -publisher - set the publisher (author) name -buildId - set the build id (4th segment of the version) -devMode - package in development mode<signing options> (part of packaging options): -signDev - command to sign with developer's certificate -keystore <store> - keystore file -storepass <pass> - store password for certificate store -signRim - command to sign by rim (requires internet connection) -cskpass <pass> - password to encrypt long-lived keys<deployment_options>: -installApp - command to install the package -launchApp - command to launch the app -device <deviceId> - set host name or IP address of the target -password <password> - device password

Packaging for BlackBerry

• Debugging• Installation and launching• Signing

Demo

Command Line Packagingwith ANT

Packaging for Amazon

<exec executable="${ADT}" dir="${android.collect}"><arg value="-package"/><arg line="-target apk"/><arg line="-airDownloadURL ${amazon.url}"/><arg line="-storetype pkcs12"/><arg line="-keystore ${cert}" /><arg line="-storepass ${cert.password}" /><arg value="${app.name}"/><arg value="${app.name}-app.xml"/><arg value="${app.name}.swf"/><arg value="assets"/>

</exec>

So should you do this?

My Weasely answer:It Depends

Can you wait for the next version of AIR?

Is your app your competitive advantage,

or a cost center?

Is your audience spread out on devices?

Studio Cloud

Follow up?

• Feel free to contact me–terry.ryan@adobe.com–http://terrenceryan.com–Twitter: @tpryan