Présentation de Flex au NormandyJUG par Sébastien PANNIER.

1. Adobe Flex®: Premiers pas Présenté par Sébastien PANNIER

3. Adobe Flash®

4. Adobe Flex®

5. Démos

7. Présentation Je me présente… Ingénieur en Etudes et Développement Team Partners Normandie Ex Formateur Photoshop

8. Ce que j’aime… Présentation E-onVue Xtream® AutodeskMaya® Eyeon Digital Fusion®

9. Présentation Contact… pannierseb@gmail.com harok@live.fr Harok_Seb Harok [Seb] spannier@tpg-normandie.com

10. Adobe Flash®

11. Adobe Flash® Qu’est-ce que Flash ? Repose sur l’Actionscript Langage basé sur ECMA Script (ECMA-262 edition3)à l’instar de Javascript et Jscript Langage Objet (depuis la version 3 en 2006) Exécuté à partir du fichier SWF (ShockWave Flash)(prononcez "souiffe") Cible : applications RIA (Rich Interface Application)

12. Adobe Flash® Historique Adobe CS5® 2010 FP 10.1 + Flash Builder® 2008 Flex 3.0® Flash CS4 Pro + manipulation 3D basique 2006 Flash Player 9 + Flex 2® Actionscript 3.0 + Flash CS3 Pro 2005 Flash Basic 8 Adobe System rachète Macromedia 2004 Flex 1.0® Macromedia distribue le produit 15 000$ par CPU Actionscript 2.0 2003 Flash Player 7 Actionscript 1.0 + support XML, HTML text… 2000 Flash Player 5 Macromedia rachète FutureSpash Fin 1996 Flash Vient concurrencer MacromediaShockwave® 1996 FutureSplashAnimator 1995 Application dessin vectoriel par Jonathan Gay SmartSketch

13. Adobe Flash® Qu’est-ce que Flash ? Une plate-forme multimedia Images : Gif, Png, Jpg, Ia (Illustrator Vector Shape) Codecs Audio : MP3, ADPCM, Nellymoser, AAC & HE-AAC, Speex Codecs Video : Sorenson Spark, On2 VP6, H264, M4A & M4V & MP4, MOV, 3GP

14. Adobe Flash® Qu’est-ce que Flash ? Une plate-forme … Cross-browser CrossOS Cross-device

15. Adobe Flash® Qu’est-ce que Flash ? Une plate-forme riche Air Livecycle Data Services Scene7 Flash Catalyst Flash Builder Business Catalyst Flash Media Server Flash

16. Adobe Flash® Statistiques 89.1 % pour Flash Player 10.1 en mars 2010 soit 6 mois après sa sortie! Source : Millward Brown survey, Décembre 2009

17. Adobe Flash® Et Open Screen Project Universalité et optimisation des applications Flash sur mobiles grâce à Adobe AIR®

18. Adobe Flash® Courte démo Mais comment ça marche ?!? Exemple Flash CS5 Extended

19. Démo

20. Adobe Flash® Flash CS4 Extended Flash CS5 Extended, un IDE inadapté pour un développement standardisé d’applications : IDE orienté designer Auto complétion limitée Pas de refactoring Pas fait pour quoi…

21. Adobe Flex®

22. Adobe Flex® Qu'est-ce que Flex ?!?

23. Adobe Flex® Un langage déclaratif (tags) MXML ("Magic" or "Macromedia" "eXtensibleMarkupLanguage") Langage basé sur XML (Macromedia en 2004) Façonner l’interface client Déclarer les aspects non visuels de l’application (Data services…) Ecriture "proche" de HTML Tags pour chaque élément Capacité de créer ses propres tags pour des composants personnalisés

24. Adobe Flex® Un Framework Open Source gratuit Flex SDK 4 (21/03/2010) Compiler, Framework, Debugger Les nouveautés: Composants SPARK (Montés sur les composants HALO ) Meilleur méchanisme pour les développeurs et désigners (Séparation Vue – Métier) Intégration dans Flash Catalyst Format FXG Echange direct de réalisations provenant de Illustrator, AfterEffects, InDesign et Fireworks ASDoc pour les composants MXML Open Source Media Framework (OSMF)

26. Data binding

27. Drag ‘n drop

28. Display layout, look & feel

30. Adobe Flex® Quelques aperçus … Source : FlexActive

31. Adobe Flex® Tour de Flex " But waitthere’s more! Check this out… "

