Building mobile applications with Flex      Michaël Chaize | Flash Platform Evangelist© 2011 Adobe Systems Incorporated. A...
Menu du jour                                                                             Flex & Flash on mobile           ...
Two superheros to save mobile applications developers© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confide...
Adobe Flex© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   4
Adobe Flex basics                   Flash Builder IDE                                                                  Bro...
FLEX FRAMEWORK 3OLD COMPONENT MODEL                      Component / Skin                                         Graphics...
FLEX FRAMEWORK 4SPARK COMPONENT MODEL                   ActionScript                    MXML                    Component ...
First-class interfaces©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flex on mobile ?
Open Screen Project                      Technologic partners                                    Content providers© 2010 A...
Native Applications                  Native                                  Native   Native   Native   Native   Native   ...
Abstraction Layer                                                                        Flex Application                 ...
Flex “Hero”© 2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile Applications in "Hero"                   s:Application                          s:MobileApplication   s:TabbedMobil...
<s:MobileApplication> life cycle                       views.ListEmployees                views.DetailsEmployee   views.Li...
ActionBar                     navigationContent                    titleContent   actionContent <s:View xmlns:fx=http://ns...
Components that have Mobile Skins                                                          §   Button                    ...
Mobile applications + JAVA = REAL-TIME© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   18
IN-CONTEXT COLLABORATION LiveCycle Collaboration Service                           Webcam   Chat     Shared     Form
LiveCycle Collaboration Service    Multi-user collaboration in real time     §    Engage more effectively through a web p...
LiveCycle Data Services today                                                                     Flex Client   Flex Clien...
LiveCycle Data Services tomorrow (2011)HTML5/JS Client                          Java Client                           Flex...
Publish/Subscribe Messaging                                                                               LiveCycle DS / B...
Data Push - Messaging                                                                              LiveCycle DS / Blaze DS...
Data Push - Messagingpublic static class GPSThread extends Thread {	 	 public boolean running = true;	      	        publi...
Two superheros to save mobile applications developersADOBE FLASH PLATFORM                                                 ...
Michaël Chaize & resources                                                                              RIAgora.com       ...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Bar ChartTry to use neutral colors for most chart elements, and highlight elements of interestwith bright colors          ...
Pie ChartTry to use neutral colors for most chart elements, and highlight elements of interestwith bright colors          ...
Gray Content Area LayoutFor use with full-screen images or diagrams that look good on gray© 2011 Adobe Systems Incorporate...
Mobile APIs© 2010 Adobe Systems Incorporated. All Rights Reserved.   32
GEO APIs §    Android Permission Required: <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <...
Accelerometer APIs §    Accelerometer.isSupported §    a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction); ...
Multi-Touch APIs §    Android manifest change: <uses-feature android:required="true" android:name="android.hardware.touch...
Remote Data §    Android Permission Required:      <uses-permission android:name="android.permission.INTERNET"/> §    St...
Full Screen & Orientation §    stage.displayState = StageDisplayState.NORMAL §    stage.displayState = StageDisplayState...
Camera Access §    Camera - Raw camera feed <uses-permission android:name="android.permission.CAMERA" /> <uses-feature an...
Native App Integration §    Open Email, Browser, Maps, Phone, or SMS       §     navigateToURL(new URLRequest(mailto:foo...
Local DB APIs §    SQLite - Nothing different than AIR for the Desktop §    SQLConnection       §     Sync and/or Async ...
StageWebView §    Requires Android INTERNET permission: <uses-permission android:name="android.permission.INTERNET" /> §...
Black Content Area LayoutFor use with full-screen images or diagrams that look good on black© 2011 Adobe Systems Incorpora...
Color Palette        Dynamic                                                                                             N...
Upcoming SlideShare
Loading in...5
×

Develop multi-screen applications with Flex

2,661

Published on

Presentazione tenuta da Michael Chaize per Adobe in occasione del Codemotion del 5 marzo 2011 a Roma - http://www.codemotion.it/

With the rise of a wide range of Internet connected devices, a new class of application is emerging to work across multiple kinds of devices. Developers are now faced with new challenges to provide the most engaging user experiences on any screen. New device input methods like touch and gestures require developers to rethink interaction models. Screen size constraints also require developers to optimize real estate usage. With so many different mediums for delivering rich Internet applications

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,661
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Develop multi-screen applications with Flex

  1. 1. Building mobile applications with Flex Michaël Chaize | Flash Platform Evangelist© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2. Menu du jour Flex & Flash on mobile Live coding for Android Flex, Java and Real-time Resources 2©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  3. 3. Two superheros to save mobile applications developers© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  4. 4. Adobe Flex© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
  5. 5. Adobe Flex 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 Adobe Data Services REST SOAP Web Services J2EE Application Server Existing Applications & Infrastructure© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
  6. 6. FLEX FRAMEWORK 3OLD COMPONENT MODEL Component / Skin Graphics Layout Animation Parts States Behavior Logic Data
  7. 7. FLEX FRAMEWORK 4SPARK COMPONENT MODEL ActionScript MXML Component Skin Graphics Behavior Layout Animation Logic CSS properties Parts Data States
  8. 8. First-class interfaces©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  9. 9. Flex on mobile ?
  10. 10. Open Screen Project Technologic partners Content providers© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  11. 11. Native Applications Native Native Native Native Native Native App App App App App App iOS ?© 2010 Adobe Systems Incorporated. All Rights Reserved.
  12. 12. Abstraction Layer Flex Application Adobe runtimes (Flash & AIR) iOS ? 2011 READY READY soon soon© 2010 Adobe Systems Incorporated. All Rights Reserved.
  13. 13. Flex “Hero”© 2010 Adobe Systems Incorporated. All Rights Reserved.
  14. 14. Mobile Applications in "Hero" s:Application s:MobileApplication s:TabbedMobileApplication© 2010 Adobe Systems Incorporated. All Rights Reserved. 14
  15. 15. <s:MobileApplication> life cycle views.ListEmployees views.DetailsEmployee views.ListEmployees view destroyed view created view destroyed view created “BACK” bu on DATA subset DATA persisted in memory© 2010 Adobe Systems Incorporated. All Rights Reserved. 15
  16. 16. 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. 16 3
  17. 17. 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. 17
  18. 18. Mobile applications + JAVA = REAL-TIME© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  19. 19. IN-CONTEXT COLLABORATION LiveCycle Collaboration Service Webcam Chat Shared Form
  20. 20. LiveCycle Collaboration Service Multi-user collaboration in real time § 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), Major Capabilities Peer-to-peer (P2P) streaming of data, audio and video HTTP server-to-server APIs Private audio/video streaming Server-side provisioning of services Large Rooms – via on-demand loading of user Audio/video application multicast presence Record and Playback Screen sharing JavaScript APIs – integration with a customer’s exist ting websites© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20All external content and images pending approvals.
  21. 21. LiveCycle Data Services today Flex Client Flex Client Flex Client LCDS Java Classes Thing1.class Thing2.class Thing3.class© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  22. 22. LiveCycle Data Services tomorrow (2011)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 LCDS .NET Adapter 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. 22
  23. 23. 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.
  24. 24. 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.
  25. 25. Data Push - Messagingpublic static class GPSThread extends Thread { public boolean running = true; public void run() { MessageBroker msgBroker = MessageBroker.getMessageBroker(null); String clientID = UUIDUtils.createUUID(); while (running) { double change = gpsService.getCurrentPosition(); AsyncMessage msg = new AsyncMessage(); msg.setDestination("feed"); msg.setClientId(clientID); msg.setMessageId(UUIDUtils.createUUID()); msg.setTimestamp(System.currentTimeMillis()); msg.setBody(new Double(change)); msgBroker.routeMessageToService(msg, null); try { Thread.sleep(300); } catch (InterruptedException e) { }© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  26. 26. Two superheros to save mobile applications developersADOBE FLASH PLATFORM JAVA SUPER POWERRich interfaces for your Expose your data using HTTP,web, desktop and mobile apps. SOAP, Remote AMF.Real-time collaboration. Real-time data push. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
  27. 27. Michaël Chaize & resources RIAgora.com Flex.org labs.adobe.com developer.adobe.com @mchaize Tour de Mobile Flex© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
  28. 28. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  29. 29. Bar ChartTry to use neutral colors for most chart elements, and highlight elements of interestwith bright colors 5.0 3.8 Series 1 2.5 Series 2 Series 3 1.3 0 Category 1 Category 2 Category 3 Category 4© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
  30. 30. Pie ChartTry to use neutral colors for most chart elements, and highlight elements of interestwith bright colors Sales 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
  31. 31. Gray Content Area LayoutFor use with full-screen images or diagrams that look good on gray© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  32. 32. Mobile APIs© 2010 Adobe Systems Incorporated. All Rights Reserved. 32
  33. 33. GEO APIs § Android Permission Required: <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> § Geolocation.isSupported § g.addEventListener(GeolocationEvent.UPDATE, callbackFunction); § GeolocationEvent: § altitude § heading § horizontalAccuracy § latitude § longitude § speed § timestamp § verticalAccuracy© 2010 Adobe Systems Incorporated. All Rights Reserved.
  34. 34. Accelerometer APIs § Accelerometer.isSupported § a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction); § AccelerometerEvent: § accelerationX § accelerationY § accelerationZ § timestamp© 2010 Adobe Systems Incorporated. All Rights Reserved.
  35. 35. Multi-Touch APIs § Android manifest change: <uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/> § Gesture OR Multitouch --- Multitouch.inputMode MultitouchInputMode.GESTURE § MultitouchInputMode.TOUCH_POINT § TransformGestureEvent § TouchEvent § GESTURE_PAN § TOUCH_BEGIN § GESTURE_ROTATE § TOUCH_END § GESTURE_SWIPE § TOUCH_MOVE § GESTURE_ZOOM § TOUCH_OUT § GestureEvent.GESTURE_TWO_FINGER_TAP § TOUCH_OVER § PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP § TOUCH_ROLL_OUT § § TOUCH_ROLL_OVER § TOUCH_TAP© 2010 Adobe Systems Incorporated. All Rights Reserved.
  36. 36. Remote Data § Android Permission Required: <uses-permission android:name="android.permission.INTERNET"/> § Standard Flex Networking Libraries: § HTTPService § WebService § RemoteObject© 2010 Adobe Systems Incorporated. All Rights Reserved.
  37. 37. Full Screen & Orientation § stage.displayState = StageDisplayState.NORMAL § stage.displayState = StageDisplayState.FULL_SCREEN § stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE § StageOrientationEvent: stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, callbackFunction); § foo-app.xml: <initialWindow> <autoOrients>true</autoOrients>© 2010 Adobe Systems Incorporated. All Rights Reserved.
  38. 38. Camera Access § Camera - Raw camera feed <uses-permission android:name="android.permission.CAMERA" /> <uses-feature android:name="android.hardware.camera" android:required="true"/> <uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/> <uses-feature android:name="android.hardware.camera.flash" android:required="false"/> § CameraUI - Native Camera App var cameraUI:CameraUI = new CameraUI(); cameraUI.launch(MediaType.IMAGE); § CameraRoll - Choose photos from the devices camera roll var cameraRoll:CameraRoll = new CameraRoll(); cameraRoll.browseForImage(); cameraRoll.addBitmapData(bd);© 2010 Adobe Systems Incorporated. All Rights Reserved. 38
  39. 39. Native App Integration § Open Email, Browser, Maps, Phone, or SMS § navigateToURL(new URLRequest(mailto:foo@bar.com)); § navigateToURL(new URLRequest(http://www.jamesward.com)); § navigateToURL(new URLRequest(http://maps.google.com/)); § navigateToURL(new URLRequest(tel:1234567890)); § navigateToURL(new URLRequest(sms:1234567890));© 2010 Adobe Systems Incorporated. All Rights Reserved. 39
  40. 40. Local DB APIs § SQLite - Nothing different than AIR for the Desktop § SQLConnection § Sync and/or Async connections § SQLStatement § Prepared Statements: var stmt:SQLStatement = new SQLStatement(); stmt.sqlConnection = FlexGlobals.topLevelApplication[sqlConnection]; stmt.text = "INSERT into giberish values(:giberish)"; stmt.parameters[":giberish"] = g.text; stmt.execute();© 2010 Adobe Systems Incorporated. All Rights Reserved.
  41. 41. StageWebView § Requires Android INTERNET permission: <uses-permission android:name="android.permission.INTERNET" /> § WebStageView.isSupported var swv:StageWebView = new StageWebView(); swv.viewPort = new Rectangle(0, stage.height - height, width, height); swv.stage = stage; swv.loadURL("http://www.riagora.com");© 2010 Adobe Systems Incorporated. All Rights Reserved. 41
  42. 42. Black Content Area LayoutFor use with full-screen images or diagrams that look good on black© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
  43. 43. Color Palette Dynamic Note The Adobe corporate color palette has been incorporated into this presentation template. R - 255 R – 251 R - 255 R - 193 R-0 R - 131 G-0 G - 176 G - 221 G - 216 G - 164 G - 72 B-0 B - 52 B-0 B - 47 B - 228 B - 181 Refer to the Corporate Brand Guidelines, found on Brand Center for more guidance on using this color palette Neutral www.adobe.com/brandecenter R - 218 R - 172 R - 107 R - 228 R - 192 R - 136 G - 221 G - 179 G - 115 G - 223 G - 181 G - 120 B – 224 B - 185 B - 123 B - 217 B - 169 B - 104© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×