Thursday, March 8, 2012

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

Introduction

In this tutorial, we will create a simple CRUD application using Spring 3.1 and Neo4j. We will based this tutorial on a previous guide for MongoDB. This means we will re-use our existing design and implement only the data layer to use Neo4j as our data store.


Dependencies

  • Spring core 3.1.0.RELEASE
  • Spring Data Neo4j 2.1.0.M1
  • Neo4j Kernel 1.6
  • Neo4j Cypher 1.6
  • Neo4j Cypher DSL 1.6
  • See pom.xml for details

Github

To access the source code, please visit the project's Github repository (click here)

Functional Specs

Before we start, let's define our application's specification as follows:
  • A CRUD page for managing users
  • Use AJAX to avoid page refresh
  • Users have roles: either admin or regular (default)
  • Everyone can create new users and edit existing ones
  • When editing, users can only edit first name, last name, and role fields
  • A username is assumed to be unique

Here's our Use Case diagram:
[User]-(View)
[User]-(Add) 
[User]-(Edit) 
[User]-(Delete) 

Database

If you're new to Neo4j and Spring Data Neo4j and coming from a SQL-background, please take some time to read the following references:

In its simplest form, Neo4j is a NoSQL graph database containing nodes and relationships.

What is Neo4j?

The Neo4j data model consists of nodes and relationships, both of which can have key/value-style properties. What does that mean, exactly? Nodes are the graph database name for records, with property keys instead of column names. That's normal enough. Relationships are the special part. In Neo4j, relationships are first-class citizens, meaning they are more than a simple foreign-key reference to another record, relationships carry information.

Source: Spring Data Neo4j - Chapter 4. Learning Neo4j

What is a Graph database?

A graph database stores data in a graph, the most generic of data structures, capable of elegantly representing any kind of data in a highly accessible way.

“A Graph —records data in→ Nodes —which have→ Properties”

“Nodes —are organized by→ Relationships —which also have→ Properties”

“A Traversal —navigates→ a Graph; it —identifies→ Paths —which order→ Nodes”

“An Index —maps from→ Properties —to either→ Nodes or Relationships”

“A Graph Database —manages a→ Graph and —also manages related→ Indexes”


Source: What is a Graph Database?

From Java to Neo4j

We have two Java classes representing our domain: User and Role. Here is the Class diagram:

# Cool UML Diagram
[User|id;firstName;lastName;username;password;role{bg:orange}]1--1> [Role|id;role{bg:green}]

In Neo4j, User and Role are nodes, and the link between the two is a relationship. In Part 2 we will demonstrate how to declare them as nodes and how to create the relationship.

Here's the Activity diagram:

http://yuml.me/diagram/activity/(start)-%3E%3Cd1%3Eview-%3E(Show%20Records)-%3E%7Ca%7C-%3E(end),%20%3Cd1%3Eadd-%3E(Show%20Form)-%3E%7Ca%7C,%20%3Cd1%3Eedit-%3E%3Cd2%3Ehas%20selected-%3E(Show%20Form)-%3E%7Ca%7C,%20%3Cd2%3Eno%20record%20selected-%3E(Popup%20Alert)-%3E%7Ca%7C,%20%3Cd1%3Edelete-%3E%3Cd3%3Ehas%20selected-%3E(Delete%20Record)-%3E%7Ca%7C,%20%3Cd3%3Eno%20record%20selected-%3E(Popup%20Alert)-%3E%7Ca%7C.

Screenshots

Let's preview how the application will look like after it's finished. This is also a good way to clarify further our application's specs. Note: These are the same screenshots you will see from the Spring MVC 3.1 - Implement CRUD with Spring Data MongoDB guide (We're reusing the exact presentation layer).

Entry page
The entry page is the primary page that users will see. It contains a table showing user records and four buttons for adding, editing, deleting, and reloading data. All interactions will happen in this page.

Entry page

Edit existing record
When user clicks the Edit button, an Edit Record form shall appear after the table.

Edit record form

When a user submits the form, a success or failure alert should appear.

Success alert

When the operation is successful, the update record should reflect on the table.

Edited record appears on the table

Create new record
When a user clicks the New button, a Create New Record form shall appear after the table.

Create new record form

When a user submits the form, a success or failure alert should appear.

