RIA & Adobe Flex<br />Ministère de l’Enseignement Supérieur de la<br />Recherche Scientifique et de la technologie<br />**...
Sommaire<br />1<br />2<br />3<br />4<br />5<br />Introduction à RIA<br />Flex & MXML<br />Flex & ActionScript<br />Flex & ...
RIA (Rich Internet Application) ?<br />RIA<br />Application web dont les fonctionnalités sont similaires à celles d’une ap...
Technologies de RIA (1/2)<br />RIA<br />Combinaison de technologies telles que Javascript, CSS, XML, le DOM et le XMLHttpR...
Technologies de RIA (2/2)<br />RIA<br />Permet de créer des applications riches comprenant une interface riche en fonction...
Adobe Flex / Air<br />Adobe Flex<br /><ul><li>Un framework Open Source
pour développer des Rich Internet Application (RIA)
qui sont déployées vers le lecteur Flash (SWF)
Du flash orienté développeur
Une large collection de composants
Deux langages (MXML et ActionScript)</li></ul>RIA<br />Adobe Air<br /><ul><li>Identique à Flex
Applications locales -> accès au système de fichier
Librairies supplémentaires
Machine virtuelle séparée du plugin Flash
Sécurité plus tolérante</li></li></ul><li>Flex et ses concurrents<br />RIA<br />GWT<br />Ensembled'outils logiciels dévelo...
Composants d’une application Flex<br />Une application Flex contient<br />Des fichiers MXML<br />Des fichiers ActionScript...
MXML (1/2)<br />MXML (pour Macromedia Flex MarkupLanguage) est la réponse de l'éditeur du Flash aux langages de création d...
MXML (2/2)<br />RIA<br />Exemple<br /><?xml version="1.0" encoding="utf-8"?><mx:Applicationxmlns:mx="http://www.macromedia...
ActionScript & MXML (1/2)<br />RIA<br />ActionScript, c’est un langage<br />Compris par le Flash Player<br />Orienté Objet...
ActionScript & MXML (2/2)<br /><?xml version="1.0"?> <br /><mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> <mx:S...
IDE (1/2)<br />Flex SDK<br />Flex SDK est gratuit et inclut les technologies nécessaires aux développeurs pour commencer c...
IDE (2/2)<br />Flex Builder<br />Flex Builderest un environnement de développement intégré basé sur Eclipse, qui autorise ...
Prochain SlideShare
Chargement dans…5
×

RIA

1 071 vues

Publié le

Les applications riches d'Internet avec Adobe Flex.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 071
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
21
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