32. Adobe Flex® AIR® (Adobe IntegratedRuntime) Cross – operating system runtime Permet de créer des "Desktop Applications" à partir de langages web AJAX FLASH Code identique à celui de l’application web S’installe via un exécutable (.air) Nécessite d’avoir sur la machine l’environnement AIR Version actuelle 1.5.3 (prochainement 2.0)

33. Adobe Flex® Highlyscalable SpringActionscript Cairngorm BlazeDS Guasax Vara PureMVC Mate FlexUnit FlexPMD LiveCycle Data Services Swiz GraniteDS Stratus …………….. MVC Transfer Object Assembler IoC Event DrivenDevelopment Observer Model DrivenDevelopment Unit Testing Profiling deepLinking …………….

34. Adobe Flex® Highlyscalable

35. Adobe Flex® Highlyscalable Les Protocoles AMF 3 (Action Message Format) Format binaire compact utilisé pour sérialiser / dé sérialiser les objets ActionScript durant les échanges client / serveur Date de 2007 (AMF0 => 2001) RTMP (Real Time Message Protocol) Protocole TCP/IP hautement performant destiné à la transmission de sons, vidéos et messages. 5 configurations: RTMP, RTMPT, RTMPS, RTMPE, RTMPTE (données cryptées, SSL…)

36. Adobe Flex® Highlyscalable Benchmark Conditions : tests effectués le 14/04/2010 via le site themidnightcoders.com *Valeurs exprimées en ms, la plus faible étant la plus rapide.

37. Adobe Flex® Highlyscalable Flash Builder(basé sur Eclipse 3.5.1RC35 Galileo) Editeur pour MXML, ActionScript, CSS (couleurs pour la syntaxe, auto complétion, génération de code, debug pas à pas interactif…). WYSIWYG (Editeur visuel) pour les composants MXML et import des UI Flash Catalyst. Data-centricdevelopment : Introspection de services Java, PHP, Cold Fusion, REST et SOAP pour afficher les méthodes et propriétés + Drag ‘n Drop directement dans les UI. Code refactoring Monitoring de la consommation en ressources (Mémoires, cycles de CPU) Intégration de FlexUnit pour les tests unitaires ASDoc en MXML Command line build Data Services avancés (BlazeDS, modules real-time data push/sub messaging via LiveCycle Data Services) Mavenbuilds

38. Présentation des démos

40. Démo Frameworks Mate (version 0.8.9) Event – drivenFlexframework basé sur des tags mxml Centré sur l’organisation d’un ou plusieurs EventMap Réception des évènements Appels des classes gérant les actions par injection LocalizationMap : gestion des locales et de leurs injections

41. Démo Frameworks Event Bus Event Map Event Map EventHandlers 1 2 3 5 ServiceInvoker 4 ModelManager View Event DrivenDevelopment

42. Démo Frameworks LocalizationMap Locale files Classes Resource proxy component Resource proxy Locale fr_FR Resource proxy component Resource proxy Locale us_EN Resource proxy component Resource proxy Resource proxy Injection dans les composants

43. Démo

44. Démo Frameworks Away3D Moteur 3D pour Flash basé sur Papervision3D (Dernière version: Away3D Lite) Gestion des primitives (cube, sphere, plane…) Gestion des lumières (point3D, ambiantLight…) Gestion des matériaux (Bitmap, Phong, Movie, Dot3…) Import Maya .obj, 3DS Max .3ds, Collada .dae …. Z-Depth, Normal Maps, Animation, Occlusion Culling…..

45. Démo Frameworks light Camera 3D object Scene3D Viewport3D

46. Démo

47. Démo Frameworks SpringActionscript(version 1.0RC1) Ramification du framework Java écrit en AS3 Inversion de contrôle (IoC) Modèle – Vue – Contrôleur – Services (MVCS) Extension pour Cairngorm et PureMVC But: Externaliser la logique d’intéraction entre les classes. Découplage Injection Configuration via un ou plusieurs fichiers XML

48. Démo Frameworks Dépendance CLASSE B CLASSE A Dépendance CLASSE B Injection IoC CLASSE B CLASSE A Injection CLASSE B Principe Hollywood : "Ne nous appelez pas, c'est nous qui vous appellerons !"

49. Démo

50. Conclusion

51. Conclusion La concurrence JavaFX Silverlight HTML5 GWT AJAX OpenLaszlo

52. Conclusion Quelques liens…. Adobe : http://www.adobe.com Mate : http://mate.asfusion.com SpringActionScript : http://www.springactionscript.org Away3D : http://away3d.com Total Training : http://www.totaltraining.com lynda.com : http://www.lynda.com Tour de Flex : http://www.adobe.com/devnet/flex/tourdeflex

53. Conclusion Questions ?