Building Portlets Building Portlets with Ajax Behavior with ...
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Building Portlets Building Portlets with Ajax Behavior with ...






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Building Portlets Building Portlets with Ajax Behavior with ... Presentation Transcript

  • 1. Building Portlets with Ajax Behavior
  • 2. Topics • Issues with Current Portlet Architecture • Work-around • Maintaining portlet state • Avoiding namespace collision • Next generation Portal server 2
  • 3. Issues with Current Architecture (for supporting Ajax) & One work-around
  • 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 4
  • 5. One Work-around
  • 6. One Work-around • Make an asynchronous call to Servlets and JSP that are bundled with the portlet > Because a portlet is a Web application that can contain other resources, such as servlets and JSP pages > The portlet and the servlet should be able to share information between themselves through their sesssion > The Invoice Viewer sample includes a servlet that you can call to asynchronously render new content in the portlet 6
  • 7. Maintaining Portlet State
  • 8. Sharing Portlet State • When you dynamically update portlet content with an Ajax call to a servlet, how do you maintain the portlet's state? > The PortletSession must store all attributes in the HttpSession of the portlet application. > A direct consequence of this is that data stored in the HttpSession by servlets or JSPs is accessible to portlets through the PortletSession in the portlet application scope. > Conversely, data stored by portlets in the PortletSession in the portlet application scope is accessible to servlets and JSPs through the HttpSession. 8
  • 9. Saving Portlet State in HTTP Session in Servlet code • InvoiceServlet stores the invoicenumber attribute in HttpSession when doPost() is asynchronously called by the portlet, as follows. > request.getSession().setAttribute(namespace + ".invoicenumber", invoice); 9
  • 10. Retrieving Portlet State from HTTP Session in Portlet Code • Portlet's main JSP page (view.jsp) can check for the invoicenumber attribute by calling getAttribute() on PortletSession, as follows. <% // Check for invoice in session. String invoice = (String)renderRequest.getPortletSession().getAttribute( namespace + ".invoicenumber", PortletSession.APPLICATION_SCOPE); %> 10
  • 11. Information Sharing Between a Portlet and a Servlet 11
  • 12. Using JavaScript Library
  • 13. Using JavaScript in Portlet • You can use many emerging JavaScript libraries and toolkits within a portlet's Web application > Dojo toolkit > Many more 13
  • 14. Example: view.jsp <script type="text/javascript"> /* Use to asynchronously get invoice content. */ function <portlet:namespace/>_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: "<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/ InvoiceServlet")%>", method: "POST", content: querystring, handle: function(type, data, evt) { if (type == "error") { /* Swap returned error message */ data = "<p style='color:red'>" + data.message + "</p>"; } /* Swap the returned data into the div tag. */ var div = document.getElementById("<portlet:namespace/>_content"); div.innerHTML = ""; div.innerHTML = data; }, mimetype: "text/html" 14
  • 15. Avoiding Namespace Collisions
  • 16. Two Possible Areas of Namespace collisions • Portlet namespace • Dojo namespace (or any other JavaScript toolkit library) 16
  • 17. Avoid Portlet Namespace Collision • Each portlet window (from the same portlet) should have its own namespace > Use <portlet:namespace/> > Apply it to both functions and variables • Example > <portlet:namespace/>_loadInvoice = function (invoice) { > ... > <div id="<portlet:namespace/>_content"></div> 17
  • 18. Dojo Namespace Collision Issue • The sample bundles the Dojo JavaScript library in its WAR file and, once deployed, references that library. However, other portlets on the portal might also use Dojo, but Dojo allows only one top-level reference for its reserved namespace. • Verify that it is not loaded by checking the namespace and dynamically loading the Dojo library only when it is absent. • Subsequently, the script dynamically adds JavaScript on the client when the content is loaded. 18
  • 19. Avoid Dojo Namespace Collision <div id="<portlet:namespace/>_main"> <script type="text/javascript"> /* 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 = "<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/js dojo.js") %>"; script.type= "text/javascript"; /* Insert at the top of portlet main. */ var <portlet:namespace/>_main = document.getElementById("<portlet:namespace/>_main"); <portlet:namespace/>_main.insertBefore(script, <portlet:namespace/>_main.firstChild); } </script> 19
  • 20. Next Generation Portal Server Desktop with Ajax Support
  • 21. AJAX – Desktop Functional Overview • Asynchronous loading of channels and portlets • Delegates aggregation to the client (via AjaxTableContainer) • 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 21
  • 22. High Level Architecture 22
  • 23. High Level Architecture Browser Portal (Enterprise Sample) AJAXTableContainerProvider DOJO Javascript Library ￧ HTML sunportal.AJAXTableContainer AJAXEditContainerProvider JSON sunportal.AJAXChannel sunportal.AJAXRequest JSON: Javascript Object Notation ( 23
  • 24. High Level Architecture • 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 Programming Language • 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 realized as an array, vector, list, or sequence. 24
  • 25. Design Constraints • The AJAX Container must meet the following constraints: >The client browser is required to support Javascript and have it enabled. >The AJAX Container will NOT automatically AJAX- enable content within a channel/portlet. – It is the channel/portlet developer's responsibility to 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. 25
  • 26. Client Side Library Design - Dojo • Open source DHTML Toolkit written entirely in Javascript • Provides easy to use Event system, DOM and I/O APIs • Ships with a small core that can load packages as required • Sun is standardizing on Dojo as AJAX library of choice • Javascript library provides more flexibility in application design than hybrid frameworks such as DWR and GWT 26
  • 27. Client Side Library Design PagePreferences sunportal.AJAXTableContainer sunportal.AJAXChannel JSON container model JSON channel model sunportal.AJAXRequest • sunportal.AJAXTableContainer uses Dojo DOM API to construct portal page from the JSON container model • All requests made using sunportal.AJAXRequest which uses Dojo I/O API • Event system uses XHR Callback model to handle server responses 27
  • 28. Desktop Server-Side Design • Desktop acts as a content service for the AJAX client. > 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. 28
  • 29. Desktop Server Design – Get Content 29
  • 30. JSR-286 Effort on Ajax Support
  • 31. JSR-286: Ajax Support • Currently asynchronous rendering of portlets is not currently mentioned in the Portlet Specification • AJAX (Asynchronous JavaScript technology and XML) support is vendor specific • Difficult to get AJAX working for more than one portlet on a page • State is updated without server roundtrip and thus the state that may be encoded in other portlets may be stale • Bypasses standard browser paradigms, like back button and reload.Lot of extra effort is required to get these paradigms working again in an AJAX application
  • 32. Ajax and Portlet Sang Shin Java Technology Architect