Adobe AIR Mobile development for Android and PlayBook

© 2011 Adobe Systems Incorporated.

Mobile Development & !e Flash Platform Mihai Corlan | Developer Evangelist | h"p://corlan.org


About Me

  Developer evangelist (since 2008)

  Flash Builder Engineer 2006-2008

  Web Developer 2000 - 2006

  Blog: h"p://corlan.org

  Twi"er: h"p://twi"er.com/mcorlan

  Email: [email protected]

2


Agenda

Flash Platform

Mobile Apps


Later !is Year


Android


AIR APIs on Android

  Camera and Microphone access

  Accelerometer

  GPS

  StageWebView

  Multitouch/Gestures

  Screen Orientation / Fullscreen

  Phone/SMS/Email/Browser/Android Market

  Camera (Including Camera Roll Support)

  Session Cache Support – Restore App State

  Hardware Bu"ons Support

  Local database (SQLite)


Se"ing Android Permissions


Se"ing Android Permissions

Use Application Descriptor File -> AndroidManifest.xml #le

<android><manifestAdditions><![CDATA[

<manifest android:installLocation="auto">

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>

</manifest>]]></manifestAdditions>

</android>


Preview releases of new Flash Platform Tooling – Mobile Support

Flash Builder

Flex “Hero”

Create Mobile Projects Run on Devices Publish Them

Support for Mobile Touch Enabled Components Multiple Views – Stack View

http://labs.adobe.com


Options for Building Mobile AIR Apps using Burrito

  ActionScript Mobile Project (no MXML)

  Flex Mobile Project:

  Blank – s:Application

  Mobile Project - s:MobileApplication

  Mobile Project – s:TabbedMobileApplication


MobileApplication vs. TabbedMobileApplication


Flex Mobile Components

Screen Metaphor

Application First Screen Second Screen


Flex Mobile Components - ViewNavigator

Using Flex’s s:MobileApplication or s:TabbedMobileApplication you get screen management for free

  navigator.push(NewScreen, data) - add new screen

  navigator.popView() - go to previous screen

  navigator. popToFirstView() - go to #rst view

  navigator.activeView - retrieve active view


Architecture of Flex Mobile App

MobileApplication

ViewNavigator

ActionBar

View

Support for screen navigation; Application persistence between sessions

Application UI: - screens/lists/bu"ons/titles


View Lifecycle

View Another View

Created Created Destroyed Destroyed Created

Data

?

Destroyed

data = yourData; destructionPolicy =”none"


View and ActionBar Components

Hide the Action Bar: actionBarVisible = false; Overlay the Action Bar: overlayControls = true;


Mobile Components

  Bu"on

  CheckBox

  RadioBu"on

  TextInput

  TextArea

  List

  ScrollBar

Touch Enabled

Mobile Skins: ActionScript

based skins and FXG

Other components will come


Lists and Item Renderers

MobileItemRenderer

<s:MobileItemRenderer label="Beer"/>

MobileIconItemRenderer

<s:MobileIconItemRenderer

labelField="label" messageField="message" iconField="icon" decoratorClass="phoneIcon"/>


Splash Screen

<s:MobileApplication splashScreenImage="@Embed(source='assets/splash-screen.png')"


Helper Apps for Mobile Development

AIR app for Desktop

Adobe AIR Launchpad Tour de Mobile Flex

Android AIR App


Resources

  MP3 Remote Control for Android: h"p://corlan.org/2010/07/02/creating-multi-screen-apps-for-android-and-desktop-using-air/

  Mobile development with Flash Builder Burrito and Hero: h"p://www.adobe.com/devnet/$ex/articles/mobile_development_hero_burrito.html

  Ge"ing Flash Builder “Burrito”: h"p://labs.adobe.com

  Tour de Mobile Flex: h"p://$ex.org/tourmobile

  MAX 2010 Sessions Recordings (Channels > MAX 2010): h"p://tv.adobe.com


!e PlayBook Device


Hardware Details

Ultra portable

  Height 5.1” / 130mm

  Width 7.6” / 194mm

  Depth 0.4” / 10mm

  Weight 0.9 lbs /400g

Performance

  7” LCD display 1024 x 600

  Multi-touch capacitive screen

  1 GHz dual-core processor

  1 GB RAM

  Symmetric multi-processing Best-in-class media

  3 MP forward facing camera

  5 MP rear-facing camera

  1080p HD video; H.264, MPEG4, WMV

  HDMI video output (full OS output, not limited to image/video)

  Stereo sound speakers

Connections

  Micro USB and Micro HDMI ports

  Wi-Fi® 802.11 a/b/g/n

  Bluetooth ® 2.1 +EDR


