Flex mobile

  • 903 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
903
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. La plate-forme Flash Pour les écrans multiplesFlex Mobile 21/05/2012
  • 2. Plateforme de Adobe Flash Flex Flex Mobile Démonstration
  • 3. La PlateformeDe Adobe Flash
  • 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. FLEX
  • 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. - 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. 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. FLEX 4.5Flex Mobile
  • 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. Un modèle coûteux et inefficaceNative Native Native Native App App App App Additional OS’sKaouech Jihed 11
  • 12. Un Outil, Un Langage, Une code partagé Flex Application Code partagé AIR Additional OS’s Multi plateformesKaouech Jihed 12
  • 13. Kaouech Jihed 13
  • 14. Kaouech Jihed 14
  • 15. s:Application s:ViewNavigatorApplication s:TabbedViewNavApplicationKaouech Jihed 15
  • 16. <s:ViewNavigatorApplication>Kaouech Jihed 16
  • 17. Kaouech Jihed 17
  • 18. Cycle de vie <s:ViewNavigatorApplication> DATAKaouech Jihed 18
  • 19. Cycle de vie <s:ViewNavigatorApplication> View destroyed View created DATAKaouech Jihed 19
  • 20. Cycle de vie <s:ViewNavigatorApplication> View destroyed View destroyed View created View created DATA DATA Persister en memoireKaouech 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 physiquesKaouech 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 physiquesKaouech 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 dpiKaouech 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 dpiKaouech Jihed 25
  • 26. Un peux de pratique
  • 27. Kaouech Jihed 27
  • 28. Kaouech Jihed 28
  • 29. Kaouech Jihed 29
  • 30. Kaouech Jihed 30
  • 31. Kaouech Jihed 31
  • 32. Kaouech Jihed 32
  • 33. Kaouech Jihed 33
  • 34. Kaouech Jihed 34
  • 35. Merci pour votreattention Kaouech_jihed@yahoo.com