Embed Size (px)
DESCRIPTION
A session on using Flex and AIR to develop application that can run on IOS, Android,or PlayBook. A primer on getting at least close to the dream of one code base, multiple devices.
Citation preview
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
