Technical Note: Managing Sun Java System Portal Server 7.1 Update 1 AJAX Table Container

Overview of the AJAXTableContainerProvider

This section contains the following:

AJAXTableContainerProvider Features

The AJAXTableContainerProvider integrates Asynchronous JavaScript and XML (AJAX) capabilities at the portal framework level. The container provides asynchronous loading of individual channels and portlets. Therefore, a slow channel or portlet will not affect the loading time of the other channels and portlets on a page, improving overall performance. The AJAXTableContainerProvider includes AJAX based interaction for all container controls and features which provides for a much richer and faster user experience.

The AJAXTableContainerProvider also supports rich user interface functionality such as:

Drag and drop positioning of channels and portlets on the page.
Asynchronous interaction for channel container controls such as minimize, remove, and maximize.
Independent refresh for individual channels and portlets without refreshing the complete page.
Edit channels and portlets inline without refreshing the complete page.
Easy addition and removal of channels.
Multiple layouts for portal page.

AJAXTableContainerProvider Constraints

The AJAXTableContainerProvider has the following constraints:

Javascript must be supported and enabled on client browsers.
The AJAXTableContainerProvider will not automatically enable content within a channel or portlet for AJAX. It is the channel or portlet developer's responsibility to incorporate AJAX functionality (if required) in the channel or portlet content.
By default, channels and portlets do not display edit pages inline. The display profile property channelsEditInline must be set to true for channels that will display edit pages inline. For more information, see Display Profile properties. Edit pages of channels and portlets must be customized to appear properly in the inline edit box. This customization is required because of less screen width available for edit forms in the AJAXTableContainerProvider as compared to other containers where the complete screen width is available.
Nesting of AjaxTableContainerProvider is not supported. Only one instance of AjaxTableContainerProvider can be used per portal page.

AJAXTableContainerProvider Architecture

The AJAXTableContainerProvider is based on a hybrid architecture. Unlike other portal containers where all the processing takes place on the server and only the HTML content is returned to a browser, in the AJAXTableContainerProvider, several tasks such as page construction, style, and container controls are handled at the client side using DHTML and Javascript. The server-side component of the container provider sends a JavaScript Object Notation (JSON) message in response to requests, and the client-side JavaScript processes the JSON message to make the appropriate changes to the portal interface. Similarly, if the user modifies the portal interface, the changes are persisted to the server using AJAX.

This diagram shows the high-level architecture of the
AJAXTableContainerProvider.

The diagram shows the high-level architecture of the AJAXTableContainerProvider. The container is divided into two pieces:

Server-side Container Architecture

The AJAXTableContainerProvider is implemented as a JSPTableContainerProvider instance on the server. All the provider logic is implemented in JavaServer Page (JSP) template files of the AJAXTableContainerProvider. The container provider class remains JSPTableContainerProvider. For a content request, the AJAX Container returns a JavaScript object as a JSON representation of the display profile for the current user.

Example 1 JSON Representation of the Display Profile

An example JSON Representation of the Display Profile is shown here.

    "title": "News",
    "name": "NewsContainer",
    "layout": 3,
    "isAuthless": false,
    "maximizedChannel": "",
    "channelsIsMinimizable": {"SiteSearch": false},
    "channelsIsMinimized": {
        "NewsContainer/NextTourPoll": false,
        "SiteSearch": false
    },
    "channelsHasFrame": {
        "SiteSearch": false,
        "NewsContainer/google": true
    },
    "selectedChannels": [
        {
            "width": 1,
            "isEditable": false,
            "title": "Vote for our Next Tour",
            "description": "A poll to vote for what tour should be offered next.",
            "refreshTime": 0,
            "name": "NewsContainer/NextTourPoll",
            "id": "NextTourPoll"
        },
        {
            "width": 1,
            "isEditable": false,
            "title": "Search",
            "description": "Enter search term to search site content.",
            "refreshTime": 0,
            "name": "SiteSearch",
            "id": "SiteSearch"
        }
    ],
    "channelsIsDetachable": {"SiteSearch": false},
    "channelsRow": {
        "SiteSearch": "1",
        "NewsContainer/NextTourPoll": "1"
    },
    "refreshTime": "0",
    "isEditable": true,
    "channelsColumn": {
        "SiteSearch": "3",
        "NewsContainer/NextTourPoll": "1"
    },
    "description": Search",
    "channelsIsMaximizable": {"SiteSearch": false},
    "availableChannels": [
        {
            "width": 1,
            "isEditable": false,
            "title": "Customer Favorites",
            "description": "The top tours as rated by customers.",
            "refreshTime": 0,
            "name": "NewsContainer/CustomerFavorites",
            "id": "CustomerFavorites"
        },
        {
            "width": 2,
            "isEditable": false,
            "title": "UrlScraper Channel",
            "description": "This is a test for urlscraper",
            "refreshTime": 0,
            "name": "NewsContainer/google",
            "id": "google"
        }
    ]
}

