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 54vincent.perrin@fr.ibm.com

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