Review

In the previous section, we have created the Jasper report layout using iReport and learned where to place them on our Spring project. In this section, we will focus on the presentation layer and learn how to display data using HTML and jqGrid.

Part 1: Introduction and Functional Specs
Part 2: Java classes
Part 3: Jasper layout with iReport
Part 4: HTML and jqGrid
Part 5: XML configuration
Part 6: Running the Application

Presentation Layer

We will use jqGrid to display our data in an interactive table and jQuery to provide AJAX support.

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/

What is jqGrid?

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

Source: http://www.trirand.com/jqgridwiki/doku.php

Preview

We only have a single HTML file (users.jsp, a JSP to be exact) to perform all actions. This page contains our jqGrid table and buttons for downloading reports in Pdf and Excel format.

Entry page

Source

At first glance, when you look at the JavaScript code, it is somewhat intimidating, but once you've familiarized with the jqGrid syntax, you'll find that it's actually simple. If you aren't familiary with jqGrid, please visit the jqGrid Official Wiki

	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

	<c:url value="/users/records" var="recordsUrl"/>
	<c:url value="/users/download" var="downloadUrl"/>
	<c:url value="/users/download/token" var="downloadTokenUrl"/>
	<c:url value="/users/download/progress" var="downloadProgressUrl"/>

	<html>
	<head>
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/resources/css/jquery-ui/pepper-grinder/jquery-ui-1.8.16.custom.css"/>'/>
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/resources/css/ui.jqgrid-4.3.1.css"/>'/>
	<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/jquery-ui-1.8.16.custom.min.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/grid.locale-en-4.3.1.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery.jqGrid.min.4.3.1.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/custom.js"/>'></script>

	<title>User Records</title>

	<script type='text/javascript'>
	$(function() {
	$("#grid").jqGrid({
	url:'${recordsUrl}',
	datatype: 'json',
	mtype: 'GET',
	colNames:['Id', 'Username', 'Password', 'First Name', 'Last Name', 'Role'],
	colModel:[
	{name:'id',index:'id', width:55, editable:false, editoptions:{readonly:true, size:10}, hidden:true},
	{name:'username',index:'username', width:100, editable:true, editrules:{required:true}, editoptions:{size:10}},
	{name:'password',index:'password', width:100, editable:true, editrules:{required:true}, editoptions:{size:10}, edittype:'password', hidden:true},
	{name:'firstName',index:'firstName', width:100, editable:true, editrules:{required:true}, editoptions:{size:10}},
	{name:'lastName',index:'lastName', width:100, editable:true, editrules:{required:true}, editoptions:{size:10}},
	{name:'role',index:'role', width:50, editable:true, editrules:{required:true},
	edittype:"select", formatter:'select', stype: 'select',
	editoptions:{value:"1:Admin;2:Regular"},
	formatoptions:{value:"1:Admin;2:Regular"},
	searchoptions: {sopt:['eq'], value:":;1:Admin;2:Regular"}}
	],
	postData: {},
	rowNum:10,
	rowList:[10,20,40,60],
	height: 240,
	autowidth: true,
	rownumbers: true,
	pager: '#pager',
	sortname: 'id',
	viewrecords: true,
	sortorder: "asc",
	caption:"Records",
	emptyrecords: "Empty records",
	loadonce: false,
	loadComplete: function() {},
	jsonReader : {
	root: "rows",
	page: "page",
	total: "total",
	records: "records",
	repeatitems: false,
	cell: "cell",
	id: "id"
	}
	});

	$("#grid").jqGrid('navGrid','#pager',
	{edit:false, add:false, del:false, search:false},
	{}, {}, {}, {}
	);

	$("#grid").navButtonAdd('#pager',
	{ caption:"Pdf",
	buttonicon:"ui-icon-arrowreturn-1-s",
	onClickButton: downloadPdf,
	position: "last",
	title:"",
	cursor: "pointer"
	}
	);

	$("#grid").navButtonAdd('#pager',
	{ caption:"Excel",
	buttonicon:"ui-icon-arrowreturn-1-s",
	onClickButton: downloadXls,
	position: "last",
	title:"",
	cursor: "pointer"
	}
	);

	});

	function downloadXls() {download('xls');}

	function downloadPdf() {download('pdf');}

	function download(type) {
	// Retrieve download token
	// When token is received, proceed with download
	$.get('${downloadTokenUrl}', function(response) {
	// Store token
	var token = response.message[0];

	// Show progress dialog
	$('#msgbox').text('Processing download...');
	$('#msgbox').dialog(
	{ title: 'Download',
	modal: true,
	buttons: {"Close": function() {
	$(this).dialog("close");}
	}
	});

	// Start download
	window.location = '${downloadUrl}'+'?token='+token+'&type='+type;

	// Check periodically if download has started
	var frequency = 1000;
	var timer = setInterval(function() {
	$.get('${downloadProgressUrl}', {token: token},
	function(response) {
	// If token is not returned, download has started
	// Close progress dialog if started
	if (response.message[0] != token) {
	$('#msgbox').dialog('close');
	clearInterval(timer);
	}
	});
	}, frequency);

	});
	}
	</script>
	</head>

	<body>
	<h1 id='banner'>System Records</h1>

	<div id='jqgrid'>
	<table id='grid'></table>
	<div id='pager'></div>
	</div>

	<div id='msgbox' title='' style='display:none'></div>
	</body>
	</html>

