View
2.767
Download
2
Category
Preview:
DESCRIPTION
Présentation de Flex au NormandyJUG par Sébastien PANNIER.
Citation preview
Normandy JUG
Adobe Flex®: Premiers pasPrésenté parSébastien PANNIER
Normandy JUG
• Présentation• Adobe Flash®• Adobe Flex®• Démos• Conclusion
SOMMAIRE
Normandy JUG
Présentation
Normandy JUG
Présentation
Je me présente…
Ingénieur en Etudes et Développement Team Partners Normandie
Ex Formateur Photoshop
Normandy JUG
Ce que j’aime…
Présentation
E-onVue Xtream®
AutodeskMaya®
EyeonDigital Fusion®
Normandy JUG
Présentation
pannierseb@gmail.com
harok@live.fr
Harok_Seb
Harok [Seb]
Contact…
spannier@tpg-normandie.com
Normandy JUG
Adobe Flash®
Normandy JUG
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)
Normandy JUG
Adobe Flash® Historique
FutureSplash Animator
SmartSketch 1995 Application dessin vectoriel par Jonathan Gay
1996 Vient concurrencer Macromedia Shockwave®
Fin 1996Flash Macromedia rachète FutureSpash
Flash Player 5 2000 Actionscript 1.0 + support XML, HTML text…
Flash Player 7 2003 Actionscript 2.0
2006Flash Player 9 + Flex 2® Actionscript 3.0 + Flash CS3 Pro
2010FP 10.1 + Flash Builder® Adobe CS5®
2004Flex 1.0® Macromedia distribue le produit 15 000$ par CPU
2005Flash Basic 8 Adobe System rachète Macromedia
2008Flex 3.0® Flash CS4 Pro + manipulation 3D basique
Normandy JUG
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
Normandy JUG
• Une plate-forme …
Adobe Flash® Qu’est-ce que Flash ?
Cross-browserCrossOS
Cross-device
Normandy JUG
• Une plate-forme riche
Livecycle Data Services
Flash Catalyst
Business Catalyst
Scene7
Flash Media Server
Flash Builder
Air
Flash
Adobe Flash® Qu’est-ce que Flash ?
Normandy JUG
Adobe Flash® Statistiques
Source : Millward Brown survey, Décembre 2009
89.1 % pour Flash Player 10.1 en mars 2010 soit 6 mois après sa sortie!
Normandy JUG
Adobe Flash® Et Open Screen Project
Universalité et optimisation des applications Flash sur mobiles grâce à Adobe AIR®
Normandy JUG
Adobe Flash® Courte démo
Mais comment ça marche ?!?
Exemple Flash CS5 Extended
Normandy JUG
Démo
Normandy JUG
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…
Normandy JUG
Adobe Flex®
Normandy JUG
Adobe Flex®
Qu'est-ce que Flex ?!?
Normandy JUG
Adobe Flex® Un langage déclaratif (tags)
MXML ("Magic" or "Macromedia" "eXtensible Markup Language")
• 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
Normandy JUG
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, After Effects, InDesign et Fireworks
– ASDoc pour les composants MXML– Open Source Media Framework (OSMF)
Adobe Flex® Un Framework Open Source gratuit
Normandy JUG
Adobe Flex® Une librairie
• Une multitude de composants natifs incluant :
– Data binding– Drag ‘n drop– Display layout, look & feel– Séparation du visuel du fonctionnel (Flex 4)
Normandy JUG
Adobe Flex® Quelques aperçus …
Source : FlexSpaces
Normandy JUG
Adobe Flex® Quelques aperçus …
Source : FlexActive
Normandy JUG
Adobe Flex® Tour de Flex
" But wait there’s more! Check this out… "
Normandy JUG
Adobe Flex® AIR® (Adobe Integrated Runtime)
• 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)
Normandy JUG
MVCTransfer Object Assembler
IoCEvent Driven Development
ObserverModel Driven Development
Unit TestingProfiling
deepLinking…………….
Spring ActionscriptCairngormBlazeDSGuasaxVaraPureMVCMateFlexUnitFlexPMDLiveCycle Data ServicesSwizGraniteDSStratus……………..
Adobe Flex® Highly scalable
Normandy JUG
Adobe Flex® Highly scalable
Normandy JUG
Adobe Flex® Highly scalable
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…)
Normandy JUG
Adobe Flex® Highly scalable
BenchmarkConditions : tests effectués le 14/04/2010 via le site themidnightcoders.com
Valeur primitive (String)500 appels
Type complexe (objet)500 appels
Array de types complexes
500 itérations – 10 appels
WebServices 23 212 24 177 16 012
HTTP 22 801 23 336 15 350
AMF / Remoting 7 130 7 790 4 657
*Valeurs exprimées en ms, la plus faible étant la plus rapide.
Normandy JUG
Adobe Flex® Highly scalable
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-centric development : 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)• Maven builds
Normandy JUG
Présentation des démos
Normandy JUG
Adobe Flex®
Flash Catalyst• Création rapide d’interfaces riches
• Import et reconnaissance des calques d’artworks provenant de– Photoshop (.psd)– Illustrator (.ia)– Fichier FXG
• Manipulation des états et des transitions en WYSIWYG
• Export au format FXP & SWF
Normandy JUG
Démo
Normandy JUG
Démo Frameworks
Mate (version 0.8.9)
• Event – driven Flex framework 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
Normandy JUG
Event Map
Démo Frameworks
Event Bus
View
EventHandlersServiceInvoker
ModelManager
Event Map
1
2
3
4
5
Event Driven Development
Normandy JUG
Démo Frameworks
Locale fr_FR
Locale us_EN
Resource proxy
componentResource proxy
Resource proxy
Resource proxy
Resource proxy
Resource proxy
Resource proxy
Localization MapLocale files Classes
component
component
Injection dans les composants
Normandy JUG
Démo
Normandy JUG
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…..
Normandy JUG
Démo Frameworks
Camera
light
Viewport3D
3D object Scene3D
Normandy JUG
Démo
Normandy JUG
Démo Frameworks
Spring Actionscript (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
Normandy JUG
Démo Frameworks
Principe Hollywood : "Ne nous appelez pas, c'est nous qui vous appellerons !"
CLASSE A
CLASSE A
CLASSE B
CLASSE B
CLASSE B
CLASSE B
Dépendance
Dépendance
Injection
Injection
IoC
Normandy JUG
Démo
Normandy JUG
Conclusion
Normandy JUG
Conclusion
La concurrence• JavaFX• Silverlight• HTML5• GWT• AJAX• OpenLaszlo
Normandy JUG
Conclusion
Quelques liens….• Adobe : http://www.adobe.com• Mate : http://mate.asfusion.com• Spring ActionScript : 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
Normandy JUG
Questions ?
Conclusion
Recommended