SlideShare a Scribd company logo
1 of 37
Download to read offline
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 basics




Flex is a free and open-source SDK to build RIA
Set of components, Data binding, RIA/UI framework, MVC, Continuous integration

Easy to learn, Fun, Mature, Professional tooling (Eclipse), DEBUG

Designed 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 words




Framework to build professional and
maintainable                               user experiences
connected 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-experiences


One 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. in
100%




            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 Flex


ANE: No more limitation
ActionScript 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 places


Control the distribution with AIR 3
AIR 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 applications
using 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.

More Related Content

What's hot

Oop2012 mobile workshops
Oop2012 mobile workshopsOop2012 mobile workshops
Oop2012 mobile workshopsMichael Chaize
 
Flash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex babyFlash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex babyMichael Chaize
 
Flex and the city in London - Keynote
Flex and the city in London - KeynoteFlex and the city in London - Keynote
Flex and the city in London - KeynoteMichael Chaize
 
Back From MAX in London for CQ5 users
Back From MAX in London for CQ5 usersBack From MAX in London for CQ5 users
Back From MAX in London for CQ5 usersMichael Chaize
 
Ria2010 workshop dev mobile
Ria2010 workshop dev mobileRia2010 workshop dev mobile
Ria2010 workshop dev mobileMichael Chaize
 
Flex presentation for Paris Android User group PAUG
Flex presentation for Paris Android User group PAUGFlex presentation for Paris Android User group PAUG
Flex presentation for Paris Android User group PAUGMichael Chaize
 
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboardJAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboardMichael Chaize
 
Adobe et la stratégie multi-écrans
Adobe et la stratégie multi-écransAdobe et la stratégie multi-écrans
Adobe et la stratégie multi-écransMichael Chaize
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform javaMichael Chaize
 
Oop2012 keynote Design Driven Development
Oop2012 keynote Design Driven DevelopmentOop2012 keynote Design Driven Development
Oop2012 keynote Design Driven DevelopmentMichael Chaize
 
Using design pattern for mobile
Using design pattern for mobileUsing design pattern for mobile
Using design pattern for mobileluca mezzalira
 
Breizh camp adobe flex et les mobiles
Breizh camp   adobe flex et les mobilesBreizh camp   adobe flex et les mobiles
Breizh camp adobe flex et les mobilesMichael Chaize
 
Flex 4.5 and mobile development
Flex 4.5 and mobile developmentFlex 4.5 and mobile development
Flex 4.5 and mobile developmentMichael Chaize
 
Fm Mc Presentation Ria2008
Fm Mc   Presentation Ria2008Fm Mc   Presentation Ria2008
Fm Mc Presentation Ria2008Michael Chaize
 
Eva flex java_1_slides
Eva flex java_1_slidesEva flex java_1_slides
Eva flex java_1_slidesMichael Chaize
 
Enterprise Flex applications on tablet devices
Enterprise Flex applications on tablet devicesEnterprise Flex applications on tablet devices
Enterprise Flex applications on tablet devicesMichael Chaize
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devicespaultrani
 
One backend multiple Screens
One backend multiple ScreensOne backend multiple Screens
One backend multiple ScreensMichael Chaize
 

What's hot (20)

Oop2012 mobile workshops
Oop2012 mobile workshopsOop2012 mobile workshops
Oop2012 mobile workshops
 
Flash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex babyFlash camp portugal - Let's talk about Flex baby
Flash camp portugal - Let's talk about Flex baby
 
Flex and the city in London - Keynote
Flex and the city in London - KeynoteFlex and the city in London - Keynote
Flex and the city in London - Keynote
 
Back From MAX in London for CQ5 users
Back From MAX in London for CQ5 usersBack From MAX in London for CQ5 users
Back From MAX in London for CQ5 users
 
Ria2010 workshop dev mobile
Ria2010 workshop dev mobileRia2010 workshop dev mobile
Ria2010 workshop dev mobile
 
Flex presentation for Paris Android User group PAUG
Flex presentation for Paris Android User group PAUGFlex presentation for Paris Android User group PAUG
Flex presentation for Paris Android User group PAUG
 
JAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboardJAX2010 Flex Java technical session: interactive dashboard
JAX2010 Flex Java technical session: interactive dashboard
 
Adobe et la stratégie multi-écrans
Adobe et la stratégie multi-écransAdobe et la stratégie multi-écrans
Adobe et la stratégie multi-écrans
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform java
 
Oop2012 keynote Design Driven Development
Oop2012 keynote Design Driven DevelopmentOop2012 keynote Design Driven Development
Oop2012 keynote Design Driven Development
 
