SlideShare une entreprise Scribd logo
1  sur  35
La plate-forme Flash
        Pour les écrans multiples




Flex Mobile



   21/05/2012
Plateforme de Adobe Flash



       Flex



              Flex Mobile




                  Démonstration
La Plateforme
De Adobe Flash
Professional Tools        Frameworks

                     Flash Builder
                     Flash Catalyst
                     Flash Professional     Flex framework

                 Flash Media Server         Flash Player
                 LiveCycle Data Services    AIR
                 Adobe BlazeDS


                        Server                 RunTimes



Kaouech Jihed                                                  4
FLEX
- Framework qui sert à la création d’interfaces client riches
(front end de l’application) basé sur l’usage de la technologie
Adobe Flash.

- Apporte une grande souplesse pour la création d’interfaces
graphiques riches, elle est souvent perçue par les non-initiés
comme complexe.




Kaouech Jihed                                               6
- Une application Flex n’est autre qu’un fichier portant
l’extension .swf (ShockWave Flash) issu de la compilation de
fichiers MXML et ActionScript, insérés dans une page web.

- Les fichiers MXML (Macromedia XML) servent à la
description des interfaces graphiques, en définissant la position
des composants et leurs propriétés.

- Les fichiers Action-Script 3 ont la charge de la logique
applicative : gestion d’événements, écriture de procédure,
fonctions…



Kaouech Jihed                                                 7
Flex s’articule autour des quatre éléments suivants :

- Flash Player : assure la compatibilité des applications développées en
Flash sur l’ensemble des environnements et navigateurs web.

- Flex SDK (Software Development Kit) : Ouvert au monde Open
Source, permet de créer des applications Flex gratuitement à l’aide des
compilateurs et du débogueur qu’il intègre.

- Flex Builder : Environnement de développement basé sur le célèbre
IDE Eclipse, il propose un ensemble de fonctionnalités permettant de
réaliser facilement des interfaces graphiques conviviales.

- Blaze DS : Un sous-ensemble de projets Open Source basés sur les
briques principales de son homologue LiveCycle Data services d’Adobe,
qui est payant.
Kaouech Jihed                                                           8
FLEX 4.5
Flex Mobile
350

                                   Total Smartphones
                          300
Millions of Smartphones




                                   Smartphones with Flash Player
                          250


                          200


                          150                                              53%

                          100
                                                                   35%
                           50
                                              9%
                            0
                            2009                2010                2011      2012




       Kaouech Jihed                                                         10
Un modèle coûteux et inefficace


Native            Native             Native       Native
 App               App                App          App




                                                  Additional
                                                    OS’s




Kaouech Jihed                                             11
Un Outil, Un Langage, Une code partagé


                               Flex Application     Code partagé



                                       AIR




                                                           Additional
                                                             OS’s


                           Multi plateformes
Kaouech Jihed                                                      12
Kaouech Jihed   13
Kaouech Jihed   14
s:Application   s:ViewNavigatorApplication   s:TabbedViewNavApplication




Kaouech Jihed                                                         15
<s:ViewNavigatorApplication>




Kaouech Jihed                                  16
Kaouech Jihed   17
Cycle de vie <s:ViewNavigatorApplication>




        DATA



Kaouech Jihed                                          18
Cycle de vie <s:ViewNavigatorApplication>




  View destroyed            View created




        DATA



Kaouech Jihed                                             19
Cycle de vie <s:ViewNavigatorApplication>




  View destroyed            View destroyed
                            View created         View created




        DATA                                         DATA
                         Persister en memoire


Kaouech Jihed                                                   20
Cycle de vie <s:ViewNavigatorApplication>




Kaouech Jihed                                          21
Bouton 150 x 40 pixel




    Desktop monitor             Galaxy Tab           Droid 2           iPhone 4
       @100 dpi                 @160 dpi            @240 dpi           @320 dpi



                Même nombre de pixels, différentes tailles physiques




Kaouech Jihed                                                                     22
Bouton 150 x 40 pixel




    Desktop monitor             Galaxy Tab           Droid 2           iPhone 4
       @100 dpi                 @160 dpi            @240 dpi           @320 dpi



                Même nombre de pixels, différentes tailles physiques




Kaouech Jihed                                                                     23
Solution : Mise à l’échelle automatique avec Flex4.5

    <s:ViewNavigatorApplication xmlns:fx=http://ns.adobe.com/mxml/2009
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                applicationDPI="160">
             <s:Button width=“150” height=“40” label="Connexion" />
    </s:ViewNavigatorApplication>




                 @160 dpi            @240 dpi          @320 dpi




