Flex 4.5 and mobile development

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.

Native Mobile Application Development Model A costly, ineﬃcient development model Native Native Native Native App App App App Additional OS’s© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

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.

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/

<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

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

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 diﬀérentes tailles physiques© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20

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 stuﬀ ll the screen stuﬀ 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

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

Scaling diﬀerent 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

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

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

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.

Accelerometer APIs § Accelerometer.isSupported § a.addEventListener(AccelerometerEvent.UPDATE, callbackFunction); § AccelerometerEvent: § accelerationX § accelerationY § accelerationZ § timestamp© 2010 Adobe Systems Incorporated. All Rights Reserved.

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.

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.

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.

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

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

Local DB APIs § SQLite - Nothing diﬀerent 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.

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

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 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.

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

Flex 4.5 and mobile development

by Michael Chaize

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 169

Statistics

Flex 4.5 and mobile development Presentation Transcript