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

2.
Let me start a process here<br />

3.
Poll<br />How many have done native mobile?<br />How many have done mobile AIR?<br />How many have done mobile AIR with Flex?<br />How many have done it for multiple platforms?<br />

4.
You can do cross platform mobile development with Adobe AIR!!!<br />

5.
Wooooooh!!!!!!<br />

6.
We a wrote very good demo project. Actual mileage may vary.<br />

7.
Noooooo!!!!!!<br />

8.
Please, I beg you, button, stop appearing off-screen<br />

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

10.
Using one code base<br />

11.
Should you do this?<br />

12.
Content<br />Design<br />Develop<br />Publish<br />Flex with a little ActionScript only<br />

13.
Designing for Multiple Devices<br />

14.
Resolution and DPI<br />

15.

16.

17.

18.

19.
DPI FUBAR<br />

20.
So how do we deal with this?<br />

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

22.
Application DPI<br />3 Levels<br />160<br />240<br />320<br />

23.
Media Queries<br />CSS media queries allow you to target different DPI screens naturally<br />

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

25.
Media Query Options<br />ApplicationDPI<br />OS<br />

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

27.
Demo<br />Application DPI and Media Queries in Flex<br />

28.
Deeper Dive<br />Narciso Jaramillo<br />Deep Dive Into Multi Density & Multi Platform Application Development<br />

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

30.
Demo<br />Application Sizing in ActionScript<br />

31.
Flash Builder Simulating<br />Flex<br />In Design View<br />At compile<br />ActionScript<br />At compile<br />

32.
!=<br />

33.

34.

35.
Developing for Multiple Devices<br />

36.
Don’t tweak for devices in code.<br />

37.
If you can avoid it.<br />

38.
But what about differences between UI controls IOS vs Android vsPlayBook<br />

39.
It depends<br />

40.
Configuring for Multiple Devices<br />

41.
Application Descriptor<br />You know that XML file<br />Special settings for<br />Android <br />IOS<br />

42.
BlackBerry Descriptor<br />BlackBerry Uses Application Descriptor and another file:<br />blackberry-tablet.xml<br />

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

44.
Android Settings<br />Permissions<br />Custom URI<br />Compatibility Filtering<br />Install Location<br />

45.
Android Permissions<br />ACCESS_COARSE_LOCATION<br />ACCESS_FINE_LOCATION<br />ACCESS_NETWORK_STATE <br />ACCESS_WIFI_STATE <br />CAMERA <br />INTERNET <br />READ_PHONE_STATE<br />RECORD_AUDIO<br />WAKE_LOCK <br />WRITE_EXTERNAL_STORAGE <br />

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

47.
Android Custom URI<br /><activity> <br /> <intent-filter> <br /> <action android:name="android.intent.action.MAIN"/> <br /> <category android:name="android.intent.category.LAUNCHER"/> <br /> </intent-filter> <br /> <intent-filter> <br /> <action android:name="android.intent.action.VIEW"/> <br /> <category android:name="android.intent.category.BROWSABLE"/> <br /> <category android:name="android.intent.category.DEFAULT"/> <br /> <data android:scheme="myURI"/> <br /> </intent-filter> <br /></activity> <br />URL would be:<br />myURI://com.myApp.uniquename<br />Where com.myApp.uniquename is the app id from your descriptor <br />

48.
Android compatibility filtering<br />Permissions assume all or nothing<br />So if a feature is optional, you have to set it such or it won’t show up in store<br />Important for Camera, Audio<br />

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

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

51.
IOS Settings<br />Models<br />Resolution<br />Custom URI<br />Compatibility Filtering<br />Exit or Pause<br />

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

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

54.
Custom URI<br /><key>CFBundleURLTypes</key><br /><array><br /><dict><br /><key>CFBundleURLSchemes</key><br /><array><br /><string>myURI</string><br /></array><br /><key>CFBundleURLName</key><br /><string>com.myApp.uniquename</string><br /></dict><br /></array><br />URL would be:<br />myURI://com.myApp.uniquename<br />If you set this to be the same as your application id you get compatibility with Android apps.<br />

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

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

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

58.
Icon sizes<br />

59.
AIR Versions<br />There are some issues with AIR version and target<br />BlackBerry - 2.5<br />Android - 2.6<br />IOS -2.6, or 2.0 or 2.7<br />

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

61.
Multiple Descriptors<br />Solution:<br />

62.
Publishing for Multiple Devices<br />

63.
Flash Builder<br />Publish to all platforms at the same time<br />

64.
Compiling and Packaging<br />Flash Builder uses features that are accessible through command line tools <br />Often using those tools<br />Therefore before it can be a feature in Flash Builder, has to be available in command line<br />

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

66.
Case in point<br />Publishing AIR files compatible with Amazon Store<br />

67.
Command line Compiling<br />OS Scripts<br />ANT (what I use)<br />Maven<br />

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

69.
Process<br />Compile SWF<br />Gather External Resources<br />Package for target device<br />

70.
Compiling<br />Requires MXMLC<br />In ANT requires MXMLC Task<br />Despite the name, works for non MXML apps. <br />Doesn’t add the Flex Framework or anything either.<br />

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

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

73.
Demo<br />Command Line Compiling <br />with ANT<br />

74.
Gathering Files<br />SWF<br />Any assets used in application<br />Application descriptor file<br />

75.
Application Descriptor<br />Most have a line: <br /><content>[This value will be overwritten by Flash Builder in the output app.xml]</content><br />It won’t so you have to. <br />

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

77.
Packaging for Android<br /><argline="-target apk"/><br />Options include <br /><ul><li>apk

78.
apk-debug

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

80.
Packaging for IOS<br /><argline="-target ipa-ad-hoc "/><br />Options include <br /><ul><li>ipa-test

81.
ipa-debug

82.
ipa-app-store

83.
ipa-ad-hoc</li></li></ul><li>Packaging for BlackBerry<br /><execexecutable="${bb.packager}"dir="${bb.collect}"><br /><argvalue="-package"/><br /><argvalue="${app.name}.bar"/><br /><argvalue="${app.name}-app.bb.xml"/><br /><argvalue="${app.name}.swf"/><br /></exec><br />

84.
Tons of options<br />

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

86.
Packaging for BlackBerry<br />Debugging<br />Installation and launching<br />Signing<br />

87.
Demo<br />Command Line Packaging<br />with ANT<br />

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

89.
So should you do this?<br />

90.
My Weasely answer:It Depends<br />

91.
Can you wait for the next version of AIR?<br />

92.
Is your app your competitive advantage, or a cost center?<br />

93.
Is your audience spread out on devices?<br />

94.
Studio Cloud<br />

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