Kaouech Jihed                                                                 24
Solution : Mise à l’échelle automatique avec Flex4.5

    <s:ViewNavigatorApplication xmlns:fx=http://ns.adobe.com/mxml/2009
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                applicationDPI="160">
             <s:Button width=“150” height=“40” label="Connexion" />
    </s:ViewNavigatorApplication>


                                     Scaled 1.5         Scaled 2


                 @160 dpi            @240 dpi          @320 dpi




Kaouech Jihed                                                                 25
Un peux de
 pratique
Kaouech Jihed   27
Kaouech Jihed   28
Kaouech Jihed   29
Kaouech Jihed   30
Kaouech Jihed   31
Kaouech Jihed   32
Kaouech Jihed   33
Kaouech Jihed   34
Merci pour
  votre
attention
   Kaouech_jihed@yahoo.com

Contenu connexe

En vedette

Gcspwwapril2013linkedin
Gcspwwapril2013linkedinGcspwwapril2013linkedin
Gcspwwapril2013linkedinwinklepw
 
Nitrogen Summary study of private fleet greg stephens 2014
Nitrogen Summary study of private fleet greg stephens 2014Nitrogen Summary study of private fleet greg stephens 2014
Nitrogen Summary study of private fleet greg stephens 2014Lean Transit Consulting
 
Airbus military engineering update 2012
Airbus military engineering update 2012Airbus military engineering update 2012
Airbus military engineering update 2012ICSA, LLC
 
The F-35 and UID
The F-35 and UIDThe F-35 and UID
The F-35 and UIDICSA, LLC
 
Rscat6 k formation-mettre-en-oeuvre-les-switches-cisco-catalyst-6500-series
Rscat6 k formation-mettre-en-oeuvre-les-switches-cisco-catalyst-6500-seriesRscat6 k formation-mettre-en-oeuvre-les-switches-cisco-catalyst-6500-series
Rscat6 k formation-mettre-en-oeuvre-les-switches-cisco-catalyst-6500-seriesCERTyou Formation
 
Catalytic Reforming: Catalyst, Process Technology and Operations Overview
Catalytic Reforming:  Catalyst, Process Technology and Operations OverviewCatalytic Reforming:  Catalyst, Process Technology and Operations Overview
Catalytic Reforming: Catalyst, Process Technology and Operations OverviewGerard B. Hawkins
 
Votre Startup: La réponse à un problème qui mérite une solution
Votre Startup: La réponse à un problème qui mérite une solutionVotre Startup: La réponse à un problème qui mérite une solution
Votre Startup: La réponse à un problème qui mérite une solutionDavender Gupta
 
Big Data in Healthcare Made Simple: Where It Stands Today and Where It’s Going
Big Data in Healthcare Made Simple: Where It Stands Today and Where It’s GoingBig Data in Healthcare Made Simple: Where It Stands Today and Where It’s Going
Big Data in Healthcare Made Simple: Where It Stands Today and Where It’s GoingHealth Catalyst
 
Groupe De Kamleu, Youssouf, Bertrang, Thiam, Adram+¬ Etude De Cas Cisco
Groupe De Kamleu, Youssouf, Bertrang, Thiam, Adram+¬   Etude De Cas CiscoGroupe De Kamleu, Youssouf, Bertrang, Thiam, Adram+¬   Etude De Cas Cisco
Groupe De Kamleu, Youssouf, Bertrang, Thiam, Adram+¬ Etude De Cas CiscoEmeric Kamleu Noumi
 
Steam Reforming - Practical Operations
Steam Reforming - Practical OperationsSteam Reforming - Practical Operations
Steam Reforming - Practical OperationsGerard B. Hawkins
 
CNAV : Transformez les solutions de stockage traditionnelles en infrastructur...
CNAV : Transformez les solutions de stockage traditionnelles en infrastructur...CNAV : Transformez les solutions de stockage traditionnelles en infrastructur...
CNAV : Transformez les solutions de stockage traditionnelles en infrastructur...Hitachi Data Systems France
 
Promotech labs digital_tools
Promotech labs digital_toolsPromotech labs digital_tools
Promotech labs digital_toolsPROMOTECH CEI
 
CTIC Dakar Business Model Canvas - Google Days Senegal - Dec 2013
CTIC Dakar Business Model Canvas - Google Days Senegal - Dec 2013CTIC Dakar Business Model Canvas - Google Days Senegal - Dec 2013
CTIC Dakar Business Model Canvas - Google Days Senegal - Dec 2013Yann Le Beux
 
