Xplatform mobile development

50 %
50 %
Information about Xplatform mobile development

Published on December 5, 2011

Author: mchaize

Source: slideshare.net

Description

Slides at Mobielity 2011 in Tel-Aviv, Israe

Xplatform mobile development Michaël Chaize | Developer Evangelist RIAgora.com | @mchaize©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Adobe & Xplatform mobile development©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2

Adobe & Xplatform mobile development©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 3

PhoneGap Platforms© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Adobe Flex©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5

e basicsFlex is a free and open-source SDK to build RIASet of components, Data binding, RIA/UI framework, MVC, Continuous integrationEasy to learn, Fun, Mature, Professional tooling (Eclipse), DEBUGDesigned for JAVA, PHP and .NET developers©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6

Flex is open-source©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7

In other wordsFramework to build professional andmaintainable user experiencesconnected to your existing back-end©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 8

Hotline at Adobe FL EX FO RE BE©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 9

Hotline at Adobe FL EX ER AFT 15% 15% 10>1 faster cust. sat. training.©2011 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.

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.

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.

Industrialize user-experiencesOne code base, Lots of screens 7% 80% 5% Shared code 8%©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 14

Flex 4.5 - architected for mobile apps 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

Multiple densities: e problem 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” Same pixel count, different physical sizes (Minimum recommended size: 0.25” x 0.25”)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 16

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 using stuff ll the screen using percent sizing, but your fonts and icons will still be percent sizing, but your fonts tiny. And any xed pixel sizes, e.g. in constraint- and icons will still be tiny. And based layouts or padding values, will be wrong.) any xed pixel sizes, e.g. in100% constraint-based layouts or padding values, will be wrong.) 100%© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17

Solution: Automatic scaling for different DPIs <Application applicationDPI=“160”> <Button width=“160” height=“40”/> </Application> 160 dpi 240 dpi 320dpi Scaled 1.5x Scaled 2x REMEMBER: To your code, the screen is always 160 dpi, and this bu on is always 160 x 40, regardless of how the application is being scaled.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

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

Flex density concepts: Multi-DPI bitmaps<Button click="dealSummaryList.refresh()"> <icon> <MultiDPIBitmapSource source160dpi="@Embed(assets/refresh160.png)" source240dpi="@Embed(assets/refresh240.png)" source320dpi="@Embed(assets/refresh320.png)"/> </icon></Button> Design icon for 160 dpi Make a 1.5x bigger version for 240 dpi Make a 2x bigger version for 320 dpi (e.g. 32x32, 48x48, 64x64)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20

Mobile APIs available by default - Multitouch - Geolocation - Cameras - Microphone - Accelerometer - Display a web page - SQLite local database - Native extensions - GPU acceleration©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21

Adobe AIR 3 and FlexANE: No more limitationActionScript Native Extension AS3 bridge Flex Mobile project C, JAVA ANE SWF .AIR, .APK, .IPA, .BAR©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22

Deploy your applications in the market placesControl the distribution with AIR 3AIR 3 - Captive runtime ANDROID QNX IOS© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23

Flash Builder 4.6 DEMO©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24

Advanced Enterprise mobile applications Build engaging and innovation native-like applicationsusing Flex on mobile and tablet devices©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25

Design tips - Navigation©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26

Design tips - Visual Feedback visual feedback©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 27

Design tips - Visual Feedback Demo www.lafabrick.com©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 28

Flex tips - don’t stress the Display list Reduce your surface of rendering Use dynamic layouts©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 29

Flex tips - <DEMO> Radio X-Track </DEMO>©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 30

