Flex 4.5 and mobile development
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Flex 4.5 and mobile development

on

  • 2,733 views

 

Statistics

Views

Total Views
2,733
Views on SlideShare
2,562
Embed Views
171

Actions

Likes
4
Downloads
113
Comments
0

8 Embeds 171

http://soria.fr 99
http://www.lincubateurtoulousain.net 47
http://www.soria.fr 20
http://www.slideshare.net 1
http://soria.fr. 1
http://cc.bingj.com 1
http://webcache.googleusercontent.com 1
http://www.slideee.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Flex 4.5 and mobile development Presentation Transcript

  • 1. Flex 4.5 et les applications mobiles Michaël Chaize | Flash Platform Evangelist | www.RIAgora.com | @mchaize© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 2. Adobe Flex© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2
  • 3. How Flex Works in the Browser Browser Flex SDK MXML ActionScript Flash Player Flex Class Library Debuggers SOAP HTTP/S AMF/S RTMP/S Flash Builder IDE 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 Con dential.
  • 4. Customer care @ Adobe© 2010 Adobe Systems Incorporated. All Rights Reserved. 4
  • 5. Adobe Hendrix 15% 1 +10% solve a case day training customer satisfaction© 2010 Adobe Systems Incorporated. All Rights Reserved. 5
  • 6. System-centric applications© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6All external content and images pending approvals.
  • 7. System-centric applications© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7All external content and images pending approvals.
  • 8. Rich Internet Application ®Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe con dential. 8
  • 9. Flex & Java & Richness / Fast / Open-source / Industrialization©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 10. e explosion of devices introduces new challenges for application development© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 11. Open Screen Project: Adobe et plus de 70 partenaires Technology Partners Content Partners© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 11
  • 12. Native Mobile Application Development Model A costly, inefficient development model Native Native Native Native App App App App Additional OS’s© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 13. Introducing a new mobile development paradigm One Tool, One Language, One Codebase Flex Application Common codebase AIR Additional OS’s Any Platform© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 14. Platforms, browsers, and devicesIn-browserOutside the browserMobile PlatformsSet-top boxes (Future)© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 15. Adobe Flex 4.5 4.5© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 15
  • 16. FLEX FRAMEWORK 4SPARK COMPONENT MODEL ActionScript MXML Component Skin Graphics Behavior Layout Animation Logic Parts Data CSS properties States http://www.lafabrick.com/labz/skins/jellySkin/
  • 17. Mobile Applications in Flex 4.5 s:Application s:ViewNavigatorApplication s:TabbedViewNavigatorApplication© 2010 Adobe Systems Incorporated. All Rights Reserved. 17
  • 18. <s:ViewNavigatorApplication> 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. 18
  • 19. 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. 19 3
  • 20. Un problème technique: la densité des écrans 150 x 40 pixel bu on Desktop monitor Galaxy Tab Droid 2 iPhone 4 @100 dpi @160 dpi @240 dpi @320 dpi = 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17” = 0.46” x 0.13” Un même nombre de pixels pour différentes tailles physiques© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20
  • 21. Can I use dynamic layout to solve this? 320x480 @160dpi 640x960 (at same density) 640x960 @320dpi 100% 100% (Not easily. You can make (Not easily. You can make stuff ll the screen stuff ll the screen using using percent sizing, but your fonts and icons percent sizing, but your will still be tiny. And any xed pixel sizes, e.g. in fonts and icons will still be constraint-based layouts or padding values, will tiny. And any xed pixel be wrong.)100% sizes, e.g. in constraint- based layouts or padding values, will be wrong.) 100%© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21
  • 22. Flex 4.5 et la mise à l’échelle automatique <Application applicationDPI=“160”> <Button width=“160” height=“40”/> </Application> 160 dpi 240 dpi 320dpi Scaled 1.5x Scaled 2x© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22
  • 23. Scaling different types of objects Lorem Ipsum Dolor Vectors Text Bitmaps scale up well scales up well do not scale up well (scaling down can be bad) (Flash scales font size) Outlines may blur slightly© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23
  • 24. Flex density concepts: Multi-DPI bitmaps <?xml version="1.0" encoding="utf-8"?> <s:ViewNavigatorApplication applicationDPI="160"> ... </s:ViewNavigatorApplication> <Button click="dealSummaryList.refresh()"> <icon> <MultiDPIBitmapSource source160dpi="@Embed(assets/refresh160.png)" source240dpi="@Embed(assets/refresh240.png)" source320dpi="@Embed(assets/refresh320.png)"/> </icon> </Button>© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  • 25. ViewMenu...<s:viewMenuItems>                <s:ViewMenuItem  label="Add"  click="itemClickInfo(event)"  icon="{addIcon}"    iconPlacement="left"  />                <s:ViewMenuItem  label="Remove"  click="itemClickInfo(event)"  icon="{delIcon}"  iconPlacement="left"  />                <s:ViewMenuItem  label="Find"  click="itemClickInfo(event)"  icon="{findIcon}"  iconPlacement="left"/>                <s:ViewMenuItem  label="Next"  click="itemClickInfo(event)"  icon="{nextIcon}"  iconPlacement="left"/>                <s:ViewMenuItem  label="Prev"  click="itemClickInfo(event)"  icon="{prevIcon}"  iconPlacement="left"/></s:viewMenuItems>... © 2010 Adobe Systems Incorporated. All Rights Reserved. 25 3
  • 26. Flex 4.5 and smartphones/tablets Android tablets BlackBerry PlayBook Apple tablets© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26
  • 27. Demo© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 27
  • 28. Mobile APIs© 2010 Adobe Systems Incorporated. All Rights Reserved. 28
  • 29. 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.
  • 30. Accelerometer APIs § Accelerometer.isSupported § a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction); § AccelerometerEvent: § accelerationX § accelerationY § accelerationZ § timestamp© 2010 Adobe Systems Incorporated. All Rights Reserved.
  • 31. 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.
  • 32. 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.
  • 33. 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.
  • 34. 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. ash" 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. 34
  • 35. Native App Integration § Open Email, Browser, Maps, Phone, or SMS § navigateToURL(new URLRequest(mailto:foo@bar.com)); § navigateToURL(new URLRequest(h p://www.jamesward.com)); § navigateToURL(new URLRequest(h p://maps.google.com/)); § navigateToURL(new URLRequest(tel:1234567890)); § navigateToURL(new URLRequest(sms:1234567890));© 2010 Adobe Systems Incorporated. All Rights Reserved. 35
  • 36. 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.
  • 37. 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("h p://www.riagora.com");© 2010 Adobe Systems Incorporated. All Rights Reserved. 37
  • 38. Tablet and Enterprise applications Camera GPS 3G Mobility Bright screen Microphone© 2011 Adobe Systems Incorporated.
  • 39. IN-CONTEXT COLLABORATION LiveCycle Collaboration Service Webcam Chat Shared Form
  • 40. 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 existing websites© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 40All external content and images pending approvals.
  • 41. Michaël Chaize & resources : mchaize@adobe.com RIAgora.com Flex.org developer.adobe.com Tour de Mobile Flex @mchaize© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 41
  • 42. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.