Quand il y a des clients
  riches dans l'Air
Plan


• Qui parle?
• Voyage au monde des RIA
• Flex in a nutshell
Qui parle?
Plan

• Qui parle?
 •   Général
 •   Etudes
 •   Expérience

• Voyage au monde des RIA
• Flex in a nutshell
Qui parle? > Général




                         Qui parle?

               • Camille Roux
               • 23 ans
      ...
Qui parle? > Cursus




                                 Etudes

             • Polytech'Nice-Sophia
              • Filiè...
Qui parle? > Expérience




                           Expérience
             • +1an de Flex/Air
             • Utilisati...
Voyage au monde des RIA
Plan
• Qui parle?
• Voyage au monde des RIA
  •   Un peu d'histoire
  •   Définition et classification des RIA
  •   Les tec...
Un peu d'histoire ...
Voyage au pays des RIA > Un peu d'histoire




           Evolution des Desktops
          I. 1945 : Batch System         ...
Voyage au pays des RIA > Un peu d'histoire



                         Evolution du web
Voyage au pays des RIA > Définition et classification des RIA




            Desktop                                       ...
Voyage au pays des RIA > Définition et classification des RIA




            Desktop                                       ...
Voyage au pays des RIA > Définition et classification des RIA




            Desktop                                       ...
Voyage au pays des RIA > Définition et classification des RIA

                             Pas de serveur

          Applic...
Voyage au pays des RIA > Définition et classification des RIA

                             Pas de serveur
                 ...
RIA
                                         (Rich Internet Application)
                                             Expé...
RIA
                                         (Rich Internet Application)
                                                 ...
RIA
                                         (Rich Internet Application)
                                                 ...