Jax2010 adobe lcds
Jax2010 adobe lcdsJax2010 adobe lcds
Jax2010 adobe lcds
 
Using design pattern for mobile
Using design pattern for mobileUsing design pattern for mobile
Using design pattern for mobile
 
Breizh camp adobe flex et les mobiles
Breizh camp   adobe flex et les mobilesBreizh camp   adobe flex et les mobiles
Breizh camp adobe flex et les mobiles
 
Flex 4.5 and mobile development
Flex 4.5 and mobile developmentFlex 4.5 and mobile development
Flex 4.5 and mobile development
 
Jax 2011 keynote
Jax 2011 keynoteJax 2011 keynote
Jax 2011 keynote
 
Fm Mc Presentation Ria2008
Fm Mc   Presentation Ria2008Fm Mc   Presentation Ria2008
Fm Mc Presentation Ria2008
 
Eva flex java_1_slides
Eva flex java_1_slidesEva flex java_1_slides
Eva flex java_1_slides
 
Enterprise Flex applications on tablet devices
Enterprise Flex applications on tablet devicesEnterprise Flex applications on tablet devices
Enterprise Flex applications on tablet devices
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devices
 
One backend multiple Screens
One backend multiple ScreensOne backend multiple Screens
One backend multiple Screens
 

Viewers also liked

Životní situace - ORP Kladno
Životní situace - ORP KladnoŽivotní situace - ORP Kladno
Životní situace - ORP KladnoEquica
 
Moc A Response 1
Moc A Response 1Moc A Response 1
Moc A Response 1shas3n
 
Maker Art: How to Create a Wonderbox
Maker Art: How to Create a WonderboxMaker Art: How to Create a Wonderbox
Maker Art: How to Create a WonderboxGreen Change
 
Greene Presentation
Greene PresentationGreene Presentation
Greene PresentationRudy Garns
 
Borjgalo [Compatibility Mode]
Borjgalo [Compatibility Mode]Borjgalo [Compatibility Mode]
Borjgalo [Compatibility Mode]shore
 
Martin karlssons vykortssamling hum. läroverket och lekmannaskolan
Martin karlssons vykortssamling   hum. läroverket och lekmannaskolanMartin karlssons vykortssamling   hum. läroverket och lekmannaskolan
Martin karlssons vykortssamling hum. läroverket och lekmannaskolanhembygdsigtuna
 
Integrating Technology Introduction
Integrating Technology IntroductionIntegrating Technology Introduction
Integrating Technology IntroductionCindy Kendall
 
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014Michael Chaize
 
AOD Workplace Modern Sample Final
AOD Workplace Modern Sample FinalAOD Workplace Modern Sample Final
AOD Workplace Modern Sample FinalAndrew Schwartz
 
我行·你行·大家行04
我行·你行·大家行04我行·你行·大家行04
我行·你行·大家行04liuruifeng
 
Create folder in start Menu in Windows 7
Create folder in start Menu in Windows 7Create folder in start Menu in Windows 7
Create folder in start Menu in Windows 7Neelanjan Bhattacharyya
 
On9 Systems - Web Solutions
On9 Systems - Web SolutionsOn9 Systems - Web Solutions
On9 Systems - Web SolutionsOn9 Systems
 
Cap2 Historia del cine
Cap2 Historia del cineCap2 Historia del cine
Cap2 Historia del cineXar Li
 
M1. sem web & ontology introd
M1. sem web & ontology introdM1. sem web & ontology introd
M1. sem web & ontology introdMichele Missikoff
 
Introduction to CodeIgniter
Introduction to CodeIgniterIntroduction to CodeIgniter
Introduction to CodeIgniterkindafunnylookin
 
Expansion of Information Extraction System to the Russian language
Expansion of Information Extraction System to the Russian languageExpansion of Information Extraction System to the Russian language
Expansion of Information Extraction System to the Russian languageLidia Pivovarova
 

Viewers also liked (20)

Životní situace - ORP Kladno
Životní situace - ORP KladnoŽivotní situace - ORP Kladno
Životní situace - ORP Kladno
 
Open Corpora
Open CorporaOpen Corpora
Open Corpora
 
Moc A Response 1
Moc A Response 1Moc A Response 1
Moc A Response 1
 
Maker Art: How to Create a Wonderbox
Maker Art: How to Create a WonderboxMaker Art: How to Create a Wonderbox
Maker Art: How to Create a Wonderbox
 
Greene Presentation
Greene PresentationGreene Presentation
Greene Presentation
 
Borjgalo [Compatibility Mode]
Borjgalo [Compatibility Mode]Borjgalo [Compatibility Mode]
Borjgalo [Compatibility Mode]
 
