Develop multi-screen applications with Flex

  • 2,560 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,560
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Building mobile applications with Flex Michaël Chaize | Flash Platform Evangelist© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 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. Two superheros to save mobile applications developers© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  • 4. Adobe Flex© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
  • 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. FLEX FRAMEWORK 3OLD COMPONENT MODEL Component / Skin Graphics Layout Animation Parts States Behavior Logic Data
  • 7. FLEX FRAMEWORK 4SPARK COMPONENT MODEL ActionScript MXML Component Skin Graphics Behavior Layout Animation Logic CSS properties Parts Data States
  • 8. First-class interfaces©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 9. Flex on mobile ?
  • 10. Open Screen Project Technologic partners Content providers© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 11. Native Applications Native Native Native Native Native Native App App App App App App iOS ?© 2010 Adobe Systems Incorporated. All Rights Reserved.
  • 12. Abstraction Layer Flex Application Adobe runtimes (Flash & AIR) iOS ? 2011 READY READY soon soon© 2010 Adobe Systems Incorporated. All Rights Reserved.
  • 13. Flex “Hero”© 2010 Adobe Systems Incorporated. All Rights Reserved.
  • 14. Mobile Applications in "Hero" s:Application s:MobileApplication s:TabbedMobileApplication© 2010 Adobe Systems Incorporated. All Rights Reserved. 14
  • 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. 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. 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. Mobile applications + JAVA = REAL-TIME© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  • 19. IN-CONTEXT COLLABORATION LiveCycle Collaboration Service Webcam Chat Shared Form
  • 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. 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. 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. 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. 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. 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. 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. 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. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 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. 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. 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. Mobile APIs© 2010 Adobe Systems Incorporated. All Rights Reserved. 32
  • 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. Accelerometer APIs § Accelerometer.isSupported § a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction); § AccelerometerEvent: § accelerationX § accelerationY § accelerationZ § timestamp© 2010 Adobe Systems Incorporated. All Rights Reserved.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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.