AJAXTableContainerProvider Architecture

The AJAXTableContainerProvider integrates Asynchronous JavaScript and XML (AJAX) capabilities at the portal framework level. The container provides asynchronous loading of individual channels and portlets.

This section contains the following sections:

• Server-side Container Architecture

• Client-side 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.

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

• Server-side Container Architecture

• Client-side Architecture

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 5–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

• AJAXTableContainerProvider CSS

• Dojo JavaScript library

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