RIA
                                         (Rich Internetle moteur de
                                                  ...
Voyage au pays des RIA > Les technologies RIA




                                                <xul/>




          Les...
Voyage au pays des RIA > Les technologies RIA


           Du client léger au client lourd :
           Les technologies m...
Voyage au pays des RIA > Les technologies RIA > Silverlight




                             Nom : Silverlight
           ...
Voyage au pays des RIA > Les technologies RIA > Silverlight




                      MS Visual Studio
Voyage au pays des RIA > Les technologies RIA > Silverlight




            MS Expression Bend
Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
Voyage au pays des RIA > Les technologies RIA > Flex




                            Nom : Flex
                          ...
Voyage au pays des RIA > Les technologies RIA > Flex




                Adobe Flex Builder
Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
Voyage au pays des RIA > Les technologies RIA > XUL




   <xul/>                   Nom : XUL
                            ...
Voyage au pays des RIA > Les technologies RIA > XUL > Showcase




                                      Showcase
Voyage au pays des RIA > Les technologies RIA > XUL > Showcase




                                      Showcase
Voyage au pays des RIA > Les technologies RIA > JavaFX




                            Nom : JavaFX
                      ...
Voyage au pays des RIA > Les technologies RIA > JavaFX




                         Java Swing                            ...
Voyage au pays des RIA > Les technologies RIA > JavaFX




       Netbeans + plugin JavaFX
Voyage au pays des RIA > Les technologies RIA




                                                AJAX?
Voyage au pays des RIA > Les technologies RIA




                                                GWT?
Voyage au pays des RIA > Les technologies RIA




                                         Titanium?
Voyage au pays des RIA > Les technologies RIA




                                         Popularité

                   ...
Voyage au pays des RIA > Les technologies RIA




             Pénétration du marché
              Microsoft Silverlight  ...
Voyage au pays des RIA > Les technologies RIA




                           Points communs
              • Multi-platefor...
Voyage au pays des RIA > Les technologies RIA




                        Critères de choix
              • Type d'applica...
Flex/Air in a nutshell
Plan
• Qui parle?
• Voyage au monde des RIA
• Flex in a nutshell
 •   Qu'est-ce que Flex?
 •   Les langages
     • Actions...
Flex in a nutshell > Qu'est-ce que Flex?




                     Qu'est-ce que Flex?
Flex in a nutshell > Qu'est-ce que Flex?




                 Un moyen de faire des SWF

                 C'est pour les d...
Flex in a nutshell > Qu'est-ce que Flex?




                                           Historique

               • Flex ...
Flex in a nutshell > Les langages




                                    Les langages
Flex in a nutshell > Les langages




                                    MXML

               • Description de l'interfac...
Flex in a nutshell > Les langages




                              ActionScript 3.0
               • Norme ECMAScript 4.0...
Flex in a nutshell > Les langages




“The power of the ActionScript language tools along with the hybrid type
  checking ...
Flex in a nutshell > Les langages




                                    Runtime

         • Langage pseudo-compilé (byte...
Flex in a nutshell > Les langages > ActionScript 3




                                  ActionScript 3
Flex in a nutshell > Les langages > ActionScript 3




                                                     Variable


   ...
Flex in a nutshell > Les langages > ActionScript 3




                                            Constante


           ...
Flex in a nutshell > Les langages > ActionScript 3




            Quelques types de base
                             Typ...
Flex in a nutshell > Les langages > ActionScript 3



                                        Traitement
                 ...
Flex in a nutshell > Les langages > ActionScript 3



                                        Traitement
                 ...
Flex in a nutshell > Les langages > ActionScript 3




                                                     Boucles

     ...
Flex in a nutshell > Les langages > ActionScript 3




                                                     Boucles

     ...
Flex in a nutshell > Les langages > ActionScript 3




                                                     Boucles
      ...
Flex in a nutshell > Les langages > ActionScript 3




                                                     Boucles
      ...
Flex in a nutshell > Les langages > ActionScript 3




           Programmer avec classe
                 package com.cami...
Flex in a nutshell > Les langages > ActionScript 3




           Programmer avec classe
                          importa...
Flex in a nutshell > Les langages > ActionScript 3




           Programmer avec classe
                            inter...
Flex in a nutshell > Les langages > ActionScript 3




           Programmer avec classe
                                 ...
Flex in a nutshell > Les langages > ActionScript 3




           Programmer avec classe
                                 ...
Flex in a nutshell > Les langages > ActionScript 3




           Programmer avec classe
                 package com.cami...
Flex in a nutshell > Les langages > ActionScript 3




                                                Interface
         ...
Flex in a nutshell > Les langages > ActionScript 3




                                          Accesseurs


            ...
Flex in a nutshell > Les langages > MXML




                                           MXML
Flex in a nutshell > Les langages > MXML




                                     Hello World
                  Du vrai XM...
Flex in a nutshell > Les langages > MXML




                                     Hello World
                         Bas...
Flex in a nutshell > Les langages > MXML




                                     Hello World
                            ...
Flex in a nutshell > Les langages > MXML




                                     Hello World
      <?xml version=quot;1.0...
Flex in a nutshell > Les langages > MXML




                 Etudions un exemple
           <?xml version=quot;1.0quot; e...
Flex in a nutshell > Les langages > MXML




                 Etudions un exemple
                                        ...
Flex in a nutshell > Les langages > MXML




                 Etudions un exemple
           <?xml version=quot;1.0quot; e...
Flex in a nutshell > Les langages > MXML




                 Etudions un exemple
           <?xml version=quot;1.0quot; e...
Flex in a nutshell > Les langages > MXML




                 Etudions un exemple
           <?xml version=quot;1.0quot; e...
Flex in a nutshell > Les langages > MXML




                 Etudions un exemple
           <?xml version=quot;1.0quot; e...
Flex in a nutshell > Les langages > MXML




                 Etudions un exemple
           <?xml version=quot;1.0quot; e...
Flex in a nutshell > Les langages > MXML




                              Génère de l'AS
                   MXML Original...
Flex in a nutshell > Les langages > MXML




                                     Compilation
                MXML vers Ac...
Les Evénements
Flex in a nutshell > Les langages > Les événements




<mx:Button label=quot;showquot; click=quot;{Alert.show('event')}quo...
Flex in a nutshell > Les langages > Les événements




 <mx:Script>
 ! <![CDATA[
 ! ! import mx.controls.Alert;
 ! ! !
 ! ...
Flex in a nutshell > Les langages > Les événements




                 <mx:Script>
                 !   <![CDATA[
       ...
Les Bindings
Flex in a nutshell > Les langages > Les bindings




                    <mx:TextInput id=quot;inputquot;/>
              ...
Flex in a nutshell > Les langages > Les bindings




           <mx:Script>
           ! <![CDATA[
           ! ! [Bindabl...
Flex in a nutshell > Les langages > Les bindings




    <mx:creationComplete>
    ! <![CDATA[
    ! ! BindingUtils.bindPr...
Les Etats
Flex in a nutshell > Les langages > Les états




                                                Exemple
              <m...
Flex in a nutshell > Les langages > Les états




                                                Actions possibles
      ...
Culture
Modules et RSL
Flex in a nutshell > Culture Flex > Modules et RSL




                                               Modules
            ...
Flex in a nutshell > Culture Flex > Modules et RSL




           Runtime Shared Library
            Library1.swf         ...
Flex in a nutshell > Culture Flex > Modules et RSL




           Runtime Shared Library
            Library1.swf         ...
AIR
RIA
Flex in a nutshell > Culture Flex > Air




             Quoi de plus dans AIR?
                                          ...
Flex in a nutshell > Culture Flex > Air




                            Installation d'une
                             ap...
Flex in a nutshell > Culture Flex > Air
Flex in a nutshell > Culture Flex > Air
Flex in a nutshell > Culture Flex > Air
Flex in a nutshell > Culture Flex > Air
Flex in a nutshell > Culture Flex > Air
Flex in a nutshell > Culture Flex > Air
Flex in a nutshell > Culture Flex > Air
Retour sur expérience
Flex in a nutshell > Retour sur expérience




              • Api parfois minimalistes
              • Architecture (MVC ...
Flex in a nutshell > Retour sur expérience




              • Scroll sous Mac OS
              • Temps de compilation par...
Ressources
Flex in a nutshell > Ressources




                           Liens à connaître
              •     Flex Language Referen...
Flex in a nutshell > Ressources




                                      Frameworks
              •     Cairngorm        ...
Flex in a nutshell > Ressources




                                  Frameworks




                                     ...
Flex in a nutshell > Ressources




                                  Bibliothèques
              •     FlexUnit
         ...
Flex in a nutshell > Ressources




                                  Merapi




           Communication par message entr...
?
Sources

•   Rich Internet Applications (RIA): A Convergence
    of User Interface - Florian Moritz
    http://www.flomedia...
Illustrations

•   http://www.flickr.com/photos/gamin/383003317/

•   http://www.flickr.com/photos/katej/2326033102/

•   ht...
Quand il y a des clients riches dans l'Air (RIA et Adobe Flex)
Quand il y a des clients riches dans l'Air (RIA et Adobe Flex)
Upcoming SlideShare
Loading in...5
×

Quand il y a des clients riches dans l'Air (RIA et Adobe Flex)

23,615

Published on

Cours de 2h présenté à Polytech'Nice-Sophia en décembre 2008.
La première partie présente les clients riches, les différents types de RIA et RDA et les technologies associées (Flex, Silverlight, Curl, JavaFX, GWT, AJAX ...).
La seconde partie est un cours sur le framework Flex/Air : Actionscript 3 et MXML, les notions de base et les ressources à connaître.

Published in: Technology
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
23,615
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
23
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

Quand il y a des clients riches dans l'Air (RIA et Adobe Flex)

  1. 1. Quand il y a des clients riches dans l'Air
  2. 2. Plan • Qui parle? • Voyage au monde des RIA • Flex in a nutshell
  3. 3. Qui parle?
  4. 4. Plan • Qui parle? • Général • Etudes • Expérience • Voyage au monde des RIA • Flex in a nutshell
  5. 5. Qui parle? > Général Qui parle? • Camille Roux • 23 ans • Ingénieur étude et conception chez • http://www.camilleroux.com
  6. 6. Qui parle? > Cursus Etudes • Polytech'Nice-Sophia • Filière : Architecture logicielle • Options : CLAW, Web sémantique, BD avancées, Crypto/Sécurité, algo. avancée • Promotion 2008
  7. 7. Qui parle? > Expérience Expérience • +1an de Flex/Air • Utilisation avancée • Dialogue fréquent avec des professionnels et experts Flex • Participation à des événements dédiés • Veille quotidienne
  8. 8. Voyage au monde des RIA
  9. 9. Plan • Qui parle? • Voyage au monde des RIA • Un peu d'histoire • Définition et classification des RIA • Les technologies RIA • Conclusion • Flex in a nutshell
  10. 10. Un peu d'histoire ...
  11. 11. Voyage au pays des RIA > Un peu d'histoire Evolution des Desktops I. 1945 : Batch System 0D II. 1955 : Interface orientée ligne 1D III. 1965 : Plein écran 2D IV.1980 : Interface utilisateur graphique 2.5D V. 1995 : Nouvelle génération +3D
  12. 12. Voyage au pays des RIA > Un peu d'histoire Evolution du web
  13. 13. Voyage au pays des RIA > Définition et classification des RIA Desktop Web Rich Internet Application (embarqué dans le navigateur) RDA RIA
  14. 14. Voyage au pays des RIA > Définition et classification des RIA Desktop Web Rich Desktop Application (standalone) RDA RIA
  15. 15. Voyage au pays des RIA > Définition et classification des RIA Desktop Web !Bonne exploitation !Pas d'installation/update des ressources !Déconnecté !Portable !Confidentialité des données !Fortement connecté !Continuité du contexte !Traçage de l'utilisateur possible !Gestion/affichage possible de !Pas de piratage de licence grandes quantités de données RDA RIA
  16. 16. Voyage au pays des RIA > Définition et classification des RIA Pas de serveur Application Desktop Logique de présentation Client Logique business Données Serveur
  17. 17. Voyage au pays des RIA > Définition et classification des RIA Pas de serveur •Page web statique Application •Pas interactif Site web Desktop classique Logique de Navigateur présentation Client Logique business Données Logique de présentation Serveur Logique business Données
  18. 18. RIA (Rich Internet Application) Expérience utilisateur similaire à Application Client lourd celle des Desktops Site web Desktop classique Logique de Logique de Navigateur présentation présentation Client Logique Logique business business Données Logique de présentation Serveur Logique business Données Données
  19. 19. RIA (Rich Internet Application) Partionnement de la Application Client lourd Hybride logique business Site web Desktop classique Logique de Logique de Logique de Navigateur présentation présentation présentation Client Logique Logique Logique business business business Données Logique de présentation Serveur Logique Logique business business Données Données Données
  20. 20. RIA (Rich Internet Application) Partionnement de la Application Client lourd Hybride Hybride logique de présentation web Site Desktop classique Logique de Logique de Logique de Logique de Navigateur présentation présentation présentation présentation Client Logique Logique Logique business business business Données Logique de Logique de présentation présentation Serveur Logique Logique Logique business business business Données Données Données Données
  21. 21. RIA (Rich Internetle moteur de Seul Application) présentation est coté Application Client lourd Hybrideclient Hybride Client léger Site web Desktop classique Logique de Logique de Logique de Logique de Moteur de Navigateur présentation présentation présentation présentation présentation Client Logique Logique Logique business business business Données Logique de Logique de Logique de présentation présentation présentation Serveur Logique Logique Logique Logique business business business business Données Données Données Données Données
  22. 22. Voyage au pays des RIA > Les technologies RIA <xul/> Les technologies RIA
  23. 23. Voyage au pays des RIA > Les technologies RIA Du client léger au client lourd : Les technologies mises en jeu Desktop RDA RIA Site web Client Applications Air, Flash/Flex Client AJAX HTML lourd natives JavaFX Silverlight léger Java+Swing/SWT XUL+XULRunner XUL GWT OpenLazlo
  24. 24. Voyage au pays des RIA > Les technologies RIA > Silverlight Nom : Silverlight Editeur : Microsoft Date de création : avril 2007 Licence : Propriétaire Ide : Visual Studio + Langages : XAML / .net Expression Bend Signes particuliers : quot;Non compatible Linux quot;Moonlight quot;Non compatible Opera quot;Version mobile en 2009
  25. 25. Voyage au pays des RIA > Les technologies RIA > Silverlight MS Visual Studio
  26. 26. Voyage au pays des RIA > Les technologies RIA > Silverlight MS Expression Bend
  27. 27. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  28. 28. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  29. 29. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  30. 30. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  31. 31. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  32. 32. Voyage au pays des RIA > Les technologies RIA > Flex Nom : Flex Editeur : Adobe Date de création : mars 2004 Licence : Open source Ide : Adobe Flex Builder /Propriétaire (plugin Eclipse) Langages : MXML Signes particuliers : /ActionScript 3 quot;Repose sur Flash quot;Flex 4 en 2009 quot;Adobe Air (Desktop)
  33. 33. Voyage au pays des RIA > Les technologies RIA > Flex Adobe Flex Builder
  34. 34. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  35. 35. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  36. 36. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  37. 37. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  38. 38. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  39. 39. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  40. 40. Voyage au pays des RIA > Les technologies RIA > XUL <xul/> Nom : XUL Editeur : Fondation Mozilla Licence : Format ouvert Ide : Plusieurs IDE Langages : XUL/HTML disponibles /CSS/DOM/Javascript Signes particuliers : /XML quot;Prononcer quot;zoulquot;
  41. 41. Voyage au pays des RIA > Les technologies RIA > XUL > Showcase Showcase
  42. 42. Voyage au pays des RIA > Les technologies RIA > XUL > Showcase Showcase
  43. 43. Voyage au pays des RIA > Les technologies RIA > JavaFX Nom : JavaFX Editeur : Sun Microsystems Date de création : mai 2007 Licence : Propriétaire Ide : Netbeans + plugin Langages : Java Signes particuliers : /JavaFX script quot;Langage de script, wrap de Swing et Java 2D/3D quot;JavaFX 1.0 sorti le 4 dec 2008
  44. 44. Voyage au pays des RIA > Les technologies RIA > JavaFX Java Swing JavaFX Script import javax.swing.JFrame; import javafx.ui.*; import javax.swing.JLabel; Frame { import javax.swing.SwingUtilities; title: quot;My Java Applicationquot; width: 500 public class FrameApplication { height: 300 content: Label { public static void main(String[] args) { text: quot;Hello World!quot; SwingUtilities.invokeLater(new Runnable() { } public void run() { visible: true JFrame win = new } JFrame(quot;My Java Applicationquot;); win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); win.setSize(500, 300); JLabel label = new JLabel(quot;Hello World!quot;); win.add(label); win.setVisible(true); } }); } }
  45. 45. Voyage au pays des RIA > Les technologies RIA > JavaFX Netbeans + plugin JavaFX
  46. 46. Voyage au pays des RIA > Les technologies RIA AJAX?
  47. 47. Voyage au pays des RIA > Les technologies RIA GWT?
  48. 48. Voyage au pays des RIA > Les technologies RIA Titanium?
  49. 49. Voyage au pays des RIA > Les technologies RIA Popularité Nombre relatif de requêtes sur Google Source : Google Insights (décembre 2008)
  50. 50. Voyage au pays des RIA > Les technologies RIA Pénétration du marché Microsoft Silverlight Adobe Flash Player Version 1 Non installé ou < 9 6% Version 2 7% 17% Version 10 19% Non installé Version 9 77% 75% Version 1 Version 9 Version 2 Version 10 Non installé Non installé ou < 9 Source : riastats.com
  51. 51. Voyage au pays des RIA > Les technologies RIA Points communs • Multi-plateformes (grâce à un player) • 1 langage de description du UI + 1 langage de programmation • Programmation orientée événement • UI riches • Connectés : REST, SOAP, AMF, ... • ...
  52. 52. Voyage au pays des RIA > Les technologies RIA Critères de choix • Type d'application • Public visé • Utilisations avancées désirées (3D, son, vidéo...) • Performance / complexité de l'application • Rendu graphique • Communauté • ...
  53. 53. Flex/Air in a nutshell
  54. 54. Plan • Qui parle? • Voyage au monde des RIA • Flex in a nutshell • Qu'est-ce que Flex? • Les langages • Actionscript 3 • MXML • Culture Flex • Retour sur expérience • Ressources
  55. 55. Flex in a nutshell > Qu'est-ce que Flex? Qu'est-ce que Flex?
  56. 56. Flex in a nutshell > Qu'est-ce que Flex? Un moyen de faire des SWF C'est pour les développeurs Cela permet de faire des applications sur le web (Flex) et sur desktop (AIR)
  57. 57. Flex in a nutshell > Qu'est-ce que Flex? Historique • Flex 1.0 : mars 2004 (Macromedia) • Flex 1.5 : octobre 2004 • Flex 2.0 : juin 2006 • Flex 3.0 : février 2008 • Flex 4.0 (quot;Gumboquot;) : 2009
  58. 58. Flex in a nutshell > Les langages Les langages
  59. 59. Flex in a nutshell > Les langages MXML • Description de l'interface + logique business + connexion à des webservices, REST, ... • Basé sur XML • Intégré avec l'AS : syntaxe {...}
  60. 60. Flex in a nutshell > Les langages ActionScript 3.0 • Norme ECMAScript 4.0 (draft edition) • Proche de Java et JavaScript • Orienté objet • Typé (mode strict par défaut) • Pseudo-compilé • Dynamique (dynamic class) • Réflexif
  61. 61. Flex in a nutshell > Les langages “The power of the ActionScript language tools along with the hybrid type checking (mostly static for tool support in Flex Builder, but dynamic whenever it’s convenient) makes for a programming experience that I find much more straightforward and pleasing than Java.” Bruce Eckel Auteur de quot;Thinking in Javaquot;
  62. 62. Flex in a nutshell > Les langages Runtime • Langage pseudo-compilé (byte code) • Compilation à la volée (Just In Time Compilation) • Monothreadé • Ramasse-miette
  63. 63. Flex in a nutshell > Les langages > ActionScript 3 ActionScript 3
  64. 64. Flex in a nutshell > Les langages > ActionScript 3 Variable • var variable:String; • var variable:String = quot;Ma chainequot;;
  65. 65. Flex in a nutshell > Les langages > ActionScript 3 Constante • const CONSTANTE:String = quot;ma chainequot;;
  66. 66. Flex in a nutshell > Les langages > ActionScript 3 Quelques types de base Types primitifs Types complexes Boolean Object int Array Null Date Number Error String Function uint RegExp void XML XMLList
  67. 67. Flex in a nutshell > Les langages > ActionScript 3 Traitement conditionnel var entier:Number = 5; if (entier < 0) { trace(quot;< 0quot;); } else if (entier == 0) { trace(quot;= 0quot;); } else { trace(quot;> 0quot;); }
  68. 68. Flex in a nutshell > Les langages > ActionScript 3 Traitement conditionnel var entier:String = quot;5quot;; switch(entier) { case quot;5quot;: trace(quot;le nombre est 5quot;); break; case quot;6quot;: trace(quot;le nombre est 6quot;); break; default: trace(quot;le nombre est différent de 5 et 6quot;); }
  69. 69. Flex in a nutshell > Les langages > ActionScript 3 Boucles for(var i:uint ; i<10 ; i++) { trace(i); }
  70. 70. Flex in a nutshell > Les langages > ActionScript 3 Boucles var i:uint = 1; while(i<10) { trace(i); i++; }
  71. 71. Flex in a nutshell > Les langages > ActionScript 3 Boucles var i:uint=1 do { trace(i); i++; } while(i<10);
  72. 72. Flex in a nutshell > Les langages > ActionScript 3 Boucles • var tableau:Array = new Array(quot;unquot;,quot;deuxquot;,quot;troisquot;); for(var p:* in tableau) //itère sur les index { trace(p + quot; :: quot; + tableau[p]); } • for each (var p:* in tableau) //itère sur les valeurs { trace(p) }
  73. 73. Flex in a nutshell > Les langages > ActionScript 3 Programmer avec classe package com.camilleroux.flex { import mx.control.Button; public class MicroOnde extends Device implements IMicroOnde { protected var temperature:Number; public function MicroOnde() { } public function start():void { } } }
  74. 74. Flex in a nutshell > Les langages > ActionScript 3 Programmer avec classe importation de classes et interfaces package com.camilleroux.flex { import mx.control.Button; public class MicroOnde extends Device implements IMicroOnde { protected var temperature:Number; public function MicroOnde() { } public function start():void { } } }
  75. 75. Flex in a nutshell > Les langages > ActionScript 3 Programmer avec classe internal : visible package com.camilleroux.flex que { dans son package public : visible par import mx.control.Button; tous public class MicroOnde extends Device implements IMicroOnde { protected var temperature:Number; public function MicroOnde() { } public function start():void { } } }
  76. 76. Flex in a nutshell > Les langages > ActionScript 3 Programmer avec classe + final : ne peut être étendue package com.camilleroux.flex + dynamic : possibilité de lui ajouter { des attributs et méthodes au import mx.control.Button; runtime public class MicroOnde extends Device implements IMicroOnde { protected var temperature:Number; public function MicroOnde() { } public function start():void { } } }
  77. 77. Flex in a nutshell > Les langages > ActionScript 3 Programmer avec classe •internal package com.camilleroux.flex (par défaut) { •public •protected import mx.control.Button; •private • + static public class MicroOnde extends Device implements IMicroOnde { protected var temperature:Number; public function MicroOnde() { } public function start():void { } } }
  78. 78. Flex in a nutshell > Les langages > ActionScript 3 Programmer avec classe package com.camilleroux.flex { import mx.control.Button; public class MicroOnde extends Device implements IMicroOnde { •internal (par défaut) protected var temperature:Number; •public •protected public function MicroOnde() •private { • + static } public function start():void { } } }
  79. 79. Flex in a nutshell > Les langages > ActionScript 3 Interface package com.camilleroux.flex { public interface IMicroOnde { function start():void; } }
  80. 80. Flex in a nutshell > Les langages > ActionScript 3 Accesseurs • public function get maVariable():Type • public function set maVariable(value:Type):void
  81. 81. Flex in a nutshell > Les langages > MXML MXML
  82. 82. Flex in a nutshell > Les langages > MXML Hello World Du vrai XML <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> ! ! <mx:Button label=quot;Hello worldquot;/> ! </mx:Panel> </mx:Application>
  83. 83. Flex in a nutshell > Les langages > MXML Hello World Base de tout <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> document MXML <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> ! ! <mx:Button label=quot;Hello worldquot;/> ! </mx:Panel> </mx:Application>
  84. 84. Flex in a nutshell > Les langages > MXML Hello World Espace de <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>nommage <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> ! ! <mx:Button label=quot;Hello worldquot;/> ! </mx:Panel> </mx:Application>
  85. 85. Flex in a nutshell > Les langages > MXML Hello World <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> ! ! <mx:Button label=quot;Hello worldquot;/> mx:Application ! </mx:Panel> mx:Panel </mx:Application> mx:Button
  86. 86. Flex in a nutshell > Les langages > MXML Etudions un exemple <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> ! ! <mx:TextInput id=quot;inputquot;/> ! ! <mx:Label text=quot;Texte : {input.text}quot;/> ! ! <mx:Button label=quot;Resetquot; click=quot;{input.text=' '}quot;/> ! </mx:Panel> </mx:Application>
  87. 87. Flex in a nutshell > Les langages > MXML Etudions un exemple Composant MXML <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> ! ! <mx:TextInput id=quot;inputquot;/> ! ! <mx:Label text=quot;Texte : {input.text}quot;/> ! ! <mx:Button label=quot;Resetquot; click=quot;{input.text=' '}quot;/> ! </mx:Panel> </mx:Application>
  88. 88. Flex in a nutshell > Les langages > MXML Etudions un exemple <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> id ! ! <mx:TextInput id=quot;inputquot;/> ! ! <mx:Label text=quot;Texte : {input.text}quot;/> ! ! <mx:Button label=quot;Resetquot; click=quot;{input.text=' '}quot;/> ! </mx:Panel> </mx:Application>
  89. 89. Flex in a nutshell > Les langages > MXML Etudions un exemple <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> Propriété <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> ! ! <mx:TextInput id=quot;inputquot;/> ! ! <mx:Label text=quot;Texte : {input.text}quot;/> ! ! <mx:Button label=quot;Resetquot; click=quot;{input.text=' '}quot;/> ! </mx:Panel> </mx:Application>
  90. 90. Flex in a nutshell > Les langages > MXML Etudions un exemple <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> Binding ! ! <mx:TextInput id=quot;inputquot;/> ! ! <mx:Label text=quot;Texte : {input.text}quot;/> ! ! <mx:Button label=quot;Resetquot; click=quot;{input.text=' '}quot;/> ! </mx:Panel> </mx:Application>
  91. 91. Flex in a nutshell > Les langages > MXML Etudions un exemple <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> Binding ! ! <mx:TextInput id=quot;inputquot;/> ! ! <mx:Label text=quot;Texte : {input.text}quot;/> ! ! <mx:Button label=quot;Resetquot; click=quot;{input.text=' '}quot;/> ! </mx:Panel> </mx:Application>
  92. 92. Flex in a nutshell > Les langages > MXML Etudions un exemple <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;> ! <mx:Panel width=quot;200quot; height=quot;200quot;> ! ! <mx:TextInput id=quot;inputquot;/> Evénement ! ! <mx:Label text=quot;Texte : {input.text}quot;/> ! ! <mx:Button label=quot;Resetquot; click=quot;{input.text=' '}quot;/> ! </mx:Panel> </mx:Application>
  93. 93. Flex in a nutshell > Les langages > MXML Génère de l'AS MXML Original Code généré Option de compilation : -keep private var _documentDescriptor_ : mx.core.UIComponentDescriptor = new mx.core.UIComponentDescriptor({ type: mx.core.Application , propertiesFactory: function():Object { return { childDescriptors: [ new mx.core.UIComponentDescriptor({ <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> type: mx.containers.Panel , <mx:Application xmlns:mx=quot;http:// propertiesFactory: function():Object { return { width: 200, www.adobe.com/2006/mxmlquot;> height: 200, childDescriptors: [ ! <mx:Panel width=quot;200quot; height=quot;200quot;> new mx.core.UIComponentDescriptor({ ! ! <mx:Button label=quot;Hello worldquot;/> type: mx.controls.Button , ! </mx:Panel> propertiesFactory: function():Object { return { label: quot;Hello worldquot; </mx:Application> }} }) ] }} }) ] }} })
  94. 94. Flex in a nutshell > Les langages > MXML Compilation MXML vers ActionScript 3 CSS vers ActionScript 3 ActionScript 3 vers Byte code Assets vers SWF Byte code vers SWF Exécution du SWF sur Flash Player
  95. 95. Les Evénements
  96. 96. Flex in a nutshell > Les langages > Les événements <mx:Button label=quot;showquot; click=quot;{Alert.show('event')}quot;/>
  97. 97. Flex in a nutshell > Les langages > Les événements <mx:Script> ! <![CDATA[ ! ! import mx.controls.Alert; ! ! ! ! ! private function showAlert(event:Event):void ! ! { ! ! ! Alert.show('event') ! ! } ! ]]> </mx:Script> <mx:Button label=quot;showquot; click=quot;showAlert(event)quot;/>
  98. 98. Flex in a nutshell > Les langages > Les événements <mx:Script> ! <![CDATA[ ! ! import mx.controls.Alert; ! ! ! ! private function showAlert(event:Event):void ! ! { ! ! ! Alert.show('event') ! ! } ! ]]> </mx:Script> <mx:creationComplete> ! <![CDATA[ ! ! bouton.addEventListener(MouseEvent.CLICK, showAlert); ! ]]> </mx:creationComplete> <mx:Button id=quot;boutonquot; label=quot;showquot;/>
  99. 99. Les Bindings
  100. 100. Flex in a nutshell > Les langages > Les bindings <mx:TextInput id=quot;inputquot;/> <mx:Label text=quot;Texte : {input.text}quot;/>
  101. 101. Flex in a nutshell > Les langages > Les bindings <mx:Script> ! <![CDATA[ ! ! [Bindable] ! ! private var bind:String; ! ]]> </mx:Script> <mx:TextInput id=quot;inputquot; change=quot;{bind=input.text}quot;/> <mx:Label text=quot;Texte : {bind}quot;/>
  102. 102. Flex in a nutshell > Les langages > Les bindings <mx:creationComplete> ! <![CDATA[ ! ! BindingUtils.bindProperty(lab,quot;textquot;,input,quot;textquot;); ! ]]> </mx:creationComplete> <mx:TextInput id=quot;inputquot;/> <mx:Label id=quot;labquot;/>
  103. 103. Les Etats
  104. 104. Flex in a nutshell > Les langages > Les états Exemple <mx:states> ! <mx:State name=quot;monEtatquot;> ! ! <mx:SetProperty target=quot;{views}quot; name=quot;selectedIndexquot; value=quot;2quot; /> ! ! <mx:RemoveChild target=quot;{backButton}quot; /> ! </mx:State> </mx:states> Chaque composant possède une variable currentState qui contient l'étant courant. Il suffit de le modifier pour le changer d'état. L'état par défaut a pour valeur quot;quot;.
  105. 105. Flex in a nutshell > Les langages > Les états Actions possibles SetProperty AddChild RemoveChild SetEventHandler SetStyle
  106. 106. Culture
  107. 107. Modules et RSL
  108. 108. Flex in a nutshell > Culture Flex > Modules et RSL Modules Application principale main.swf Chargement dynamique module1.swf module2.swf module3.swf
  109. 109. Flex in a nutshell > Culture Flex > Modules et RSL Runtime Shared Library Library1.swf Library2.swf Application principale main.swf module1.swf module2.swf module3.swf
  110. 110. Flex in a nutshell > Culture Flex > Modules et RSL Runtime Shared Library Library1.swf Library2.swf Application Une autre principale application main.swf main2.swf module1.swf module2.swf module3.swf
  111. 111. AIR
  112. 112. RIA
  113. 113. Flex in a nutshell > Culture Flex > Air Quoi de plus dans AIR? UI natif Accès au système (fenêtres et menus) de fichier PDF Processus en SQLite tâche de fond WebKit API pour les Stockage local Monitoring de la mises à jour connexion réseau Contrôle du Système de notification chrome
  114. 114. Flex in a nutshell > Culture Flex > Air Installation d'une application AIR
  115. 115. Flex in a nutshell > Culture Flex > Air
  116. 116. Flex in a nutshell > Culture Flex > Air
  117. 117. Flex in a nutshell > Culture Flex > Air
  118. 118. Flex in a nutshell > Culture Flex > Air
  119. 119. Flex in a nutshell > Culture Flex > Air
  120. 120. Flex in a nutshell > Culture Flex > Air
  121. 121. Flex in a nutshell > Culture Flex > Air
  122. 122. Retour sur expérience
  123. 123. Flex in a nutshell > Retour sur expérience • Api parfois minimalistes • Architecture (MVC + structure par composants) • IDE incomplet • Communauté active
  124. 124. Flex in a nutshell > Retour sur expérience • Scroll sous Mac OS • Temps de compilation parfois long • Machine virtuelle à optimiser • Développement rapide du UI
  125. 125. Ressources
  126. 126. Flex in a nutshell > Ressources Liens à connaître • Flex Language Reference langref/) (http://livedocs.adobe.com/flex/3/ • Flex ressources (http://www.adobe.com/support/documentation/en/ flex/) • Flex in a week (http://www.adobe.com/devnet/flex/videotraining/) Vidéos et tutoriels pour apprendre Flex en 1 semaine • Flex.org (http://flex.org/) Agrégation d'actualités provenant de la sphère Flex/Air • TourDeFlex (http://flex.org/tour) RDA en Air pour explorer des ressources et des composants Flex
  127. 127. Flex in a nutshell > Ressources Frameworks • Cairngorm (http://opensource.adobe.com/wiki/display/cairngorm/) • PureMVC (http://puremvc.org/) • Mate (http://mate.asfusion.com/) • ... • Architectures et Framework Flex / Air par Matthieu Segret http://techtalks.intellicore.net/2008/05/29/architectures-frameworks-flex/
  128. 128. Flex in a nutshell > Ressources Frameworks Source : Google Insights (décembre 2008)
  129. 129. Flex in a nutshell > Ressources Bibliothèques • FlexUnit Tests unitaires (http://code.google.com/p/as3flexunitlib/) • Thunderblolt (http://code.google.com/p/flash-thunderbolt/) Logger extension • Flexlib (http://code.google.com/p/flexlib/) Composants graphiques • Degrafa (http://www.degrafa.org/) Framework graphique
  130. 130. Flex in a nutshell > Ressources Merapi Communication par message entre AIR et JAVA http://merapiproject.net/
  131. 131. ?
  132. 132. Sources • Rich Internet Applications (RIA): A Convergence of User Interface - Florian Moritz http://www.flomedia.de/diploma/documents/DiplomaThesisFlorianMoritz.pdf • Flash, Flex & AIR: A brief survey - Travis Isaacs http://www.slideshare.net/tbisaacs/flash-flex-air-a-brief-survey • Pratique d’ActionScript 3 - Thibault Imbert http://pratiqueactionscript3.bytearray.org • AdvancED Flex 3 - Shashank Tiwari & Elad Elrom
  133. 133. Illustrations • http://www.flickr.com/photos/gamin/383003317/ • http://www.flickr.com/photos/katej/2326033102/ • http://www.flickr.com/photos/gustty/95378937/ • http://www.flickr.com/photos/stuckincustoms/2049233526/ • http://www.flickr.com/photos/chris_gin/2197585153/ • http://www.flickr.com/photos/pgoyette/94520121/ • http://www.flickr.com/photos/gustty/95378937/

×