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.Table of Contents
Part 1: Introduction and Functional SpecsPart 2: MongoDB setup
Part 3: Java classes
Part 4: XML configuration
Part 5: HTML Files (with AJAX)
Part 6: 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.
Preview
If we run our application, this is what we shall see:
Entry page
For more screenshots, please visit Part 1 of this tutorial and check the Screenshots section.
Next
In the next section, we will build and run the application using Maven, and show how to import the project in Eclipse. Click here to proceed.|
Share the joy:
|
Subscribe by reader
Subscribe by email
Share
Krams , It works.
ReplyDeleteThanks for sharing it.
In the latest Firefox your event.preventDefault(); in the two javascript methods fails to work which causes a cascade of issues. This is due to the fact the function() should read function(event)
ReplyDelete$('#newForm').submit(function(event) {
event.preventDefault();
submitNewRecord();
});
$('#editForm').submit(function(event) {
event.preventDefault();
submitUpdateRecord();
});
@john, thanks for the message. You're correct. the event argument needs to be present in order for those functions to work on FireFox.
Deleteplease share
ReplyDeletesource code download path
Unknown, the code can be found at GitHub. The link is at the beginning and end of this article
Delete