The AJAXTableContainerProvider uses JSON Java API to construct a JSON representation of the display profile. The following JSON Java API classes are currently used in AJAXTableContainerProvider to construct the JSON message:

org.json.JSONObject
org.json.JSONArray
org.json.JSONException

Client-side Architecture

There are three high-level client side components:

AJAXTableContainerProvider JavaScript library

The AJAXTableContainerProvider JavaScript library handles the core logic of the container layout, style and container functionality. This library defines the following JavaScript classes:

sunportal.AJAXTableContainer: Defines methods that constructs the container and handles container functionality.
sunportal.AJAXChannel: Defines methods for individual channel control and display. A separate instance of this class is created for each channel on the page.
sunportal.AJAXRequest: Defines methods that handle the AJAX network Input and Output.
sunportal.AJAXPageOptions: Defines methods that handle the page preferences module.
sunportal.AJAXAddContent: Defines methods to preview and add new container content.
sunportal.AJAXPageStyles: Defines methods to modify the container style.
sunportal.AJAXChangeLayout: Defines methods to modify the container layout.
sunportal.AJAXUtils: Utility methods for other package classes.
portal.dnd.ChannelDropTarget: Defines methods for drag and drop functionality.
portal.dnd.ChannelDragSource: Defines methods for drag and drop functionality.

AJAXTableContainerProvider CSS

The AJAXTableContainerProvider ships with three out-of-the-box CSS themes: blue, orange and gray. Each CSS theme has the following directory structure:

styles
|---- <css theme name>
| |---- PrintableFloatingPane.css
| |---- images
| | |---- ajaxChannelEdit.png
| | |---- ajaxChannelHelp.png
| | |---- ajaxChannelMaximize.png
| | |---- ajaxChannelMinimize.png
| | |---- ajaxChannelRefresh.png
| | |---- ajaxChannelRemove.png
| | |---- ajaxChannelTitlebarBackground.gif
| | |---- ajaxChannelUnmaximize.png
| | |---- ajaxChannelUnminimize.png
| | |---- preview.png
| |---- screen.css

To create a customized theme, developers can copy an existing theme directory and modify the screen.css file, PrintableFloatingPane.css file, and the images to desired design and color. The screen.css file defines all the CSS classes used by the container. The PrintableFloatingPane.css is used by the floating pane widget that is used by some channels in the container.

Dojo JavaScript library

The AJAXTableContainerProvider uses Dojo, an open source Javascript library, for all the DOM manipulation, network I/O and visual effects. More information about Dojo can be found at http://www.dojotoolkit.org. The Dojo packages & classes used in the container are listed below

dojo.io.*
dojo.event.*
dojo.html
dojo.widget.Toggler
dojo.widget.ContentPane
dojo.widget.Dialog
dojo.dnd.*
dojo.fx.html

AJAXEditContainer Overview

In addition to AJAXTableContainerProvider, an AJAXEditContainer is also implemented. AJAXEditContainer allows inline editing of channel preferences from the AJAXTableContainerProvider. AJAXEditContainer is an instance of JSPSingleContainerProvider. AJAXEditContainer sends back HTML content for edit pages, and a JSON response upon successful completion of edit process. Examples of JSON messages returned by the AJAXEditContainer are shown below.

Example 2 Success Message

{
   "response": {
        "status": "SUCCESS",
        "messages": [
            ""
        ]
    }
}

Example 3 Failure Message

{
   "response": {
        "status": "FAIL",
        "messages": [
           "A serious error has occured in the Desktop. 
						This may have been caused by a mis-configuration on the server.",
           "Please report this problem to your administrator.",
           "Possible causes : Your session has expired or has been otherwise 
						terminated. Please re-login.",
       ]
   }

}