Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Introduction aux RIA (Rich Internet Applications)

5 934 vues

Publié le

Support de cours Master 2/Miage Université de Nantes 2009-2010

Publié dans : Technologie
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • SVP JE VOURDAI TELECHARGER CETTE PRESENTATION
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Introduction aux RIA (Rich Internet Applications)

  1. 1. Rich Internet Application Introduction Tugdual Grall (tugdual@gmail.com) http://www.tugdualgrall.com Decembre 2009 1
  2. 2. Introduction 2
  3. 3. Introduction Qui suis-je ? 2
  4. 4. Introduction Qui suis-je ? Responsable Produit et Business chez www.exoplatform.org 2
  5. 5. Introduction Qui suis-je ? Responsable Produit et Business chez www.exoplatform.org Co-fondateur: www.nantesjug.org 2
  6. 6. Introduction Qui suis-je ? Responsable Produit et Business chez www.exoplatform.org Co-fondateur: www.nantesjug.org Les Buzzwords associés à RIA ... 2
  7. 7. Introduction Qui suis-je ? Responsable Produit et Business chez www.exoplatform.org Co-fondateur: www.nantesjug.org Les Buzzwords associés à RIA ... Let’s Dive Into RIA ... 2
  8. 8. Quelques exemples: 3
  9. 9. Quelques exemples: 3
  10. 10. Quelques exemples: 3
  11. 11. Quelques exemples: 3
  12. 12. Quelques exemples: 3
  13. 13. RIA: Objectifs Amélioration de l'expérience utilisateur Meilleure ergonomie, performance, interactivité Rafraîchissement partiel des “écrans” Asynchrone: l’utilisateur n’attend pas 4
  14. 14. Technologies AJAX Adobe Flex/AIR Java Applications Applets/WebStart JavaFX Microsoft Silverlight 5
  15. 15. AJAX Asyncrhonous Javascript And XML 6
  16. 16. AJAX AJAX: Une nouvelle approche pour les applications Webs Février 2005: Jesse James Garrett, Adaptive Path Ajax: A New Approach to Web Applications 7
  17. 17. Définition AJAX n’est pas un “standard” mais un ensemble de technologies: HTML / XHTML & CSS pour la présentation JavaScript & DOM pour manipuler le contenu XML & XMLHttpRequest pour communiquer avec le serveur 8
  18. 18. Differences... 9
  19. 19. Web “Classique” 10
  20. 20. Web avec AJAX 11
  21. 21. Web “Classique” Applications Web “sans” AJAX: Le client -navigateur- envoie une requête HTTP Le serveur renvoie une page HTML “complète” Pour échanger des données toute la page est rafraîchie 12
  22. 22. Applications AJAX Applications AJAX: Le navigateur envoie une premiere requête HTTP pour charger la page et autres documents: Images, CSS, Javascript Envoi de requêtes HTTP asynchrones pour récupérer les données en fonction des besoins et événements utilisateur 13
  23. 23. Quelques Caractéristiques Applications AJAX: diminution de la quantité d’information échangées entre le client et navigateur Utilisation intensive de JavaScript Utilisation de l’object XMLHttpRequest Attention à la compatibilité entre navigateurs 14
  24. 24. AJAX: Partout!!! Widget/Module Environments Mac OS X Vista Netvibes, iGoogle, MyYahoo! Game Consoles Wii (Opera) Mobile Opera Mobile and Opera Mini Symbian S60 Pocket IE Motorola Q 15
  25. 25. Ajax “in action” Création d’un object XMLHttpRequest if (window.ActiveXObject) { // Microsoft Way httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { // Others... httpRequest = new XMLHttpRequest(); } 16
  26. 26. Ajax “in action” Appel du serveur httpRequest.open("GET", "./getEmployeeList?deptno=10", true); httpRequest.onreadystatechange = function () { processRequest(); } ; httpRequest.send(null); 17
  27. 27. Ajax “in action” Récuperation de la réponse function processRequest() { if (httpRequest.readyState == 4) { if(httpRequest.status == 200) { // process data as XML httpRequest.responseXML; // or Text alert(httpRequest.responseText); } else { alert("Error loading pagen"+ httpRequest.status +":"+ httpRequest.statusText); } } } 18
  28. 28. Démonstration AJAX: Les Basiques 19
  29. 29. XMLHttpRequest: Détails onreadystatechange : Listener d'événements de la requêtes HTTP; utiliser une fonction pour le “callback” readyState : statut de l'objet (Requête). responseText : Réponse sous forme de texte. responseXML : Réponse sous forme d'objet DOM. status : code numérique de réponse du serveur HTTP statusText : message associé au code de réponse. Les code possibles pour le statut de l'objet sont : 0 = non initialisé 1 = ouverture. La méthode open() a été appelée avec succès 2 = envoyé. La méthode send() a été appelée avec succès 3 = en train de recevoir. Des données sont en train d'être transférées, mais le transfert n'est pas terminé 4 = terminé. Les données sont chargées. 20
  30. 30. AJAX: X comme XML Echange de données, plutôt que HTML pour laisser l’application gérer la présentation Utilisation de la méthode responseXML pour récupérer un Document XML Utilisation du “Parser XML” et APIs associées pour manipuler les données depuis l’application var items = req.responseXML.getElementsByTagName("item"); 21
  31. 31. Démonstration AJAX: XML 22
  32. 32. Vue Generale HTTP Client Applications “AJAX” Java, PHP, Ruby, .net, ... 23
  33. 33. JSON: Alternative à XML XML est “coûteux” particulièrement dans le navigateur Une alternative: JSON: JavaScript Object Navigation JSON: un format d’échange/sérialisation d’objets JSON XML { <rss version="2.0"> "Version":"2.0", <channel> "Channel": { <item> "Items": [{ <link>http://tug.com</link> "Link":"http://tug.com", <title>Demo Item</title> "Title":"Demo Item" </item> }] </channel> } </rss> } 24
  34. 34. JSON in Action Client Serveur JSON est inclus dans le Sérialisation des objects moteur JavaScript des par les applications navigateur Parseurs: Java, C, PHP, Ruby, Perl, ... JSON 25
  35. 35. Démonstration AJAX: JSON 26
  36. 36. Je dois donc devenir un expert Javascript / HTML? 27
  37. 37. Je dois donc devenir un expert Javascript / HTML? Non pas vraiment... 27
  38. 38. Outils? Nombreux frameworks JavaScript, intégrés ou non aux plateformes serveurs Dojo Google Web Toolkit (GWT) Prototype Direct Web Remoting (DWR) Scriptaculous JavaServer Faces JQuery RichFaces, IceFaces, Trinidad Yahoo! UI (YUI) Echo3 28
  39. 39. Google Web Toolkit Les concepts: Développer en Java Compiler / Générer une application JavaScript 29
  40. 40. GWT: Développement GWT Designer Outils Java Eclipse Netbeans IDEA GWT Designer 30
  41. 41. Démonstration Google Web Toolkit Dojo, JQuery, ... 31
  42. 42. Ajax: Bonnes Pratiques JavaScript est un vrai langage, et très puissant dynamique, gestion d’exception, ... Ne pas réinventer la roue Prendre un framework existant Tester votre application dans les navigateurs ciblés 32
  43. 43. Java (Client) Applet / JavaFX Java WebStart 33
  44. 44. RIA & Java Java sur le Client Basé sur JavaSE, JavaME Utilisation de Swing et des fonctionnalités Java Déploiment/Execution: Applets Java WebStart 34
  45. 45. Applets Une application Java embarquée dans une page HTML S’execute au sein du Navigateur 35
  46. 46. Java WebStart Technologie de déploiement des applications Java Utilise JNLP (Java Network Launching Protocol / JSR-56) Java WebStart supporte: Mode Déconnecté Code Signing Isolation (Sandboxing) Mise à jour des applications/Versionning Installation des composants à la demande 36
  47. 47. JavaFX Langage de script permettant la création d’interfaces riches en tirant partie de la plateforme Java Demos en ligne: http://jfx.wikia.com/wiki/Demos 37
  48. 48. Adobe Flash / Flex / Air 38
  49. 49. Flex / AIR : Définition Framework Open Source pour RIA Utilisation du plugin Adobe Flash pour executer les applications Supporté par toutes les plateformes... sur lesquelles le plugin Flash existe AIR: Adobe Integrated Runtime Possibilité d’utiliser les applications Flash/Flex sur l’OS 39
  50. 50. Flex: Composants Tire partie de JavaEE MXML (Macromedia XML) Déclaration de l’interface graphique Création de applications en assemblant des composants graphiques Boutons, Listes, Layouts, Effets, ... Librairie très riche 40
  51. 51. Flex: Runtime Flex Builder IDE Browser Flex SDK Flash Player MXML ActionScript Flex Class Library Data .swf Data Web Server Compile XML Adobe Life Cycle JSON Data Services SOAP Web Services J2EE App Server .swf Existing Application Infrastructure 41
  52. 52. Flex Builder Environnement de Dev Intégré (IDE) Edition des MXML, ActionScript, ... Basé sur Eclipse Tire partie des plugins 42
  53. 53. SilverLight RIA Selon Microsoft 43
  54. 54. Silverlight Applications Riches selon Microsoft Utilisation d’un plugin (comme Flash) Gestion des animations, composants, données, ... 44
  55. 55. Silverlight : Composants Tire Partie de Microsoft .Net XAML (Extensible Application Markup Language) Déclaration de l’interface graphique Création de applications en assemblant des composants graphiques Boutons, Listes, Layouts, Effets, ... 45
  56. 56. Les outils Utilisation des Outils Microsoft pour le Développement Visual Studio 2008 Orienté Développeurs d’Entreprise Expression Studio Création Graphique 46
  57. 57. Conclusion ... 47
  58. 58. RIA: Attention... Dépendances sur fonctions “avancées” ou plugins: Javascript, Flash, Java, ... L’utilisateur doit s’habituer aux applications: Navigation, rafraîchissement partiel L’accessibilité est encore peu intégrée à ces solutions Gestion difficile -impossible- du bouton “Back” 48
  59. 59. RIA: Attention Tout est “dynamique” Difficile pour les moteurs de recherche d’indexer les “pages” Impossible de passer des URLs/Bookmarks en gardant un état Ce n’est pas necessairement un “vrai” problème car il s’agit ici d’applications et non pas de site. 49
  60. 60. Autres solutions? Il existe beaucoup d’autres solutions: OpenLazlo : équivalent à Flex avec possibilité de générer des applications HTML XUL : XML User Interface Language, création d’application riches dans Mozzilla Grails, RubyOnRails ... Curl, WaveMaker, ZK, Telosys, Wicket, ... 50
  61. 61. Comment choisir ? Choix difficile... à étudier au cas par cas Besoins “réels” Indépendance du serveur ? Type de framework: visuel, data access, ... Outillage, Documentation disponibles, Support Communauté Tenir compte des standards...si possible notamment l’arrivée de HTML 5 51
  62. 62. Résumé Browser Desktop Portabilité Prise en Main AJAX +++ --- +++ +* Flex ++ - ++ +++ Air - ++ ++ +++ Silverlight ++ - + +++ JavaFX + + +++ - Java + + +++ +++ *: Depend de la solution choisie 52
  63. 63. Exemple d’analyse Xebia RIA Contest Flex / Silverlight / GWT / Echo3 / JavaFX 53
  64. 64. Web 2.0 Introduction Tugdual Grall http://www.tugdualgrall.com 54
  65. 65. Blogs 55
  66. 66. Blogs 55
  67. 67. Blogs 55
  68. 68. Blogs 55
  69. 69. Wikis 56
  70. 70. Wikis 56
  71. 71. Wikis 56
  72. 72. Wikis 56
  73. 73. Réseaux Sociaux 57
  74. 74. Réseaux Sociaux 57
  75. 75. Réseaux Sociaux 57
  76. 76. Social Bookmarking 58
  77. 77. Social Rating 59
  78. 78. Social Rating 59
  79. 79. Social Rating 59
  80. 80. Mashups 60
  81. 81. Mashups 61
  82. 82. Autres... 62
  83. 83. Software As A Service (SaaS) 63
  84. 84. Rich Internet Application Introduction Tugdual Grall http://www.tugdualgrall.com 64

×