Building apps for multiple devices
•Download as PPTX, PDF•
1 like•4,108 views
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.
Report
Share
Building apps for multiple devices
- 1. Building Apps for Multiple DevicesTerry RyanDeveloper Evangelisthttp://terrenceryan.com@tpryan
- 2. Let me start a process here
- 3. 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?
- 4. You can do cross platform mobile development with Adobe AIR!!!
- 6. We a wrote very good demo project. Actual mileage may vary.
- 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. ContentDesignDevelopPublishFlex with a little ActionScript only
- 13. Designing for Multiple Devices
- 19. DPI FUBAR
- 20. So how do we deal with this?
- 21. Application DPIThis is the DPI of the device you are targeting in developmentAllows for resizing to denser devices
- 23. Media QueriesCSS 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; }}
- 26. Personal Thought on OS Media QueriesDon’t do itif you want to keep a unified code baseHandle Density and screen size, but not OS
- 27. DemoApplication DPI and Media Queries in Flex
- 28. Deeper DiveNarciso JaramilloDeep Dive Into Multi Density & Multi Platform Application Development
- 29. ActionScript OnlyRoll your own looking at:stage.fullScreenWidthIn development I’ve had issues with stage.stageWidthCapabilities.screenDPI
- 30. DemoApplication Sizing in ActionScript
- 31. Flash Builder SimulatingFlexIn Design ViewAt compileActionScriptAt 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 DescriptorYou know that XML fileSpecial settings forAndroid IOS
- 42. BlackBerry DescriptorBlackBerry 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 SettingsPermissionsCustom URICompatibility FilteringInstall Location
- 45. Android PermissionsACCESS_COARSE_LOCATIONACCESS_FINE_LOCATIONACCESS_NETWORK_STATE ACCESS_WIFI_STATE CAMERA INTERNET READ_PHONE_STATERECORD_AUDIOWAKE_LOCK WRITE_EXTERNAL_STORAGE
- 46. Android Custom URIAllow 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.uniquenameWhere com.myApp.uniquename is the app id from your descriptor
- 48. 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
- 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 SettingsModelsResolutionCustom URICompatibility FilteringExit 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.uniquenameIf you set this to be the same as your application id you get compatibility with Android apps.
- 55. IOS compatibility filteringLike Android it’s about discoverability and installation, not usage.
- 58. Icon sizes
- 59. AIR VersionsThere are some issues with AIR version and targetBlackBerry - 2.5Android - 2.6IOS -2.6, or 2.0 or 2.7
- 60. But that’s hard set<applicationxmlns="http://ns.adobe.com/air/application/2.6">
- 62. Publishing for Multiple Devices
- 63. Flash BuilderPublish to all platforms at the same time
- 64. 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
- 65. Flash Builder vs Command lineFlash Builder will often lack ui that the command line exposesSo it behooves you to learn command line
- 66. Case in pointPublishing AIR files compatible with Amazon Store
- 67. Command line CompilingOS ScriptsANT (what I use)Maven
- 68. ToolsANTMXMLCAIR PackagersADTblackberry-airpackagerpfi (no longer needed)
- 69. ProcessCompile SWFGather External ResourcesPackage for target device
- 70. CompilingRequires MXMLCIn ANT requires MXMLC TaskDespite the name, works for non MXML apps. Doesn’t add the Flex Framework or anything either.
- 72. Compiling via ANT<load-configfilename="${FLEX_HOME}/frameworks/airmobile-config.xml"/>On Desktops<load-configfilename="${FLEX_HOME}/frameworks/air-config.xml"/>
- 73. DemoCommand Line Compiling with ANT
- 74. Gathering FilesSWFAny assets used in applicationApplication descriptor file
- 75. 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.
- 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>
- 77. Packaging for Android<argline="-target apk"/>Options include apk
- 78. apk-debug
- 79. 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>
- 80. Packaging for IOS<argline="-target ipa-ad-hoc "/>Options include ipa-test
- 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 BlackBerryDebuggingInstallation and launchingSigning
- 87. DemoCommand Line Packagingwith 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 meterry.ryan@adobe.comhttp://terrenceryan.comTwitter: @tpryan