Building apps for multiple devices

  • 7,906 views
Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,906
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
86
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 15.
  • 16.
  • 17.
  • 18.
  • 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. !=
  • 33.
  • 34.
  • 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>
  • 77. Packaging for Android
    <argline="-target apk"/>
    Options include
  • Packaging 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
  • Packaging for BlackBerry
    <execexecutable="${bb.packager}"dir="${bb.collect}">
    <argvalue="-package"/>
    <argvalue="${app.name}.bar"/>
    <argvalue="${app.name}-app.bb.xml"/>
    <argvalue="${app.name}.swf"/>
    </exec>
  • 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