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

Like this? Share it with your network

Share

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

  • 15,265 views
Uploaded on

Cours de 2h présenté à Polytech'Nice-Sophia en décembre 2008. ...

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
15,265
On Slideshare
7,663
From Embeds
7,602
Number of Embeds
30

Actions

Shares
Downloads
23
Comments
2
Likes
15

Embeds 7,602

http://www.flex-info.fr 3,054
http://www.camilleroux.com 2,603
http://blog.cozic.fr 729
http://blog.aysoon.com 694
http://aysoon.fr 264
http://www.developpez.net 180
http://www.slideshare.net 15
http://www.netvibes.com 11
http://cozop.com 10
http://trebbe.blogspot.com 8
http://feeds2.feedburner.com 5
http://www.paperblog.fr 4
http://static.slideshare.net 4
file:// 3
http://trebbe.blogspot.fr 2
http://webcache.googleusercontent.com 2
http://66.102.9.101 1
http://translate.googleusercontent.com 1
http://www.linkedin.com 1
http://www.google.be 1
http://cache.baidu.com 1
http://www.health.medicbd.com 1
http://66.102.1.101 1
http://64.233.183.113 1
http://209.85.229.132 1
http://74.125.47.113 1
http://209.85.227.132 1
http://demo.embedster.com 1
http://74.125.45.100 1
http://www.trebbe.com 1

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. Quand il y a des clients riches dans l'Air
  • 2. Plan • Qui parle? • Voyage au monde des RIA • Flex in a nutshell
  • 3. Qui parle?
  • 4. Plan • Qui parle? • Général • Etudes • Expérience • Voyage au monde des RIA • Flex in a nutshell
  • 5. Qui parle? > Général Qui parle? • Camille Roux • 23 ans • Ingénieur étude et conception chez • http://www.camilleroux.com
  • 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. 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. Voyage au monde des RIA
  • 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. Un peu d'histoire ...
  • 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. Voyage au pays des RIA > Un peu d'histoire Evolution du web
  • 13. Voyage au pays des RIA > Définition et classification des RIA Desktop Web Rich Internet Application (embarqué dans le navigateur) RDA RIA
  • 14. Voyage au pays des RIA > Définition et classification des RIA Desktop Web Rich Desktop Application (standalone) RDA RIA
  • 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. 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. 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. 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. 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. 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. 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. Voyage au pays des RIA > Les technologies RIA <xul/> Les technologies RIA
  • 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. 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. Voyage au pays des RIA > Les technologies RIA > Silverlight MS Visual Studio
  • 26. Voyage au pays des RIA > Les technologies RIA > Silverlight MS Expression Bend
  • 27. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  • 28. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  • 29. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  • 30. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  • 31. Voyage au pays des RIA > Les technologies RIA > Silverlight > Showcase
  • 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. Voyage au pays des RIA > Les technologies RIA > Flex Adobe Flex Builder
  • 34. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  • 35. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  • 36. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  • 37. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  • 38. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  • 39. Voyage au pays des RIA > Les technologies RIA > Flex > Showcase
  • 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. Voyage au pays des RIA > Les technologies RIA > XUL > Showcase Showcase
  • 42. Voyage au pays des RIA > Les technologies RIA > XUL > Showcase Showcase
  • 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. 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. Voyage au pays des RIA > Les technologies RIA > JavaFX Netbeans + plugin JavaFX
  • 46. Voyage au pays des RIA > Les technologies RIA AJAX?
  • 47. Voyage au pays des RIA > Les technologies RIA GWT?
  • 48. Voyage au pays des RIA > Les technologies RIA Titanium?
  • 49. Voyage au pays des RIA > Les technologies RIA Popularité Nombre relatif de requêtes sur Google Source : Google Insights (décembre 2008)
  • 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. 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. 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. Flex/Air in a nutshell
  • 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. Flex in a nutshell > Qu'est-ce que Flex? Qu'est-ce que Flex?
  • 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. 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. Flex in a nutshell > Les langages Les langages
  • 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. 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. 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. Flex in a nutshell > Les langages Runtime • Langage pseudo-compilé (byte code) • Compilation à la volée (Just In Time Compilation) • Monothreadé • Ramasse-miette
  • 63. Flex in a nutshell > Les langages > ActionScript 3 ActionScript 3
  • 64. Flex in a nutshell > Les langages > ActionScript 3 Variable • var variable:String; • var variable:String = quot;Ma chainequot;;
  • 65. Flex in a nutshell > Les langages > ActionScript 3 Constante • const CONSTANTE:String = quot;ma chainequot;;
  • 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. 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. 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. Flex in a nutshell > Les langages > ActionScript 3 Boucles for(var i:uint ; i<10 ; i++) { trace(i); }
  • 70. Flex in a nutshell > Les langages > ActionScript 3 Boucles var i:uint = 1; while(i<10) { trace(i); i++; }
  • 71. Flex in a nutshell > Les langages > ActionScript 3 Boucles var i:uint=1 do { trace(i); i++; } while(i<10);
  • 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. 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. 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. 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. 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. 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. 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. Flex in a nutshell > Les langages > ActionScript 3 Interface package com.camilleroux.flex { public interface IMicroOnde { function start():void; } }
  • 80. Flex in a nutshell > Les langages > ActionScript 3 Accesseurs • public function get maVariable():Type • public function set maVariable(value:Type):void
  • 81. Flex in a nutshell > Les langages > MXML MXML
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Les Evénements
  • 96. Flex in a nutshell > Les langages > Les événements <mx:Button label=quot;showquot; click=quot;{Alert.show('event')}quot;/>
  • 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. 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. Les Bindings
  • 100. Flex in a nutshell > Les langages > Les bindings <mx:TextInput id=quot;inputquot;/> <mx:Label text=quot;Texte : {input.text}quot;/>
  • 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. 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. Les Etats
  • 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. Flex in a nutshell > Les langages > Les états Actions possibles SetProperty AddChild RemoveChild SetEventHandler SetStyle
  • 106. Culture
  • 107. Modules et RSL
  • 108. Flex in a nutshell > Culture Flex > Modules et RSL Modules Application principale main.swf Chargement dynamique module1.swf module2.swf module3.swf
  • 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. 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. AIR
  • 112. RIA
  • 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. Flex in a nutshell > Culture Flex > Air Installation d'une application AIR
  • 115. Flex in a nutshell > Culture Flex > Air
  • 116. Flex in a nutshell > Culture Flex > Air
  • 117. Flex in a nutshell > Culture Flex > Air
  • 118. Flex in a nutshell > Culture Flex > Air
  • 119. Flex in a nutshell > Culture Flex > Air
  • 120. Flex in a nutshell > Culture Flex > Air
  • 121. Flex in a nutshell > Culture Flex > Air
  • 122. Retour sur expérience
  • 123. Flex in a nutshell > Retour sur expérience • Api parfois minimalistes • Architecture (MVC + structure par composants) • IDE incomplet • Communauté active
  • 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. Ressources
  • 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. 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. Flex in a nutshell > Ressources Frameworks Source : Google Insights (décembre 2008)
  • 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. Flex in a nutshell > Ressources Merapi Communication par message entre AIR et JAVA http://merapiproject.net/
  • 131. ?
  • 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. 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/