Success alert

When the operation is successful, the new record should appear on the table.

New record shows on the form

Delete record
When user clicks the Delete button, a success or failure alert should appear.

Success alert

Reload record
When user clicks the Reload button, the data on the table should be reloaded.

Errors
When user clicks the Edit or Delete button without selecting a record first, a "Select a record first!" alert should appear.

Error alert

Next

In the next section, we will write the Java classes and discuss the application's layers. 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 1) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

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

Review

In the previous section, we have laid down the functional specs of the application and discussed the Neo4j data model. In this section, we will discuss the project's structure, write the Java classes, and map our domain classes to the Neo4j data model.


Project Structure

Our application is a Maven project and therefore follows Maven structure. As we create the classes, we've organized them in logical layers: domain, repository, service, and controller.

Here's a preview of our project's structure:



The Layers

Domain Layer

This layer contains the following POJOs:
  • User - represents our user
  • Role - represents the role of the user
  • UserRoleRelationship - represents the relationship of a user to its role
  • .

package org.krams.domain;
import org.springframework.data.neo4j.annotation.Fetch;
import org.springframework.data.neo4j.annotation.GraphId;
import org.springframework.data.neo4j.annotation.Indexed;
import org.springframework.data.neo4j.annotation.NodeEntity;
import org.springframework.data.neo4j.annotation.RelatedTo;
@NodeEntity
public class User {
@GraphId
private Long id;
private String firstName;
private String lastName;
@Indexed
private String username;
private String password;
@Fetch @RelatedTo(type = "HAS_ROLE")
private Role role;
...getters/setters
}
view raw User.java hosted with ❤ by GitHub

package org.krams.domain;
import org.springframework.data.neo4j.annotation.GraphId;
import org.springframework.data.neo4j.annotation.NodeEntity;
@NodeEntity
public class Role {
@GraphId
private Long id;
private User user;
private Integer role;
...getters/setters
}
view raw Role.java hosted with ❤ by GitHub

package org.krams.domain;
import org.springframework.data.neo4j.annotation.EndNode;
import org.springframework.data.neo4j.annotation.RelationshipEntity;
import org.springframework.data.neo4j.annotation.StartNode;
@RelationshipEntity(type = "HAS_ROLE")
public class UserRoleRelationship {
private String description;
@StartNode private User user;
@EndNode private Role role;
...getters/setters
}


Notice we've annotated our domain classes with Spring Data Neo4j annotations. Here are the explanations:

@NodeEntity

The @NodeEntity annotation is used to turn a POJO class into an entity backed by a node in the graph database. Fields on the entity are by default mapped to properties of the node. Fields referencing other node entities (or collections thereof) are linked with relationships.

Source: Spring Data Neo4j Reference

@GraphId

For the simple mapping this is a required field which must be of type Long. It is used by Spring Data Neo4j to store the node or relationship-id to re-connect the entity to the graph.

For the advanced mapping such a field is optional. Only if the underlying id has to be accessed, it is needed.

Source: Spring Data Neo4j Reference

@Indexed

@Indexed: Making entities searchable by field value

The @Indexed annotation can be declared on fields that are intended to be indexed by the Neo4j indexing facilities. The resulting index can be used to later retrieve nodes or relationships that contain a certain property value, e.g. a name. Often an index is used to establish the start node for a traversal.

Source: Spring Data Neo4j Reference

@Fetch

To have the collections of relationships being read eagerly ... we have to annotate it with the @Fetch annotation. Otherwise Spring Data Neo4j refrains from following relationships automatically.

Source: Spring Data Neo4j Reference

@RelatedTo

@RelatedTo: Connecting node entities

Every field of a node entity that references one or more other node entities is backed by relationships in the graph. These relationships are managed by Spring Data Neo4j automatically.

The simplest kind of relationship is a single field pointing to another node entity (1:1). In this case, the field does not have to be annotated at all, although the annotation may be used to control the direction and type of the relationship. When setting the field, a relationship is created when the entity is persisted. If the field is set to null, the relationship is removed.

Source: Spring Data Neo4j Reference

@RelationshipEntity

