Spring Data REST + GemFire + jQuery Integration

This tutorial explains how to integrate Spring Data REST, GemFire and JQuery frameworks. Multiple JavaScript frameworks can be integrated with the Spring Data REST for consuming the services. We’ve explained integration between Spring Data REST & AngularJS, where in a GemFire in-memory platform was used for presenting the data repository.

Also read:

However, in this tutorial we’re exploring the integrating between Spring Data REST with the jQuery library. jQuery library being used here is 1.10.2 which consider late version, but even if you’ve decided to use another version of jQuery, you’ve just need to use the same application in this tutorial which will work without any issues. If you have any questions, please write it in the comments section.

1. Tools Used

  • JDK 1.6.
  • Tomcat 7.
  • Maven 3.
  • Spring Data REST.
  • GemFire 7.0.1 Platform (JAR distribution).
  • JQuery 1.10.2

2. Project Structure

Here is the project structure used for developing the Spring Data REST, GemFire and JQuery application.

Spring Data REST GemFire jQuery Project Structure

3. Business Domain

Here is the domain class used in this tutorial. In this tutorial, we have a Message entity or object that needs to be consumed through  Restful service. Look at the implementation below. @Region annotation must be used to specify that this class uses the GemFire storage. This is equivalent to the table in the relational database.

Message.java

package net.javabeat.springdata.data;

import org.springframework.data.annotation.Id;
import org.springframework.data.annotation.PersistenceConstructor;
import org.springframework.data.gemfire.mapping.Region;

@Region("messages")
public class Message {
	@Id
	private String messageId;
	private String message;

	public Message() {
	}

	@PersistenceConstructor
	public Message(String id, String message) {
		this.messageId = id;
		this.message = message;
	}

	public String getMessageId() {
		return messageId;
	}

	public void setMessageId(String messageId) {
		this.messageId = messageId;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}
}

4. Spring Data Repository

Repository provides you an abstraction layer in which you’ve never been providing an implementation for your CRUD operations even if it was a small portion of code. What you should have to do is to create your own interface that extends the Spring Data’s special Repository and the remaining work has been left for the Spring framework to complete the required implementation. So, you should have to provide a repository like below. If you look at the below class MessageRepository, it extends the CrudeRepository which is the spring data’s interface which defines the methods for the CRUD operations.

MessageRepository.java

package net.javabeat.springdata.repo;

import net.javabeat.springdata.data.Message;

import org.springframework.data.repository.CrudRepository;
import org.springframework.data.rest.core.annotation.RepositoryRestResource;

@RepositoryRestResource(collectionResourceRel="messages",path="messages")
public interface MessageRepository extends CrudRepository<Message,Integer> {}

As you’ve noted, the message repository is just an interface which is consider as an extension for the special spring data repository. You’ve mentioned the repository act on type i.e. Message business object in which the repository would play around of it to achieve the needed CRUD operations.

5. GemFire Spring Bean

It’s just an normal spring bean that used for providing a dummy messages that would be consumed.

GemFireBean.java

package net.javabeat.springdata.bean;

import net.javabeat.springdata.data.Message;
import net.javabeat.springdata.repo.MessageRepository;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component
public class GemFireBean {

	MessageRepository messageRepository;

	public GemFireBean(){

	}

	public MessageRepository getMessageRepository() {
		return messageRepository;
	}

	@Autowired
	public void setMessageRepository(MessageRepository messageRepository) {
		// Message repository has been set
		this.messageRepository = messageRepository;

		// Add some messages into GemFire for being seen
		Message message = new Message();
		message.setMessageId("1");
		message.setMessage("Hello JavaBeat !");

		messageRepository.save(message);

		// Add
		message = new Message();
		message.setMessageId("2");
		message.setMessage("Hello GemFire REST");
		messageRepository.save(message);
		System.out.println("Messages are filled");
	}
}

6. Spring Context Configuration

This is the simple XML configuration for the spring beans.

SpringContext.xml