Martin karlssons vykortssamling hum. läroverket och lekmannaskolan
Martin karlssons vykortssamling   hum. läroverket och lekmannaskolanMartin karlssons vykortssamling   hum. läroverket och lekmannaskolan
Martin karlssons vykortssamling hum. läroverket och lekmannaskolan
 
Integrating Technology Introduction
Integrating Technology IntroductionIntegrating Technology Introduction
Integrating Technology Introduction
 
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
FITC 2014 Amsterdam - Adobe Apps for Web Designers in 2014
 
AOD Workplace Modern Sample Final
AOD Workplace Modern Sample FinalAOD Workplace Modern Sample Final
AOD Workplace Modern Sample Final
 
2. open innov whatisit
2. open innov whatisit2. open innov whatisit
2. open innov whatisit
 
我行·你行·大家行04
我行·你行·大家行04我行·你行·大家行04
我行·你行·大家行04
 
Create folder in start Menu in Windows 7
Create folder in start Menu in Windows 7Create folder in start Menu in Windows 7
Create folder in start Menu in Windows 7
 
Mistakes were made
Mistakes were madeMistakes were made
Mistakes were made
 
On9 Systems - Web Solutions
On9 Systems - Web SolutionsOn9 Systems - Web Solutions
On9 Systems - Web Solutions
 
Cap2 Historia del cine
Cap2 Historia del cineCap2 Historia del cine
Cap2 Historia del cine
 
M1. sem web & ontology introd
M1. sem web & ontology introdM1. sem web & ontology introd
M1. sem web & ontology introd
 
Introduction to CodeIgniter
Introduction to CodeIgniterIntroduction to CodeIgniter
Introduction to CodeIgniter
 
Expansion of Information Extraction System to the Russian language
Expansion of Information Extraction System to the Russian languageExpansion of Information Extraction System to the Russian language
Expansion of Information Extraction System to the Russian language
 
Candles
CandlesCandles
Candles
 

Similar to Xplatform mobile development

Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform javaCh'ti JUG
 
From Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small ScreensFrom Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small ScreensJoseph Labrecque
 
スマートフォン対策ビジネスセミナー / Session1:Adobe AIRで実現する超生産的スマートフォンアプリ開発
スマートフォン対策ビジネスセミナー / Session1:Adobe AIRで実現する超生産的スマートフォンアプリ開発スマートフォン対策ビジネスセミナー / Session1:Adobe AIRで実現する超生産的スマートフォンアプリ開発
スマートフォン対策ビジネスセミナー / Session1:Adobe AIRで実現する超生産的スマートフォンアプリ開発Nishiyama Shoichi
 
Flash Applications For Mobile
Flash Applications For MobileFlash Applications For Mobile
Flash Applications For MobileSerge Jespers
 
Creating Mobile Content Using Flash
Creating Mobile Content Using FlashCreating Mobile Content Using Flash
Creating Mobile Content Using Flashpaultrani
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applicationsMichael Chaize
 
Development mobile app cross device
Development mobile app cross deviceDevelopment mobile app cross device
Development mobile app cross devicePhuong Nguyen
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with FlexConFoo
 
UX Concerns across Mobile Platforms
UX Concerns across Mobile PlatformsUX Concerns across Mobile Platforms
UX Concerns across Mobile PlatformsJoseph Labrecque
 
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Keisuke Todoroki
 
Develop multi-screen applications with Flex
Develop multi-screen applications with Flex Develop multi-screen applications with Flex
Develop multi-screen applications with Flex Codemotion
 
iQ FutureNow: Ensuring the success of your mobile strategy
iQ FutureNow: Ensuring the success of your mobile strategyiQ FutureNow: Ensuring the success of your mobile strategy
iQ FutureNow: Ensuring the success of your mobile strategyiQcontent
 
Innovation and the Adobe Flash Platform
Innovation and the Adobe Flash PlatformInnovation and the Adobe Flash Platform
Innovation and the Adobe Flash PlatformMichael Chaize
 
Android Development with Flash Platform
Android Development with Flash PlatformAndroid Development with Flash Platform
Android Development with Flash PlatformMihai Corlan
 
Adobe Shadow - Amsterdam Adobe Camp
Adobe Shadow - Amsterdam Adobe CampAdobe Shadow - Amsterdam Adobe Camp
Adobe Shadow - Amsterdam Adobe CampMihai Corlan
 
Adobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBookAdobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBookMihai Corlan
 

Similar to Xplatform mobile development (20)