view raw users.jsp hosted with ❤ by GitHub

You might be asking: "What's that humongous lines of jibberish code?" If you'd been following my blog, you would notice that I have tackled jqGrid a couple of times from my previous tutorials. If my explanation in this tutorial isn't enough, please see the following tutorials for an alternative perspective:

An In-depth Look

If we partition this JSP page, you will notice the following sections:

URL imports

	<c:url value="/users/records" var="recordsUrl"/>
	<c:url value="/users/download" var="downloadUrl"/>
	<c:url value="/users/download/token" var="downloadTokenUrl"/>
	<c:url value="/users/download/progress" var="downloadProgressUrl"/>

view raw users.jsp hosted with ❤ by GitHub

JavaScript and CSS imports

	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/resources/css/jquery-ui/pepper-grinder/jquery-ui-1.8.16.custom.css"/>'/>
	<link rel="stylesheet" type="text/css" media="screen" href='<c:url value="/resources/css/ui.jqgrid-4.3.1.css"/>'/>
	<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/jquery-ui-1.8.16.custom.min.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/grid.locale-en-4.3.1.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/jquery.jqGrid.min.4.3.1.js"/>'></script>
	<script type='text/javascript' src='<c:url value="/resources/js/custom.js"/>'></script>

view raw users.jsp hosted with ❤ by GitHub

jqGrid initialization

	<script type='text/javascript'>
	$(function() {
	$("#grid").jqGrid({
	...
	});

	$("#grid").jqGrid('navGrid','#pager',
	...
	);

	$("#grid").navButtonAdd('#pager',
	...
	);

	$("#grid").navButtonAdd('#pager',
	...
	);
	});

	...

	</script>

view raw users.jsp hosted with ❤ by GitHub

JavaScript functions: downloadXls(), downloadPdf(), download()

	<script type='text/javascript'>

	...

	function downloadXls() {download('xls');}

	function downloadPdf() {download('pdf');}

	function download(type) {
	// Retrieve download token
	// When token is received, proceed with download
	$.get('${downloadTokenUrl}', function(response) {
	// Store token
	var token = response.message[0];

	// Show progress dialog
	$('#msgbox').text('Processing download...');
	$('#msgbox').dialog(
	{ title: 'Download',
	modal: true,
	buttons: {"Close": function() {
	$(this).dialog("close");}
	}
	});

	// Start download
	window.location = '${downloadUrl}'+'?token='+token+'&type='+type;

	// Check periodically if download has started
	var frequency = 1000;
	var timer = setInterval(function() {
	$.get('${downloadProgressUrl}', {token: token},
	function(response) {
	// If token is not returned, download has started
	// Close progress dialog if started
	if (response.message[0] != token) {
	$('#msgbox').dialog('close');
	clearInterval(timer);
	}
	});
	}, frequency);

	});

	</script>

view raw users.jsp hosted with ❤ by GitHub

Pay attention to the download() function's algorithm:

1. Retrieve a download token via AJAX.
2. Store the token.
3. Show download progress dialog box.
4. Start actual download.
5. Do a periodic AJAX call to verify if token still exists. If not, hide download progress box.

HTML table

	<div id='jqgrid'>
	<table id='grid'></table>
	<div id='pager'></div>
	</div>

view raw users.jsp hosted with ❤ by GitHub

Notice how we've separated the HTML markup from the JavaScript code. We could, of course, move that one huge JavaScript code in an external js file, and make the HTML look somewhat smaller. But I'll leave that exercise to my readers.

In the next section, we will focus on the configuration files for enabling Spring MVC. Click here to proceed.

Share the joy: