This document discusses developing applications that can run across multiple mobile devices and platforms. It covers designing interfaces that adapt to different screen sizes and densities, using media queries and application DPI settings. It also discusses configuring applications to target Android, iOS, BlackBerry and other platforms through application descriptors and compiler settings. The document demonstrates packaging and deploying a single codebase to different devices using command line tools like ANT build scripts.

1. Building Apps for Multiple Devices Terry Ryan Developer Evangelist http://terrenceryan.com @tpryan

2. Let me start a process here

3. 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?

4. You can do cross platform mobile development with Adobe AIR!!!

5. Wooooooh!!!!!!

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

7. Noooooo!!!!!!

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

9. My goal: give you guys an idea of what you need to do to actually produce multi-screen apps

10. Using one code base

11. Should you do this?

12. Content Design Develop Publish Flex with a little ActionScript only

13. Designing for Multiple Devices

14. Resolution and DPI

19. DPI FUBAR

20. So how do we deal with this?

21. Application DPI This is the DPI of the device you are targeting in development Allows for resizing to denser devices

22. Application DPI 3 Levels 160 240 320

23. Media Queries CSS media queries allow you to target different DPI screens naturally

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

25. Media Query Options ApplicationDPI OS

26. Personal Thought on OS Media Queries Don’t do itif you want to keep a unified code base Handle Density and screen size, but not OS

27. Demo Application DPI and Media Queries in Flex

28. Deeper Dive Narciso Jaramillo Deep Dive Into Multi Density & Multi Platform Application Development

29. ActionScript Only Roll your own looking at: stage.fullScreenWidth In development I’ve had issues with stage.stageWidth Capabilities.screenDPI

30. Demo Application Sizing in ActionScript

31. Flash Builder Simulating Flex In Design View At compile ActionScript At compile

32. !=

35. Developing for Multiple Devices

36. Don’t tweak for devices in code.

37. If you can avoid it.

38. But what about differences between UI controls IOS vs Android vsPlayBook

39. It depends

40. Configuring for Multiple Devices

41. Application Descriptor You know that XML file Special settings for Android IOS

42. BlackBerry Descriptor BlackBerry Uses Application Descriptor and another file: blackberry-tablet.xml

43. BlackBerry Descriptor Allows you to make transparent apps and change preview icons. Transparent apps aren’t supported on other platforms

44. Android Settings Permissions Custom URI Compatibility Filtering Install Location

45. 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

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

47. 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

48. Android compatibility filtering 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

49. 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"/>

50. Android Instal Location <android> <manifestAdditions> <![CDATA[ <manifest android:installLocation="preferExternal"/> ]]> </manifestAdditions> </android>

51. IOS Settings Models Resolution Custom URI Compatibility Filtering Exit or Pause

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

53. Resolution <requestedDisplayResolution>high</requestedDisplayResolution> High will allow you to draw single pixels on a high resolution screen, otherwise 1 pixel = 4 pixels

54. 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 If you set this to be the same as your application id you get compatibility with Android apps.

55. IOS compatibility filtering Like Android it’s about discoverability and installation, not usage.

56. Compatibility Filtering <key>UIRequiredDeviceCapabilities</key> <array> <string>microphone</string> <string>still-camera</string> </array>

57. Exit or Pause <key>UIApplicationExitsOnSuspend</key> <string>YES</string>

58. Icon sizes

59. 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

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

61. Multiple Descriptors Solution:

62. Publishing for Multiple Devices

63. Flash Builder Publish to all platforms at the same time

64. 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

65. Flash Builder vs Command line Flash Builder will often lack ui that the command line exposes So it behooves you to learn command line

66. Case in point Publishing AIR files compatible with Amazon Store

67. Command line Compiling OS Scripts ANT (what I use) Maven

68. Tools ANT MXMLC AIR Packagers ADT blackberry-airpackager pfi (no longer needed)

69. Process Compile SWF Gather External Resources Package for target device

70. 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.

71. 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>

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

73. Demo Command Line Compiling with ANT

74. Gathering Files SWF Any assets used in application Application descriptor file

75. 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.

76. 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>

78. apk-debug

81. ipa-debug

82. ipa-app-store

84. Tons of options

85. 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

86. Packaging for BlackBerry Debugging Installation and launching Signing

87. Demo Command Line Packaging with ANT

88. 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>

89. So should you do this?

90. My Weasely answer:It Depends

91. Can you wait for the next version of AIR?

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

93. Is your audience spread out on devices?

94. Studio Cloud

95. Follow up? Feel free to contact me terry.ryan@adobe.com http://terrenceryan.com Twitter: @tpryan