Developing Mobile Applications for Multiple Platforms

Developing Apps for multiple platforms with Adobe AIR
Immanuel Noel | Platform Evangelist, Adobe

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1

The explosion of devices introduces new
challenges for application development


TREND:
Adobe revolutionizes
CONTENT
how the world
TO
engages with ideas
CONTENT+
and information
APPLICATIONS


TREND:
CREATION
how the world
TO
engages with ideas
CREATION+
and information
OPTIMIZATION


TREND:
ONE DEVICE
how the world
TO
engages with ideas
MULTISCREEN
and information


Typical Architecture

Model

View Controller


Native Mobile Application Development Model

A costly, inefficient development model

Native Native Native Native
App App App App

Additional
OS’s


RIA and Mobile Technical Considerations

Rich + Reach

Local Processing + Hosted Services

Content Manipulation

Application / Communication

Not just sync


AIR for VIEW

Model

Controller

View


Introducing a new mobile development paradigm

One Tool, One Language, One Codebase

Flex Application Common codebase

AIR

Additional
OS’s

Any Platform


The Flash Platform is the leading solution for rapidly building RIAs

Applications,
Content and Video

The Flash Platform
Tools to Design and Develop Framework Clients Services Servers
provides a single development platform
Adobe® Flash®
that consistently delivers
Adobe® Flash® Adobe® Flex ® Adobe® AIR® Adobe® Flash® Adobe® Flash®

expressive, easy to use applications
Professional Catalyst® Platform Media Server
Services Family

on the leading web and
mobile platforms and devices
Adobe® Flash® Builder™ Adobe® Flash® Adobe®
Player LiveCycle®

Integrating with
the Flash Platform
Creative Suite ColdFusion Builder

Platforms, browsers, and devices

In-browser

Outside the browser

Mobile Platforms

Set-top boxes (Future)


AIR 2.6 SDK

 Standalone AIR applications for Android,
BlackBerry, and iOS
 New, mobile-specific components added
for application navigation and state
management
 UIs tailored for different form factors
 Optimized for mobile device performance
 Customizable components through
skinning and styling


AIR for Mobile

Mobile-aware user interface components are…
 Performance optimized
 Touch-enabled
 Multi-platform and multi-density aware
 Expose common mobile UI affordances
 Customizable through skinning and styling


Native API Support

Stage web View
Multi Touch and Gestures
Camera
Screen Management
Accelerometer
Local Database
GPS
Native App Integration


Flex
An open-source framework
for rapidly building
expressive applications for
web and mobile devices


What is Flex?

Productive Cross-platform Expressive


Flex application building blocks

 Controls
 Charts

 Smart layout
 Skinning and styling
 Animation and transition effects

 Data binding
 Integration with servers
 Formatting and validation


What can you build with Flex?

Just about anything

Social Apps Dashboards/Visualization Productivity

TweetDeck SAP Xcelsius bizk.it

Digital Publishing Video Shopping/Configurators

New York Times Reader 2.0 Brightcove Mini Cooper

See flex.org/showcase for more

How Flex Works on the Mobile

Mobile
Files SQLite Notifications Clipboard
Flex SDK
MXML ActionScript AIR Client Runtime

Flex Class Library

Debuggers SOAP HTTP/S AMF/S RTMP/S

Flash Builder IDE
Web Server
Compile & Package
XML/HTTP
LC Data Services
REST
SOAP Web Services J2EE Application Server

Existing Applications & Infrastructure


Understanding Flex

 Open Source Flex
Flex SDK  2 languages
MXML ActionScript  MXML
 ActionScript 3
Flex Class Library
 Compilers
Debuggers  Rich component library
Flash Builder IDE  Data visualization libraries
 Debuggers

 Flash Builder IDE
 Eclipse plug-in or turn-key install
 Accelerates design and development
 Design view and code view


MXML: Components, Id, Properties, Events, Data Binding

<Application>
<Declarations>
<HttpService id=“hs” url=“catalog.xml”/>
</Declarations>
<Button label=“Get Data” click=“hs.send()”/>
<DataGrid dataProvider=“{hs.lastResult}”/>
<LineChart dataProvider=“{hs.lastResult}”/>
</Application>


Understanding ActionScript

 All Flex code would eventually convert to AS before turning into Bytecode.
 You can embed AS code in MXML to code the business logic of your
application.

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]private var myData:ArrayCollection=new
ArrayCollection([{},{}]);
protected function
application1_creationCompleteHandler(event:FlexEvent)
{
myDataGrid.dataProvider=myData;
}
]]>
</fx:Script>


Flash Builder
Professional-grade Eclipse-
based IDE for ActionScript
and Flex development


What is Flash Builder?

Productive coding Visual UI layout Design/development
and debugging and data access workflow


Develop mobile applications – Flash Builder 4.5

 New tooling to support ActionScript and
Flex mobile development
 Target Android, Apple iOS and BlackBerry
Tablet OS
 Visual development and per-device preview in
design mode
 Multi-density authoring support
 One-click launch or debug on-device
 Create signed application packages ready for
deployment to mobile app store/marketplace


Example mobile applications built using Flex 4.5 SDK


More Power. More Devices. Less Code.

 Deliver mobile applications across Android, Blackberry Tablet and
iOS, with a single codebase using AIR 2.6.

 Connectivity

 Speed up application development with Adobe Flash Builder

Adobe Flash Builder 4.5
More Devices. Less Code.

Developing Mobile Applications for Multiple Platforms

Recommandé

Recommandé

Contenu connexe

Plus de Saltmarch Media

Plus de Saltmarch Media (13)

Dernier

Dernier (20)

Developing Mobile Applications for Multiple Platforms