building portlets building portlets with ajax behavior with377

8/9/2019 Building Portlets Building Portlets With Ajax Behavior With377

1/32

Building PortletsBuilding Portletswith Ajax Behaviorwith Ajax Behavior


2/32

2

Topics

Issues with Current Portlet Architecture

Work-around

Maintaining portlet state Avoiding namespace collision

Next generation Portal server


3/32

Issues with CurrentIssues with CurrentArchitecture (forArchitecture (for

supporting Ajax) &supporting Ajax) &One work-aroundOne work-around


4/32

4

Issues with Current Portlet

Architecture No easy way to make asynchronous call

The response contains markup for the

whole page not just for the target portlet Will be addressed in JSR 186


5/32

One Work-aroundOne Work-around


6/32

6

One Work-around

Make an asynchronous call to Servlets andJSP that are bundled with the portlet> Because a portlet is a Web application that can

contain other resources, such as servlets and JSPpages

> The portlet and the servlet should be able to shareinformation between themselves through theirsesssion

> The Invoice Viewer sample includes a servlet thatyou can call to asynchronously render new contentin the portlet


7/32

Maintaining Portlet StateMaintaining Portlet State


8/328

Sharing Portlet State

When you dynamically update portletcontent with an Ajax call to a servlet, howdo you maintain the portlet's state?

> The PortletSession must store all attributes in theHttpSession of the portlet application.

> A direct consequence of this is that data stored inthe HttpSession by servlets or JSPs is accessibleto portlets through the PortletSession in the portletapplication scope.

> Conversely, data stored by portlets in thePortletSession in the portlet application scope isaccessible to servlets and JSPs through the

HttpSession.


9/329

Saving Portlet State in HTTP

Session in Servlet code InvoiceServlet stores the invoicenumber

attribute in HttpSession when doPost() isasynchronously called by the portlet, asfollows.> request.getSession().setAttribute(namespace +

".invoicenumber", invoice);


10/3210

Retrieving Portlet State from HTTP

Session in Portlet Code Portlet's main JSP page (view.jsp) can

check for the invoicenumber attribute bycalling getAttribute() on PortletSession, asfollows.


11/3211

Information Sharing Between a

Portlet and a Servlet


12/32

Using JavaScript LibraryUsing JavaScript Library


13/3213

Using JavaScript in Portlet

You can use many emerging JavaScript librariesand toolkits within a portlet's Web application> Dojo toolkit

> Many more


14/3214

Example: view.jsp