Adobe flex®
Adobe flex®Adobe flex®
Adobe flex®finalspy
 
Business Model Workshop StartupWeekend Rabat - Jan 2012
Business Model Workshop StartupWeekend Rabat - Jan 2012Business Model Workshop StartupWeekend Rabat - Jan 2012
Business Model Workshop StartupWeekend Rabat - Jan 2012Yann Le Beux
 
Business Model Canvas - StartupWeekend Dakar - March 2012
Business Model Canvas - StartupWeekend Dakar - March 2012Business Model Canvas - StartupWeekend Dakar - March 2012
Business Model Canvas - StartupWeekend Dakar - March 2012Yann Le Beux
 
Le canevas de modèle d'affaires: Votre portrait de succès
Le canevas de modèle d'affaires: Votre portrait de succèsLe canevas de modèle d'affaires: Votre portrait de succès
Le canevas de modèle d'affaires: Votre portrait de succèsDavender Gupta
 

En vedette (20)

Gcspwwapril2013linkedin
Gcspwwapril2013linkedinGcspwwapril2013linkedin
Gcspwwapril2013linkedin
 
cv
cvcv
cv
 
Nitrogen Summary study of private fleet greg stephens 2014
Nitrogen Summary study of private fleet greg stephens 2014Nitrogen Summary study of private fleet greg stephens 2014
Nitrogen Summary study of private fleet greg stephens 2014
 
Airbus military engineering update 2012
Airbus military engineering update 2012Airbus military engineering update 2012
Airbus military engineering update 2012
 
The F-35 and UID
The F-35 and UIDThe F-35 and UID
The F-35 and UID
 
New Maint Philo
New Maint PhiloNew Maint Philo
New Maint Philo
 
Rscat6 k formation-mettre-en-oeuvre-les-switches-cisco-catalyst-6500-series
Rscat6 k formation-mettre-en-oeuvre-les-switches-cisco-catalyst-6500-seriesRscat6 k formation-mettre-en-oeuvre-les-switches-cisco-catalyst-6500-series
Rscat6 k formation-mettre-en-oeuvre-les-switches-cisco-catalyst-6500-series
 
Catalytic Reforming: Catalyst, Process Technology and Operations Overview
Catalytic Reforming:  Catalyst, Process Technology and Operations OverviewCatalytic Reforming:  Catalyst, Process Technology and Operations Overview
Catalytic Reforming: Catalyst, Process Technology and Operations Overview
 
Votre Startup: La réponse à un problème qui mérite une solution
Votre Startup: La réponse à un problème qui mérite une solutionVotre Startup: La réponse à un problème qui mérite une solution
Votre Startup: La réponse à un problème qui mérite une solution
 
Big Data in Healthcare Made Simple: Where It Stands Today and Where It’s Going
Big Data in Healthcare Made Simple: Where It Stands Today and Where It’s GoingBig Data in Healthcare Made Simple: Where It Stands Today and Where It’s Going
Big Data in Healthcare Made Simple: Where It Stands Today and Where It’s Going
 
Groupe De Kamleu, Youssouf, Bertrang, Thiam, Adram+¬ Etude De Cas Cisco
Groupe De Kamleu, Youssouf, Bertrang, Thiam, Adram+¬   Etude De Cas CiscoGroupe De Kamleu, Youssouf, Bertrang, Thiam, Adram+¬   Etude De Cas Cisco
Groupe De Kamleu, Youssouf, Bertrang, Thiam, Adram+¬ Etude De Cas Cisco
 
Steam Reforming - Practical Operations
Steam Reforming - Practical OperationsSteam Reforming - Practical Operations
Steam Reforming - Practical Operations
 
Panorama des logiciels de Mind Mapping
Panorama des logiciels de Mind MappingPanorama des logiciels de Mind Mapping
Panorama des logiciels de Mind Mapping
 
CNAV : Transformez les solutions de stockage traditionnelles en infrastructur...
CNAV : Transformez les solutions de stockage traditionnelles en infrastructur...CNAV : Transformez les solutions de stockage traditionnelles en infrastructur...
CNAV : Transformez les solutions de stockage traditionnelles en infrastructur...
 
Promotech labs digital_tools
Promotech labs digital_toolsPromotech labs digital_tools
Promotech labs digital_tools
 
CTIC Dakar Business Model Canvas - Google Days Senegal - Dec 2013
CTIC Dakar Business Model Canvas - Google Days Senegal - Dec 2013CTIC Dakar Business Model Canvas - Google Days Senegal - Dec 2013
CTIC Dakar Business Model Canvas - Google Days Senegal - Dec 2013
 
