Building Apps for Multiple Devices<br />Terry Ryan<br />Developer Evangelist<br />http://terrenceryan.com<br />@tpryan<br />
Let me start a process here<br />
Poll<br />How many have done native mobile?<br />How many have done mobile AIR?<br />How many have done mobile AIR with Fl...
You can do cross platform mobile development with Adobe AIR!!!<br />
Wooooooh!!!!!!<br />
We a wrote very good demo project. Actual mileage may vary.<br />
Noooooo!!!!!!<br />
Please, I beg you, button, stop appearing off-screen<br />
My goal: give you guys an idea of what you need to do to actually produce multi-screen apps<br />
Using one code base<br />
Should you do this?<br />
Content<br />Design<br />Develop<br />Publish<br />Flex with a little ActionScript only<br />
Designing for Multiple Devices<br />
Resolution and DPI<br />
DPI FUBAR<br />
So how do we deal with this?<br />
Application DPI<br />This is the DPI of the device you are targeting in development<br />Allows for resizing to denser dev...
Application DPI<br />3 Levels<br />160<br />240<br />320<br />
Media Queries<br />CSS media queries allow you to target different DPI screens naturally<br />
Media Queries<br />@media all and (application-dpi: 160)<br />{<br />s|Button<br />	{<br />color: red;<br />	}<br />}<br /...
Media Query Options<br />ApplicationDPI<br />OS<br />
Personal Thought on OS Media Queries<br />Don’t do itif you want to keep a unified code base<br />Handle Density and scree...
Demo<br />Application DPI  and Media Queries in Flex<br />
Deeper Dive<br />Narciso Jaramillo<br />Deep Dive Into Multi Density & Multi Platform Application Development<br />
ActionScript Only<br />Roll your own looking at:<br />stage.fullScreenWidth<br />In development I’ve had issues with stage...
Demo<br />Application Sizing in ActionScript<br />
Flash Builder Simulating<br />Flex<br />In Design View<br />At compile<br />ActionScript<br />At compile<br />
!=<br />
Developing for Multiple Devices<br />
Don’t tweak for devices in code.<br />
If you can avoid it.<br />
But what about differences between UI controls IOS vs Android vsPlayBook<br />
It depends<br />
Configuring for Multiple Devices<br />
Application Descriptor<br />You know that XML file<br />Special settings for<br />Android <br />IOS<br />
BlackBerry Descriptor<br />BlackBerry Uses Application Descriptor and another file:<br />blackberry-tablet.xml<br />
BlackBerry Descriptor	<br />Allows you to make transparent apps and change preview icons.<br />Transparent apps aren’t sup...
Android Settings<br />Permissions<br />Custom URI<br />Compatibility Filtering<br />Install Location<br />
Android Permissions<br />ACCESS_COARSE_LOCATION<br />ACCESS_FINE_LOCATION<br />ACCESS_NETWORK_STATE <br />ACCESS_WIFI_STAT...
Android Custom URI<br />Allow web pages or other android apps to launch your app from a url when the application is instal...
Android Custom URI<br /><activity> <br />    <intent-filter> <br />        <action android:name="android.intent.action.MAI...
Android compatibility filtering<br />Permissions assume all or nothing<br />So if a feature is optional, you have to set i...
Camera Filtering<br /><uses-permission android:name="android.permission.CAMERA" /> <br /><uses-feature android:name="andro...
Android Instal Location <br /><android> <br />    <manifestAdditions> <br />        <![CDATA[ <br />            <manifest ...
IOS Settings<br />Models<br />Resolution<br />Custom URI<br />Compatibility Filtering<br />Exit or Pause<br />
Models<br /><key>UIDeviceFamily</key><br /><array><br /><string>1</string><!-- iPod/iPhone --><br /><string>2</string><!--...
Resolution<br /><requestedDisplayResolution>high</requestedDisplayResolution><br />High will allow you to draw single pixe...
Custom URI<br /><key>CFBundleURLTypes</key><br /><array><br /><dict><br /><key>CFBundleURLSchemes</key><br /><array><br />...
IOS compatibility filtering<br />Like Android it’s about discoverability and installation, not usage.<br />
Compatibility Filtering<br /><key>UIRequiredDeviceCapabilities</key><br /><array><br /><string>microphone</string><br /><s...
Exit or Pause<br /><key>UIApplicationExitsOnSuspend</key><br /><string>YES</string><br />
Icon sizes<br />
AIR Versions<br />There are some issues with AIR version and target<br />BlackBerry - 2.5<br />Android - 2.6<br />IOS -2.6...
But that’s hard set<br /><applicationxmlns="http://ns.adobe.com/air/application/2.6"><br />
Multiple Descriptors<br />Solution:<br />
Publishing for Multiple Devices<br />
Flash Builder<br />Publish to all platforms at the same time<br />
Compiling and Packaging<br />Flash Builder uses features that are accessible  through command line tools <br />Often using...
Flash Builder vs Command line<br />Flash Builder will often lack ui that the command line exposes<br />So it behooves you ...
Case in point<br />Publishing AIR files compatible with Amazon Store<br />
Command line Compiling<br />OS Scripts<br />ANT (what I use)<br />Maven<br />
Tools<br />ANT<br />MXMLC<br />AIR Packagers<br />ADT<br />blackberry-airpackager<br />pfi (no longer needed)<br />
Process<br />Compile SWF<br />Gather External Resources<br />Package for target device<br />
Compiling<br />Requires MXMLC<br />In ANT requires MXMLC Task<br />Despite the name, works for non MXML apps. <br />Doesn’...
Compiling via ANT<br /><mxmlcfile="${projectFile}"output="${device.swf}"><br />	<load-configfilename="${FLEX_HOME}/framewo...
Compiling via ANT<br /><load-configfilename="${FLEX_HOME}/frameworks/airmobile-config.xml"/><br />On Desktops<br /><load-c...
Demo<br />Command Line Compiling <br />with ANT<br />
Gathering Files<br />SWF<br />Any assets used in application<br />Application descriptor file<br />
Application Descriptor<br />Most have a line: <br /><content>[This value will be overwritten by Flash Builder in the outpu...
Packaging for Android<br /><execexecutable="${ADT}"dir="${android.collect}"><br /><argvalue="-package"/><br /><argline="-t...
Packaging for Android<br /><argline="-target apk"/><br />Options include <br /><ul><li>apk
apk-debug
apk-emulator</li></li></ul><li>Packaging for IOS<br /><execexecutable="${ADT}"dir="${ios.collect}"><br /><argvalue="-packa...
Packaging for IOS<br /><argline="-target ipa-ad-hoc "/><br />Options include <br /><ul><li>ipa-test
ipa-debug
ipa-app-store
ipa-ad-hoc</li></li></ul><li>Packaging for BlackBerry<br /><execexecutable="${bb.packager}"dir="${bb.collect}"><br /><argv...
Tons of options<br />
Packaging for BlackBerry<br />-package               - command to package<br />   -target (bar|bar-debug) - target format ...
Packaging for BlackBerry<br />Debugging<br />Installation and launching<br />Signing<br />
Demo<br />Command Line Packaging<br />with ANT<br />
Packaging for Amazon<br /><execexecutable="${ADT}"dir="${android.collect}"><br /><argvalue="-package"/><br /><argline="-ta...
So should you do this?<br />
My Weasely answer:It Depends<br />
Can you wait for the next version of AIR?<br />
Is your app your competitive advantage, or a cost center?<br />
Upcoming SlideShare
Loading in...5
×

Building apps for multiple devices

8,192

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,192
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
87
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building apps for multiple devices

  1. 1. Building Apps for Multiple Devices<br />Terry Ryan<br />Developer Evangelist<br />http://terrenceryan.com<br />@tpryan<br />
  2. 2. Let me start a process here<br />
  3. 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. 4. You can do cross platform mobile development with Adobe AIR!!!<br />
  5. 5. Wooooooh!!!!!!<br />
  6. 6. We a wrote very good demo project. Actual mileage may vary.<br />
  7. 7. Noooooo!!!!!!<br />
  8. 8. Please, I beg you, button, stop appearing off-screen<br />
  9. 9. My goal: give you guys an idea of what you need to do to actually produce multi-screen apps<br />
  10. 10. Using one code base<br />
  11. 11. Should you do this?<br />
  12. 12. Content<br />Design<br />Develop<br />Publish<br />Flex with a little ActionScript only<br />
  13. 13. Designing for Multiple Devices<br />
  14. 14. Resolution and DPI<br />
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19. DPI FUBAR<br />
  20. 20. So how do we deal with this?<br />
  21. 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. 22. Application DPI<br />3 Levels<br />160<br />240<br />320<br />
  23. 23. Media Queries<br />CSS media queries allow you to target different DPI screens naturally<br />
  24. 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. 25. Media Query Options<br />ApplicationDPI<br />OS<br />
  26. 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. 27. Demo<br />Application DPI and Media Queries in Flex<br />
  28. 28. Deeper Dive<br />Narciso Jaramillo<br />Deep Dive Into Multi Density & Multi Platform Application Development<br />
  29. 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. 30. Demo<br />Application Sizing in ActionScript<br />
  31. 31. Flash Builder Simulating<br />Flex<br />In Design View<br />At compile<br />ActionScript<br />At compile<br />
  32. 32. !=<br />
  33. 33.
  34. 34.
  35. 35. Developing for Multiple Devices<br />
  36. 36. Don’t tweak for devices in code.<br />
  37. 37. If you can avoid it.<br />
  38. 38. But what about differences between UI controls IOS vs Android vsPlayBook<br />
  39. 39. It depends<br />
  40. 40. Configuring for Multiple Devices<br />
  41. 41. Application Descriptor<br />You know that XML file<br />Special settings for<br />Android <br />IOS<br />
  42. 42. BlackBerry Descriptor<br />BlackBerry Uses Application Descriptor and another file:<br />blackberry-tablet.xml<br />
  43. 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. 44. Android Settings<br />Permissions<br />Custom URI<br />Compatibility Filtering<br />Install Location<br />
  45. 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. 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. 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. 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. 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. 50. Android Instal Location <br /><android> <br /> <manifestAdditions> <br /> <![CDATA[ <br /> <manifest android:installLocation="preferExternal"/> <br /> ]]> <br /> </manifestAdditions> <br /></android><br />
  51. 51. IOS Settings<br />Models<br />Resolution<br />Custom URI<br />Compatibility Filtering<br />Exit or Pause<br />
  52. 52. Models<br /><key>UIDeviceFamily</key><br /><array><br /><string>1</string><!-- iPod/iPhone --><br /><string>2</string><!-- iPad --><br /></array><br />
  53. 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. 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. 55. IOS compatibility filtering<br />Like Android it’s about discoverability and installation, not usage.<br />
  56. 56. Compatibility Filtering<br /><key>UIRequiredDeviceCapabilities</key><br /><array><br /><string>microphone</string><br /><string>still-camera</string><br /></array><br />
  57. 57. Exit or Pause<br /><key>UIApplicationExitsOnSuspend</key><br /><string>YES</string><br />
  58. 58. Icon sizes<br />
  59. 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. 60. But that’s hard set<br /><applicationxmlns="http://ns.adobe.com/air/application/2.6"><br />
  61. 61. Multiple Descriptors<br />Solution:<br />
  62. 62. Publishing for Multiple Devices<br />
  63. 63. Flash Builder<br />Publish to all platforms at the same time<br />
  64. 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. 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. 66. Case in point<br />Publishing AIR files compatible with Amazon Store<br />
  67. 67. Command line Compiling<br />OS Scripts<br />ANT (what I use)<br />Maven<br />
  68. 68. Tools<br />ANT<br />MXMLC<br />AIR Packagers<br />ADT<br />blackberry-airpackager<br />pfi (no longer needed)<br />
  69. 69. Process<br />Compile SWF<br />Gather External Resources<br />Package for target device<br />
  70. 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. 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. 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. 73. Demo<br />Command Line Compiling <br />with ANT<br />
  74. 74. Gathering Files<br />SWF<br />Any assets used in application<br />Application descriptor file<br />
  75. 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. 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. 77. Packaging for Android<br /><argline="-target apk"/><br />Options include <br /><ul><li>apk
  78. 78. apk-debug
  79. 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. 80. Packaging for IOS<br /><argline="-target ipa-ad-hoc "/><br />Options include <br /><ul><li>ipa-test
  81. 81. ipa-debug
  82. 82. ipa-app-store
  83. 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. 84. Tons of options<br />
  85. 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. 86. Packaging for BlackBerry<br />Debugging<br />Installation and launching<br />Signing<br />
  87. 87. Demo<br />Command Line Packaging<br />with ANT<br />
  88. 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. 89. So should you do this?<br />
  90. 90. My Weasely answer:It Depends<br />
  91. 91. Can you wait for the next version of AIR?<br />
  92. 92. Is your app your competitive advantage, or a cost center?<br />
  93. 93. Is your audience spread out on devices?<br />
  94. 94. Studio Cloud<br />
  95. 95. Follow up?<br />Feel free to contact me<br />terry.ryan@adobe.com<br />http://terrenceryan.com<br />Twitter: @tpryan<br />
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×