Thursday, March 8, 2012

Spring MVC 3.1 - Implement CRUD with Spring Data Neo4j (Part 4)

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 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.

<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c' %>
<c:url value="/users/records" var="recordsUrl"/>
<c:url value="/users/create" var="addUrl"/>
<c:url value="/users/update" var="editUrl"/>
<c:url value="/users/delete" var="deleteUrl"/>
<html>
<head>
<link rel='stylesheet' type='text/css' media='screen' href='<c:url value="/resources/css/style.css"/>'/>
<script type='text/javascript' src='<c:url value="/resources/js/jquery-1.6.4.min.js"/>'></script>
<script type='text/javascript' src='<c:url value="/resources/js/custom.js"/>'></script>
<title>User Records</title>
<script type='text/javascript'>
$(function() {
// init
urlHolder.records = '${recordsUrl}';
urlHolder.add = '${addUrl}';
urlHolder.edit = '${editUrl}';
urlHolder.del = '${deleteUrl}';
loadTable();
$('#newBtn').click(function() {
toggleForms('new');
toggleCrudButtons('hide');
});
$('#editBtn').click(function() {
if (hasSelected()) {
toggleForms('edit');
toggleCrudButtons('hide');
fillEditForm();
}
});
$('#reloadBtn').click(function() {
loadTable();
});
$('#deleteBtn').click(function() {
if (hasSelected()) {
submitDeleteRecord();
}
});
$('#newForm').submit(function() {
event.preventDefault();
submitNewRecord();
});
$('#editForm').submit(function() {
event.preventDefault();
submitUpdateRecord();
});
$('#closeNewForm').click(function() {
toggleForms('hide');
toggleCrudButtons('show');
});
$('#closeEditForm').click(function() {
toggleForms('hide');
toggleCrudButtons('show');
});
});
</script>
</head>
<body>
<h1 id='banner'>Record System</h1>
<hr/>
<table id='tableUsers'>
<caption></caption>
<thead>
<tr>
<th></th>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
</tr>
</thead>
</table>
<div id='controlBar'>
<input type='button' value='New' id='newBtn' />
<input type='button' value='Delete' id='deleteBtn' />
<input type='button' value='Edit' id='editBtn' />
<input type='button' value='Reload' id='reloadBtn' />
</div>
<div id='newForm'>
<form>
<fieldset>
<legend>Create New Record</legend>
<label for='newUsername'>Username</label><input type='text' id='newUsername'/><br/>
<label for='newPassword'>Password</label><input type='password' id='newPassword'/><br/>
<label for='newFirstName'>First Name</label><input type='text' id='newFirstName'/><br/>
<label for='newLastName'>Last Name</label><input type='text' id='newLastName'/><br/>
<label for='newRole'>Role</label>
<select id='newRole'>
<option value='1'>Admin</option>
<option value='2' selected='selected'>Regular</option>
</select>
</fieldset>
<input type='button' value='Close' id='closeNewForm' />
<input type='submit' value='Submit'/>
</form>
</div>
<div id='editForm'>
<form>
<fieldset>
<legend>Edit Record</legend>
<input type='hidden' id='editUsername'/>
<label for='editFirstName'>First Name</label><input type='text' id='editFirstName'/><br/>
<label for='editLastName'>Last Name</label><input type='text' id='editLastName'/><br/>
<label for='editRole'>Role</label>
<select id='editRole'>
<option value='1'>Admin</option>
<option value='2' selected='selected'>Regular</option>
</select>
</fieldset>
<input type='button' value='Close' id='closeEditForm' />
<input type='submit' value='Submit'/>
</form>
</div>
</body>
</html>
view raw users.jsp hosted with ❤ by GitHub


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.
<c:url value="/users/records" var="recordsUrl"/>
<c:url value="/users/create" var="addUrl"/>
<c:url value="/users/update" var="editUrl"/>
<c:url value="/users/delete" var="deleteUrl"/>
view raw fragment.jsp hosted with ❤ by GitHub


