0
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
Upcoming SlideShare
Loading in...5
×

WebSphere Portal & Rich Internet Applications

1,055

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,055
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Desktop application-like expectations Responsive User Interfaces Snazzy animations Complex, beautiful UI controls
  • Application providers don&apos;t want the headache of maintaining a desktop application Testing and supporting multiple platforms and operating systems Little control over the execution environment
  • Portal is an ideal platform to deliver RIAs to your users Role based delivery of information and applications Security – authentication and authorization Single Sign On – mapping the user&apos;s portal identity to a backend identity Navigation Model – declarative approach to defining the site rather than programmatic Branding – consistent user experience throughout the site Horizontal Portal Combines portlets (application user interfaces and/or content) together into one unified presentation Delivers a highly personalized experience, considering role, personal settings, and device settings Separates site design, site/page assembly/administration, from application design Provides application integration, collaboration, single sign-on services and much more
  • Use this chart to discuss the seemingly opposing goals of web apps and desktop apps?
  • User A interacts with a RIA component, navigates to a different Portal page, interacts with different components there, then returns to the RIA component. The RIA component should return to the state it was in when User A initially left the RIA component User A interacts with a RIA component and wants to send a link in an email or Sametime chat to User B so that User B can view the RIA component in the same state as User A is viewing it.
  • Transcript of "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.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×