Building apps for multiple devices

Building Apps for Multiple DevicesTerry RyanDeveloper Evangelisthttp://terrenceryan.com@tpryan

PollHow 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!!!

We a wrote very good demo project. Actual mileage may vary.

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

ContentDesignDevelopPublishFlex with a little ActionScript only

Designing for Multiple Devices

Building apps for multiple devices

Application DPIThis is the DPI of the device you are targeting in developmentAllows for resizing to denser devices

Application DPI3 Levels160240320

Media QueriesCSS media queries allow you to target different DPI screens naturally

Media Queries@media all and (application-dpi: 160){s|Button {color: red; }}@mediaalland (application-dpi: 240){s|Button {color: green; }}

Media Query OptionsApplicationDPIOS

Personal Thought on OS Media QueriesDon’t do itif you want to keep a unified code baseHandle Density and screen size, but not OS

DemoApplication DPI and Media Queries in Flex

Deeper DiveNarciso JaramilloDeep Dive Into Multi Density & Multi Platform Application Development

ActionScript OnlyRoll your own looking at:stage.fullScreenWidthIn development I’ve had issues with stage.stageWidthCapabilities.screenDPI

DemoApplication Sizing in ActionScript

Flash Builder SimulatingFlexIn Design ViewAt compileActionScriptAt compile

Developing for Multiple Devices

Don’t tweak for devices in code.

But what about differences between UI controls IOS vs Android vsPlayBook

Configuring for Multiple Devices

Application DescriptorYou know that XML fileSpecial settings forAndroid IOS

BlackBerry DescriptorBlackBerry 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 SettingsPermissionsCustom URICompatibility FilteringInstall Location

Android PermissionsACCESS_COARSE_LOCATIONACCESS_FINE_LOCATIONACCESS_NETWORK_STATE ACCESS_WIFI_STATE CAMERA INTERNET READ_PHONE_STATERECORD_AUDIOWAKE_LOCK WRITE_EXTERNAL_STORAGE

Android Custom URIAllow 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.uniquenameWhere com.myApp.uniquename is the app id from your descriptor

Android compatibility filteringPermissions assume all or nothingSo if a feature is optional, you have to set it such or it won’t show up in storeImportant 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 SettingsModelsResolutionCustom URICompatibility FilteringExit or Pause

Models<key>UIDeviceFamily</key><array><string>1</string><string>2</string></array>

Resolution<requestedDisplayResolution>high</requestedDisplayResolution>High will allow 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.uniquenameIf you set this to be the same as your application id you get compatibility with Android apps.

IOS compatibility filteringLike 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>

AIR VersionsThere are some issues with AIR version and targetBlackBerry - 2.5Android - 2.6IOS -2.6, or 2.0 or 2.7

But that’s hard set<applicationxmlns="http://ns.adobe.com/air/application/2.6">

Publishing for Multiple Devices

Flash BuilderPublish to all platforms at the same time

Compiling and PackagingFlash Builder uses features that are accessible through command line tools Often using those toolsTherefore before it can be a feature in Flash Builder, has to be available in command line

Flash Builder vs Command lineFlash Builder will often lack ui that the command line exposesSo it behooves you to learn command line

Case in pointPublishing AIR files compatible with Amazon Store

Command line CompilingOS ScriptsANT (what I use)Maven

ToolsANTMXMLCAIR PackagersADTblackberry-airpackagerpfi (no longer needed)

ProcessCompile SWFGather External ResourcesPackage for target device

CompilingRequires MXMLCIn ANT requires MXMLC TaskDespite the name, works for non MXML apps. Doesn’t add the Flex Framework or anything either.

Compiling via ANT<mxmlcfile="${projectFile}"output="${device.swf}"> <load-configfilename="${FLEX_HOME}/frameworks/airmobile-config.xml"/> <source-pathpath-element="${FLEX_HOME}/frameworks"/> <static-link-runtime-shared-libraries/> <compiler.library-pathdir="${FLEX_HOME}/frameworks"append="true"><includename="libs/*"/></compiler.library-path></mxmlc>

Compiling via ANT<load-configfilename="${FLEX_HOME}/frameworks/airmobile-config.xml"/>On Desktops<load-configfilename="${FLEX_HOME}/frameworks/air-config.xml"/>

DemoCommand Line Compiling with ANT

Gathering FilesSWFAny assets used in applicationApplication descriptor file

Application DescriptorMost 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<execexecutable="${ADT}"dir="${android.collect}"><argvalue="-package"/><argline="-target apk"/><argline="-storetype pkcs12"/><argline="-keystore ${cert}"/><argline="-storepass ${cert.password}"/><argvalue="${app.name}"/><argvalue="${app.name}-app.xml"/><argvalue="${app.name}.swf"/><argvalue="assets"/></exec>

Packaging for Android<argline="-target apk"/>Options include apk

apk-emulatorPackaging for IOS<execexecutable="${ADT}"dir="${ios.collect}"><argvalue="-package"/><argline="-target ipa-ad-hoc "/><argline="-storetype pkcs12 "/><argline="-keystore ${ios.cert} "/><argline="-storepass ${ios.certpass} "/><argline="-provisioning-profile ${ios.provision} "/><argvalue="${app.name}.ipa"/><argvalue="${app.name}-app.xml"/><argvalue="${app.name}.swf"/><argvalue="assets"/></exec>

Packaging for IOS<argline="-target ipa-ad-hoc "/>Options include ipa-test

ipa-ad-hocPackaging for BlackBerry<execexecutable="${bb.packager}"dir="${bb.collect}"><argvalue="-package"/><argvalue="${app.name}.bar"/><argvalue="${app.name}-app.bb.xml"/><argvalue="${app.name}.swf"/></exec>

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 BlackBerryDebuggingInstallation and launchingSigning

DemoCommand Line Packagingwith ANT

Packaging for Amazon<execexecutable="${ADT}"dir="${android.collect}"><argvalue="-package"/><argline="-target apk"/> <argline="-airDownloadURL ${amazon.url}"/><argline="-storetype pkcs12"/><argline="-keystore ${cert}"/><argline="-storepass ${cert.password}"/><argvalue="${app.name}"/><argvalue="${app.name}-app.xml"/><argvalue="${app.name}.swf"/><argvalue="assets"/></exec>

Can you wait for the next version of AIR?

Is your app your competitive advantage, or a cost center?

Building apps for multiple devices

Recommended

More Related Content

What's hot (20)

Similar to Building apps for multiple devices (20)

More from Terry Ryan (20)

Recently uploaded (20)

Building apps for multiple devices