RIA

  1. 1. RIA & Adobe Flex<br />Ministère de l’Enseignement Supérieur de la<br />Recherche Scientifique et de la technologie<br />*** * ***<br />Université de la Manouba<br />*** * ***<br />Ecole Nationale des Sciences De l’Informatique<br />RIA<br />Présenté par : M. Mahdi Ghazouani<br />26 Mai 2011<br />
  2. 2. Sommaire<br />1<br />2<br />3<br />4<br />5<br />Introduction à RIA<br />Flex & MXML<br />Flex & ActionScript<br />Flex & service Web<br />Flex & Cloud Computing<br />RIA<br />
  3. 3. RIA (Rich Internet Application) ?<br />RIA<br />Application web dont les fonctionnalités sont similaires à celles d’une application « bureau ».<br />Le traitement pour l’interface utilisateur se fait du côté client tandis que le serveur gère les données. La communication se fait via une couche abstraite intermédiaire.<br />Les RIAs tournent en général dans un browser web.<br />
  4. 4. Technologies de RIA (1/2)<br />RIA<br />Combinaison de technologies telles que Javascript, CSS, XML, le DOM et le XMLHttpRequest dans le but de réaliser des applications Web qui offrent une maniabilité et un confort d'utilisation<br />Permet la création de graphiques vectoriels et de bitmap animés par un langage script appelé ActionScript, et la diffusion de flux bidirectionnels audio et vidéo.<br />
  5. 5. Technologies de RIA (2/2)<br />RIA<br />Permet de créer des applications riches comprenant une interface riche en fonctionnalités (drag & drop, onglet, menu déroulant, animation etc.) tout en offrant un déploiement facilité par le biais du navigateur web.<br />Permet de créer et de déployer des applications Internet riches (RIA) multiplateformes grâce à la technologie Flash et particulièrement son lecteur.<br />
  6. 6. Adobe Flex / Air<br />Adobe Flex<br /><ul><li>Un framework Open Source
  7. 7. pour développer des Rich Internet Application (RIA)
  8. 8. qui sont déployées vers le lecteur Flash (SWF)
  9. 9. Du flash orienté développeur
  10. 10. Une large collection de composants
  11. 11. Deux langages (MXML et ActionScript)</li></ul>RIA<br />Adobe Air<br /><ul><li>Identique à Flex
  12. 12. Applications locales -> accès au système de fichier
  13. 13. Librairies supplémentaires
  14. 14. Machine virtuelle séparée du plugin Flash
  15. 15. Sécurité plus tolérante</li></li></ul><li>Flex et ses concurrents<br />RIA<br />GWT<br />Ensembled'outils logiciels développé par Google, permettant de créer et maintenir des applications web dynamiques mettant en œuvre JavaScript, en utilisant le langage et les outils Java.<br />Silverlight<br />C'est une alternative à Flash, un plugin léger, qui s'installe à la demande sur le poste utilisateur et complète le navigateur avec une interface graphique fonctionnant en interaction avec le serveur. <br />Adobe Flex<br />Wazaabi<br />Framework destiné à faciliter le développement d'interfaces riches pour des applications Internet. Son originalité réside dans le fait qu'il concilie plusieurs technologies : Java, XUL et la plate-forme de client riche d'Eclipse (RCP, richclient platform)<br />JavaFX<br />Gamme de produits conçus pour créer des applications internet riches avec des médias et des contenus immersifs.<br />
  16. 16. Composants d’une application Flex<br />Une application Flex contient<br />Des fichiers MXML<br />Des fichiers ActionScript<br />Des médias (images, fichiers audio, fichiers vidéos, fichiers SWF,…)<br />Ces constituants sont compilés en un seul fichier SWF<br />Les médias peuvent être compilés dans le fichier SWF ou chargés dans le runtime.<br />RIA<br />
  17. 17. MXML (1/2)<br />MXML (pour Macromedia Flex MarkupLanguage) est la réponse de l'éditeur du Flash aux langages de création d'interface via XML.<br />MXML propose une série de balises pour construire l'interface utilisateur. En cela, MXML peut se rapprocher de XHTML, chaque balise provoquant un affichage précis et connu dans l'application finale. Un fichier MXML se reconnaît par son extension .mxml.<br />RIA<br />
  18. 18. MXML (2/2)<br />RIA<br />Exemple<br /><?xml version="1.0" encoding="utf-8"?><mx:Applicationxmlns:mx="http://www.macromedia.com/2003/mxml">  <mx:TextInput id="source" width="100"/>  <mx:Button label="Copier" click="source.text=‘Hello everybody !’"/>  </mx:Application><br />Namespace<br />Zone de texte<br />Boutton<br />
  19. 19. ActionScript & MXML (1/2)<br />RIA<br />ActionScript, c’est un langage<br />Compris par le Flash Player<br />Orienté Objet <br />Sauvegardédans des fichiers *.as<br />Dans MXML, entre balises <mx:Script/><br />
  20. 20. ActionScript & MXML (2/2)<br /><?xml version="1.0"?> <br /><mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script><br /><![CDATA[ <br />public functioncalculate():void { <br />var n:Number = Number(fahrenheit.text); <br />var t:Number = Math.round((n-32)/1.8*10)/10; celsius.text=String(t); }<br />]]><br /></mx:Script><br />RIA<br />Fonction qui fait la conversion de Fahrenheit en Celsius<br />
  21. 21. IDE (1/2)<br />Flex SDK<br />Flex SDK est gratuit et inclut les technologies nécessaires aux développeurs pour commencer construction maintenant en vigueur les applications Flex. Flex est un framework qui permet de créer des applications Web très interactives et déploiement d'expression comme la plupart des navigateurs, postes de travail et systèmes d'exploitation. Il donne un modèle de programmation développé fondée sur des langages standard et gère les modèles de conception courants.<br />RIA<br />
  22. 22. IDE (2/2)<br />Flex Builder<br />Flex Builderest un environnement de développement intégré basé sur Eclipse, qui autorise la création d'applications Internet riches (RIA) avec Adobe Flex Framework. Avec Flex Builder, les développeurs créent et déploient en un clin d'œil des applications expressives et intuitives, offrant une interactivité hors pair. Flex Builderest un environnement de développement propice à la productivité, permettant aux développeurs de personnaliser leurs applications en fonction de l'aspect recherché.<br />RIA<br />
  23. 23. Flex - Communication<br />RIA<br />Communication HTTP<br />XML/RPC<br />SOAP<br />AMF<br />RTMP<br />Real Time Messaging Protocol<br />Socket entre Client et Server<br />Le server peut « pusher » des données sur le client<br />
  24. 24. Flex – Service Web<br />RIA<br /><ul><li>Au sens SOAP :
  25. 25. Envoie / reçoit SOAP (XML)
  26. 26. WSDL
  27. 27. Echanges de quelquesdonnéestypées:
  28. 28. Types primitifs AS3 (Boolean, int, uint, Number, String, ...)
  29. 29. Quelques types complexes du top level (Array, Date)
  30. 30. Sérialisation/ Désérialisationcôté Flex
  31. 31. Pas de type personnalisé</li></li></ul><li>Flex MVC (1/3)<br />RIA<br />
  32. 32. Flex MVC (2/3)<br />RIA<br />Modèle<br /><ul><li>Stocke les données
  33. 33. Ne sait pas comment ellessontreprésentées
  34. 34. C'estl'état de notre application
  35. 35. Aucunelogique (saufaccès aux données)
  36. 36. Souvent, simple liste de propriétéspubliques
  37. 37. VOs, ArrayCollections
  38. 38. Tout est "Bindable"</li></li></ul><li>Flex MVC (3/3)<br />RIA<br />Contrôleur<br /><ul><li>Cerveau de l'application
  39. 39. Logique entre vue et modèle
  40. 40. Ecoute les événementsdiffusés par les vues
  41. 41. Met à jour le modèle
  42. 42. Ne connaîtrien des vues</li></li></ul><li>Flex & Cloud Computing (1/2)<br />RIA<br />
  43. 43. Flex & Cloud Computing(2/2)<br />RIA<br />Flex network vous propose d' accéder de manière évolutive à de nombreux services en ligne sans avoir à gérer l'infrastructure sous-jacente, souvent complexe.<br />Les applications et les données ne sont plus stockées sur les ordinateurs en local, mais hébergés dans le réseau Flex network.<br />Selon vos besoins vos données et applications sont alors accessibles de n'importe où dans le monde de façon simple et sécurisée.<br />
  44. 44. Merci !<br />RIA<br />www.themegallery.com<br />

×