Les technologies RIA et  WebSphere Portal Server
<ul><li>Découvrir l'univers des possibles en termes d'expériences utilisateurs
Découvrir les technologies RIA
Imaginer les possibilités d'intéraction
Comprendre la complémentarité avec WebSphere Portal
Voir des démonstrations de ces technologies </li></ul>Objectifs de cette session
Agenda <ul><li>Introduction aux technologies RIA
Les RIAs & WebSphere Portal
Deux exemples d'intégration/intéropérabilité :  </li><ul><li>Dojo
FLEX </li></ul><li>Démonstrations </li></ul>
<ul>Nouvelles attentes </ul><ul><li>Les attentes des utilisateurs sont de plus en plus grandes...
Le “Web 2.0” est devenu la norme. </li></ul>
<ul>Problème des fournisseurs d'applications. </ul><ul><li>Maintenance des applications Client  </li></ul><ul><ul><li>Test...
Peu de contrôle sur l'environnement d'éxécution. </li></ul></ul>
<ul>RIA – Rich Internet Application ? </ul>Rich Internet applications  ( RIA s) est une application web qui offre des cara...
Ce que les experts pensent !! <ul>...Nearly 60 percent of all new application developpment will include RIA technology by ...
<ul>Les différents acteurs... </ul><ul><ul><ul><li>AJAX et ces frameworks : Dojo, jQuery, Scriptaculous and the like
Adobe : Flex & AIR
Microsoft Silverlight
JavaFX
HTML 5 (bientôt) </li></ul></ul></ul>
Adoption des technologies RIA
Le portail est un point d’accès   unique, personnalisé et sécurisé  aux applications, processus, personnes et contenus
<ul><li>Modèle de navigation
Charte graphique </li></ul><ul><li>Rôle
Sécurité
Single Sign On </li></ul>
Quel direction prendre ?
Pourquoi utiliser une technologie RIA  avec WebSphere Portal ?  <ul><li>Améliorer l'interface utilisateur </li></ul><ul><l...
Dojo <ul><li>Dojo  est un framework open source en JavaScript.
Son but est le développement rapide d'applications en Javascript exécutées côté client et communiquant avec le serveur ave...
WebSphere Portal & Dojo <ul><li>Depuis WebSphere Portal 6.1, IBM utilise  intensivement  le toolkit Dojo.
Thème Web 2.0
Thème  Customizer
Page Builder </li></ul>
WebSphere Portlet Factory & Dojo <ul><li>Dojo Animation
Dojo Date/Time Picker
Dojo Form Dialog
Dojo Page Element
Dojo Data Grid
Dojo Data Store
Dojo Rich Text
Prochain SlideShare
Chargement dans…5
×

WebSphere Portal & Rich Internet Applications

1 461 vues

Publié le

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