Imports
Here we're importing custom CSS and JavaScript files, along with jQuery.
<link rel='stylesheet' type='text/css' media='screen' href='<c:url value="/resources/css/style.css"/>'/>
<script type='text/javascript' src='<c:url value="/resources/js/jquery-1.6.4.min.js"/>'></script>
<script type='text/javascript' src='<c:url value="/resources/js/custom.js"/>'></script>
view raw fragment.jsp hosted with ❤ by GitHub


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
<script type='text/javascript'>
$(function() {
// init
urlHolder.records = '${recordsUrl}';
urlHolder.add = '${addUrl}';
urlHolder.edit = '${editUrl}';
urlHolder.del = '${deleteUrl}';
loadTable();
$('#newBtn').click(function() {
toggleForms('new');
toggleCrudButtons('hide');
});
$('#editBtn').click(function() {
if (hasSelected()) {
toggleForms('edit');
toggleCrudButtons('hide');
fillEditForm();
}
});
$('#reloadBtn').click(function() {
loadTable();
});
$('#deleteBtn').click(function() {
if (hasSelected()) {
submitDeleteRecord();
}
});
$('#newForm').submit(function() {
event.preventDefault();
submitNewRecord();
});
$('#editForm').submit(function() {
event.preventDefault();
submitUpdateRecord();
});
$('#closeNewForm').click(function() {
toggleForms('hide');
toggleCrudButtons('show');
});
$('#closeEditForm').click(function() {
toggleForms('hide');
toggleCrudButtons('show');
});
});
</script>
view raw fragment.jsp hosted with ❤ by GitHub


Table and buttons
This is a simple table for displaying records. The buttons are for interacting with the data.
<table id='tableUsers'>
<caption></caption>
<thead>
<tr>
<th></th>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
</tr>
</thead>
</table>
<div id='controlBar'>
<input type='button' value='New' id='newBtn' />
<input type='button' value='Delete' id='deleteBtn' />
<input type='button' value='Edit' id='editBtn' />
<input type='button' value='Reload' id='reloadBtn' />
</div>
view raw fragment.jsp hosted with ❤ by GitHub


Forms
These are forms used when adding and editing records.
<div id='newForm'>
<form>
<fieldset>
<legend>Create New Record</legend>
<label for='newUsername'>Username</label><input type='text' id='newUsername'/><br/>
<label for='newPassword'>Password</label><input type='password' id='newPassword'/><br/>
<label for='newFirstName'>First Name</label><input type='text' id='newFirstName'/><br/>
<label for='newLastName'>Last Name</label><input type='text' id='newLastName'/><br/>
<label for='newRole'>Role</label>
<select id='newRole'>
<option value='1'>Admin</option>
<option value='2' selected='selected'>Regular</option>
</select>
</fieldset>
<input type='button' value='Close' id='closeNewForm' />
<input type='submit' value='Submit'/>
</form>
</div>
<div id='editForm'>
<form>
<fieldset>
<legend>Edit Record</legend>
<input type='hidden' id='editUsername'/>
<label for='editFirstName'>First Name</label><input type='text' id='editFirstName'/><br/>
<label for='editLastName'>Last Name</label><input type='text' id='editLastName'/><br/>
<label for='editRole'>Role</label>
<select id='editRole'>
<option value='1'>Admin</option>
<option value='2' selected='selected'>Regular</option>
</select>
</fieldset>
<input type='button' value='Close' id='closeEditForm' />
<input type='submit' value='Submit'/>
</form>
</div>
view raw fragment.jsp hosted with ❤ by GitHub


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.
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Spring MVC 3.1 - Implement CRUD with Spring Data Neo4j (Part 4) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

Posted by Mark Serrano at 1:48 PM

1 comment:

Subscribe to: Post Comments (Atom)