To access the full data model of graph relationships, POJOs can also be annotated with @RelationshipEntity, making them relationship entities. Just as node entities represent nodes in the graph, relationship entities represent relationships. As described above, fields annotated with @RelatedTo provide a way to link node entities together via relationships, but it provides no way of accessing the relationships themselves.

Relationship entities can be accessed via by @RelatedToVia-annotated

Fields in relationship entities are, similarly to node entities, persisted as properties on the relationship. For accessing the two endpoints of the relationship, two special annotations are available: @StartNode and @EndNode. A field annotated with one of these annotations will provide read-only access to the corresponding endpoint, depending on the chosen annotation.

Source: Spring Data Neo4j Reference

Controller Layer

This layer contains two controllers, MediatorController and UserController
  • MediatorController is responsible for redirecting requests to appropriate pages. This isn't really required but it's here for organizational purposes.
  • UserController is responsible for handling user-related requests such as adding and deleting of records

package org.krams.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/")
public class MediatorController {
@RequestMapping
public String getHomePage() {
return "redirect:/users";
}
}

package org.krams.controller;
import org.krams.domain.Role;
import org.krams.domain.User;
import org.krams.dto.UserDto;
import org.krams.dto.UserListDto;
import org.krams.dto.UserMapper;
import org.krams.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService service;
@RequestMapping
public String getUsersPage() {
return "users";
}
@RequestMapping(value="/records")
public @ResponseBody UserListDto getUsers() {
UserListDto userListDto = new UserListDto();
userListDto.setUsers(UserMapper.map(service.readAll()));
return userListDto;
}
@RequestMapping(value="/get")
public @ResponseBody User get(@RequestBody User user) {
return service.read(user);
}
@RequestMapping(value="/create", method=RequestMethod.POST)
public @ResponseBody UserDto create(
@RequestParam String username,
@RequestParam String password,
@RequestParam String firstName,
@RequestParam String lastName,
@RequestParam Integer role) {
Role newRole = new Role();
newRole.setRole(role);
User newUser = new User();
newUser.setUsername(username);
newUser.setPassword(password);
newUser.setFirstName(firstName);
newUser.setLastName(lastName);
newUser.setRole(newRole);
return UserMapper.map(service.create(newUser));
}
@RequestMapping(value="/update", method=RequestMethod.POST)
public @ResponseBody UserDto update(
@RequestParam String username,
@RequestParam String firstName,
@RequestParam String lastName,
@RequestParam Integer role) {
Role existingRole = new Role();
existingRole.setRole(role);
User existingUser = new User();
existingUser.setUsername(username);
existingUser.setFirstName(firstName);
existingUser.setLastName(lastName);
existingUser.setRole(existingRole);
return UserMapper.map(service.update(existingUser));
}
@RequestMapping(value="/delete", method=RequestMethod.POST)
public @ResponseBody Boolean delete(
@RequestParam String username) {
User existingUser = new User();
existingUser.setUsername(username);
return service.delete(existingUser);
}
}

Service Layer

This layer contains a single service, UserService for managing users.

package org.krams.service;
import java.util.ArrayList;
import java.util.List;
import org.krams.domain.User;
import org.krams.repository.RoleRepository;
import org.krams.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.neo4j.conversion.EndResult;
import org.springframework.stereotype.Service;
@Service
public class UserService {
@Autowired
private UserRepository userRepository;
@Autowired
private RoleRepository roleRepository;
public User create(User user) {
User existingUser = userRepository.findByUsername(user.getUsername());
if (existingUser != null) {
throw new RuntimeException("Record already exists!");
}
user.getRole().setUser(user);
return userRepository.save(user);
}
public User read(User user) {
return user;
}
public List<User> readAll() {
List<User> users = new ArrayList<User>();
EndResult<User> results = userRepository.findAll();
for (User r: results) {
users.add(r);
}
return users;
}
public User update(User user) {
User existingUser = userRepository.findByUsername(user.getUsername());
if (existingUser == null) {
return null;
}
existingUser.setFirstName(user.getFirstName());
existingUser.setLastName(user.getLastName());
existingUser.getRole().setRole(user.getRole().getRole());
roleRepository.save(existingUser.getRole());
return userRepository.save(existingUser);
}
public Boolean delete(User user) {
User existingUser = userRepository.findByUsername(user.getUsername());
if (existingUser == null) {
return false;
}
userRepository.delete(existingUser);
return true;
}
}


