Les technologies RIA et
WebSphere Portal Server
Dcouvrir l'univers des possibles en termes d'expriences utilisateurs
Dcouvrir les technologies RIA
Imaginer les possibilits d'intraction
Comprendre la complmentarit avec WebSphere Portal
Voir des dmonstrations de ces technologies
Objectifs de cette session
Agenda
Introduction aux technologies RIA
Les RIAs & WebSphere Portal
Deux exemples d'intgration/introprabilit : Dojo
FLEX
Dmonstrations
Nouvelles attentes
Les attentes des utilisateurs sont de plus en plus grandes...
Le Web 2.0 est devenu la norme.
Desktop application-like expectationsResponsive User InterfacesSnazzy animationsComplex, beautiful UI controls
Problme des fournisseurs d'applications.
Maintenance des applications Client
Test et support sur de multiples plateformes et systmes d'exploitation
Peu de contrle sur l'environnement d'xcution.
Application providers don't want the headache of maintaining a desktop applicationTesting and supporting multiple platforms and operating systemsLittle control over the execution environment
RIA Rich Internet Application ?
Rich Internet applications (RIAs) est une application web qui offre des caractristiques similaires aux logiciels traditionnels installs sur un ordinateur. La dimension interactive et la vitesse d'excution sont particulirement soignes dans ces applications web.
Ce que les experts pensent !!
...Nearly 60 percent of all new application developpment will include RIA technology by 2010. (Gartner)
Les diffrents acteurs...
AJAX et ces frameworks : Dojo, jQuery, Scriptaculous and the like
Adobe : Flex & AIR
Microsoft Silverlight
JavaFX
HTML 5 (bientt)
Adoption des technologies RIA
Le portail est un point daccs unique, personnalis et scuris aux applications, processus, personnes et contenus
Modle de navigation
Charte graphique
Rle
Scurit
Single Sign On
Portal is an ideal platform to deliver RIAs to your usersRole based delivery of information and applicationsSecurity authentication and authorizationSingle Sign On mapping the user's portal identity to a backend identityNavigation Model declarative approach to defining the site rather than programmaticBranding consistent user experience throughout the site
Horizontal PortalCombines 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
Quel direction prendre ?
Use this chart to discuss the seemingly opposing goals of web apps and desktop apps?
Pourquoi utiliser une technologie RIA
avec WebSphere Portal ?
Amliorer l'interface utilisateur
Rafraichissement partiel
Manipulation cot client des donnes
Rduction de la bande passante
Dojo
Dojo est un framework open source en JavaScript.
Son but est le dveloppement rapide d'applications en Javascript excutes ct client et communiquant avec le serveur avec une granularit infrieure la page grce Ajax.
L'architecture Dojo
WebSphere Portal & Dojo
Depuis WebSphere Portal 6.1, IBM utilise intensivement le toolkit Dojo.
Thme Web 2.0
Thme Customizer
Page Builder
WebSphere Portlet Factory & Dojo
Dojo Animation
Dojo Date/Time Picker
Dojo Form Dialog
Dojo Page Element
Dojo Data Grid
Dojo Data Store
Dojo Rich Text
Dojo Drag Source
Dojo Drop Target
Dojo Progress Indicator
Show Me!
Adobe Flex
Adobe Flex est une solution de dveloppement cre par Macromedia en 2004, puis reprise par Adobe en 2006, permettant de crer et de dployer des applications Internet riches (RIA) multi plates-formes grce la technologie Flash et particulirement son lecteur. Son modle de programmation fait appel MXML (bas sur XML) et ActionScript 3.0, reposant sur ECMAScript.
Deux scnarios d'intgration
Scnario 1 : Intgration de composants Flex et non Flex dans une page Portail.
Scnario 2 : Thme Flex intgrant uniquement d'autres composants FLEX, utilisant les services REST de WebSphere Portal.
Ces deux scnarios vont tre abords dans les slides suivants.
Enrichissement des applications composites...
role-based
composite applications
in context
process-driven
IBM WebSphere Portal
JSR 286
composite applications
iWidget
FLEX
IBM WebSphere Portal
Avec des applications FLEX
Exprience Utilisateur
Flex Portlets
HTML Portlets
Show Me!
Elments considrer pour une bonne intgration
Quand vous intgrez n'importe quel RIA dans un portal ou dans un site qui intgre de multiple contenus ou application, il vous faut considrer trois choses : L'tat de navigation,
La communication inter-portlets,
Accs aux paramtres et APIs des portlets.
L'tat de navigation
L'tat de navigation inclut des informations tel que la page selecte, le mode des portlets (View, Personalize, etc.), les tats des portlets (Maximis, Minimis, etc.)
WebSphere Portal stocke cette information dans l'URL :
L'tat de navigation est important pour :
Bookmarkabilit
Support des boutons Back et Forward
Addressabilit, Indexation...
Considration: Gnralement, les RIAs se met jour compltement sur le client.
L'URL n'est pas mis jour avec cette nouvelle vue.
Si un rafraichissement de la page se passe du ...la navigation sur une autre page
...L'utilisation des boutons Back et Forward
Alors l'application RIA revient son tat initial, sauf via l'utilisation de service du portail permettant le maintien de l'tat actuel.
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.
Communications Inter-portlet (IPC)
Qu'est ce que c'est ?
Permet des applications indpendantes de cooprer pour fournir une exprience utilisateur plus intuitive
Passer des informations complexes entre des applications
Par exemple, une application ayant une liste de produits, que l'on souhaite afficher dans une application Flex.
La cl pour la notion d'application compose
Pourquoi des prcautions particulires avec les RIA ?
Les vnements portlets requiert un rafraichissement complet de la page, les informations sont envoys au serveur pour tre redistribus. Mme en mode CSA.
Souvenez vous : Un rafraichissement annulera toutes les informations contenues dans les RIA.
Portlet APIs
Qu'est ce que c'est ?
L'ensemble des donnes qu'un dveloppeur accde normalement par le biais des APIs des portlets
Donnes des portlets (Prferences, Session, Paramtre de rendu)
API de la portlet Service REST d'accs aux prfrences de la portlet
Service REST d'accs aux informations Utilisateurs.
Service REST d'accs aux modes des portlets.
Pourquoi ?
Accs aux donnes personnalis
Preferences des Portlets
Etat de navigation
Tirer parti de tous les services de la solution WebSphere Portal
Comment adresser ces challenges ?
Tous les lments ncessaires pour adresser ces challenges pour les RIAs sont actuellement disponible dans WebSphere Portal.
WebSphere Portal 6.1 fournit le support de la spcification Portlet V2 (JSR 286)
Standard des communications inter-portlets.
Support des PortletFilters
Support des ResourceRequests
WebSphere Portal 6.1 fournit galement un nouveau modle de programmation cot client :
JavaScript API pour accder aux donnes des portlet
Le reste est juste l'utilisation des standards J2EE, HTML et Javascript.
L'tat de navigation - Persistance
Persistance
Besoin de stockage cot client
Par exemple, par l'utilisation de cookies
Dfiner deux oprations: setClientRenderParameter et getClientRenderParameterIl suffit de dfinir et d'extraire une valeur de cookie donn un espace de noms (instance de portlet), un nom de paramtre et une valeur de paramtre.
Comment l'obtenir ?
Flex -> ExternalInterface permet l'appel de fonction Javascript
Dojo -> natif
Modifications de l'application Flex :
Elle doit appeler ces nouvelles fonctions Javascript pour passer les paramtres de rendu client
L'tat de navigation - Persistance
Persistence
Besoin de stockage cot client
Par exemple, par l'utilisation de cookies
Dfinier deux oprations: setClientRenderParameter et getClientRenderParameterIl suffit de dfinir et d'extraire une valeur de cookie donn un espace de noms (instance de portlet), un nom de paramtre et une valeur de paramtre.
Comment l'obtenir ?
Flex -> ExternalInterface permet l'appel de fonction Javascript
Dojo -> natif
Modifications de l'application Flex :
Elle doit appeler ces nouvelles fonctions Javascript pour passer les paramtres de rendu client
L'tat de navigation - Persistance
Persistence
Besoin de stockage cot client
Par exemple, par l'utilisation de cookies
Dfinier deux oprations: setClientRenderParameter et getClientRenderParameterIl suffit de dfinir et d'extraire une valeur de cookie donn un espace de noms (instance de portlet), un nom de paramtre et une valeur de paramtre.
Comment l'obtenir ?
Flex -> ExternalInterface permet l'appel de fonction Javascript
Dojo -> natif
Modifications de l'application Flex :
Elle doit appeler ces nouvelles fonctions Javascript pour passer les paramtres de rendu client
L'tat de navigation URL Adressable
La norme JSR 286 a introduit la fonction PortletFilters
Crer un PortletFilter qui prend tous les cookies commenant par l'identifiant unique et exposer les comme paramtres.
La portlet utilise ces paramtres pour son initialisation et pour encoder l'url du Portal.
Communications Inter-portlet (IPC)
Client-side
Communications Inter-portlet (IPC)
Server-side
Server-side: JSR 286
Utilisation du standard JSR 286 d'vnement.
Chaque portlet dclare ces vnements dans le fichier portlet.xml
Le controle graphique Flex peut utiliser l'ActionURL et le service HTTP pour dclencher l'vnement :
Cette approche est expliqu dans l'article suivant :
Using AdobeFlexinJSR-286Portlets
http://www-10.lotus.com/ldd/portalwiki.nsf/dx/17.09.2008050832WEBCQV.htm
Problme avec cette approche le rafraichissement de la page
Client-side Communications
Mode Broadcast
Defini une fonction JavaScript pour envoyer l'vnement et souscrire un message particulier (broadcast, addSubscriber)
Ajouter l'appel dans l'application Flex mettrice pour envoyer des messages
Ajouter l'appel dans l'application Flex rceptrice
Mode wired
Mme approche que le mode Broadcast
Ajout d'une fonction Javascript additionnelle pour enregistrer les liens (source et cible)
Dclarer les vnements de publication et souscription dans le fichier Declare publishing and subscribing events in the portlet.xml
Utiliser Portlet Object Model to retrieve the CommunicationEndpoints de la portlet et gnrer les appels Javascript dans la portlet pour enregistrer les liens.
Integrating AdobeFlexwithIBMWebSpherePortal
http://www-10.lotus.com/ldd/portalwiki.nsf/dx/06032009113331AMWEBL9H.htm
Autres mthodes :
Utilisation de JMS
Flex Parameters
Utilisation de Local Connection
Donnes des Portlets
Les donnes peuvent tre accder par les services REST.
Le modle CSA fournit une API Javascript pour faciliter l'accs aux services REST
Fournit l'accs aux prfrences des portlets, donnes des profils utilisateurs...
Inclusion d'un tag JSP dans la portlet (accs via des variables Javascript)
Documentation :http://download.boulder.ibm.com/ibmdl/pub/software/dw/wes/0608_wp6javadoc/portal_61js.zip
Utilisation avec la technologie Flex
Utiliser la variable Javascript pointant vers l'objet PortletWindow Une application Flex peut appeler les mthodes via ExternalInterface
Dfinir des fonctions Javascript dans la portlet qui encapsule les oprations que vous souhaiteriez excuter.
Scnario 2 : Page Portal Flex
You pouvez concevoir un thme Flex de la manire que vous crerez un thme HTML classique.
Le thme Flex utilise alors les services du portail pour obtenir les lments de navigation bas sur le rle de l'utilisateur, la mise en page, ainsi que la liste des portlets Flex.
Dans ce cas, les portlets utilisent toutes un markup Flex au lieu d'un markup HTML.
WebSphere Portal & ses services REST
Principe d'architecture de cette approche
Captures d'cran
Show Me!
Questions ?
cropVincent PerrinLotus Collaboration ExpertIBM Software Group
17, avenue de l'europeBois ColombesTel +33 677 02 03 [email protected]
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 IBMs 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 IBMs 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.
Click to edit the title text format
Click to edit the title text format
Click to edit the title text format
Click to edit the title text format
Click to edit the title text format
Click to edit the title text format
Click to edit the title text format, one or two lines maximum
Click to edit the outline text formatSecond Outline LevelThird Outline Level
Global_cover_0109.jpg
Click to edit the title text format, one or two lines maximum
Click to edit the outline text formatSecond Outline LevelThird Outline Level
IBM Software Group
2009 IBM Corporation
IBM Global Services
Copyright IBM Corporation 2004
2004 IBM Corporation
Confidentiel IBM & La Poste Ne pas diffuser sans accord
IBM Confidential
IBM Software Group | WebSphere Portal
IBM WebSphere Portal Industry Toolkits & Industry Templates
IBM Software Group | WebSphere Commerce softwareWebSphere Commerce | Solution de e-commerce 2008 IBM Corporation
IBM logo must not be moved, added to, or altered in
any way.
Background should
not be modified.
Title/subtitle/confidentiality line: 10pt Arial Regular,
white
Maximum length: 1 line
Information separated by vertical strokes,
with two spaces on either side
Slide heading:
28pt Arial Regular,
blue R120 | G137 | B251
Maximum length: 2 lines
Slide body:
18pt Arial Regular, black
Square bullet color:
teal R045 | G182 | B179
Recommended maximum text length: 5 principal points
Group name:
14pt Arial Regular, white
Maximum length: 1 line
Copyright: 10pt Arial
Regular, white
Optional slide number:
10pt Arial Bold, white
Template release: Oct 02
For the latest, go to http://w3.ibm.com/ibm/presentations
Indications in green = Live content Indications in white = Edit in masterIndications in blue = Locked elementsIndications in black = Optional elements
IBM Confidential
template-titre2.jpgtemplate-couv2.jpgtemplate-Ltitre1.jpg
template-couv2.jpgtemplate-interieur1.jpgombre
Click to edit the title text format, one or two lines maximum
Click to edit the outline text formatSecond Outline LevelThird Outline Level
IBM Software Group | Lotus software