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