La plate-forme Flash        Pour les écrans multiplesFlex Mobile   21/05/2012
Plateforme de Adobe Flash       Flex              Flex Mobile                  Démonstration
La PlateformeDe Adobe Flash
Professional Tools        Frameworks                     Flash Builder                     Flash Catalyst               ...
FLEX
- Framework qui sert à la création d’interfaces client riches(front end de l’application) basé sur l’usage de la technolog...
- Une application Flex n’est autre qu’un fichier portantl’extension .swf (ShockWave Flash) issu de la compilation defichie...
Flex s’articule autour des quatre éléments suivants :- Flash Player : assure la compatibilité des applications développées...
FLEX 4.5Flex Mobile
350                                   Total Smartphones                          300Millions of Smartphones               ...
Un modèle coûteux et inefficaceNative            Native             Native       Native App               App             ...
Un Outil, Un Langage, Une code partagé                               Flex Application     Code partagé                    ...
Kaouech Jihed   13
Kaouech Jihed   14
s:Application   s:ViewNavigatorApplication   s:TabbedViewNavApplicationKaouech Jihed                                      ...
<s:ViewNavigatorApplication>Kaouech Jihed                                  16
Kaouech Jihed   17
Cycle de vie <s:ViewNavigatorApplication>        DATAKaouech Jihed                                          18
Cycle de vie <s:ViewNavigatorApplication>  View destroyed            View created        DATAKaouech Jihed                ...
Cycle de vie <s:ViewNavigatorApplication>  View destroyed            View destroyed                            View create...
Cycle de vie <s:ViewNavigatorApplication>Kaouech Jihed                                          21
Bouton 150 x 40 pixel    Desktop monitor             Galaxy Tab           Droid 2           iPhone 4       @100 dpi       ...
Bouton 150 x 40 pixel    Desktop monitor             Galaxy Tab           Droid 2           iPhone 4       @100 dpi       ...
Solution : Mise à l’échelle automatique avec Flex4.5    <s:ViewNavigatorApplication xmlns:fx=http://ns.adobe.com/mxml/2009...
Solution : Mise à l’échelle automatique avec Flex4.5    <s:ViewNavigatorApplication xmlns:fx=http://ns.adobe.com/mxml/2009...
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  votreattention   Kaouech_jihed@yahoo.com
Prochain SlideShare
Chargement dans…5
×

Flex mobile

1 180 vues

Publié le

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 180
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Flex mobile

  1. 1. La plate-forme Flash Pour les écrans multiplesFlex Mobile 21/05/2012
  2. 2. Plateforme de Adobe Flash Flex Flex Mobile Démonstration
  3. 3. La PlateformeDe Adobe Flash
  4. 4. Professional Tools Frameworks  Flash Builder  Flash Catalyst  Flash Professional  Flex framework  Flash Media Server  Flash Player  LiveCycle Data Services  AIR  Adobe BlazeDS Server RunTimesKaouech Jihed 4
  5. 5. FLEX
  6. 6. - Framework qui sert à la création d’interfaces client riches(front end de l’application) basé sur l’usage de la technologieAdobe Flash.- Apporte une grande souplesse pour la création d’interfacesgraphiques riches, elle est souvent perçue par les non-initiéscomme complexe.Kaouech Jihed 6
  7. 7. - Une application Flex n’est autre qu’un fichier portantl’extension .swf (ShockWave Flash) issu de la compilation defichiers MXML et ActionScript, insérés dans une page web.- Les fichiers MXML (Macromedia XML) servent à ladescription des interfaces graphiques, en définissant la positiondes composants et leurs propriétés.- Les fichiers Action-Script 3 ont la charge de la logiqueapplicative : gestion d’événements, écriture de procédure,fonctions…Kaouech Jihed 7
  8. 8. Flex s’articule autour des quatre éléments suivants :- Flash Player : assure la compatibilité des applications développées enFlash sur l’ensemble des environnements et navigateurs web.- Flex SDK (Software Development Kit) : Ouvert au monde OpenSource, permet de créer des applications Flex gratuitement à l’aide descompilateurs et du débogueur qu’il intègre.- Flex Builder : Environnement de développement basé sur le célèbreIDE Eclipse, il propose un ensemble de fonctionnalités permettant deréaliser facilement des interfaces graphiques conviviales.- Blaze DS : Un sous-ensemble de projets Open Source basés sur lesbriques principales de son homologue LiveCycle Data services d’Adobe,qui est payant.Kaouech Jihed 8
  9. 9. FLEX 4.5Flex Mobile
  10. 10. 350 Total Smartphones 300Millions of Smartphones Smartphones with Flash Player 250 200 150 53% 100 35% 50 9% 0 2009 2010 2011 2012 Kaouech Jihed 10
  11. 11. Un modèle coûteux et inefficaceNative Native Native Native App App App App Additional OS’sKaouech Jihed 11
  12. 12. Un Outil, Un Langage, Une code partagé Flex Application Code partagé AIR Additional OS’s Multi plateformesKaouech Jihed 12
  13. 13. Kaouech Jihed 13
  14. 14. Kaouech Jihed 14
  15. 15. s:Application s:ViewNavigatorApplication s:TabbedViewNavApplicationKaouech Jihed 15
  16. 16. <s:ViewNavigatorApplication>Kaouech Jihed 16
  17. 17. Kaouech Jihed 17
  18. 18. Cycle de vie <s:ViewNavigatorApplication> DATAKaouech Jihed 18
  19. 19. Cycle de vie <s:ViewNavigatorApplication> View destroyed View created DATAKaouech Jihed 19
  20. 20. Cycle de vie <s:ViewNavigatorApplication> View destroyed View destroyed View created View created DATA DATA Persister en memoireKaouech Jihed 20
  21. 21. Cycle de vie <s:ViewNavigatorApplication>Kaouech Jihed 21
  22. 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 physiquesKaouech Jihed 22
  23. 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 physiquesKaouech Jihed 23
  24. 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 dpiKaouech Jihed 24
  25. 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 dpiKaouech Jihed 25
  26. 26. Un peux de pratique
  27. 27. Kaouech Jihed 27
  28. 28. Kaouech Jihed 28
  29. 29. Kaouech Jihed 29
  30. 30. Kaouech Jihed 30
  31. 31. Kaouech Jihed 31
  32. 32. Kaouech Jihed 32
  33. 33. Kaouech Jihed 33
  34. 34. Kaouech Jihed 34
  35. 35. Merci pour votreattention Kaouech_jihed@yahoo.com

×