What is Spring Data Neo4j?

Spring Data Neo4j enables POJO based development for the Graph Database Neo4j. It maps annotated entity classes to the Neo4j Graph Database with advanced mapping functionality. The template programming model is equivalent to well known Spring templates and builds the basis for interaction with the graph and is also used for the advanced repository support.
Spring Data Neo4j is part of the Spring Data project which aims to provide convenient support for NoSQL databases.

Source: http://www.springsource.org/spring-data/neo4j

Utility classes

TraceInterceptor class is an AOP-based utility class to help us debug our application. This is a subclass of CustomizableTraceInterceptor (see Spring Data JPA FAQ)

package org.krams.aop;
import org.aopalliance.intercept.MethodInvocation;
import org.apache.commons.logging.Log;
import org.apache.log4j.Logger;
import org.springframework.aop.interceptor.CustomizableTraceInterceptor;
/**
* Extends {@link CustomizableTraceInterceptor} to provide custom logging levels
*/
public class TraceInterceptor extends CustomizableTraceInterceptor {
private static final long serialVersionUID = 287162721460370957L;
protected static Logger logger4J = Logger.getLogger("aop");
@Override
protected void writeToLog(Log logger, String message, Throwable ex) {
if (ex != null) {
logger4J.debug(message, ex);
} else {
logger4J.debug(message);
}
}
@Override
protected boolean isInterceptorEnabled(MethodInvocation invocation, Log logger) {
return true;
}
}


Next

In the next section, we will focus on the configuration files for enabling Spring MVC. 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 2) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

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

Review

In the previous section, we have implemented the Java classes and discussed the Neo4j service. In this section, we will write the configuration files for enabling Spring MVC and Neo4j support.


Configuration

To enable Neo4j support, we need to declare the following beans
  • a Spring Data Neo4j repository
  • a Neo4j store directory
  • Optionally, we declared an InitNeo4jService to automatically populate our database with sample data (currently disabled)
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:jdbc="http://www.springframework.org/schema/jdbc"
xmlns:neo4j="http://www.springframework.org/schema/data/neo4j"
xmlns:util="http://www.springframework.org/schema/util"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/jdbc
http://www.springframework.org/schema/jdbc/spring-jdbc-3.1.xsd
http://www.springframework.org/schema/data/neo4j
http://www.springframework.org/schema/data/neo4j/spring-neo4j-2.0.xsd
http://www.springframework.org/schema/util
http://www.springframework.org/schema/util/spring-util-3.1.xsd">
<context:property-placeholder properties-ref="deployProperties" />
<!-- Activate Spring Data Neo4j repository support -->
<neo4j:repositories base-package="org.krams"/>
<neo4j:config storeDirectory="target/temp.db"/>
<!-- Service for initializing Neo4j with sample data. Currently disabled
due to an unconfirmed bug
<bean id="initNeo4jService" class="org.krams.service.InitNeo4jService" init-method="init"/> -->
</beans>
view raw spring-data.xml hosted with ❤ by GitHub


Finally, here's our applicationContext.xml file
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd">
<context:property-placeholder properties-ref="deployProperties" />
<!-- Activates various annotations to be detected in bean classes -->
<context:annotation-config />
<!-- Scans the classpath for annotated components that will be auto-registered as Spring beans.
For example @Controller and @Service. Make sure to set the correct base-package -->
<context:component-scan base-package="org.krams" />
<!-- Configures the annotation-driven Spring MVC Controller programming model.
Note that, with Spring 3.0, this tag works in Servlet MVC only! -->
<mvc:annotation-driven />
<mvc:resources mapping="/resources/**" location="/resources/" />
<!-- Imports logging configuration -->
<import resource="trace-context.xml"/>
<!-- Imports datasource configuration -->
<import resource="spring-data.xml"/>
<bean id="deployProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean"
p:location="/WEB-INF/spring.properties" />
</beans>

Next

In the next section, we will create the HTML and JavaScript files. 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 3) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

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.


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

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

Review

We have just completed our application! In the previous sections, we have discussed the functional specs, created the Java classes, declared the configuration files, and wrote the HTML files. In this section, we will build and run the application using Maven, and show how to import the project in Eclipse.


