Building apps for multiple devices
Upcoming SlideShare
Loading in...5
×
 

Building apps for multiple devices

on

  • 8,650 views

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.

Statistics

Views

Total Views
8,650
Views on SlideShare
7,659
Embed Views
991

Actions

Likes
2
Downloads
85
Comments
0

12 Embeds 991

http://www.terrenceryan.com 748
http://blog.terrenceryan.com 131
http://css.dzone.com 74
http://terrenceryan.com 21
http://ria.dzone.com 5
http://mobile.dzone.com 4
http://webcache.googleusercontent.com 2
http://feeds.feedburner.com 2
http://static.slidesharecdn.com 1
http://proxxit.appspot.com 1
http://www.springone2gx.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building apps for multiple devices Building apps for multiple devices Presentation Transcript

  • Building Apps for Multiple Devices
    Terry Ryan
    Developer Evangelist
    http://terrenceryan.com
    @tpryan
  • Let me start a process here
  • 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?
  • You can do cross platform mobile development with Adobe AIR!!!
  • Wooooooh!!!!!!
  • We a wrote very good demo project. Actual mileage may vary.
  • Noooooo!!!!!!
  • Please, I beg you, button, stop appearing off-screen
  • My goal: give you guys an idea of what you need to do to actually produce multi-screen apps
  • Using one code base
  • Should you do this?
  • Content
    Design
    Develop
    Publish
    Flex with a little ActionScript only
  • Designing for Multiple Devices
  • Resolution and DPI
  • DPI FUBAR
  • So how do we deal with this?
  • Application DPI
    This is the DPI of the device you are targeting in development
    Allows for resizing to denser devices
  • Application DPI
    3 Levels
    160
    240
    320
  • Media Queries
    CSS media queries allow you to target different DPI screens naturally
  • Media Queries
    @media all and (application-dpi: 160)
    {
    s|Button
    {
    color: red;
    }
    }
    @mediaalland (application-dpi: 240)
    {
    s|Button
    {
    color: green;
    }
    }
  • Media Query Options
    ApplicationDPI
    OS
  • 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
  • Demo
    Application DPI and Media Queries in Flex
  • Deeper Dive
    Narciso Jaramillo
    Deep Dive Into Multi Density & Multi Platform Application Development
  • ActionScript Only
    Roll your own looking at:
    stage.fullScreenWidth
    In development I’ve had issues with stage.stageWidth
    Capabilities.screenDPI
  • Demo
    Application Sizing in ActionScript
  • Flash Builder Simulating
    Flex
    In Design View
    At compile
    ActionScript
    At compile
  • !=
  • Developing for Multiple Devices
  • Don’t tweak for devices in code.
  • If you can avoid it.
  • But what about differences between UI controls IOS vs Android vsPlayBook
  • It depends
  • Configuring for Multiple Devices
  • Application Descriptor
    You know that XML file
    Special settings for
    Android
    IOS
  • BlackBerry Descriptor
    BlackBerry Uses Application Descriptor and another file:
    blackberry-tablet.xml
  • BlackBerry Descriptor
    Allows you to make transparent apps and change preview icons.
    Transparent apps aren’t supported on other platforms
  • Android Settings
    Permissions
    Custom URI
    Compatibility Filtering
    Install Location
  • 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
  • Android Custom URI
    Allow web pages or other android apps to launch your app from a url when the application is installed.
  • 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
  • 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
  • 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"/>
  • Android Instal Location
    <android>
    <manifestAdditions>
    <![CDATA[
    <manifest android:installLocation="preferExternal"/>
    ]]>
    </manifestAdditions>
    </android>
  • IOS Settings
    Models
    Resolution
    Custom URI
    Compatibility Filtering
    Exit or Pause
  • Models
    <key>UIDeviceFamily</key>
    <array>
    <string>1</string><!-- iPod/iPhone -->
    <string>2</string><!-- iPad -->
    </array>
  • Resolution
    <requestedDisplayResolution>high</requestedDisplayResolution>
    High will allow you to draw single pixels on a high resolution screen, otherwise 1 pixel = 4 pixels
  • 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.
  • IOS compatibility filtering
    Like Android it’s about discoverability and installation, not usage.
  • Compatibility Filtering
    <key>UIRequiredDeviceCapabilities</key>
    <array>
    <string>microphone</string>
    <string>still-camera</string>
    </array>
  • Exit or Pause
    <key>UIApplicationExitsOnSuspend</key>
    <string>YES</string>
  • Icon sizes
  • 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
  • But that’s hard set
    <applicationxmlns="http://ns.adobe.com/air/application/2.6">
  • Multiple Descriptors
    Solution:
  • Publishing for Multiple Devices
  • Flash Builder
    Publish to all platforms at the same time
  • 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
  • Flash Builder vs Command line
    Flash Builder will often lack ui that the command line exposes
    So it behooves you to learn command line
  • Case in point
    Publishing AIR files compatible with Amazon Store
  • Command line Compiling
    OS Scripts
    ANT (what I use)
    Maven
  • Tools
    ANT
    MXMLC
    AIR Packagers
    ADT
    blackberry-airpackager
    pfi (no longer needed)
  • Process
    Compile SWF
    Gather External Resources
    Package for target device
  • 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.
  • 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>
  • Compiling via ANT
    <load-configfilename="${FLEX_HOME}/frameworks/airmobile-config.xml"/>
    On Desktops
    <load-configfilename="${FLEX_HOME}/frameworks/air-config.xml"/>
  • Demo
    Command Line Compiling
    with ANT
  • Gathering Files
    SWF
    Any assets used in application
    Application descriptor file
  • 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.
  • 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>
  • Packaging for Android
    <argline="-target apk"/>
    Options include
    • apk
    • apk-debug
    • apk-emulator
  • 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>
  • Packaging for IOS
    <argline="-target ipa-ad-hoc "/>
    Options include
    • ipa-test
    • ipa-debug
    • ipa-app-store
    • ipa-ad-hoc
  • 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>
  • Tons of options
  • 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
  • Packaging for BlackBerry
    Debugging
    Installation and launching
    Signing
  • Demo
    Command Line Packaging
    with ANT
  • 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>
  • So should you do this?
  • My Weasely answer:It Depends
  • Can you wait for the next version of AIR?
  • Is your app your competitive advantage, or a cost center?
  • Is your audience spread out on devices?
  • Studio Cloud
  • Follow up?
    Feel free to contact me
    terry.ryan@adobe.com
    http://terrenceryan.com
    Twitter: @tpryan