ReviewIn the previous section, we've managed to create the core Event management system and use DataTables to display tabular data. In this section, we will use jQgrid, a jQuery plugin, to provide advance features to our table like sorting and searching.
Where am I?
Table of Contents
- Event Management
- Messaging support
- Error persistence
- Build and deploy
jQgrid ViewAs mentioned in the previous section, we will present tabular data using jQgrid and we'll add caching functionality to improve the application's performance. We'll utilize Spring Cache as our abstraction tool, and Ehcache as our cache storage.
What is jQgrid?
jqGrid uses a jQuery Java Script Library and is written as plugin for that package. (Source: http://www.trirand.com/jqgridwiki/doku.php)
What is Ehcache?
Ehcache is an open source, standards-based cache used to boost performance, offload the database and simplify scalability. Ehcache is robust, proven and full-featured and this has made it the most widely-used Java-based cache. Source: http://ehcache.org/
Before we proceed with the development, let's preview the final output:
DevelopmentSince we'll be adding caching functionality, we need to provide a custom controller, and since jQgrid requires a specific JSON format, we need to create a custom DTO. We shall divide this page as follows:
- Data Transfer Object (DTO)
- JSP page
1. Data Transfer Object (DTO)jQgrid can exchange and communicate data via different formats: XML, JSON, Arrays, and etc. We will use JSON as our data-interchange format because it's lightweight and flexible. In order for our JSON format to work, we need to create a custom data transfer object (DTO) that matches our jQgrid's JSON reader property.
Below is our jQgrid JSON reader declaration:
We have to match those fields in our DTO (for an explanation of those fields, read the comments in the DTO). Consequently, we have the following class:
2. ControllerNext we will create a new controller to handle jQgrid-related requests with caching functionality:
We are re-using the same EventService for the DataTables. The methods for adding, editing, and deleting are exact copies of the EventController for the DataTables as well.
There are two unique methods here: the getEventPage() and the getAll(). The getEventPage() returns a JSP page containing a jQgrid table. The getAll() is a little-bit involved since it needs to wrap the results in a DTO, but nonetheless, it's quite straightforward.
We've also annotated the CRUD methods with two Java annotations: @Cacheable and @CacheEvict to add caching functionality. Notice how easy it is to add cache to our existing application.
To highlight the difference, I suggest comparing the DataTables and jQgrid version and monitor the calls to EventService via the Event Monitor page (part of the application's feature). Only the DataTables will show calls to readAll().
What is @Cacheable?
@Cacheable is used to demarcate methods that are cacheable - that is, methods for whom the result is stored into the cache so on subsequent invocations (with the same arguments), the value in the cache is returned without having to actually execute the method. Source: Spring Reference 3.1.0.M1
What is @CacheEvict?
@CacheEvict demarcates methods that perform cache eviction, that is methods that act as triggers for removing data from the cache. Just like its sibling, @CacheEvict requires one to specify one (or multiple) caches that are affected by the action, allows a key or a condition to be specified but in addition, features an extra parameter allEntries which indicates whether a cache-wide eviction needs to be performed rather then just an entry one Source: Spring Reference 3.1.0.M1
3. JSP pageNow, let's examine the JSP page. It's a single page containing the following sections:
- jQgrid initialization
- Pager functions
- Add function
- Edit function
- Delete function
Let's discuss each section:
The following section declares two URLs which uses the JSTL core tag: the root and the resources URLs respectively. These URLs are here for reusability purposes:
The following section declares a menu list:
The following section declares a div with two inner elements: a table and a div for attaching the jQgrid and the control buttons respectively:
e. jQgrid initialization
The following section initializes the jQgrid table. The function declares the table properties, column models, url where to retrieve the data, and control buttons to display in the pager section:
f. Pager functions
1. Add function
The following section attaches a function to the Add button in the jQgrid pager section:
2. Edit function
The following snippet attaches a function to the Edit button in the jQgrid pager section:
3. Delete function
The following section attaches a function to the Delete button in the jQgrid pager section:
ResultsWhen we run the application, the result should be similar to the following image (this is an actual screenshot taken from a live deployment):
LimitationsOur jQgrid view has some limitations. However, these are not jQgrid limitations but rather something that we intentionally (and unintentionally) did not implement:
- Search feature is not implemented
- Sort feature is not implemented
- UI validation is not fully implemented
PlaygroundSome developers might not have time to build the entire project. Maybe they just want something to play around really fast. Because of that, I've deployed live samples to Cloud Foundry and added sample fiddles via JSFiddle.
JSFiddleIf you want to explore more about jQgrid, I've provided a fiddle for you to play around. This fiddle do not need any server-side programs to run. Feel free to fork it.
Here's the fiddle: http://jsfiddle.net/krams/jqJch/
What is JSFiddle?
Cloud FoundryIf you want to tinker with a live deployment, I suggest you visit the application's live site at http://spring-mysql-mongo-rabbit.cloudfoundry.com/jqgrid/event
What is Cloud Foundry?
Cloud Foundry is the open platform as a service project initiated by VMware. It can support multiple frameworks, multiple cloud providers, and multiple application services all on a cloud scale platform.
Next SectionIn the next section, we will add messaging support using RabbitMQ and Spring AMQP. Read next.
Share the joy:
Subscribe by reader Subscribe by email Share