Flex tips - Dynamic layouts demo State groups <s:states> <s:State name="portraitPhone" stateGroups="phone,portrait"/> <s:State name="landscapePhone" stateGroups="landscape,phone"/> <s:State name="portraitTablet" stateGroups="portrait,tablet"/> <s:State name="landscapeTablet" stateGroups="landscape,tablet"/> </s:states> Resize handler protected function application1_resizeHandler(event:ResizeEvent):void{ // TODO Auto-generated method stub var isPortrait:Boolean = height > width; isTablet = height > 960 || width > 960; currentState = (isPortrait ? "portrait" : "landscape") + (isTablet ? "Tablet" : "Phone"); }©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 31

Flex tips - Dynamic layouts demo Layout Properties <s:ViewNavigator includeIn="tablet" id="tabletPlayView" width.landscapeTablet="{this.width - phoneViewNavigator.width}" height.landscapeTablet="{this.height}" x.landscapeTablet="270" y.landscapeTablet="0" height="100%" width.portraitTablet="100%" x.portraitTablet="0" y.portraitTablet="0" height.portraitTablet="{this.height - phoneViewNavigator.height}" />©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 32

Flex tips - Back to the <s:Application> tag©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 33

Flex tips - Persistence Manager Persist some properties FlexGlobals.topLevelApplication.persistenceManager .setProperty("lastSearch",arrayCollectResults); //... FlexGlobals.topLevelApplication.persistenceManager .getProperty("lastSearch"); Write les on tablet devices var file:File = File.documentsDirectory.resolvePath(settings.inf); if (file.exists) file.deleteFile(); var fileStream:FileStream = new FileStream(); //create a file stream fileStream.open(file, FileMode.WRITE); // and open the file for write fileStream.writeObject(object); //write the object to the file fileStream.close();©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 34

Flex tips - Optimized SQLite Insert or Update queries 10x faster SQLite on tablet devices _sqlStatement.sqlConnection = sqlc; _sqlStatement.text = "INSERT INTO "+tableName+"Followers(idFollower,name) VALUES (@ID,@SNAME)"; sqlc.begin(); for (var i:int = 0; i < arrayIdFollowers.length; i++) { var idFollower:int = int(arrayIdFollowers.getItemAt(i)); //query("INSERT INTO "+ tableName+"Followers(idFollower) VALUES ("+idFollower+")"); _sqlStatement.parameters[@ID] = idFollower.toString(); _sqlStatement.parameters[@SNAME] = screenName; _sqlStatement.execute(); } sqlc.commit(); closeDb();©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 35

How to start coding Flex mobile app ? h p://www.Flex.org©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 36

Michaël Chaize | Developer Evangelist RIAgora.com | @mchaize©2011©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

Add a comment

Related presentations

Related pages

Mobile App Development & App Creation Software - Xamarin

Build & design a mobile app using Xamarin’s cross-platform development software which simplifies mobile application creation. Download a free trial today.
Read more

Introduction to Mobile Development - Xamarin

Introduction to Mobile Development. PDF for offline ... Mobile Cross Platform Support – Xamarin offers sophisticated cross-platform support for the three ...
Read more

Cross Platform Mobile Development | Visual Studio

Create and test mobile apps for iOS, Android, and Windows using cross-platform mobile development tools in Visual Studio.
Read more

Mobile application development - Wikipedia, the free ...

Platform . The platform organizations need to develop, deploy and manage mobile apps is made from many components, and tools allow a developer to write ...
Read more

Ten of the Best Cross-Platform Mobile Development Tools ...

Over the last year or so the market for enterprise-ready mobile cross platform development has begun to take-off. Large and medium sized companies are incr
Read more

Mobile App Development Platform & MBaaS | Appcelerator

Appcelerator's mobile app development platform delivers great native apps, rich MBaaS, and real-time mobile analytics. Start free, grow from there.
Read more

Mobile App Development Platform - Build Custom, Native Apps

Take control of your enterprise mobile app development by empowering non-programmers to rapidly prototype and build custom, native apps for iOS and Android.
Read more

7 Tool for Cross-Platform Mobile development - Udemy Blog

Cross platform mobile development refers to a technique of writing a single codebase for apps that will eventually be used on different operating systems.
Read more

Top 5 Tools for Multi-Platform Mobile App Development

We all know how bothersome multi-platform mobile app formatting can get. Each platform is unique and exhibits different features, capabilities ...
Read more

Cross-Platform Mobile Development in Visual Studio

To get started, install Visual Studio, select the Custom option in the installer, and check the box under Cross Platform Mobile Development > C#/.NET ...
Read more