<?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:gfe-data="http://www.springframework.org/schema/data/gemfire"
	xmlns:gfe="http://www.springframework.org/schema/gemfire"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/data/gemfire http://www.springframework.org/schema/data/gemfire/spring-data-gemfire.xsd http://www.springframework.org/schema/gemfire http://www.springframework.org/schema/gemfire/spring-gemfire.xsd">
	<!-- Search for spring components -->
	<context:component-scan base-package="net.javabeat"></context:component-scan>
	<!-- Declare GemFire Cache -->
	<gfe:cache/>
	<!-- Local region for being used by the Message -->
	<gfe:local-region id="messages" value-constraint="net.javabeat.springdata.data.Message"/>
	<!-- Search for GemFire repositories -->
	<gfe-data:repositories base-package="net.javabeat.springdata.repo"/>
</beans>

7. Repository Rest Dispatcher Servlet & Web deployment Descriptor

To install spring data rest alongside your existing web application, you need to include the appropriate configuration in the deployment descriptor. Spring Data REST configuration is defined in a class called RepositoryRestMvcConfiguration. Since Spring Data REST is simply a spring MVC application, you only need to include the RepositoryRestDispatcherServlet for being able to use the REST functionality when it comes to configure the spring framework using the XML. The web deployment descriptor seems like below.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" metadata-complete="true" version="2.5">
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring-config/SpringContext.xml</param-value>
	</context-param>
	<servlet>
		<servlet-name>rest</servlet-name>
		<servlet-class>org.springframework.data.rest.webmvc.RepositoryRestDispatcherServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>rest</servlet-name>
		<url-pattern>/rest/*</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
</web-app>

8. Expose GemFire Repositories Directly

It’s just a try for exposing the GemFire repositories through google Dev HTTP. For doing that just follow the below steps:

  • From chrome browser open the Dev HTTP Client.
  • Type your host followed by the port number followed with the web context for the deployed application which should results in the token http://localhost:8080/SpringData-GemFire-REST-1.0.
  • For consuming the messages resources, you have to add the RepositoryRestDispactherServlet mapping url which mentioned in the web.xml and it’s /rest/ which results in url value like http://localhost:8080/SpringData-GemFire-REST-jQuery/rest/
  • Add the The path segment under which this resource is to be exported. that value was provided using the path property at the header of the MessageRepository in order to be able of exposing the messages resource like below.

Spring Data REST GemFire jQuery Consumption

9. Spring Data REST & jQuery Integration

As all of us knew, jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multiple browsers. Also, it uses the json response as you would see. Look at the below JQuery example to know how to access Spring Data REST services through jQUery.

index.html

<html>
	<head>
		<title>JavaBeat Tutorial</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    	<script src="messages.js"></script>
	</head>
	<body>
		<div style="width:50%">
			<h2>JavaBeat Tutorial</h2>
			<h2>GemFire + REST + JQuery</h2>
			<div id="messages">

			</div>
		</div>
	</body>
</html>

messages.js

$(document).ready(function() {
    $.ajax({
        url: "http://localhost:8080/SpringData-GemFire-REST-JQuery-1.0/rest/messages"
    }).then(function(data) {
    	var messages = data["_embedded"]["messages"];
		var value = "";
		$("#messages").html("Message #1 :: Message Content :: " + messages[0].message + " :: Message Link :: <a href='"+messages[0]._links.self.href+"'>Link</a>" + '<br>' +
							"Message #2 :: Message Content :: " + messages[1].message + " :: Message Link :: <a href='"+messages[1]._links.self.href+"'>Link</a>");
    });
});

10. Spring Data REST & jQuery Demo

Spring Data REST & jQuery Consumption

Spring Data REST Consumption

11. Summary

In this tutorial Spring Data REST service is consumed using the jQuery library and the result of consumption has been displayed into HTML page. In our previous tutorial we have explained the similar Spring Data REST to be accessed using the AngularJS library. If you have any questions, please write it in the comments section.

Download Source Code

Comments

comments

About Amr Mohammed

Speak Your Mind

*