Adobe flex®
Adobe flex®Adobe flex®
Adobe flex®
 
Business Model Workshop StartupWeekend Rabat - Jan 2012
Business Model Workshop StartupWeekend Rabat - Jan 2012Business Model Workshop StartupWeekend Rabat - Jan 2012
Business Model Workshop StartupWeekend Rabat - Jan 2012
 
Business Model Canvas - StartupWeekend Dakar - March 2012
Business Model Canvas - StartupWeekend Dakar - March 2012Business Model Canvas - StartupWeekend Dakar - March 2012
Business Model Canvas - StartupWeekend Dakar - March 2012
 
Le canevas de modèle d'affaires: Votre portrait de succès
Le canevas de modèle d'affaires: Votre portrait de succèsLe canevas de modèle d'affaires: Votre portrait de succès
Le canevas de modèle d'affaires: Votre portrait de succès
 

Similaire à Flex mobile

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
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013jeromevdl
 
eLearning - Strategies de développement multi-périphériques
eLearning - Strategies de développement multi-périphériqueseLearning - Strategies de développement multi-périphériques
eLearning - Strategies de développement multi-périphériquesGoogle
 
What’s Next Replay! Lyon 2011 - F. Fornaciari
What’s Next Replay! Lyon 2011 - F. FornaciariWhat’s Next Replay! Lyon 2011 - F. Fornaciari
What’s Next Replay! Lyon 2011 - F. FornaciariZenika
 
Conférence de Presse Back From Mix 07
Conférence de Presse Back From Mix 07Conférence de Presse Back From Mix 07
Conférence de Presse Back From Mix 07Jean-François Ruiz
 
MUG Strasbourg - Développement d'une Universal Windows Apps
MUG Strasbourg - Développement d'une Universal Windows AppsMUG Strasbourg - Développement d'une Universal Windows Apps
MUG Strasbourg - Développement d'une Universal Windows Appsmugstrasbourg
 
"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hoursLaurent MEURISSE
 
Lancement Flex AIR / Paris
Lancement Flex AIR / ParisLancement Flex AIR / Paris
Lancement Flex AIR / ParisMichael Chaize
 
Adobe Et Le Commerce V2
Adobe Et Le Commerce V2Adobe Et Le Commerce V2
Adobe Et Le Commerce V2Michael Chaize
 
Tech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobilesTech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobilesTelecomValley
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google androidThierry Gayet
 
Gui android eclipse
Gui android eclipseGui android eclipse
Gui android eclipseESPRIT
 
Flash Builder et Flash Catalyst
Flash Builder et Flash CatalystFlash Builder et Flash Catalyst
Flash Builder et Flash CatalystMichael Chaize
 
Les Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileLes Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileMohamed BOURAOUI
 

Similaire à Flex mobile (20)

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
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013
 
eLearning - Strategies de développement multi-périphériques
eLearning - Strategies de développement multi-périphériqueseLearning - Strategies de développement multi-périphériques
eLearning - Strategies de développement multi-périphériques
 
What’s Next Replay! Lyon 2011 - F. Fornaciari
What’s Next Replay! Lyon 2011 - F. FornaciariWhat’s Next Replay! Lyon 2011 - F. Fornaciari
What’s Next Replay! Lyon 2011 - F. Fornaciari
 
Conférence de Presse Back From Mix 07
Conférence de Presse Back From Mix 07Conférence de Presse Back From Mix 07
Conférence de Presse Back From Mix 07
 
MUG Strasbourg - Développement d'une Universal Windows Apps
MUG Strasbourg - Développement d'une Universal Windows AppsMUG Strasbourg - Développement d'une Universal Windows Apps
MUG Strasbourg - Développement d'une Universal Windows Apps
 
titre
titretitre
titre
 
"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours
 
Lancement Flex AIR / Paris
Lancement Flex AIR / ParisLancement Flex AIR / Paris
Lancement Flex AIR / Paris
 
Windev
WindevWindev
Windev
 
Silverlight
SilverlightSilverlight
Silverlight
 
Silverlight
SilverlightSilverlight
Silverlight
 
Adobe Et Le Commerce V2
Adobe Et Le Commerce V2Adobe Et Le Commerce V2
Adobe Et Le Commerce V2
 
Tech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobilesTech conf1 développement_natif_applications_mobiles
Tech conf1 développement_natif_applications_mobiles
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
 
Silverlight
SilverlightSilverlight
Silverlight
 
Gui android eclipse
Gui android eclipseGui android eclipse
Gui android eclipse
 
