Architecture

The javascript components used in LAS are designed to encapsulate independent blocks of information or functionality. These modular units provide a more robust, more uniform API to the user interface developer. The LAS javascript components are included in a web page by adding them to the header section of a web page with javascript include statements much as libraries or packages are included in C or Java programs:

<script type="text/javascript" src="JavaScript/components/xmldom.js"></script>
<script type="text/javascript" src="JavaScript/components/LASRequest.js"></script>
<script type="text/javascript" src="JavaScript/components/json.js"></script>
<script type="text/javascript" src="JavaScript/components/LASResponse.js"></script>
<script type="text/javascript" src="JavaScript/components/sarissa.js"></script>
<script type="text/javascript" src="JavaScript/components/LASContentCell.js"></script>

Some of the libraries above (xmldom.js, json.js, sarissa.js) are third party libraries and provide functionality required by the LAS javascript components. All of the other libraries define javascript objects that can be used elsewhere in javascript code. (These javascript objects are equivalent to java classes and the terms will be used interchangably.) As an example, here is some javascript code that initializes and modifies an LASRequest object that will be used to send a product request to LAS:

var Request = new LASRequest();
Request.setOperation('Plot_2D_XY');
Request.setProperty('ferret','view','xy');
Request.setProperty('las','output_type','json');

The LAS javascript components (aka libraries) define three kinds of fundamental objects:

LASRequest object

This object can be initialized with an XML LASRequest. It provides an API with setters and getters for each of the components inside the LASRequest DOM.

LAS...Response objects

These objects wrap responses from the LAS product server and provide a simple API for accessing information from the responses. They provide a layer of abstraction on top of the responses that can hide changes in the responses from one version of LAS to the next.

...Widget objects

These objects generate intelligent user interface components that simplify the construction of higher level user interfaces.

Simple Examples

If you'd rather learn from examples than documentation, you can point your browser to the following directory on your LAS site:

http://your.domain.name/las_name/examples

This directory contains a few examples of how to build simple web pages that can allow users to make requests of an LAS product server without going through the LAS UI.  If you are tailoring an interface to a specific audience or a specific dataset you might consider constructing your own interface from the LAS components.

Inside the LAS distribution, these examples can be found at:

$LAS_HOME/WebContent/examples/

LASRequest

The LASRequest object is used to generate a valid XML LASRequest that can be sent to to the LAS product server.  By default, the LASRequest object will initialize to a request for an XY color plot of COADS climatology Sea Surface Temperature.  This default dataset is part of the basic LAS installation.

You can also pass an XML LASRequest string when initializing the LASRequest object.  Full details are given in the page below:

LASRequest

Simplifies creation of an LASRequest XML string that will be sent to ProductServer.do

Response Wrappers

The LAS product server provides one servlet for requesting products and several others for requesting information used to dynamically modify the LAS user interface.  Each servlelt can generate a JSON response that is handled by the appropriate javascript response wrapper as described below.

Product Response

The ProductServer.do servlet is unique in that it responds to an LAS Request with a response that can be delivered in several formats.

1. By default, the product server returns an HTML page.
2. If the LASRequest contains <properties><las><output_type>json</output_type></las></properties>
   a JSON response will be returned.
3. If the LASRequest contains <properties><las><output_type>xml</output_type></las></properties>
   an XML response will be returned.

The LASRequest object described above allows you to set this property in javascript code with the following lines:

var Request = new LASRequest();
Request.setProperty('las', 'output_type', 'json');

The JSON response returned by the product server is handled by the following wrapper:

LASResponse

Wraps the JSON response from ProductServer.do

UI Information Response

The information servlets are typically accessed AJAX style (i.e. without a page refresh) using the XMLHTTPRequest method. These servlets respond with a block of information serialized using JSON. The response wrappers instantiate this JSON object and then encapsulate it with a number of accessor methods so that the UI designer/javascript developer never needs to deal directly with the response. Each of the following information servlets has an associated javascript wrapper that encapsulates the response. The response wrappers are each described on their own page.

LASGetDatasetsResponse

Wraps the response from getDatasets.do

LASGetVariablesResponse

Wraps the response from getVariables.do

LASGetViewsResponse

Wraps the response from getViews.do

LASGetGridResponse

Wraps the response from getGrid.do

LASGetOperationsResponse

Wraps the response from getOperations.do

Widgets

The javascript components with "Widget" in their name all provide visible componets that are used to generate user interfaces.  Several are generic but those that begin with "LAS" are specific to LAS.  The widgets are each described in detail on their page.

MenuWidget

Creates a selector from a JSON object.

LatitudeWidget

Creates an latitude selector from a domain, range and step size.

LongitudeWidget

Creates longitude selector from a domain, range and step size.

DateWidget

Creates smart date selectors that restrict users to valid dates.

 LASContentCell

Handles display of results identified in the LASResponse.

LASSlideSorter

Creates the table of images with cells determined by user selections.

Widget Interface

The Widget components used by LAS present a (mostly) uniform interface to UI developers.  This allows higher level tools like the SlideSorter to work with Widget components interchangably.  The basic suite of methods that comprise the Widget Interface are the following:

new

creates a new Widget object

render

instantiates the Widget in the HTML DOM

show

sets the Widget's container style to 'visibility = visible'

hide

sets the Widget's container style to 'visibility = hidden'

enable

sets the Widget property 'disabled = 0'

disable

sets the Widget property 'disabled = 1'

getValue

returns the currently select value in the Widget

setValue

sets the Widget to the provided value

setValueByIndex

sets the Widget to the value associated with the provided index  

setCallback

associates the onChange event with a named javascript method

User Interface developers should endeavor to use this API for their interactions with the Widgets as much as possible.  It is expected that this Interface will remain stable even when other methods associated with the widgets are changed as the software is upgraded.

As currently written, the Widget components do not take advantage of inheritance properties.  A future rewrite of the Widget code should probably build from an abstract Widget.js class that implements the interface just described.  Specific Widgets like the Latitude Widget would inherit the base methods and then use the javascript prorotype() method to add additional methods.

Creating new Widgets

New widgets with particular UI behavior can be constructed based on the examples provided.  When creating a new widget that will be used as part of the LAS suite of components, the most important thing to remember is to implement the Interface described above.  The MenuWidget is the simplest example to start from and the DateWidget demonstrates the highest level of complexity.  The combination of JavaScript, CSS2 and good support for the HTML DOM in modern browsers makes it possible to create very interactive user interface components that can be linked together to create compelling interfaces.  Have fun!