Flexpaug 111207121300-phpapp01
Flexpaug 111207121300-phpapp01Flexpaug 111207121300-phpapp01
Flexpaug 111207121300-phpapp01
 
Adobe flash platform java
Adobe flash platform javaAdobe flash platform java
Adobe flash platform java
 
MMT 28: Adobe »Edge to the Flash«
MMT 28: Adobe »Edge to the Flash«MMT 28: Adobe »Edge to the Flash«
MMT 28: Adobe »Edge to the Flash«
 
From Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small ScreensFrom Desktop to Mobile: Application Functionality for Small Screens
From Desktop to Mobile: Application Functionality for Small Screens
 
スマートフォン対策ビジネスセミナー / Session1:Adobe AIRで実現する超生産的スマートフォンアプリ開発
スマートフォン対策ビジネスセミナー / Session1:Adobe AIRで実現する超生産的スマートフォンアプリ開発スマートフォン対策ビジネスセミナー / Session1:Adobe AIRで実現する超生産的スマートフォンアプリ開発
スマートフォン対策ビジネスセミナー / Session1:Adobe AIRで実現する超生産的スマートフォンアプリ開発
 
Flash Applications For Mobile
Flash Applications For MobileFlash Applications For Mobile
Flash Applications For Mobile
 
Creating Mobile Content Using Flash
Creating Mobile Content Using FlashCreating Mobile Content Using Flash
Creating Mobile Content Using Flash
 
Seminario MovilyTactil
Seminario MovilyTactilSeminario MovilyTactil
Seminario MovilyTactil
 
Xebia adobe flash mobile applications
Xebia adobe flash mobile applicationsXebia adobe flash mobile applications
Xebia adobe flash mobile applications
 
Development mobile app cross device
Development mobile app cross deviceDevelopment mobile app cross device
Development mobile app cross device
 
Develop mobile applications with Flex
Develop mobile applications with FlexDevelop mobile applications with Flex
Develop mobile applications with Flex
 
UX Concerns across Mobile Platforms
UX Concerns across Mobile PlatformsUX Concerns across Mobile Platforms
UX Concerns across Mobile Platforms
 
Adobe Flash platform の法人利用
Adobe Flash platform の法人利用Adobe Flash platform の法人利用
Adobe Flash platform の法人利用
 
Develop multi-screen applications with Flex
Develop multi-screen applications with Flex Develop multi-screen applications with Flex
Develop multi-screen applications with Flex
 
iQ FutureNow: Ensuring the success of your mobile strategy
iQ FutureNow: Ensuring the success of your mobile strategyiQ FutureNow: Ensuring the success of your mobile strategy
iQ FutureNow: Ensuring the success of your mobile strategy
 
Innovation and the Adobe Flash Platform
Innovation and the Adobe Flash PlatformInnovation and the Adobe Flash Platform
Innovation and the Adobe Flash Platform
 
Android Development with Flash Platform
Android Development with Flash PlatformAndroid Development with Flash Platform
Android Development with Flash Platform
 
Adobe Shadow - Amsterdam Adobe Camp
Adobe Shadow - Amsterdam Adobe CampAdobe Shadow - Amsterdam Adobe Camp
Adobe Shadow - Amsterdam Adobe Camp
 
Adobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBookAdobe AIR Mobile development for Android and PlayBook
Adobe AIR Mobile development for Android and PlayBook
 
Mobile revolution
Mobile revolutionMobile revolution
Mobile revolution
 

More from Michael Chaize

Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Michael Chaize
 
FITC Amsterdam 2015 - keynote-adobe - We are mutants
FITC Amsterdam 2015 -  keynote-adobe - We are mutantsFITC Amsterdam 2015 -  keynote-adobe - We are mutants
FITC Amsterdam 2015 - keynote-adobe - We are mutantsMichael Chaize
 
Multimania - Web Design Trends
Multimania - Web Design TrendsMultimania - Web Design Trends
Multimania - Web Design TrendsMichael Chaize
 
Feweb - Adobe et le Web Design
Feweb - Adobe et le Web DesignFeweb - Adobe et le Web Design
Feweb - Adobe et le Web DesignMichael Chaize
 
Adobe gaming flash gamm michael
Adobe gaming flash gamm michaelAdobe gaming flash gamm michael
Adobe gaming flash gamm michaelMichael Chaize
 
Max2013 rejected apps presentation
Max2013   rejected apps presentationMax2013   rejected apps presentation
Max2013 rejected apps presentationMichael Chaize
 
Pocket agile challenge adobe mobile v1.0.pptx
Pocket agile   challenge adobe mobile v1.0.pptxPocket agile   challenge adobe mobile v1.0.pptx
Pocket agile challenge adobe mobile v1.0.pptxMichael Chaize
 
