Developing End-to-end Ajax Applications, part 2nd: Implementing AJAX Client and Server tiers (2)

Implementing the Banking portal as an Ajax browser application

Our banking scenario requires a simple browser interface that the bank teller uses to perform the core functions implemented in the PHP module. We will build this interface using the Aptana Web IDE. The Aptana Web IDE provides an easy way to build browser applications with XHTML, CSS, and JavaScript. Aptana is a free plugin that can be seamlessly plugged into the Eclipse environment. This plugin is still in the development phase, but the current version has been able to meet the needs of the banking scene. Although the AJAX features are implemented in a bank scenario using generic JavaScript, Aptana integrates several open source Ajax framework libraries.

Follow these steps to create a single page Ajax browser application:

In Eclipse, switch to Aptana perspective: Select Window->open Perspective->other->aptana and click OK.

In the lower-left pane of the Aptana perspective, select Project view.

Right-click the Bankteller item and select New->html file:

In the File name field, enter index.html and click Finish.

Enter or paste the source code in Listing 4 to replace the contents of the Index.html file and click File->save.

Right-click the Bankteller item and select New->css file:

In the File name field, enter BANKTELLER.CSS and click Finish.

Enter or paste the source code in Listing 5 to replace the contents of the Bankteller.css file and click File->save.

Right-click the Bankteller item and select New->javascript file:

In the File name field, enter Xhr.js and click Finish.

Enter or paste the source code in Listing 6 to replace the contents of this file and click File->save.

Use the comments in these files to understand the role of the Code, or to refer to the interpretation of the code logic in the next section.

So far, the required components for this single page Ajax browser application have been completed by Two-thirds! In part 3rd of this series, you will create the rest of this browser application.