Running the Application

Access the source code

To download the source code, please visit the project's Github repository (click here)

Preparing the data source

  • You don't need to run a separate Neo4j server because it will start simultaneously with the application.
  • There's no need to populate the database.
  • Due to some issues with the initialization service, I have decided to deactivate the service (though it's included in the source code for reference).

Building with Maven

  1. Ensure Maven is installed
  2. Open a command window (Windows) or a terminal (Linux/Mac)
  3. Run the following command:
    mvn tomcat:run
  4. You should see the following output:
    [INFO] Scanning for projects...
    [INFO] Searching repository for plugin with prefix: 'tomcat'.
    [INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from central
    [INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from snapshots
    [INFO] ------------------------------------------
    [INFO] Building spring-neo4j-tutorial Maven Webapp
    [INFO]    task-segment: [tomcat:run]
    [INFO] ------------------------------------------
    [INFO] Preparing tomcat:run
    [INFO] [apt:process {execution: default}]
    [INFO] [resources:resources {execution: default-resources}]
    [INFO] [tomcat:run {execution: default-cli}]
    [INFO] Running war on http://localhost:8080/spring-neo4j-tutorial
    Mar 9, 2012 7:19:07 AM org.apache.catalina.startup.Embedded start
    INFO: Starting tomcat server
    Mar 9, 2012 7:19:07 AM org.apache.catalina.core.StandardEngine start
    INFO: Starting Servlet Engine: Apache Tomcat/6.0.29
    Mar 9, 2012 7:19:07 AM org.apache.catalina.core.ApplicationContext log
    INFO: Initializing Spring root WebApplicationContext
    Mar 9, 2012 7:19:11 AM org.apache.coyote.http11.Http11Protocol init
    INFO: Initializing Coyote HTTP/1.1 on http-8080
    Mar 9, 2012 7:19:11 AM org.apache.coyote.http11.Http11Protocol start
    INFO: Starting Coyote HTTP/1.1 on http-8080
    
  5. Note: If the project will not build due to missing repositories, please enable the repositories section in the pom.xml!

Access the Entry page

  1. Follow the steps with Building with Maven
  2. Open a browser
  3. Enter the following URL (8080 is the default port for Tomcat):
    http://localhost:8080/spring-neo4j-tutorial/

Import the project in Eclipse

  1. Ensure Maven is installed
  2. Open a command window (Windows) or a terminal (Linux/Mac)
  3. Run the following command:
    mvn eclipse:eclipse -Dwtpversion=2.0
  4. You should see the following output:
    [INFO] Scanning for projects...
    [INFO] Searching repository for plugin with prefix: 'eclipse'.
    [INFO] org.apache.maven.plugins: checking for updates from central
    [INFO] org.apache.maven.plugins: checking for updates from snapshots
    [INFO] org.codehaus.mojo: checking for updates from central
    [INFO] org.codehaus.mojo: checking for updates from snapshots
    [INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from central
    [INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from snapshots
    [INFO] -----------------------------------------
    [INFO] Building spring-neo4j-tutorial Maven Webapp
    [INFO]    task-segment: [eclipse:eclipse]
    [INFO] -----------------------------------------
    [INFO] Preparing eclipse:eclipse
    [INFO] No goals needed for project - skipping
    [INFO] [eclipse:eclipse {execution: default-cli}]
    [INFO] Adding support for WTP version 2.0.
    [INFO] -----------------------------------------
    [INFO] BUILD SUCCESSFUL
    [INFO] -----------------------------------------
    
    This command will add the following files to your project:
    .classpath
    .project
    .settings
    target
    You may have to enable "show hidden files" in your file explorer to view them
  5. Open Eclipse and import the project

Conclusion

That's it! We've have successfully completed our Spring MVC 3.1 web application. We've learned how to integrate Neo4j using the Spring Data Neo4j framework, and studied how to map our domain objects to the Neo4j graph. We've only explored the basics of Neo4j, but I hope that this simple tutorial will provide a good start.

I hope you've enjoyed this tutorial. Don't forget to check my other tutorials at the Tutorials section.

Revision History


Revision Date Description
1 March 8 2012 Uploaded tutorial
2 March 9 2012 Uploaded source code to Github

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 5) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share