End-to-end Ajax application development, Part 2: Implement the Ajax client and server tiers

/*
============================================================
Project: End-to-End-Ajax application development

Purpose: This is an example scenario to be used in
 an IBM developerWorks article.

Last modified: May/12/2007.

This file provides CSS rules that are used to style the 
UI controls for the bank teller browser application.
This application doesn't address all the features of 
CSS. However, basic and important aspects of CSS
are included here in the context of the bank teller
application.
============================================================
*/
/*
This is a HTML selector that redefine the body tag with
font and background attributes.
*/
body {
   font-family:       Verdana, Geneva, Arial, sans-serif;
   font-size:         medium;
   text-align:        center;
   background:        rgb(220, 220, 220);
}

/*
This is a HTML selector used to style the <h1> element.
*/
h1 {
   color:             #cc6600;
   border-bottom:     medium double #888888;
   font-size:         1.7em;
}

/*
This CSS ID class is applicable for the DIV element that holds the table in which
all the available teller operations are listed.
*/
#tellerOptions {
   margin-left:       3%;
   margin-right:      3%;
   padding-top:       10px;
   padding-bottom:    10px;
   border:            red;
   border-width:      thick;
   border-style:      double;
   border-collapse:   collapse;     
}

/*
This qualified dependent selector applies style to the teller option table.
*/
table.tellerOptionsTable td {
   padding-top:       10px;
   padding-bottom:    10px;
}

/*
This CSS generic class is applicable to style the margins for the
tables in the teller actions form.
*/
.tellerOptionsTable,
.depositActionTable, 
.debitActionTable,
.portfolioActionTable {
   margin-top:        30px;   
}

/*
This CSS generic class is applicable for the SPAN elements that hold the clickable text
representing various teller operations. User can select an operation to perform from
this list. Generic class is used here so that inside of JavaScript, we can dynamically
change the style of the text representing the teller operations as the user mouseover or
mouseout of those text regions defined within the SPAN elements.
The following is the default style when there is no user mouse activity or when the user
moves the mouse out.
*/
.tellerOptionsLink {
   cursor:            pointer;
   background-color:  rgb(220, 220, 220);
   color:             blue;
   font-weight:       bold;
   font-style:        normal;
   text-decoration:   none;
   border-style:      none;
}

.tellerOptionsLinkSelection,  
.goToMainMenuLinkSelection {
   cursor:            pointer;
   background-color:  green;
   color:             yellow;
   font-weight:       normal;
   font-style:        italic;
   text-decoration:   none;
   border-style:      ridge;
   border-width:      7px;
   border-top-width:  7px;
   border-color:      black;   
}

.depositAction {
   margin-left:       3%;
   margin-right:      3%;
   padding-top:       10px;
   padding-bottom:    10px;
   cursor:            default;
   border:            navy;
   border-width:      thick;
   border-style:      double;
   border-collapse:   collapse;
}

.debitAction {
   margin-left:       3%;
   margin-right:      3%;
   padding-top:       10px;
   padding-bottom:    10px;   
   cursor:            default;
   border:            lightseagreen;
   border-width:      thick;
   border-style:      double;
   border-collapse:   collapse;
 }

.portfolioAction {
   margin-left:       3%;
   margin-right:      3%;
   padding-top:       10px;
   padding-bottom:    10px;
   cursor:            default;
   border:            purple;
   border-width:      thick;
   border-style:      double;
   border-collapse:   collapse;
}

.tellerActionResult {
   margin-left:       3%;
   margin-right:      3%;
   padding-top:       10px;
   padding-bottom:    10px;
   cursor:            default;
   border:            rosybrown;
   border-width:      thick;
   border-style:      double;
   border-collapse:   collapse;
}

/*
This qualified CSS generic class defines the cell padding for the buttons in the 
teller actions form and others.
*/
table.depositAmountButtonTable td, 
table.debitAmountButtonTable td,
table.portfolioValueButtonTable td, 
table.tellerActionResultTable td {
   padding-left:      25px;
   padding-right:     25px;   
}

/*
This qualified CSS generic class defines the margin for the tables holding 
the teller actions form and others.
*/
table.depositAmountButtonTable,
table.debitAmountButtonTable,
table.portfolioValueButtonTable,
table.tellerActionResultTable {
   margin-top:        40px;
}

.depositActionFormTitle,
.debitActionFormTitle, 
.portfolioActionFormTitle,
.tellerActionResultTitle {
   color:             olive;
   font-weight:       normal;
   font-style:        normal;
   text-decoration:   underline;
   text-align:        center;
}

/*
This qualified CSS generic class is applicable in order to set the cellpadding for 
the table <td> where the footer options are listed.
*/
table.footerTable td {
   padding-left:      100px;
   padding-right:     100px;
}

/*
This qualified CSS generic class is applicable in order to set the margin for the 
table where the footer options are listed.
*/
table.footerTable {
   margin-top:        20px;
}

/*
This CSS generic class is applicable for the static display of the current username
who is logged into the system.
*/
.currentUserDisplay {
   cursor:            default;
   background-color:  rgb(220, 220, 220);
   color:             darkred;
   font-weight:       normal;
   font-style:        normal;
}