Flash Builder et Flash Catalyst
Flash Builder et Flash CatalystFlash Builder et Flash Catalyst
Flash Builder et Flash Catalyst
 
Les Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileLes Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobile
 
Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015
 

Flex mobile

  • 1. La plate-forme Flash Pour les écrans multiples Flex Mobile 21/05/2012
  • 2. Plateforme de Adobe Flash Flex Flex Mobile Démonstration
  • 4. Professional Tools Frameworks  Flash Builder  Flash Catalyst  Flash Professional  Flex framework  Flash Media Server  Flash Player  LiveCycle Data Services  AIR  Adobe BlazeDS Server RunTimes Kaouech Jihed 4
  • 6. - Framework qui sert à la création d’interfaces client riches (front end de l’application) basé sur l’usage de la technologie Adobe Flash. - Apporte une grande souplesse pour la création d’interfaces graphiques riches, elle est souvent perçue par les non-initiés comme complexe. Kaouech Jihed 6
  • 7. - Une application Flex n’est autre qu’un fichier portant l’extension .swf (ShockWave Flash) issu de la compilation de fichiers MXML et ActionScript, insérés dans une page web. - Les fichiers MXML (Macromedia XML) servent à la description des interfaces graphiques, en définissant la position des composants et leurs propriétés. - Les fichiers Action-Script 3 ont la charge de la logique applicative : gestion d’événements, écriture de procédure, fonctions… Kaouech Jihed 7
  • 8. Flex s’articule autour des quatre éléments suivants : - Flash Player : assure la compatibilité des applications développées en Flash sur l’ensemble des environnements et navigateurs web. - Flex SDK (Software Development Kit) : Ouvert au monde Open Source, permet de créer des applications Flex gratuitement à l’aide des compilateurs et du débogueur qu’il intègre. - Flex Builder : Environnement de développement basé sur le célèbre IDE Eclipse, il propose un ensemble de fonctionnalités permettant de réaliser facilement des interfaces graphiques conviviales. - Blaze DS : Un sous-ensemble de projets Open Source basés sur les briques principales de son homologue LiveCycle Data services d’Adobe, qui est payant. Kaouech Jihed 8
  • 10. 350 Total Smartphones 300 Millions of Smartphones Smartphones with Flash Player 250 200 150 53% 100 35% 50 9% 0 2009 2010 2011 2012 Kaouech Jihed 10
  • 11. Un modèle coûteux et inefficace Native Native Native Native App App App App Additional OS’s Kaouech Jihed 11
  • 12. Un Outil, Un Langage, Une code partagé Flex Application Code partagé AIR Additional OS’s Multi plateformes Kaouech Jihed 12
  • 15. s:Application s:ViewNavigatorApplication s:TabbedViewNavApplication Kaouech Jihed 15
  • 18. Cycle de vie <s:ViewNavigatorApplication> DATA Kaouech Jihed 18
  • 19. Cycle de vie <s:ViewNavigatorApplication> View destroyed View created DATA Kaouech Jihed 19
  • 20. Cycle de vie <s:ViewNavigatorApplication> View destroyed View destroyed View created View created DATA DATA Persister en memoire Kaouech Jihed 20
  • 21. Cycle de vie <s:ViewNavigatorApplication> Kaouech Jihed 21
  • 22. Bouton 150 x 40 pixel Desktop monitor Galaxy Tab Droid 2 iPhone 4 @100 dpi @160 dpi @240 dpi @320 dpi Même nombre de pixels, différentes tailles physiques Kaouech Jihed 22
  • 23. Bouton 150 x 40 pixel Desktop monitor Galaxy Tab Droid 2 iPhone 4 @100 dpi @160 dpi @240 dpi @320 dpi Même nombre de pixels, différentes tailles physiques Kaouech Jihed 23
  • 24. Solution : Mise à l’échelle automatique avec Flex4.5 <s:ViewNavigatorApplication xmlns:fx=http://ns.adobe.com/mxml/2009 xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160"> <s:Button width=“150” height=“40” label="Connexion" /> </s:ViewNavigatorApplication> @160 dpi @240 dpi @320 dpi Kaouech Jihed 24
  • 25. Solution : Mise à l’échelle automatique avec Flex4.5 <s:ViewNavigatorApplication xmlns:fx=http://ns.adobe.com/mxml/2009 xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160"> <s:Button width=“150” height=“40” label="Connexion" /> </s:ViewNavigatorApplication> Scaled 1.5 Scaled 2 @160 dpi @240 dpi @320 dpi Kaouech Jihed 25
  • 26. Un peux de pratique
  • 35. Merci pour votre attention Kaouech_jihed@yahoo.com