The future of the Adobe Flash platform
The future of the Adobe Flash platformThe future of the Adobe Flash platform
The future of the Adobe Flash platformMichael Chaize
 
Ria2010 keynote développeurs
Ria2010 keynote développeursRia2010 keynote développeurs
Ria2010 keynote développeursMichael Chaize
 
Devoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with FlexDevoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with FlexMichael Chaize
 
Flex et PHP pour développer des applications mobiles
Flex et PHP pour développer des applications mobilesFlex et PHP pour développer des applications mobiles
Flex et PHP pour développer des applications mobilesMichael Chaize
 

More from Michael Chaize (11)

Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015
 
FITC Amsterdam 2015 - keynote-adobe - We are mutants
FITC Amsterdam 2015 -  keynote-adobe - We are mutantsFITC Amsterdam 2015 -  keynote-adobe - We are mutants
FITC Amsterdam 2015 - keynote-adobe - We are mutants
 
Multimania - Web Design Trends
Multimania - Web Design TrendsMultimania - Web Design Trends
Multimania - Web Design Trends
 
Feweb - Adobe et le Web Design
Feweb - Adobe et le Web DesignFeweb - Adobe et le Web Design
Feweb - Adobe et le Web Design
 
Adobe gaming flash gamm michael
Adobe gaming flash gamm michaelAdobe gaming flash gamm michael
Adobe gaming flash gamm michael
 
Max2013 rejected apps presentation
Max2013   rejected apps presentationMax2013   rejected apps presentation
Max2013 rejected apps presentation
 
Pocket agile challenge adobe mobile v1.0.pptx
Pocket agile   challenge adobe mobile v1.0.pptxPocket agile   challenge adobe mobile v1.0.pptx
Pocket agile challenge adobe mobile v1.0.pptx
 
The future of the Adobe Flash platform
The future of the Adobe Flash platformThe future of the Adobe Flash platform
The future of the Adobe Flash platform
 
Ria2010 keynote développeurs
Ria2010 keynote développeursRia2010 keynote développeurs
Ria2010 keynote développeurs
 
Devoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with FlexDevoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with Flex
 
Flex et PHP pour développer des applications mobiles
Flex et PHP pour développer des applications mobilesFlex et PHP pour développer des applications mobiles
Flex et PHP pour développer des applications mobiles
 

Recently uploaded

TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 

Recently uploaded (20)

TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 

Xplatform mobile development

  • 1. Xplatform mobile development Michaël Chaize | Developer Evangelist RIAgora.com | @mchaize ©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. 2
  • 3. Adobe & Xplatform mobile development ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 3
  • 4. PhoneGap Platforms © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 5. Adobe Flex ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 5
  • 6. e basics Flex is a free and open-source SDK to build RIA Set of components, Data binding, RIA/UI framework, MVC, Continuous integration Easy to learn, Fun, Mature, Professional tooling (Eclipse), DEBUG Designed for JAVA, PHP and .NET developers ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 6
  • 7. Flex is open-source ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 7
  • 8. In other words Framework to build professional and maintainable user experiences connected to your existing back-end ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 8
  • 9. Hotline at Adobe FL EX FO RE BE ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 9
  • 10. 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
  • 11. e explosion of devices introduces new challenges for application development © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  • 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. Industrialize user-experiences One code base, Lots of screens 7% 80% 5% Shared code 8% ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 14
  • 15. 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
  • 16. 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
  • 17. 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. in 100% constraint-based layouts or padding values, will be wrong.) 100% © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 17
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. Adobe AIR 3 and Flex ANE: No more limitation ActionScript 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
  • 23. Deploy your applications in the market places Control the distribution with AIR 3 AIR 3 - Captive runtime ANDROID QNX IOS © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23
  • 24. Flash Builder 4.6 DEMO ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24
  • 25. Advanced Enterprise mobile applications Build engaging and innovation native-like applications using Flex on mobile and tablet devices ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25
  • 26. Design tips - Navigation ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26
  • 27. Design tips - Visual Feedback visual feedback ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 27
  • 28. Design tips - Visual Feedback Demo www.lafabrick.com ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 28
  • 29. 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
  • 30. Flex tips - <DEMO> Radio X-Track </DEMO> ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 30
  • 31. 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
  • 32. 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
  • 33. Flex tips - Back to the <s:Application> tag ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 33
  • 34. 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
  • 35. 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
  • 36. How to start coding Flex mobile app ? h p://www.Flex.org ©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 36
  • 37. Michaël Chaize | Developer Evangelist RIAgora.com | @mchaize ©2011 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.