Présentation donnée chez Xebia au sujet du développement d'applications mobiles avec l'Adobe Flash Platform, AIR 2.5, Flex Hero...

1. Adobe Flash Platform: update for XEBIA
Michaël Chaize | EMEA Platform Evangelist
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

2. Michaël Chaize
@mchaize
RIAgora.com
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2

3. Qui êtes-vous ?

4. Flash Platform - A complete system for web innovation
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

5. Rich Internet
Applications ?

6. Rich User Experiences: Opportunities for internal users
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6

7. Rich User Experiences: Opportunities for internal users
5 mins 20 secs
Increase productivity & improve decision making
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 7

8. NATO
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8

9. NATO
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9

10. NATO
From a system-centric view to a user-centric application.
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10

11. First-class interfaces
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

12. FLASH PLAYER 10.1

13. Consumer
Electronics
Mobile
Phones
Personal
Computers

14. Open Screen Project
Partenaires technologiques Diffuseurs de contenu
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

15. Flash Player 10.1
Flash Player 10.1
Google TV
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

16. Flash Player 10.1
■ Brings full Flash Player feature set to devices
■ New Features:
■ Multi-touch & gestures
■ Accelerometer
■ Screen orientation
■ Mobile text input
■ Device capabilities discovery
■ Globalization support (GSLib)
■ Mobile settings manager
■ Global error handling
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

17. ADOBE AIR 2.0

18. Flash Player 10.1
+ WebKit
+ SQLite
+ Desktop APIs
---------------------
= Adobe AIR
ADOBE AIR 2.0

19. Xplatform runtime
Drag & Drop files / Desktop
Local system access
Multiple windows
Transparent applications
Native Process, UDP, USB...
ADOBE AIR 2.0

20. USB STORAGE
DETECT AND BROWSE

21. PEER 2 PEER
UDP Network Protocols

22. OS INTEGRATION
Documents and Processes

23. ADOBE FLEX 4

24. Basics
Flash Builder IDE Browser
Flex SDK Flash Player
MXML ActionScript
Flex Class Library SOAP HTTP/S AMF/S RTMP/S
Web Server
Compile
XML/HTTP
LC Data Services
REST
SOAP Web Services J2EE Application Server
Existing Applications & Infrastructure

25. FLEX FRAMEWORK 3
OLD COMPONENT MODEL
Component / Skin
Graphics
Layout
Animation
Parts
States
Behavior
Logic
Data

26. FLEX FRAMEWORK 4
SPARK COMPONENT MODEL
ActionScript MXML
Component Skin
Graphics
Behavior Layout
Logic Animation
CSS properties Parts
Data States

27. Mobile applications with the Flash Platform
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

28. Flash Player 10.1
Flash Player 10.1
Google TV
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

29. Adobe AIR 2.5 = native applications = multiple screens
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

30. AIR 2.5 on smartphones, tablets, TV...
§ Flash Player 10.1 + SQLite
§ New APIs:
§ Multi-touch & gestures
§ Geolocation
§ cut/copy/paste
§ tel:, mailto:, maps:, video:
§ Camera
§ Microphone
§ StageWebView
§ Device Debugger
§ cacheAsBitmapMatrix
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

31. ADOBE FLEX “HERO”

32. Mobile Applications in "Hero"
s:Application s:MobileApplication s:TabbedMobileApplication
© 2010 Adobe Systems Incorporated. All Rights Reserved. 32

33. MobileApplication and TabbedMobileApplication
§ View stack metaphor
§ View
§ ViewNavigator / TabbedViewNavigator
§ Built-in mobile navigation experience
§ Action bar
§ Back button
§ Transitions
§ APIs
© 2010 Adobe Systems Incorporated. All Rights Reserved. 33 1

34. ViewNavigator API
§ navigator.pushView();
§ navigator.popView();
§ navigator.popToFirstView()
§ navigator.activeView;
© 2010 Adobe Systems Incorporated. All Rights Reserved. 34 2

35. ActionBar
navigationContent titleContent actionContent
<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>
© 2010 Adobe Systems Incorporated. All Rights Reserved. 35 3

36. Components that have Mobile Skins
§ Button
§ CheckBox
§ DataGroup
§ Group/HGroup/VGroup/TileGroup
§ Image/BitmapImage
§ Label List
§ RadioButton/RadioButtonGroup
§ Scroller
§ TextArea
§ TextInput
© 2010 Adobe Systems Incorporated. All Rights Reserved. 36

37. View Lifecycle
View Destroyed
View becomes User navigates
active back to view
Another view
becomes active
View
Created View Recreated
data
§ Alternative option: destructionPolicy=“none”
© 2010 Adobe Systems Incorporated. All Rights Reserved. 37 3B

38. Mobile ItemRenderers
§ MobileItemRenderer
§ MobileIconItemRenderer
<s:MobileIconItemRenderer
labelField="lastName"
messageField="title"
iconField="picture"
decoratorClass=”phoneIcon">
© 2010 Adobe Systems Incorporated. All Rights Reserved. 38 4

39. ADOBE FLEX “HERO”
WITH
FLEX ON MOBILE DEVICES FLASH BUILDER “BURRITO”
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

40. &

41. Flex/JSP architecture
UI LAYER
Web browser
SERVER XML on HTTP(s) Java servlet container (tomcat, WAS…)
PRESENTATION
/SERVICES/DAO Webapp (WAR)
LAYER
JAVA classes/services
listEvents.jsp
EventService.java public getEvents()
DATABASE/
STORAGE LAYER
WSDL JDBC
2008 Adobe Systems Incorporated. All Rights Reserved.

42. XML AMF Published in December 2007
1.1Mo 5000 rows ? 29Ko

43. Remoting AMF
ADOBE FLEX 4

44. LiveCycle Data Services ES
LiveCycle Data Services ES
LiveCycle Data Services is a set of Java EE
Service
components and APIs used to: Data Management Adapters
Data Synchronization
LiveCycle
Create data-intensive RIAs with less code, less risk, and Off-line Applications
accelerated time to market due to an innovative client-
Data Paging ColdFusion
server programming model
RPC Services
Integrate RIAs with existing applications, back-end data, Hibernate
Web Service
and JEE infrastructure
HTTP Service SQL
Easily integrate RIAs with LiveCycle document and Remote Object Service
process services JMS
Messaging
Enable collaboration, offline AIR and real-time data
Publish & Subscribe Java
streaming applications to be built in a scalable and
Collaboration
reliable manner with robust publish and subscribe Custom…
Real Time Data Push
messaging
Proxy Service
Generate PDF documents from RIAs that include
graphical assets Web-tier Compiler
Portal Deployment
RIA-PDF Generation
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

45. Blaze DS
LiveCycle Data Services ES
BlazeDS is a set of Java EE components Service
Data Management Adapters
and APIs, and a subset of LiveCycle Data
Data Synchronization
Services: LiveCycle
Off-line Applications
- Free and open source. Data Paging ColdFusion
- High performance data transfer for more responsive RPC Services Hibernate
applications using AMF Web Service
- Real-time server push over standard HTTP HTTP Service SQL
Remote Object Service
- Full pub/sub messaging that extends existing JMS
messaging infrastructure Messaging
Publish & Subscribe Java
Collaboration
Custom…
Real Time Data Push
Proxy Service
Web-tier Compiler
Portal Deployment
RIA-PDF Generation
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

46. LCDS.war
A file named « LCDS.war » is provided to start your Flex/Java projects.
§ Structure of the WAR file:
§ +WEB-INF/classes To place your Java classes
§ +WEB-INF/lib Hosts the JAVA libraries of LCDS
§ +WEB-INF/ ex Hosts the XML con guration les
§ Remoting-con g.xml Destinations to Java classes for remoting
§ Messaging-con g.xml Destinations for messaging
§ Data-Management-con g.xml Destinations to Java assemblers
§ Proxy-con g.xml Destinations to HTTP services
§ Services-con g.xml Channels con gurations
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

47. Java and ActionScript value objects
Java VO ActionScript VO
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

48. Java and ActionScript types
STRING STRING
BOOLEAN BOOLEAN
INT, SHORT, BYTE INT
DOUBLE, FLOAT, LONG NUMBER
CALENDAR, DATE DATE
OBJECT OBJECT
COLLECTION ARRAYCOLLECTION
OBJECT[] ARRAY
ORG.W3C.DOCUMENT XML OBJECT
NULL NULL
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

49. Flex/Java classic architecture
UI LAYER
Web browser
AMF over HTTPs
SERVER Java servlet container (tomcat, WAS…)
PRESENTATION
/SERVICES/DAO Webapp (WAR)
LAYER
LiveCycle Data Services JAVA classes/services
JAVA <-> AMF
RPC services Messaging Data Mgt EventService.java public getEvents()
DATABASE/
STORAGE LAYER
WSDL JDBC
2008 Adobe Systems Incorporated. All Rights Reserved.

50. Spring BlazeDS Integration
ADOBE FLEX 4

51. Messaging
ADOBE FLEX 4

52. Channels
Message
MessageBrokerServlet Broker
Servlet-based endpoints
AMF Endpoint
Remoting
HTTPEndpoint
StreamingAMFEndpoint
HTTPProxy
Socket Server (LCDS only)
Flex client Message
NIO-based endpoints
NIOAMFEndpoint
Data Management
NIOHTTPEndpoint
RTMPEndpoint
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

53. Publish/Subscribe Messaging
LiveCycle DS / Blaze DS
§Client A
Message
Endpoint
Service
§Client B
§RTMP
§Client C
§AMF Publisher
§HTTP Subscriber
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

54. Data Push - Messaging
LiveCycle DS / Blaze DS
Messaging
Adapter X
System X
Message JMS
Endpoint JMS Adapter
Services Provider
Messaging
Adapter Y
System Y
§RTMP
§AMF Publisher
§HTTP Subscriber
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

55. Data Management
Services
ADOBE FLEX 4

56. Data Management Services
LiveCycle Data Services
JDBC
Client A RDBMS
Adapter
Endpoint Data Object
DAO
Service Adapter
Client B
Hibernate
Hibernate
Adapter
CFC
Client C Adapter ColdFusion
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

57. Data Management Benefits
1. Automatic Client to Middle-Tier Synchronization
§ Change Tracking
§ Automatic invocation of remote services
2. Highlander Principle: there is only one instance of a given entity in
memory at any given time
3. Conflict resolution
4. Offline Synchronization (thanks to Adobe AIR)
5. Lazy loading
6. Paging
7. Cross-client synchronization
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

58. Today’s LiveCycle Data Services
Flex Client Flex Client Flex Client
LCDS
Java Classes
Thing1.class
Thing2.class
Thing3.class
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58

59. Tomorrow’s LiveCycle Data Services
HTML5/JS Client Java Client Flex Client Flex Client Flex Client Android Client ObjC Client
.NET Adapter
Remoting
Messaging
Data Mgmt IIS Plugin
.NET Remoting
.NET Adapter
LCDS Messaging
MSMQ Messaging
NET
Java Classes .NET C# Classes
Thing1.class Thing1.dll
??.???
Thing2.class Thing2.dll
??.???
Thing3.class Thing3.dll
??.???
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 59

60. LiveCycle Data Services
LCDS NEXT
JavaScript
iOS <HTML>
Devices & Clients / AJAX
preview in January 2011

61. IN-CONTEXT COLLABORATION
LiveCycle Collaboration Service

62. LCCS SDK Offers Both High-Level Components and Foundation
Classes
Pods
High-level
Components Roster WhiteBoard Chat FileShare Note WebCam
RTC UI Components
Webcam Pub / Sub File Pub / Sub Audio Pub / Sub Shared Cursors
Foundation Classes
Shared Managers Shared Model
Shared Property UserQueue
Users AV Streams
Shared Collection Baton
Files Room
Pub / Sub Messaging + Permissions
Session
(Connection, Authentication, Reconnect/Failover, RMI Routing)
2010 Adobe Systems Incorporated. All Rights Reserved. 62

63. Server Integration
§ Create and Delete Rooms
§ Manage your Users’ Authentication
§ Publish and Subscribe to Messages
§ Variety of different Languages
Java PHP ColdFusion
Ruby Python C# Groovy
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

64. LCCS
LIVE COLLABORATION
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

65. Flash Platform - A complete system for web innovation
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.