/* Use dojo.io.bind to asynchronously get invoice content. */function _loadInvoice(invoice) {

/* If an invoice was selected ... */if (invoice != null && invoice != "null") {

/* Put selected invoice value on query string. */var querystring = new Array();querystring['invoice'] = invoice;/* Set up bind arguments: */

/* url: url for request *//* method: http method *//* content: key/value mapping of parameters sent with request *//* handle: function to run when there is a response *//* mimetype:mimetype of response */var bindArgs = {

url: "",method: "POST",

content: querystring,handle: function(type, data, evt) {if (type == "error") {

/* Swap returned error message */data = "

" + data.message + "
";
}/* Swap the returned data into the div tag. */var div = document.getElementById("_content");div.innerHTML = "";div.innerHTML = data;

},mimetype: "text/html"


15/32

Avoiding NamespaceAvoiding NamespaceCollisionsCollisions


16/3216

Two Possible Areas of Namespace

collisions Portlet namespace

Dojo namespace (or any other JavaScript

toolkit library)


17/32


18/3218

Dojo Namespace Collision Issue

The sample bundles the Dojo JavaScriptlibrary in its WAR file and, once deployed,references that library. However, other

portlets on the portal might also use Dojo, butDojo allows only one top-level reference for itsreserved namespace.

Verify that it is not loaded by checking thenamespace and dynamically loading the Dojolibrary only when it is absent.

Subsequently, the script dynamically addsJavaScript on the client when the content isloaded.


19/3219

Avoid Dojo Namespace Collision

/* Load the Dojo library if it hasn't been loaded already. */if (typeof dojo == "undefined") {

/* Build script tag. */var script = document.createElement("script");script.src ="";script.type= "text/javascript";/* Insert at the top of portlet main. */

var _main =document.getElementById("_main");_main.insertBefore(script,_main.firstChild);

}


20/32

Next GenerationNext Generation

Portal Server Desktop withPortal Server Desktop withAjax SupportAjax Support


21/3221

AJAX Desktop Functional Overview

Asynchronous loading of channels and portlets

Delegates aggregation to the client (viaAjaxTableContainer)

AJAXified container controls such as refresh, maximize,minimize, and remove

Drag and drop positioning of channels

Support for multiple page layouts Seamlessly support AJAX portlets developed in

NetBeans, using the NetBeans plugin

Integrate into PS 7.x as global level container provider


22/3222

High Level Architecture


23/3223


DOJO Javascript Library

sunportal.AJAXRequest

sunportal.AJAXTableContainer

sunportal.AJAXChannel

Browser

AJAXTableContainerProvider

AJAXEditContainerProvider

HTML

JSON

Portal (Enterprise Sample)

JSON: Javascript Object Notation (www.json.org)


24/32

24


JSON: JavaScript Object Notation> It is easy for humans to read and write.

> It is easy for machines to parse and generate.

>It is based on a subset of the JavaScript ProgrammingLanguage

JSON is built on two structures:> A collection of name/value pairs. In various languages, this is

realized as an object, record, struct, dictionary, hash table,keyed list, or associative array.

> An ordered list of values. In most languages, this is realizedas an array, vector, list, or sequence.


25/32

25

Design Constraints

The AJAX Container must meet the followingconstraints:

>The client browser is required to support Javascriptand have it enabled.

>The AJAX Container will NOT automatically AJAX-enable content within a channel/portlet.

It is the channel/portlet developer's responsibilityto incorporate AJAX functionality (if required) in

the channel/portlet content.>Edit pages of channels and portlets may have to be

customized to appear properly in the inline edit box.


26/32

26

Client Side Library Design - Dojo Open source DHTML Toolkit

written entirely in Javascript

Provides easy to use Eventsystem, DOM and I/O APIs

Ships with a small core that canload packages as required

Sun is standardizing on Dojo asAJAX library of choice

Javascript library provides moreflexibility in application designthan hybrid frameworks such asDWR and GWT


27/32

27

Client Side Library Design

sunportal.AJAXTableContainer

PagePreferences

sunportal.AJAXRequest

sunportal.AJAXChannel

JSON container model JSON channel model

sunportal.AJAXTableContaineruses Dojo DOM API to construct

portal page from the JSON container model All requests made using sunportal.AJAXRequestwhich uses

Dojo I/O API

Event system uses XHR Callback model to handle server

responses


28/32

28

Desktop Server-Side Design

Desktop acts as a content service for the AJAXclient.> Requests are made via standard desktop URLs (e.g.

provider=foobar&action=content)> Responses are either:

> HTML content

> JSON messages

Desktop defers aggregating the content to the client(container model).> Powerful performance implications

> Aggregation can be half of used CPU cycles.


29/32

29

Desktop ServerDesign Get Content


30/32

JSR-286 Effort onJSR-286 Effort onAjax SupportAjax Support


31/32

JSR-286: Ajax Support

Currently asynchronous rendering of portlets is notcurrently mentioned in the Portlet Specification

AJAX (Asynchronous JavaScript technology andXML) support is vendor specific

Difficult to get AJAX working for more than one portleton a page

State is updated without server roundtrip and thus thestate that may be encoded in other portlets may bestale

Bypasses standard browser paradigms, like backbutton and reload.Lot of extra effort is required to getthese paradigms working again in an AJAXapplication


32/32

Ajax and PortletAjax and Portlet

Sang ShinSang Shin

[email protected]@sun.com

www.javapassion.comwww.javapassion.com

Java Technology ArchitectJava Technology Architect

building portlets building portlets with ajax behavior with377

Documents