Availability

Early 2011

  BlackBerry PlayBook - WiFi only

Summer 2011

  BlackBerry 4G PlayBook released with Sprint in the Summer (Announced Jan 6th at CES)


Developer Have Choices


BlackBerry Tablet OS

BlackBerry Tablet OS

  Based on QNX® Neutrino® RTOS   Reliable, high-performance kernel

engineered for multi-core hardware

  Multi-threaded POSIX OS (Portable Operating System for Unix) for true multitasking

Developer Options

  Tablet OS SDK for Adobe AIR   Full Browser Experience with

Flash Player 10.1 and HTML 5

  WebWorks for Tablet OS   Native C/C++ Open GL SDK (tbd)

  Java SDK (tbd)


BlackBerry Tablet OS SDK for Adobe AIR

PlayBook AIR SDK Advantages

  Access to QNX UI classes used by core PlayBook applications.

  Tablet OS extended AIR APIs

  Available now, #rst SDK for PlayBook application development


Developing AIR Apps for PlayBook

  You have three choices:

1.  Flex Mobile Project (With/Without QNX Libraries)

2.  ActionScript Mobile Project (+ QNX libraries)

3.  ActionScript Mobile Projects (+ QNX libraries) with support for Flex RPC Services (RemoteObject/HTTPService/WebService…)


Packaging AIR based .bar #les

ActionScript SWF BlackBerry PlayBook Application (.bar)

AIR SDK Tablet OS SDK


PlayBook Speci#c APIs

Extending the AIR SDK

  qnx.media.QNXStageWebView

  StageWebView with more integration into the webkit on the PlayBook

  qnx.system.QNXApplication

  Bevel swipe down event

  qnx.system.Device

  Ba"ery level, state, and monitor

  Device info (bsn, hardwareID, vendorID, etc…)

  qnx.media.MediaPlayer

  Hardware accelerated play black of media and other non-Flash supported codecs

  Noti#cations*

  Extending AIR app with Native C/C++ app*

  Above list is not an exhaustive list, more to come

BlackBerry Services Integration

  AppWorld or Super App APIs

  Payment Services

  Advertising*

  App to App Communication*

* Detailed information currently not available


QNX UI Library: Containers

h"p://www.blackberry.com/developers/docs/airapi/1.0.0/

//main container myMain = new Container(); myMain.margins = Vector.<Number>([20,20,20,20]); myMain.$ow = ContainerFlow.HORIZONTAL; myMain.debugColor = 0xFFCC00; addChild(myMain); // create subcontainer on le! side of the screen // myLe%Sub = new Container(); myLe%Sub.size = 50; mySub.sizeUnit = SizeUnit.PERCENT; mySub.padding = 10; // create second subcontainer on le! side of the screen // mySubRight = new Container(); mySubRight.size = 50; mySubRight.sizeUnit = SizeUnit.PERCENT; mySubRight.align = ContainerAlign.MID; // create subcontainer as the bo"om frame // mySubBo"om = new Container(); mySubBo"om.size = 12; mySubBo"om.sizeUnit = SizeUnit.PERCENT; mySubBo"om.containment = Containment.DOCK_BOTTOM;


Flex Mobile or QNX UI Library?

  Flex “Hero” Mobile

  Support for screen metaphor

  Limited number of UI components optimized for mobile

  QNX UI Libraries

  More components compared to Flex “Hero” Mobile

  Easier to get the “native” look – these are used by core PlayBook apps

  No built-in support for screen metaphore


QNX UI Library: UI Controls

  Label / TextInput

  Slider / VolumeSlider

  ActivityIndicator

  PercentageBar / ProgressBar

  Picker

  List / RoundList / SectionList

  TileList / Dropdown / ScrollPane

  MediaPlayer / MediaControl

h"p://www.blackberry.com/developers/docs/airapi/1.0.0/

  BackBu"on

  InconBu"on / LabelBu"on

  CheckBox / RadioBu"on

  SegmentedControl

  ToggleSwitch

  AlertDialog / LoginDialog

  PopupList

BlackBerry Tablet UI component set provides two distinct color themes: light and dark


Developing for BlackBerry Tablet OS SDK for Adobe AIR

Simulator

  Currently Beta 2 (as of Jan 12th) - h"p://us.blackberry.com/developers/tablet/adobe.jsp

  VMWare Player on Windows (free)

  VMWare Fusion on Mac (cost)

  VMWare Workstation on Linux (cost)

SDKs

  AIR 2.5 SDK

  BlackBerry Tablet OS SDK for Adobe AIR (beta 3/0.9.2 as of Jan 12th)