WebSphere Portal & Rich Internet Applications

  1. 1. Les technologies RIA et WebSphere Portal Server
  2. 2. <ul><li>Découvrir l'univers des possibles en termes d'expériences utilisateurs
  3. 3. Découvrir les technologies RIA
  4. 4. Imaginer les possibilités d'intéraction
  5. 5. Comprendre la complémentarité avec WebSphere Portal
  6. 6. Voir des démonstrations de ces technologies </li></ul>Objectifs de cette session
  7. 7. Agenda <ul><li>Introduction aux technologies RIA
  8. 8. Les RIAs & WebSphere Portal
  9. 9. Deux exemples d'intégration/intéropérabilité : </li><ul><li>Dojo
  10. 10. FLEX </li></ul><li>Démonstrations </li></ul>
  11. 11. <ul>Nouvelles attentes </ul><ul><li>Les attentes des utilisateurs sont de plus en plus grandes...
  12. 12. Le “Web 2.0” est devenu la norme. </li></ul>
  13. 13. <ul>Problème des fournisseurs d'applications. </ul><ul><li>Maintenance des applications Client </li></ul><ul><ul><li>Test et support sur de multiples plateformes et systèmes d'exploitation
  14. 14. Peu de contrôle sur l'environnement d'éxécution. </li></ul></ul>
  15. 15. <ul>RIA – Rich Internet Application ? </ul>Rich Internet applications ( RIA s) est une application web qui offre des caractéristiques similaires aux logiciels traditionnels installés sur un ordinateur. La dimension interactive et la vitesse d'exécution sont particulièrement soignées dans ces applications web.
  16. 16. Ce que les experts pensent !! <ul>...Nearly 60 percent of all new application developpment will include RIA technology by 2010.” ( Gartner ) </ul>
  17. 17. <ul>Les différents acteurs... </ul><ul><ul><ul><li>AJAX et ces frameworks : Dojo, jQuery, Scriptaculous and the like
  18. 18. Adobe : Flex & AIR
  19. 19. Microsoft Silverlight
  20. 20. JavaFX
  21. 21. HTML 5 (bientôt) </li></ul></ul></ul>
  22. 22. Adoption des technologies RIA
  23. 23. Le portail est un point d’accès unique, personnalisé et sécurisé aux applications, processus, personnes et contenus
  24. 24. <ul><li>Modèle de navigation
  25. 25. Charte graphique </li></ul><ul><li>Rôle
  26. 26. Sécurité
  27. 27. Single Sign On </li></ul>
  28. 28. Quel direction prendre ?
  29. 29. Pourquoi utiliser une technologie RIA avec WebSphere Portal ? <ul><li>Améliorer l'interface utilisateur </li></ul><ul><li>Rafraichissement partiel </li></ul><ul><li>Manipulation coté client des données </li></ul><ul><li>Réduction de la bande passante </li></ul>
  30. 30. Dojo <ul><li>Dojo est un framework open source en JavaScript.
  31. 31. Son but est le développement rapide d'applications en Javascript exécutées côté client et communiquant avec le serveur avec une granularité inférieure à la page grâce à Ajax. </li></ul>L'architecture Dojo
  32. 32. WebSphere Portal & Dojo <ul><li>Depuis WebSphere Portal 6.1, IBM utilise intensivement le toolkit Dojo.
  33. 33. Thème Web 2.0
  34. 34. Thème Customizer
  35. 35. Page Builder </li></ul>
  36. 36. WebSphere Portlet Factory & Dojo <ul><li>Dojo Animation
  37. 37. Dojo Date/Time Picker
  38. 38. Dojo Form Dialog
  39. 39. Dojo Page Element
  40. 40. Dojo Data Grid
  41. 41. Dojo Data Store
  42. 42. Dojo Rich Text
  43. 43. Dojo Drag Source
  44. 44. Dojo Drop Target
  45. 45. Dojo Progress Indicator </li></ul>Show Me!
  46. 46. Adobe Flex <ul><li>Adobe Flex est une solution de développement créée par Macromedia en 2004, puis reprise par Adobe en 2006, permettant de créer et de déployer des applications Internet riches (RIA) multi plates-formes grâce à la technologie Flash et particulièrement son lecteur. Son modèle de programmation fait appel à MXML (basé sur XML) et ActionScript 3.0, reposant sur ECMAScript. </li></ul>
  47. 47. Deux scénarios d'intégration <ul><li>Scénario 1 : Intégration de composants Flex et non Flex dans une page Portail. </li></ul><ul><li>Scénario 2 : Thème Flex intégrant uniquement d'autres composants FLEX, utilisant les services REST de WebSphere Portal. </li></ul><ul><li>Ces deux scénarios vont être abordés dans les slides suivants. </li></ul>
  48. 48. Enrichissement des applications composites... … Avec des applications FLEX <ul>role-based </ul><ul>composite applications </ul><ul>in context </ul><ul>process- driven </ul><ul>IBM WebSphere Portal </ul><ul>JSR 286 </ul><ul>composite applications </ul><ul>iWidget </ul><ul>FLEX </ul><ul>IBM WebSphere Portal </ul>
  49. 49. Expérience Utilisateur Flex Portlets HTML Portlets Show Me!
  50. 50. Eléments à considérer pour une bonne intégration Quand vous intégrez n'importe quel RIA dans un portal ou dans un site qui intègre de multiple contenus ou application, il vous faut considérer trois choses : <ul><li>L'état de navigation,
  51. 51. La communication inter-portlets,
  52. 52. Accès aux paramètres et APIs des portlets. </li></ul>
  53. 53. L'état de navigation <ul><li>“ L'état de navigation” inclut des informations tel que la page selectée, le mode des portlets (View, Personalize, etc.), les états des portlets (Maximisé, Minimisé, etc.)
  54. 54. WebSphere Portal stocke cette information dans l'URL : </li></ul><ul><li>“ L'état de navigation” est important pour : </li></ul><ul><ul><li>“ Bookmarkabilité”
  55. 55. Support des boutons Back et Forward
  56. 56. Addressabilité, Indexation... </li></ul></ul><ul><li>Considération: Généralement, les RIAs se met à jour complétement sur le client. </li></ul><ul><ul><li>L'URL n'est pas mis à jour avec cette nouvelle vue.
  57. 57. Si un rafraichissement de la page se passe du à </li><ul><li>...la navigation sur une autre page
  58. 58. ...L'utilisation des boutons Back et Forward </li></ul></ul></ul>Alors l'application RIA revient à son état initial, sauf via l'utilisation de service du portail permettant le maintien de l'état actuel.
  59. 59. <ul>Communications Inter-portlet (IPC) </ul><ul><li>Qu'est ce que c'est ? </li></ul><ul><ul><li>Permet à des applications indépendantes de coopérer pour fournir une expérience utilisateur plus intuitive
  60. 60. Passer des informations complexes entre des applications
  61. 61. Par exemple, une application ayant une liste de produits, que l'on souhaite afficher
  62. 62. dans une application Flex.
  63. 63. La clé pour la notion d'application composée </li></ul></ul><ul><li>Pourquoi des précautions particulières avec les RIA ? </li></ul><ul><ul><li>Les événements portlets requiert un rafraichissement complet de la page, les informations sont envoyés au serveur pour être redistribués. Même en mode CSA.
  64. 64. Souvenez vous : Un rafraichissement annulera toutes les informations contenues dans les RIA. </li></ul></ul>
  65. 65. <ul>Portlet APIs </ul><ul><li>Qu'est ce que c'est ? </li></ul><ul><ul><li>L'ensemble des données qu'un développeur accède normalement par le biais des APIs des portlets
  66. 66. Données des portlets (Préferences, Session, Paramètre de rendu)
  67. 67. API de la portlet </li><ul><li>Service REST d'accès aux préférences de la portlet
  68. 68. Service REST d'accès aux informations Utilisateurs.
  69. 69. Service REST d'accès aux modes des portlets. </li></ul></ul></ul><ul><li>Pourquoi ? </li></ul><ul><ul><li>Accès aux données personnalisé </li></ul></ul><ul><ul><li>Preferences des Portlets
  70. 70. Etat de navigation </li></ul></ul><ul><ul><li>Tirer parti de tous les services de la solution WebSphere Portal </li></ul></ul>
  71. 71. <ul>Comment adresser ces challenges ? </ul><ul><li>Tous les éléments nécessaires pour adresser ces challenges pour les RIAs sont actuellement disponible dans WebSphere Portal.
  72. 72. WebSphere Portal 6.1 fournit le support de la spécification Portlet V2 (JSR 286) </li></ul><ul><ul><li>Standard des communications inter-portlets.
  73. 73. Support des “PortletFilters”
  74. 74. Support des “ResourceRequests” </li></ul></ul><ul><li>WebSphere Portal 6.1 fournit également un nouveau modèle de programmation coté client : </li></ul><ul><ul><li>JavaScript API pour accèder aux données des portlet </li></ul></ul><ul><li>Le reste est juste l'utilisation des standards J2EE, HTML et Javascript. </li></ul>
  75. 75. <ul>L'état de navigation - Persistance </ul><ul><li>Persistance </li></ul><ul><ul><li>Besoin de stockage coté client
  76. 76. Par exemple, par l'utilisation de cookies </li></ul></ul><ul><li>Définer deux opérations: “setClientRenderParameter” et “getClientRenderParameter” </li><ul><li>Il suffit de définir et d'extraire une valeur de cookie donné un espace de noms (instance de portlet), un nom de paramètre et une valeur de paramètre.
  77. 77. Comment l'obtenir ? </li></ul></ul><ul><ul><ul><li>Flex -> ExternalInterface permet l'appel de fonction Javascript
  78. 78. Dojo -> natif </li></ul></ul></ul><ul><li>Modifications de l'application Flex : </li></ul><ul><ul><li>Elle doit appeler ces nouvelles fonctions Javascript pour passer les paramètres de rendu “client” </li></ul></ul>
  79. 79. <ul>L'état de navigation - Persistance </ul><ul><li>Persistence </li></ul><ul><ul><li>Besoin de stockage coté client
  80. 80. Par exemple, par l'utilisation de cookies </li></ul></ul><ul><li>Définier deux opérations: “setClientRenderParameter” et “getClientRenderParameter” </li><ul><li>Il suffit de définir et d'extraire une valeur de cookie donné un espace de noms (instance de portlet), un nom de paramètre et une valeur de paramètre.
  81. 81. Comment l'obtenir ? </li></ul></ul><ul><ul><ul><li>Flex -> ExternalInterface permet l'appel de fonction Javascript
  82. 82. Dojo -> natif </li></ul></ul></ul><ul><li>Modifications de l'application Flex : </li></ul><ul><ul><li>Elle doit appeler ces nouvelles fonctions Javascript pour passer les paramètres de rendu “client” </li></ul></ul>
  83. 83. <ul>L'état de navigation - Persistance </ul><ul><li>Persistence </li></ul><ul><ul><li>Besoin de stockage coté client
  84. 84. Par exemple, par l'utilisation de cookies </li></ul></ul><ul><li>Définier deux opérations: “setClientRenderParameter” et “getClientRenderParameter” </li><ul><li>Il suffit de définir et d'extraire une valeur de cookie donné un espace de noms (instance de portlet), un nom de paramètre et une valeur de paramètre.
  85. 85. Comment l'obtenir ? </li></ul></ul><ul><ul><ul><li>Flex -> ExternalInterface permet l'appel de fonction Javascript
  86. 86. Dojo -> natif </li></ul></ul></ul><ul><li>Modifications de l'application Flex : </li></ul><ul><ul><li>Elle doit appeler ces nouvelles fonctions Javascript pour passer les paramètres de rendu “client” </li></ul></ul>
  87. 87. <ul>L'état de navigation – URL Adressable </ul><ul><li>La norme JSR 286 a introduit la fonction PortletFilters </li></ul><ul><ul><li>Créer un PortletFilter qui prend tous les cookies commençant par l'identifiant unique et exposer les comme paramètres. </li></ul></ul><ul><li>La portlet utilise ces paramètres pour son initialisation et pour encoder l'url du Portal. </li></ul>
  88. 88. <ul>Communications Inter-portlet (IPC) </ul><ul><li>“ Client-side” </li></ul>
  89. 89. <ul>Communications Inter-portlet (IPC) </ul><ul><li>“ Server-side” </li></ul>
  90. 90. <ul>“ Server-side”: JSR 286 </ul><ul><li>Utilisation du standard JSR 286 d'événement.
  91. 91. Chaque portlet déclare ces événements dans le fichier portlet.xml
  92. 92. Le controle graphique Flex peut utiliser l'ActionURL et le service HTTP pour déclencher l'événement :
  93. 93. Cette approche est expliqué dans l'article suivant : </li></ul><ul><ul><li>Using Adobe Flex in JSR-286 Portlets
  94. 94. http://www-10.lotus.com/ ldd / portalwiki . nsf / dx /17.09.2008050832WEBCQV. htm </li></ul></ul><ul><li>Problème avec cette approche – le rafraichissement de la page </li></ul>
  95. 95. <ul>Client-side Communications </ul><ul><li>“ Mode Broadcast” </li></ul><ul><ul><li>Defini une fonction JavaScript pour envoyer l'événement et souscrire à un message particulier (broadcast, addSubscriber)
  96. 96. Ajouter l'appel dans l'application Flex émettrice pour envoyer des messages
  97. 97. Ajouter l'appel dans l'application Flex réceptrice </li></ul></ul><ul><li>“ Mode wired” </li></ul><ul><ul><li>Même approche que le mode Broadcast
  98. 98. Ajout d'une fonction Javascript additionnelle pour enregistrer les liens (source et cible)
  99. 99. Déclarer les événements de publication et souscription dans le fichier Declare publishing and subscribing events in the portlet.xml
  100. 100. Utiliser “Portlet Object Model” to retrieve the “Communication”Endpoints” de la portlet et générer les appels Javascript dans la portlet pour enregistrer les liens. </li></ul></ul><ul><li>“ Integrating Adobe Flex with IBM WebSphere Portal” </li></ul><ul><ul><li>http://www-10.lotus.com/ldd/portalwiki.nsf/dx/06032009113331AMWEBL9H.htm </li></ul></ul>
  101. 101. Autres méthodes : <ul><li>Utilisation de JMS
  102. 102. Flex Parameters
  103. 103. Utilisation de “Local Connection” </li></ul>
  104. 104. <ul>Données des Portlets </ul><ul><li>Les données peuvent être accéder par les services REST.
  105. 105. Le modèle CSA fournit une API Javascript pour faciliter l'accès aux services REST </li></ul><ul><ul><li>Fournit l'accès aux préférences des portlets, données des profils utilisateurs...
  106. 106. Inclusion d'un tag JSP dans la portlet (accès via des variables Javascript)
  107. 107. Documentation : </li><ul><li>http://download.boulder. ibm .com/ ibmdl /pub/software/ dw / wes /0608_wp6javadoc/portal_61js.zip </li></ul></ul></ul><ul><li>Utilisation avec la technologie Flex </li></ul><ul><ul><li>Utiliser la variable Javascript pointant vers l'objet PortletWindow </li><ul><li>Une application Flex peut appeler les méthodes via ExternalInterface </li></ul><li>Définir des fonctions Javascript dans la portlet qui encapsule les opérations que vous souhaiteriez exécuter. </li></ul></ul>
  108. 108. <ul>Scénario 2 : Page Portal Flex </ul><ul><li>You pouvez concevoir un thème Flex de la manière que vous créerez un thème HTML classique.
  109. 109. Le thème Flex utilise alors les services du portail pour obtenir les éléments de navigation basé sur le rôle de l'utilisateur, la mise en page, ainsi que la liste des portlets Flex.
  110. 110. Dans ce cas, les portlets utilisent toutes un markup Flex au lieu d'un markup HTML. </li></ul>
  111. 111. WebSphere Portal & ses services REST
  112. 112. Principe d'architecture de cette approche
  113. 113. Captures d'écran Show Me!
  114. 114. Questions ?
  115. 115. crop Vincent Perrin Lotus Collaboration Expert IBM Software Group 17, avenue de l'europe Bois Colombes Tel +33 677 02 03 54 [email_address]
  116. 116. Legal Disclaimer © IBM Corporation 2009. All Rights Reserved. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both. All references to Open Financial Network and My Health refer to a fictitious companies and are used for illustration purposes only.

×