Adobe flex®
Upcoming SlideShare
Loading in...5
×
 

Adobe flex®

on

  • 3,481 views

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

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

Statistics

Views

Total Views
3,481
Views on SlideShare
3,377
Embed Views
104

Actions

Likes
1
Downloads
43
Comments
0

2 Embeds 104

http://www.normandyjug.org 85
http://www.slideshare.net 19

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Adobe flex® Adobe flex® Presentation Transcript

    • Adobe Flex®: Premiers pas
      Présenté par
      Sébastien PANNIER
    • SOMMAIRE
      • Présentation
      • Adobe Flash®
      • Adobe Flex®
      • Démos
      • Conclusion
    • Présentation
    • Présentation
      Je me présente…
      Ingénieur en Etudes et Développement
      Team Partners Normandie
      Ex Formateur Photoshop
    • Ce que j’aime…
      Présentation
      E-onVue Xtream®
      AutodeskMaya®
      Eyeon
      Digital Fusion®
    • Présentation
      Contact…
      pannierseb@gmail.com
      harok@live.fr
      Harok_Seb
      Harok [Seb]
      spannier@tpg-normandie.com
    • Adobe Flash®
    • 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)
    • 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
    • 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
    • Adobe Flash® Qu’est-ce que Flash ?
      Une plate-forme …
      Cross-browser
      CrossOS
      Cross-device
    • 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
    • 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
    • Adobe Flash® Et Open Screen Project
      Universalité et optimisation des applications Flash sur mobiles grâce à Adobe AIR®
    • Adobe Flash® Courte démo
      Mais comment ça marche ?!?
      Exemple Flash CS5 Extended
    • Démo
    • 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…
    • Adobe Flex®
    • Adobe Flex®
      Qu'est-ce que Flex ?!?
    • 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
    • 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)
    • 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)
    • Adobe Flex® Quelques aperçus …
      Source : FlexSpaces
    • Adobe Flex® Quelques aperçus …
      Source : FlexActive
    • Adobe Flex® Tour de Flex
      " But waitthere’s more! Check this out… "
    • 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)
    • 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
      …………….
    • Adobe Flex® Highlyscalable
    • 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…)
    • 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.
    • 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
    • Présentation des démos
    • 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
    • Démo
    • 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
    • Démo Frameworks
      Event Bus
      Event Map
      Event Map
      EventHandlers
      1
      2
      3
      5
      ServiceInvoker
      4
      ModelManager
      View
      Event DrivenDevelopment
    • 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
    • Démo
    • 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…..
    • Démo Frameworks
      light
      Camera
      3D object
      Scene3D
      Viewport3D
    • Démo
    • 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
    • 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 !"
    • Démo
    • Conclusion
    • Conclusion
      La concurrence
      JavaFX
      Silverlight
      HTML5
      GWT
      AJAX
      OpenLaszlo
    • 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
    • Conclusion
      Questions ?