Review

In the previous section, we have created the configuration files and discussed them accordingly. In this section, we will focus on the view layer, in particular the HTML files and JavaScript codes.

Part 1: Introduction and Functional Specs
Part 2: Java classes
Part 3: XML configuration
Part 4: HTML (with AJAX)
Part 5: Running the Application

HTML Files (with AJAX)

To improve the user experience, we will use AJAX to make the application responsive. All actions will be performed on the same page (no page refresh). Consequently, we only have one HTML page for the entire application. The rest are JavaScript files.

Notice how we've structured the HTML page. Basically, we followed the concept of separation of concerns by separating markup tags, CSS, and JavaScript code. We tried as much as possible to make the JavaScript code and CSS styles unobtrusive.

A Closer Look

At first glance, this JSP file seems complex. On the contrary, it's quite simple. Let's break it into smaller pieces for clarity:

URLs
The following declares our URLs as mapped to our UserController. We're using the url taglib to make the URL portable.

Imports
Here we're importing custom CSS and JavaScript files, along with jQuery.

What is jQuery?
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Source: http://jquery.com/

JavaScript initialization
Here we're preparing the URLs, attaching functions to our buttons, and initially loading the table. The main chunk of the JavaScript code is referenced from an external JavaScript file custom.js

loadTable(): Performs an AJAX request and populates our table with records
toggleForms(): Hides and shows specific forms based on the passed argument
toggleCrudButtons(): Hides and shows buttons
hasSelected(): Checks whether a record has been selected
fillEditForm(): Fills the Edit form with details based on the selected record
submitDeleteRecord(): Submits a delete request via AJAX
submitNewRecord(): Submits a create new record request via AJAX
submitUpdateRecord(): Submits an update record request via AJAX

Table and buttons
This is a simple table for displaying records. The buttons are for interacting with the data.

Forms
These are forms used when adding and editing records.