/*
This CSS generic class is applicable for the SPAN elements that hold the clickable text
representing footer options. User can select to logout from the system. 
Generic class is used here so that inside of JavaScript, we can dynamically
change the style of the text representing the logout link as the user mouseover or
mouseout of those text regions defined within the SPAN elements.
The following is the default style when there is no user mouse activity or when the user
moves the mouse out.
*/
.gotoMainMenuLink {
   cursor:            pointer;
   background-color:  rgb(220, 220, 220);
   color:             black;
   font-weight:       bold;
   font-style:        normal;
   text-decoration:   none;
   border-style:      none;
}

/*
This CSS ID class is applicable for the Teller actions button and others.
*/
#depositAmountActionButton, 
#debitAmountActionButton,
#portfolioActionButton {
   background-color:  saddlebrown;   
   color:             white;   
   border:            purple;
   border-width:      thin;
   border-style:      inset;
   font-weight:       bold;
   font-style:        normal;   
   font-size:         90%
}

/*
The following overrides a style defined previously in the same class.
*/
#debitAmountActionButton {
   background-color:  midnightblue;   
}

/*
The following overrides a style defined previously in the same class.
*/
#portfolioActionButton {
   background-color:  teal;   
}
		

/*
============================================================
Project: End-to-End-Ajax application development

Purpose: This is an example scenario to be used in
 an IBM developerWorks article.

Last modified: May/12/2007.

This JavaScript file provides specific functions related to
XHR (XML HTTP Request). The logic explained here is a
generic one which is being used hundreds of other 
Web applications. This logic can be found in any
Ajax related book or article that describes the inner
workings of XHR. 
============================================================
*/

/*
============================================================
Function: createRequest

Last Modified: May/12/2007

This function creates an XHR object that is browser
agnostic. As of this writing, XHR is somewhat browser
dependent. We can divide XHR support in two major classes
of browsers i.e. Internet Explorer and non-IE browsers.
Then, within IE, there are different implementations of
XHR in pre-IE6 and the rest. In summary, Microsoft
supports XHR through its ActiveX. After listening to
complaints from the Web developer community, Microsoft
realized the need to expose XHR as a native browser
object as done in other browsers. The rumor is that
we will soon see XHR support in IE browsers via
XMLHttpRequest object. Until then, we have to take care of
browser dependency as shown in this function.
============================================================
*/
function createRequest() {
   // Define a local variable and set it to null.
   var request = null;

   // Try different things to see which browser is being used.   
   try {
      // Non Microsoft browsers (Firefox, Safari etc.)
      request = new XMLHttpRequest();
   } catch(trymicrosoft) {
      try {
         // IE6 and above.
         request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(othermicrosoft) {
         try {
            // Older versions of IE i.e. pre-IE6.
            request = new ActiveXObject("Microsoft.XMLHTTP");
         } catch(failed) {
            // No support for XHR
            request = null;
         } // End of catch(failed)
      } // End of catch(othermicrosoft)
   } // End of catch(trymicrosoft)
   
   // Check if we have a valid XHR object. 
   if (request == null) {
      alert("Error creating the XMLHttpRequest object!");
   } else {
      // Return the valid XHR object that was created.
      return(request);
   } // End of if (request == null)
} // End of function createRequest.

/*
============================================================
Function: sendHttpRequest

Last Modified: May/12/2007

This function transmits any arbitrary data to a server URL.
It takes four arguments:
1) XHR object
2) Callback function (if any) to receive the server response
3) URL to which the content is to be sent.
4) Data to be sent.

The depending on the input parameters, it will either
communicate with the server asynchronously or 
synchronously to do the data interchange. It uses the POST
verb of HTTP to do the REST-style call.
============================================================
*/
function sendHttpRequest(request, callbackFunction, url, postData) {
   // Initialize a local variable to false.
   // This variable indicates if we need to communicate with the
   // server in an asynchronous mode.
   var async_request = false;
   
   // Did the caller give us a Callback function? 
   if (callbackFunction != null) {
      // We have a callback function.
      // Set that function to XHR object's onreadystatechange property.
      request.onreadystatechange = callbackFunction;
      // Set the local variable to indicate that 
      // we need to send and receive the response in a non-blocking mode
      // i.e. Async. 
      async_request = true;
   }
   
   //  Open a HTTP connection to the provided URL.
   request.open("POST", url, async_request);
   // Set a HTTP request header.
   request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   // Send it now.
   // If async mode was not true, then this call will block until a
   // HTTP response is received from the server.
   // Otherwise, this statement will just send and return without waiting for a
   // server response.      
   var response = request.send(postData);   
   
   if (async_request == false) {
      // We sent the request synchronously. 
      // Hence, return the response received from the server.
      return(response);
   } else {
      // If the request was made asynchronously, we need not bother to return 
      // anything meaningful. The response will be sent directly to the 
      // callback function that was provided by the caller.
      return(true);
   }   
} // End of function sendHttpRequest.