Tooling Support

  Flash Builder support with BlackBerry Tablet OS Plugin

  Flash Professional CS support coming

  Free Command line tools

SDK & Simulator Requirements

  Java: JRE 1.6

  OS: Windows Vista®, XP SP3, 7, Mac OS X 10.5.2, openSUSE® 11.2, Ubuntu® 9.1, or Fedora® 12


BlackBerry Tablet OS Simulator


Using the BlackBerry Tablet OS Simulator

Development Mode

  To install applications you must #rst create a device password

  !en enabled Development mode

  May require Date/Time of the simulator to be sync’d with development box.


Using the BlackBerry Tablet OS Simulator

Using !e Simulator

  Bevel Swipe Events – Press outside PlayBook screen area and move into main screen.

Application Switching

Application Switching

Minimize Application Bring up Keyboard Orientation

Change

Context Menu or 2nd Navigation


Command Line

ActionScript SWF

Compile to Package

BlackBerry PlayBook Application (.bar)

!e Basics

  All GUI based tooling call out to the command line executables

  Compiling ActionScript to SWF doesn’t change, use current Adobe technologies

  Packaging done with BlackBerry Tablet OS SDK tool called: blackberry-airpackager   Does more then just packaging also, install, launch, uninstall, and signing

!./blackberry-airpackager –package MyApp.bar –installApp –launchApp MyApp-app.xml ! MyApp.swf –device 192.168.115.135 –password mypassword!!


Adobe Flash Builder 4 & BlackBerry Tablet OS Plugin

New Project

  Flex Project – Desktop

  Select Tablet OS SDK

Launch Application

  Run Launch Con#guration

  Tablet AIR App launch UI


Adobe Flash Builder Burrito

Mobile Project Types

  Flex Mobile or ActionScript Mobile Project

  Select SDK that is AIR 2.5 compatible

  Select BlackBerry Tablet OS in Target platforms

BlackBerry Tablet OS Libraries

  Project Se"ings -> Build Packaging

  Able to enable/disable targets

  Select include check box if you want to use BlackBerry services or QNX UI libraries

  Optionally you can leave unchecked and include Tablet OS SWC’s manually


Adobe Flash Builder Burrito Tablet OS Preferences

Tablet OS Plugin Preferences

  Place to check which BlackBerry Tablet OS SDK is being included into projects

  Setup the debug host for applications on the PlayBook simulator/device


Resources

  Adobe Developer Evangelists blogs

  BlackBerry Developer Center h"p://us.blackberry.com/developers/tablet/

  Adobe Developer Center h"p://www.adobe.com/devnet/

!ank You!

h"p://corlan.org

[email protected]

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con#dential. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con#dential.


Native C/C++ OpenGL SDK

Current Details*

  Leverage existing QNX Momentics SDK

  C/C++ Development Environment

  10+ Years Development Tools

  Focus on Game Developers

  OpenGL 2.0, Networking, Data Storage, etc…

* Detailed information currently not available

  Allow for Hybrid applications

  AIR apps leveraging C/C++ libraries for performance intensive routines


WebWorks SDK for Tablet OS

Features

  Support web technology standards such as HTML5, CSS and JavaScript™. !e BlackBerry platform implementation of the WebKit rendering engine is the core of the BlackBerry WebWorks platform

  Extend web applications to use the BlackBerry WebWorks APIs, which provide access to device hardware and capabilities and data such as native dialogs, invoking other applications and system information

  Transform a W3C widget archive #le (i.e. zip) containing web assets (like images, etc.) into a BlackBerry WebWorks application package

  Use your favorite development tools or tooling in combination with the BlackBerry WebWorks SDK to develop, test and deploy applications

Available Today, Get Started:

  h"p://us.blackberry.com/developers/tablet/webworks.jsp

  SDK

  Documentation

  Webcast series (starting in Feb)

  Sample Code

  Forums and more resources


Adobe, the Adobe logo, Adobe AIR, the Adobe AIR logo, the Adobe PDF logo, AIR, ColdFusion, ColdFusion Builder, Flash, Flash Builder, the Flash logo, Flex, LiveCycle, and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners. © 2010 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 9102xxxx 3/10

Adobe, the Adobe logo, Adobe AIR, the Adobe AIR logo, ActionScript, AIR, Flash, Flash Builder, Flash Catalyst, the Flash logo, Flex, and LiveCycle are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Microso% and Windows are either registered trademarks or trademarks of Microso% Corporation in the United States and/or other countries. Java is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. All other trademarks are the property of their respective owners. Printed in the USA. 91023957 3/10

Adobe AIR Mobile development for Android and PlayBook

Business