Top Banner
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize One backend, multiple screens
31

Adobe flex at jax london 2011

Jan 15, 2015

Download

Technology

Michael Chaize

One backend, several screens. Keynote at JAX London 2011 for JAVA developers discovering Flex 4.5
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Adobe flex at  jax london 2011

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

Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaizeOne backend, multiple screens

Page 2: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe Flex

2

Page 3: Adobe flex at  jax london 2011

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

Flex SDK

Flex Class Library

MXML ActionScript

Debuggers

How Flex Works in the Browser

Compile

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

Adobe Data ServicesXML/HTTP

REST

SOAP Web Services

Browser

Flash Player

Flash Builder IDE

Page 4: Adobe flex at  jax london 2011

©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Flex & Java

&

Richness / Fast / Open-source / Industrialization

Page 5: Adobe flex at  jax london 2011

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

The explosion of devices introduces new challenges for application development

Page 6: Adobe flex at  jax london 2011

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

Native Mobile Application Development Model

NativeApp

NativeApp

NativeApp

NativeApp

Additional OS’s

A costly, inefficient development model

Page 7: Adobe flex at  jax london 2011

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

Introducing a new mobile development paradigm

Additional OS’s

AIR

Flex Application

One Tool, One Language, One Codebase

Any Platform

Common codebase

Page 8: Adobe flex at  jax london 2011

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

Platforms, browsers, and devices

In-browser

Outside the browser

Set-top boxes (Future)

Mobile Platforms

Page 9: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe AIR

9

Page 10: Adobe flex at  jax london 2011

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

How Flex Works on Mobile and Desktop

Compile & Package

SOAP HTTP/S AMF/S RTMP/S

Web Server / Market place

Existing Applications & Infrastructure

J2EE Application Server

LC Data ServicesXML/HTTP

REST

SOAP Web Services

Mobile or Desktop

AIR Client Runtime

Files SQLite Notifications ClipboardFlex SDK

Flex Class Library

Debuggers

Flash Builder IDE

MXML ActionScript

Page 11: Adobe flex at  jax london 2011

©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe AIR APIs

- Multitouch- Geolocation- Cameras- Microphone- Accelerometer- Display a web page- SQLite local database- Native extensions- GPU acceleration

Page 12: Adobe flex at  jax london 2011

© 2011 Adobe Systems Incorporated.

AIR on smartphones and tablets

Page 13: Adobe flex at  jax london 2011

What about Flex ?

Page 14: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe Flex 4.5

14

4.5

Page 15: Adobe flex at  jax london 2011

SPARK COMPONENT MODEL

FLEX FRAMEWORK 4

ActionScript MXML

GraphicsLayout

AnimationParts

States

Component Skin

CSS properties

BehaviorLogicData

Page 16: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved.

Mobile Applications in Flex 4.5

16

s:TabbedMobileApplication s:MobileApplications:Application

Page 17: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved.

<s:MobileApplication> life cycle

17

views.ListEmployees views.DetailsEmployee views.ListEmployees

DATA DATA

persisted in memory

subset

view destroyed view created

view destroyed view created

“BACK” bu�on

Page 18: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved.

ActionBar

<s:View xmlns:fx=http://ns.adobe.com/mxml/2009 … title=”Expenses"> <s:navigationContent> <s:Button icon="@Embed('assets/home.png')"/> </s:navigationContent> <s:actionContent> <s:Button label=”+"/> </s:actionContent></s:View>

18 3

navigationContent titleContent actionContent

Page 19: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved.

Components that have Mobile Skins

§ Button

§ CheckBox

§ DataGroup

§ Group/HGroup/VGroup/TileGroup

§ Image/BitmapImage

§ Label List

§ RadioButton/RadioButtonGroup

§ Scroller

§ TextArea

§ TextInput

19

Page 20: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved.

Screens and Flex 4.5

<?xml version="1.0" encoding="utf-8"?>

<s:MobileApplication applicationDPI="160"> ...

20

var curDensity:Number = FlexGlobals.topLevelApplication.runtimeDPI;

<s:Image> <s:source> <s:MultiDPIBitmapSource source160dpi="logo.png" source240dpi="logo240.png" source320dpi="logo320.png" /> </s:source> </s:Image>

Page 21: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Flex 4.5 and tablets

21

BlackBerry PlayBookAndroid tablets Apple tablets

Page 22: Adobe flex at  jax london 2011

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

Demo

22

Page 23: Adobe flex at  jax london 2011

© 2011 Adobe Systems Incorporated.

Tablet and Enterprise applications

Camera

Microphone

GPS

3G

Mobility

Bright screen

Page 24: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Mobile applications + JAVA = REAL-TIME

24

Page 25: Adobe flex at  jax london 2011

LiveCycle Collaboration Service

IN-CONTEXT COLLABORATION

Webcam Chat

SharedForm

Page 26: Adobe flex at  jax london 2011

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

All external content and images pending approvals.

Multi-user collaboration in real time

LiveCycle Collaboration Service

Major Capabilities

Peer-to-peer (P2P) streaming of data, audio and video HTTP server-to-server APIsPrivate audio/video streaming Server-side provisioning of services

Large Rooms – via on-demand loading of user presence

Audio/video application multicast

Record and Playback Screen sharing

JavaScript APIs – integration with a customer’s exist ting websites

26

§ Engage more effectively through a web presence enhanced with real-time collaboration tools.

§ Integrate text chat, whiteboard functionality, webcam video, and audio into any rich Internet application (RIA),

Page 27: Adobe flex at  jax london 2011

JAVA rockstar JAVA + FLEX

rockstar

Page 28: Adobe flex at  jax london 2011

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

WIN A MOTOROLA XOOM !!!

28

http://tinyurl.com/adobejax

Page 29: Adobe flex at  jax london 2011

© 2011 Adobe Systems Incorporated.

Tomorrow at 3:45pm : technical workshop

Page 30: Adobe flex at  jax london 2011

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

Michaël Chaize & resources

30

@mchaize

RIAgora.com Flex.orglabs.adobe.com

developer.adobe.com

Tour de Mobile Flex

Page 31: Adobe flex at  jax london 2011

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