Flex mobile

1 250 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 250
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

×