JQGrid to display Apache Solr Data

Hi all, from past couple of weeks i was doing a POC on Solr in my project and there came a scenario where i need to pull the data from Solr server and display on JQGrid component. In this post let me show you how to do this task. The project structure looks as below.

jqgrid_project

let’s start with our index.html file as below.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Solr Data Drid</title>
<link href="css/jquery-ui-custom.css" media="screen" type="text/css" rel="stylesheet">
<link href="css/ui.jqgrid.css" media="screen" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="custom_js/app.js"></script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>

Now comes the time for coding the app.js file where the actual logic reside. follow the comments carefully and the script is easy to understand.

/**
 * @author Pavan Kumar Mantha
 */

$(document)
		.ready(
				function() {
					var dataTable = $("#list2");
					var entityArray = [];

					dataTable.jqGrid({
						datatype : "local",
						colNames : [ 'id', 'lastName', 'firstName',
								'titleOfCourtesy' ],
						colModel : [ {
							name : 'id',
							index : 'id',
							width : 55
						}, {
							name : 'lastName',
							index : 'lastName',
							width : 90
						}, {
							name : 'firstName',
							index : 'firstName',
							width : 100
						}, {
							name : 'titleOfCourtesy',
							index : 'titleOfCourtesy',
							width : 80,
							align : "right"
						} ],
						rowNum : 10,
						rowList : [ 10, 20, 30 ],
						pager : '#pager2',
						sortname : 'id',
						viewrecords : true,
						sortorder : "desc",
						autowidth : true,
						caption : "Solr Data"
					});

					// handles the grid resize on window resize
					$(window).resize(
							function() {
								dataTable.jqGrid('setGridWidth', parseInt($(
										window).width()) - 20);
							});

					// Firing Ajax request to Solr server and getting data to
					// populate the jqgrid.
					// This ajax request is powered by cross domain
					$.ajaxSetup({
						crossDomain : true,
						scriptCharset : "utf-8",
						contentType : "jsonp; charset=utf-8"
					});

					var request = $
							.ajax({
								url : "http://localhost:8983/solr/collection1/select?q=*%3A*&wt=json&json.wrf=?&indent=true&rows=100",
								mthod : "GET",
								dataType : "jsonp"
							});

					request.done(function(data) {

						$.each(data.response.docs, function(i, doc) {
							var entityobject = {
								id : "",
								lastName : "",
								firstName : "",
								titleOfCourtesy : ""
							}

							entityobject.id = doc.id;
							entityobject.lastName = doc.lastName;
							entityobject.firstName = doc.firstName;
							entityobject.titleOfCourtesy = doc.titleOfCourtesy;

							entityArray.push(entityobject);
						});

						for (var i = 0; i <= entityArray.length; i++)
							jQuery("#list2").jqGrid('addRowData', i + 1,
									entityArray[i]);
					});

					request
							.fail(function(msg) {
								alert("Fetching of data from solr failed with error !");
							});
				});// end of (document).ready(function(){});


That is it, finally when we deploy this project to server and see the output it should look as below.
jqgrid_op

In my next post will be posting about the integration of SpringData and Apache Solr until then.
Happy coding jqgrid 🙂

Advertisements

WebSockets in HTML5 and JBoss

Hi all, its a long time i put my pen in the blog, these days got little busy with my little kid, however i took little time to write about the next-generation client(browser) server communication using WebSockets. In the advent of HTML5 technology all the modern browser are capable of talking to latest servers using WebSockets API.

Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.

Once you get a Web Socket connection with the web server or an Application Server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.

All the latest Web Servers and Application Servers has got implementation of WebSockets API as this is been included as part of JavaEE stack.

Let us look at the simple application which i created using JBoss Wildfly 8.1 and Maven

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.spark.websockets</groupId>
	<artifactId>WebSocketsExample</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>WebSocketsExample</name>
	<description>WebSocketsExample</description>

	<dependencies>
		<dependency>
			<groupId>org.jboss.spec.javax.websocket</groupId>
			<artifactId>jboss-websocket-api_1.0_spec</artifactId>
			<version>1.0.0.Final</version>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.3.2</version>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

once all the required and dependent jars got downloaded, let us code with our java server side handler class.
WebSocketHandler.java

/**
 * 
 */
package com.spark.websockets.handler;

import javax.websocket.CloseReason;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

/**
 * @author Sony
 *
 */
@ServerEndpoint("/hello")
public class WebSocketHandler {

	@OnMessage
	public String onMessage(String message){
		System.out.println("-------------------------> Received : "+message);
		return "Response from Server ";
	}
	
	@OnOpen
	public void onOpenConnection(Session session){
		System.out.println("---------------------> Web Socket Connection Opened : "+session.getId());
	}
	
	@OnClose
	public void onCloseConnection(CloseReason closeReason){
		System.out.println("--------------> Close Reason : "+closeReason.getReasonPhrase());
	}

}

Once we are done with our java handler, let us start with our html and java script as below.
index.html

<html>
    <head>
        <title>HelloWorld Web sockets</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    </head>
    <body>
        
        <script language="javascript" type="text/javascript">
            var wsUri = getRootUri() + "/WebSocketsExample/hello";
            function getRootUri() {
                return "ws://" + (document.location.hostname == "" ? "localhost" : document.location.hostname) + ":" +
                        (document.location.port == "" ? "8080" : document.location.port);
            }
            function init() {
                output = document.getElementById("output");
            }
            function send_message() {
                websocket = new WebSocket(wsUri);
                websocket.onopen = function(evt) {
                    onOpen(evt)
                };
                websocket.onmessage = function(evt) {
                    onMessage(evt)
                };
                websocket.onerror = function(evt) {
                    onError(evt)
                };
                websocket.onclose = function (evt) {
                	cloaseConnection();
                };
            }
            function onOpen(evt) {
                writeToScreen("Connected to Endpoint!");
                doSend(textID.value);
            }
            function onMessage(evt) {
                writeToScreen("Message Received: " + evt.data);
            }
            function onError(evt) {
                writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
            }
            function doSend(message) {
                writeToScreen("Message Sent: " + message);
                websocket.send(message);
            }
            function cloaseConnection(){
            	writeToScreen("Closing Connection"+message);
            	websocket.close("closing socket !")
            }
            function writeToScreen(message) {
                var pre = document.createElement("p");
                pre.style.wordWrap = "break-word";
                pre.innerHTML = message;
                output.appendChild(pre);
            }
            
            window.addEventListener("load", init, false);
        </script>
        <h2 style="text-align: center;">Hello World WebSocket Client</h2>
        <br>
        <div style="text-align: center;">
            <form action="">
                <input onclick="send_message()" value="Send" type="button">
                <input id="textID" name="message" value="Hello WebSocket!" type="text"><br>
                <input onclick="closeConnection()" value="Close Connection" type="button">
            </form>
        </div>
        <div id="output"></div>
</body>
</html>

finally we are done with our coding part and ready for deployment, please deploy the war file in JBoss Wildfly 8.1 and hit http://localhost:8080/WebSocketsExample/ in the browser and start playing with web sockets.

Happy WebSockets, Happy Coding 🙂

Basic Concepts of Node.js (Server Side JavaScript)

As Wikipedia states: “Node.js is a packaged compilation of Google’s V8 JavaScript engine, the libuv platform abstraction layer, and a core library, which is itself primarily written in JavaScript.” Beyond that, it’s worth noting that Ryan Dahl, the creator of Node.js, was aiming to create real-time websites with push capability, “inspired by applications like Gmail”. In Node.js, he gave developers a tool for working in the non-blocking, event-driven I/O paradigm.

In this post i will demonstrate some of the basic concepts of Node.js using which you can start server side coding using javascript.this tutorial assume you have a basic knowledge of javascript. please install node.js in your system prior going through the code snippets below. once you have the environment setup save the code in “[Name].js” and to run it open the command prompt and type the following command
node [Name].js as simple as that.

The below code demonstrate how to open a file from the file system and displaying its statistics. also the below code tells the given file is a file or not.

var fp = require("fs");

/**
 * getting file statistics. 
 */
fp.stat('NodeTestFile.txt',function(error,stats){
	if(error){
		throw error;
	}else{
		console.log('NodeTestFile.txt is a file:'+stats.isFile());
		console.log(stats);
	}
});

now its time for us to read a file’s content in bytes and display it in console.

/**
 * reading file content in bytes.
 */
fp.open('NodeTestFile.txt','r',function(err,fd){
	if(err){
		throw err;
	}else{
		var readBuffer = new Buffer(1024);
		bufferOffset = 0;
		bufferLength = readBuffer.length;
		filePosition = 0;
		fp.read(fd,readBuffer,bufferOffset,bufferLength,filePosition,function read(err,readBytes){
			console.log('just read ' + readBytes + ' bytes');
			if (readBytes > 0) {
			console.log(readBytes);
			}
		});
	}
});

Now if we need to read the content from file and display it con console(not as bytes), below is the code

/**
 *	reading file content
**/
fp.readFile('NodeTestFile.txt',{encoding: 'utf-8'},function read(err,data){
	if(err){
		throw err;
	}else{
		console.log(data);
	}
});

as we are done with reading of file, lets us take a chance to write back to the file, please follow the below code to write the content to the file

/**
* Writing the content back to file
**/

fp.open('NodeTestFile.txt','a',function opened(err,fd){
	if(err){
		throw err;
	}else{
		var writeBuffer = new Buffer('content from Buffer'),
		bufferPosition = 0,
		bufferLength = writeBuffer.length,filePosition = null;
		fp.write(fd,writeBuffer,bufferPosition,bufferLength,filePosition,function wrote(err,data){
			if(err){
				throw err;
			}else{
				console.log("content written to file");
			}
		});
	}
});

so here ends our concepts on file handling, now ill show how to create simple http server using node.js.

/**
 * 
 */
var http = require('http');

http.createServer(function handler(req, res) {
		
	res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end("Hello Node JS\n");
    
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

once the above code is saved in file please run from command prompt and open the browser and hit the url you will be seeing “Hello Node JS” in the browser. there is little to take about the code above as you see the very first statement “require(‘http’)” is called the module loading by node.

so far we have covered node.js interacting with file system and http requests by creating http server, now its time for us to make node.js to interact with database.

/**
 * New node file, with database connectivity and handling
 */
var db = require('mysql');
var connection = db.createConnection({
	host : "localhost",
	user : "username",
	password : "password"
});

connection.connect(function(error, result) {
	if (error) {
		console.log('Connection Error: ' + error.message);
		return;
	}
	console.log('Connected to MySQL Database');
	clientReady(connection);
});

clientReady = function(connection) {
	connection.query("use test", function(error, result) {
		if (error) {
			console.log('Connection Error: ' + error.message);
			return;
		}
		console.log('Ready to fetch the results...');
		fetchResults(connection);
	});
};

fetchResults = function(connection) {

	var strQuery = "select * from country";
	connection.query(strQuery, function(err, rows) {
		if (err) {
			throw err;
		} else {
			console.log(rows);
		}
	});
};

thats all folks on the basics of node.js.
Happy coding Node.js 🙂

ExtJS With Spring MVC

Hi all its been long days i put a post on my blog. most of my colleagues were requesting me to put a write up on EXTJS and integrating it with Spring3.x MVC so here is my write for all those who were waiting for it. Basically EXTJS is Extended java script and every widget that you see on the page are coded as components and lot of features included in it. ExtJS comes in two flavors licensed and Open source. you can download ExtJS Lib from Sencha site.

the below is the java project struct for your reference
proj_struct

and here is the web project structure(Webcontent)
proj_struct2

Now lets start creating the UI. the main container which holds most of the components in the extjs page is called ViewPost and here is the code for that

Ext.require([ '*' ]);

Ext.onReady(function() {

	Ext.QuickTips.init();

	//Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
	var panel;
	var viewport = Ext.create('Ext.Viewport', {
		id : 'border-example',
		layout : 'border',
		items : [

		Ext.create('Ext.Component', {
			region : 'north',
			height : 0

		}),

		{
			xtype : 'tabpanel',
			region : 'east',
			title : 'Help Menu',
			dockedItems : [ {
				dock : 'top',
				xtype : 'toolbar',
				items : [ '->', {
					xtype : 'button',
					text : 'test',
					tooltip : 'Test Button'
				} ]
			} ],
			animCollapse : true,
			collapsible : true,
			split : true,
			width : 225,
			minSize : 175,
			maxSize : 400,
			margins : '0 5 0 0',
			activeTab : 1,
			tabPosition : 'bottom',
			items : []
		}, {
			region : 'west',
			stateId : 'navigation-panel',
			id : 'west-panel',
			title : 'Navigation Menu',
			split : true,
			width : 200,
			minWidth : 175,
			maxWidth : 400,
			collapsible : true,
			animCollapse : true,
			margins : '0 0 0 5',
			layout : 'accordion',
			items : [ {
				contentEl : 'west',
				title : '<b>Inventory</b>',
				iconCls : 'nav'
			}, {
				title : 'Purchase Order',
				iconCls : 'settings'
			}, {
				title : 'Patient Management',
				iconCls : 'info'
			} ]
		},

		panel = Ext.create('Ext.tab.Panel', {
			region : 'center',
			deferredRender : false,
			activeTab : 0
		}) ]
	});
	Ext.select("a.newProduct").on('click', function() {
		var tabExists = false;
		var items = panel.items.items;
		for ( var i = 0; i < items.length; i++) {
			if (items[i].id === 'NewProduct') {
				panel.setActiveTab(i);
				tabExists = true;
				panel.setActiveTab(i);
			}
		}
		if (!tabExists) {
			panel.insert(1, NewProduct);
			panel.setActiveTab(0);
		}
	});
	
	Ext.select("a.newFrame").on('click', function() {
		var tabExists = false;
		var items = panel.items.items;
		for ( var i = 0; i < items.length; i++) {
			if (items[i].id === 'NewFrame') {
				panel.setActiveTab(i);
				tabExists = true;
				panel.setActiveTab(i);
			}
		}
		if (!tabExists) {
			panel.insert(1, NewFrame);
			panel.setActiveTab(0);
		}
	});
	
	Ext.select("a.searchProd").on('click', function() {
		var tabExists = false;
		var items = panel.items.items;
		for ( var i = 0; i < items.length; i++) {
			if (items[i].id === 'searchFrame') {
				panel.setActiveTab(i);
				tabExists = true;
				panel.setActiveTab(i);
			}
		}
		if (!tabExists) {
			panel.insert(1, SearchFrame);
			panel.setActiveTab(0);
		}
	});
	
	Ext.select("a.newContactLens").on('click', function() {
		var tabExists = false;
		var items = panel.items.items;
		if(items.length > 0){
			for(var i = 0 ; i < items.length; i++){
				if(items[i].id === 'newContactLens'){
					panel.setActiveTab(i);
					tabExists = true;
					panel.setActiveTab(i);
				}
			}
		}
		if(!tabExists){
			panel.insert(1,newContactLens);
			panel.setActiveTab(0);
		}
	});
});

below is the code for creating a tabbed panel which is inside the ViewPort and all the form components are in the TabbedPanel. this can be done as below.

var item_type_store = Ext.create('Ext.data.Store', {
	fields : [ 'text' ],
	data : [ {
		text : 'type_1'
	}, {
		text : 'type_2'
	}, {
		text : 'type_3'
	}, {
		text : 'type_4'
	}, {
		text : 'type_5'
	}, {
		text : 'type_6'
	} ]
});

var item_type = Ext.create('Ext.form.field.ComboBox', {
	store : item_type_store,
	fieldLabel : 'ItemType',
	name : 'itemtype',
	xtype: 'tbfill'
});

var item_location_store = Ext.create('Ext.data.Store', {
	fields : [ 'text' ],
	data : [ {
		text : 'location_1'
	}, {
		text : 'location_2'
	}, {
		text : 'location_3'
	}, {
		text : 'location_4'
	}, {
		text : 'location_5'
	}, {
		text : 'location_6'
	}, {
		text : 'location_7'
	} ]
});

var item_location = Ext.create('Ext.form.field.ComboBox', {
	store : item_location_store,
	fieldLabel : 'ItemLocation',
	name : 'itemLocation'
});

var supplier_name_store = Ext.create('Ext.data.Store', {
	fields : [ 'text' ],
	data : [ {
		text : 'supplier_1'
	}, {
		text : 'supplier_2'
	}, {
		text : 'supplier_3'
	}, {
		text : 'supplier_4'
	}, {
		text : 'supplier_5'
	}, {
		text : 'supplier_6'
	}, {
		text : 'supplier_7'
	} ]
});

var supplier_name = Ext.create('Ext.form.field.ComboBox', {
	store : supplier_name_store,
	fieldLabel : 'SupplierName',
	name : 'supplierName'
});

var brand_collection_store = Ext.create('Ext.data.Store', {
	fields : [ 'text' ],
	data : [ {
		text : 'Brand_1'
	}, {
		text : 'Brand_2'
	}, {
		text : 'Brand_3'
	}, {
		text : 'Brand_4'
	}, {
		text : 'Brand_5'
	}, {
		text : 'Brand_6'
	}, {
		text : 'Brand_7'
	}, {
		text : 'Brand_8'
	} ]
});

var brand_collection = Ext.create('Ext.form.field.ComboBox', {
	store : brand_collection_store,
	fieldLabel : 'Brand/Collection',
	name : 'brandCollection'
});

var NewProduct = Ext.create('Ext.form.Panel', {
	layout : 'vbox',
	contentEl : 'center2',
	title : 'New Product',
	id : 'NewProduct',
	defaults : {
		bodyPadding : 10

	},
	items : [ {
		xtype : 'panel',
		width : 900,
		collapsible: true,
		title : 'Product Details',
		defaults : {
			width : 230,
			cls : 'form-field'
		},
		defaultType : 'textfield',
		items : [ {
			fieldLabel : 'SrNo',
			name : 'srNo',
			value : '',
			validator : function(event) {
				if (!(/[0-9]/.test(this.getValue()))) {
					return "This Field should be in Numbers only";
				}
				return true;
			}
		}, {
			fieldLabel : 'ItemNumber',
			name : 'iteNumber',
			value : ''
		
		}, {
			fieldLabel : 'Description',
			name : 'desc',
			value : ''
		
		}, {
			fieldLabel : 'Item Code',
			name : 'itemCode',
			value : ''
		
		}, {
			xtype : item_type,
			labelClsExtra : 'form-field'
		}, {
			xtype : item_location,
			labelClsExtra : 'form-field'
		}, {
			xtype : supplier_name,
			labelClsExtra : 'form-field'
		}, {
			xtype : brand_collection,
			labelClsExtra : 'form-field'
		}, {
			fieldLabel : 'Tax(%)',
			name : 'itemTax',
			value : ''
		
		}]
	}, {
		xtype : 'panel',
		title : 'Product Attributes',
		width : 900,
		flex : 2,
		collapsible: true,
		defaults : {
			cls : 'form-field'
		},
		items : [ {
			xtype : 'checkbox',
			fieldLabel : 'Active',
			name : 'active',
			checked : false,
		}, {
			xtype : 'checkbox',
			fieldLabel : 'Discounted',
			name : 'discounted',
			checked : false,
		}, {
			xtype : 'checkbox',
			fieldLabel : 'Dispensable',
			name : 'dispensable',
			checked : false,
		}, {
			xtype : 'checkbox',
			fieldLabel : 'Taxable',
			name : 'taxable',
			checked : false,
		} ]
	},{
		xtype : 'panel',
		title : 'Product Cost Details',
		width : 900,
		flex : 2,
		collapsible: true,
		autoScroll: true,
		defaults : {
			cls : 'form-field'
		},
		items : [ {
			xtype : 'textfield',
			fieldLabel : 'SupplierCost',
			name : 'supplierCost',
			value : ''
		
		}, {
			xtype : 'textfield',
			fieldLabel : 'LandingCost',
			name : 'landingCost',
			value : ''
		
		}, {
			xtype : 'textfield',
			fieldLabel : 'LastOrdered',
			name : 'lastOrdered',
			value : ''
		}, {
			xtype : 'textfield',
			fieldLabel : 'LastReceived',
			name : 'lastReceived',
			value : ''
		},  {
			xtype : 'textfield',
			fieldLabel : 'QuantityOrdered',
			name : 'quantityOnOrder',
			value : ''
		
		}, {
			xtype : 'textfield',
			fieldLabel : 'QuantityReceived',
			name : 'quantityReceived',
			value : ''
		
		}]
	} ],
	buttons : [
			{
				text : 'Save',
				handler : function() {
					var productForm = this.up('form').getForm();
					if (!productForm.isValid()) {
						alert("Please enter proper details!");
					} else {
						console.log(productForm.getValues());
						Ext.Ajax.request({
							url : 'spring/product/newproduct',
							method : 'POST',
							params : {
								productDetails : Ext
										.encode(productForm.getValues())
							},
							scope : this,
							success : function(response) {
								// Received response from the server
								msg = Ext.decode(response.responseText);
								if (msg.success) {
									Ext.MessageBox.alert('',
											msg.message);
								} else {
									Ext.MessageBox.alert('',
											msg.message);
								}
							},
							failure : function(response) {
								Ext.MessageBox.alert(msg.message);
							}
						});
					}

				}
			}, {
				text : 'Cancel',
				handler : function() {
					this.up('form').getForm().reset();
				}
			} ]

});

the above code has lot many things to understand. There are data stores that got created, components such textfields, comboboxt etc , buttons and their handlers. inside the handlers we have Ajax calls that will submit the form data to our spring controller.

the main moto of ExtJs is one HTML and many JavaScript files now to launch our application we need one initial page that launches and renders the extjs components and here it goes

<html>
<head>
<title>Vision One</title>

<link rel="stylesheet" type="text/css"
	href="resources/extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css"
	href="resources/extjs/resources/css/vision-one-custom.css">
<script type="text/javascript" src="resources/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="view/newProduct.js"></script>
<script type="text/javascript" src="view/newContactLens.js"></script>
<script type="text/javascript" src="view/newFrame.js"></script>
<script type="text/javascript" src="view/searchProduct.js"></script>
<script type="text/javascript" src="view/vision_ui.js"></script>

</head>
<body>
	<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
	<div id="west" class="x-hide-display">
		<ul>
			<li><a href="#" class="newProduct">New Product(others)</a></li>
			<li><a href="#" class="newFrame">New Frames</a></li>
			<li><a href="#" class="newContactLens">New Contact Lens</a></li>
			<li><a href="#" class="searchProd">Search Products</a></li>
			<li><a href="#" class="searchFrame">Search Frames</a></li>
			<li><a href="#" class="searchLense">Search Lenses</a></li>
		</ul>
	</div>
	<div id="center2" class="x-hide-display"></div>
	<div id="center1" class="x-hide-display"></div>
	<div id="props-panel" class="x-hide-display"
		style="width: 200px; height: 200px; overflow: hidden;"></div>
</body>
</html>

Now lets look at the Middleware where the technology used is Spring MVC. First the request from ExtJS hits one of our spring REST based controller from there the request is deligated to service layer(Service IMPL) and from there again the request is deligated to DAO layer(DAO IMPL). lets look into our spring REST controller implementation

package com.spark.visionone.controller;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;
import com.spark.visionone.service.ProductService;
import com.spark.visionone.utils.VisionOneUtils;

/**
 * @author Pavan Kumar Mantha
 *
 */
@Controller
@RequestMapping(value="/product")
public class ProductController {
	
	@Autowired
	ProductService productService;
	
	@RequestMapping(value="/newproduct",method =RequestMethod.POST)
	public @ResponseBody String saveProductDetails(HttpServletRequest httpServletRequest){
		
		String jsonStr = httpServletRequest.getParameter("productDetails");
		System.out.println(jsonStr);
		OtherProduct otherProduct = VisionOneUtils.JsonToJava(jsonStr, OtherProduct.class);
		GenericMessageObject genericMessageObject = productService.saveProductDetails(otherProduct);
		String jsonResonseStr = VisionOneUtils.JavaToJson(genericMessageObject);
		return jsonResonseStr;
	}
	
}

In the above implementation if you observer the method is annotaed as “@ResponseBody” which will help spring controller to return JSON object back to the ExtJS.

Now its time to see our Service Layer.

package com.spark.visionone.service;

import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;

/**
 * @author Pavan kumar made class to return
 *         GenericMessageObject and passing OtherProduct object as parameter
 */
public interface ProductService {

	public GenericMessageObject saveProductDetails(OtherProduct otherProduct);

}

Now lets see the implementation of the service interface that we have created.

/**
 * 
 */
package com.spark.visionone.service.impl;

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

import com.spark.visionone.dao.ProductDAO;
import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;
import com.spark.visionone.service.ProductService;

/**
 * @author Pavan Kumar Mantha
 *
 */
@Service(value="productService")
public class ProductServiceImpl implements ProductService{

	@Autowired
	ProductDAO productDAO;
	
	@Override
	public GenericMessageObject saveProductDetails(OtherProduct otherProduct) {
		return productDAO.saveProduct(otherProduct);
	}

}

Now lets us look into the interface and its implementation of DAO Layer at once.

/**
 * 
 */
package com.spark.visionone.dao;

import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;

/**
 * @author PavanKumar Mantha
 *
 */
public interface ProductDAO {

	public GenericMessageObject saveProduct(OtherProduct otherProduct);
}

/**
 * 
 */
package com.spark.visionone.dao.impl;

import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;

import org.springframework.stereotype.Repository;

import com.spark.visionone.dao.ProductDAO;
import com.spark.visionone.model.GenericMessageObject;
import com.spark.visionone.model.NewFrame;
import com.spark.visionone.model.OtherProduct;

/**
 * @author PavanKumar Mantha
 *
 */
@Repository(value="productDAO")
public class ProductDAOImpl implements ProductDAO {

	@PersistenceContext
	EntityManager entityManager;
	/* (non-Javadoc)
	 * @see com.spark.visionone.dao.ProductDAO#saveProduct(com.spark.visionone.model.OtherProduct)
	 */
	@Override
	public GenericMessageObject saveProduct(OtherProduct otherProduct) {
		GenericMessageObject genericMessageObject = new GenericMessageObject();
		try {
			
			/*
			 *  logic to persist
			 *  entityManager.persist(otherProduct);
			 */
			entityManager.persist(otherProduct);
			System.out.println("Other Product: "+otherProduct.getBrandCollection());
			genericMessageObject.setSuccess(true);
			genericMessageObject.setMessage("details saved successfully !");
		} catch (Exception e) {
			e.printStackTrace();
			genericMessageObject.setSuccess(false);
			genericMessageObject.setMessage("Exception in saving details !");
		}
		return genericMessageObject;
	}
	
	
}

Here we used JPA to persist the objects to back end database.
the below are the different Model (pojo) classes that are used in the project for data storage and communication between different layers.

BaseVO.java

/**
 * 
 */
package com.spark.visionone.model;

import java.io.Serializable;
import java.sql.Date;

import javax.persistence.Column;

/**
 * @author PavanKumar Mantha
 * 
 */
public class BaseVO implements Serializable {

	private Date createdDate;
	private Date updateDate;

	/**
	 * @return the createdDate
	 */
	@Column
	public Date getCreatedDate() {
		return createdDate;
	}

	/**
	 * @param createdDate
	 *            the createdDate to set
	 */
	public void setCreatedDate(Date createdDate) {
		this.createdDate = createdDate;
	}

	/**
	 * @return the updateDate
	 */
	@Column
	public Date getUpdateDate() {
		return updateDate;
	}

	/**
	 * @param updateDate
	 *            the updateDate to set
	 */
	public void setUpdateDate(Date updateDate) {
		this.updateDate = updateDate;
	}

	/* (non-Javadoc)
	 * @see java.lang.Object#hashCode()
	 */
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result
				+ ((createdDate == null) ? 0 : createdDate.hashCode());
		result = prime * result
				+ ((updateDate == null) ? 0 : updateDate.hashCode());
		return result;
	}

	/* (non-Javadoc)
	 * @see java.lang.Object#equals(java.lang.Object)
	 */
	@Override
	public boolean equals(Object obj) {
		if (this == obj) {
			return true;
		}
		if (obj == null) {
			return false;
		}
		if (!(obj instanceof BaseVO)) {
			return false;
		}
		BaseVO other = (BaseVO) obj;
		if (createdDate == null) {
			if (other.createdDate != null) {
				return false;
			}
		} else if (!createdDate.equals(other.createdDate)) {
			return false;
		}
		if (updateDate == null) {
			if (other.updateDate != null) {
				return false;
			}
		} else if (!updateDate.equals(other.updateDate)) {
			return false;
		}
		return true;
	}

}

OtherProduct.java

/**
 * 
 */
package com.spark.visionone.model;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

/**
 * @author PavanKumar Mantha
 * 
 */
@Entity
@Table(name="new_product")
public class OtherProduct extends BaseVO implements Serializable {

	private String srNo;
	private String iteNumber;
	private String desc;
	private String itemCode;
	private String itemtype;
	private String ItemLocation;
	private String supplierName;
	private String brandCollection;
	private String active;
	private String discounted;
	private String dispensable;
	private String taxable;
	private String supplierCost;
	private String landingCost;
	private String lastOrdered;
	private String lastReceived;
	private String lastSold;
	private String quantityOnOrder;
	private String quantityOnHand;
	private String totalSold;
	private String quantityReceived;

	/**
	 * @return the srNo
	 */
	@Id
	@GeneratedValue(strategy=GenerationType.AUTO)
	@Column(name="SrNo")
	public String getSrNo() {
		return srNo;
	}

	/**
	 * @param srNo
	 *            the srNo to set
	 */
	public void setSrNo(String srNo) {
		this.srNo = srNo;
	}

	/**
	 * @return the iteNumber
	 */
	@Column
	public String getIteNumber() {
		return iteNumber;
	}

	/**
	 * @param iteNumber
	 *            the iteNumber to set
	 */
	public void setIteNumber(String iteNumber) {
		this.iteNumber = iteNumber;
	}

	/**
	 * @return the desc
	 */
	@Column
	public String getDesc() {
		return desc;
	}

	/**
	 * @param desc
	 *            the desc to set
	 */
	public void setDesc(String desc) {
		this.desc = desc;
	}

	/**
	 * @return the itemCode
	 */
	@Column
	public String getItemCode() {
		return itemCode;
	}

	/**
	 * @param itemCode
	 *            the itemCode to set
	 */
	public void setItemCode(String itemCode) {
		this.itemCode = itemCode;
	}

	/**
	 * @return the itemtype
	 */
	@Column
	public String getItemtype() {
		return itemtype;
	}

	/**
	 * @param itemtype
	 *            the itemtype to set
	 */
	public void setItemtype(String itemtype) {
		this.itemtype = itemtype;
	}

	/**
	 * @return the itemLocation
	 */
	@Column
	public String getItemLocation() {
		return ItemLocation;
	}

	/**
	 * @param itemLocation
	 *            the itemLocation to set
	 */
	public void setItemLocation(String itemLocation) {
		ItemLocation = itemLocation;
	}

	/**
	 * @return the supplierName
	 */
	@Column
	public String getSupplierName() {
		return supplierName;
	}

	/**
	 * @param supplierName
	 *            the supplierName to set
	 */
	public void setSupplierName(String supplierName) {
		this.supplierName = supplierName;
	}

	/**
	 * @return the brandCollection
	 */
	@Column
	public String getBrandCollection() {
		return brandCollection;
	}

	/**
	 * @param brandCollection
	 *            the brandCollection to set
	 */
	public void setBrandCollection(String brandCollection) {
		this.brandCollection = brandCollection;
	}

	/**
	 * @return the active
	 */
	@Column
	public String getActive() {
		return active;
	}

	/**
	 * @param active
	 *            the active to set
	 */
	public void setActive(String active) {
		this.active = active;
	}

	/**
	 * @return the discounted
	 */
	@Column
	public String getDiscounted() {
		return discounted;
	}

	/**
	 * @param discounted
	 *            the discounted to set
	 */
	public void setDiscounted(String discounted) {
		this.discounted = discounted;
	}

	/**
	 * @return the dispensable
	 */
	@Column
	public String getDispensable() {
		return dispensable;
	}

	/**
	 * @param dispensable
	 *            the dispensable to set
	 */
	public void setDispensable(String dispensable) {
		this.dispensable = dispensable;
	}

	/**
	 * @return the taxable
	 */
	@Column
	public String getTaxable() {
		return taxable;
	}

	/**
	 * @param taxable
	 *            the taxable to set
	 */
	public void setTaxable(String taxable) {
		this.taxable = taxable;
	}

	/**
	 * @return the supplierCost
	 */
	@Column
	public String getSupplierCost() {
		return supplierCost;
	}

	/**
	 * @param supplierCost
	 *            the supplierCost to set
	 */
	public void setSupplierCost(String supplierCost) {
		this.supplierCost = supplierCost;
	}

	/**
	 * @return the landingCost
	 */
	@Column
	public String getLandingCost() {
		return landingCost;
	}

	/**
	 * @param landingCost
	 *            the landingCost to set
	 */
	public void setLandingCost(String landingCost) {
		this.landingCost = landingCost;
	}

	/**
	 * @return the lastOrdered
	 */
	@Column
	public String getLastOrdered() {
		return lastOrdered;
	}

	/**
	 * @param lastOrdered
	 *            the lastOrdered to set
	 */
	public void setLastOrdered(String lastOrdered) {
		this.lastOrdered = lastOrdered;
	}

	/**
	 * @return the lastReceived
	 */
	@Column
	public String getLastReceived() {
		return lastReceived;
	}

	/**
	 * @param lastReceived
	 *            the lastReceived to set
	 */
	public void setLastReceived(String lastReceived) {
		this.lastReceived = lastReceived;
	}

	/**
	 * @return the lastSold
	 */
	@Column
	public String getLastSold() {
		return lastSold;
	}

	/**
	 * @param lastSold
	 *            the lastSold to set
	 */
	public void setLastSold(String lastSold) {
		this.lastSold = lastSold;
	}

	/**
	 * @return the quantityOnOrder
	 */
	@Column
	public String getQuantityOnOrder() {
		return quantityOnOrder;
	}

	/**
	 * @param quantityOnOrder
	 *            the quantityOnOrder to set
	 */
	public void setQuantityOnOrder(String quantityOnOrder) {
		this.quantityOnOrder = quantityOnOrder;
	}

	/**
	 * @return the quantityOnHand
	 */
	@Column
	public String getQuantityOnHand() {
		return quantityOnHand;
	}

	/**
	 * @param quantityOnHand
	 *            the quantityOnHand to set
	 */
	public void setQuantityOnHand(String quantityOnHand) {
		this.quantityOnHand = quantityOnHand;
	}

	/**
	 * @return the totalSold
	 */
	@Column
	public String getTotalSold() {
		return totalSold;
	}

	/**
	 * @param totalSold
	 *            the totalSold to set
	 */
	public void setTotalSold(String totalSold) {
		this.totalSold = totalSold;
	}
	
	/**
	 * @return the quantityReceived
	 */
	@Column
	public String getQuantityReceived() {
		return quantityReceived;
	}

	/**
	 * @param quantityReceived the quantityReceived to set
	 */
	public void setQuantityReceived(String quantityReceived) {
		this.quantityReceived = quantityReceived;
	}

	/*
	 * (non-Javadoc)
	 * 
	 * @see java.lang.Object#hashCode()
	 */
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result
				+ ((ItemLocation == null) ? 0 : ItemLocation.hashCode());
		result = prime * result + ((active == null) ? 0 : active.hashCode());
		result = prime * result
				+ ((brandCollection == null) ? 0 : brandCollection.hashCode());
		result = prime * result + ((desc == null) ? 0 : desc.hashCode());
		result = prime * result
				+ ((discounted == null) ? 0 : discounted.hashCode());
		result = prime * result
				+ ((dispensable == null) ? 0 : dispensable.hashCode());
		result = prime * result
				+ ((iteNumber == null) ? 0 : iteNumber.hashCode());
		result = prime * result
				+ ((itemCode == null) ? 0 : itemCode.hashCode());
		result = prime * result
				+ ((itemtype == null) ? 0 : itemtype.hashCode());
		result = prime * result
				+ ((landingCost == null) ? 0 : landingCost.hashCode());
		result = prime * result
				+ ((lastOrdered == null) ? 0 : lastOrdered.hashCode());
		result = prime * result
				+ ((lastReceived == null) ? 0 : lastReceived.hashCode());
		result = prime * result
				+ ((lastSold == null) ? 0 : lastSold.hashCode());
		result = prime * result
				+ ((quantityOnHand == null) ? 0 : quantityOnHand.hashCode());
		result = prime * result
				+ ((quantityOnOrder == null) ? 0 : quantityOnOrder.hashCode());
		result = prime * result + ((srNo == null) ? 0 : srNo.hashCode());
		result = prime * result
				+ ((supplierCost == null) ? 0 : supplierCost.hashCode());
		result = prime * result
				+ ((supplierName == null) ? 0 : supplierName.hashCode());
		result = prime * result + ((taxable == null) ? 0 : taxable.hashCode());
		result = prime * result
				+ ((totalSold == null) ? 0 : totalSold.hashCode());
		return result;
	}

	/*
	 * (non-Javadoc)
	 * 
	 * @see java.lang.Object#equals(java.lang.Object)
	 */
	@Override
	public boolean equals(Object obj) {
		if (this == obj) {
			return true;
		}
		if (obj == null) {
			return false;
		}
		if (!(obj instanceof OtherProduct)) {
			return false;
		}
		OtherProduct other = (OtherProduct) obj;
		if (ItemLocation == null) {
			if (other.ItemLocation != null) {
				return false;
			}
		} else if (!ItemLocation.equals(other.ItemLocation)) {
			return false;
		}
		if (active == null) {
			if (other.active != null) {
				return false;
			}
		} else if (!active.equals(other.active)) {
			return false;
		}
		if (brandCollection == null) {
			if (other.brandCollection != null) {
				return false;
			}
		} else if (!brandCollection.equals(other.brandCollection)) {
			return false;
		}
		if (desc == null) {
			if (other.desc != null) {
				return false;
			}
		} else if (!desc.equals(other.desc)) {
			return false;
		}
		if (discounted == null) {
			if (other.discounted != null) {
				return false;
			}
		} else if (!discounted.equals(other.discounted)) {
			return false;
		}
		if (dispensable == null) {
			if (other.dispensable != null) {
				return false;
			}
		} else if (!dispensable.equals(other.dispensable)) {
			return false;
		}
		if (iteNumber == null) {
			if (other.iteNumber != null) {
				return false;
			}
		} else if (!iteNumber.equals(other.iteNumber)) {
			return false;
		}
		if (itemCode == null) {
			if (other.itemCode != null) {
				return false;
			}
		} else if (!itemCode.equals(other.itemCode)) {
			return false;
		}
		if (itemtype == null) {
			if (other.itemtype != null) {
				return false;
			}
		} else if (!itemtype.equals(other.itemtype)) {
			return false;
		}
		if (landingCost == null) {
			if (other.landingCost != null) {
				return false;
			}
		} else if (!landingCost.equals(other.landingCost)) {
			return false;
		}
		if (lastOrdered == null) {
			if (other.lastOrdered != null) {
				return false;
			}
		} else if (!lastOrdered.equals(other.lastOrdered)) {
			return false;
		}
		if (lastReceived == null) {
			if (other.lastReceived != null) {
				return false;
			}
		} else if (!lastReceived.equals(other.lastReceived)) {
			return false;
		}
		if (lastSold == null) {
			if (other.lastSold != null) {
				return false;
			}
		} else if (!lastSold.equals(other.lastSold)) {
			return false;
		}
		if (quantityOnHand == null) {
			if (other.quantityOnHand != null) {
				return false;
			}
		} else if (!quantityOnHand.equals(other.quantityOnHand)) {
			return false;
		}
		if (quantityOnOrder == null) {
			if (other.quantityOnOrder != null) {
				return false;
			}
		} else if (!quantityOnOrder.equals(other.quantityOnOrder)) {
			return false;
		}
		if (srNo == null) {
			if (other.srNo != null) {
				return false;
			}
		} else if (!srNo.equals(other.srNo)) {
			return false;
		}
		if (supplierCost == null) {
			if (other.supplierCost != null) {
				return false;
			}
		} else if (!supplierCost.equals(other.supplierCost)) {
			return false;
		}
		if (supplierName == null) {
			if (other.supplierName != null) {
				return false;
			}
		} else if (!supplierName.equals(other.supplierName)) {
			return false;
		}
		if (taxable == null) {
			if (other.taxable != null) {
				return false;
			}
		} else if (!taxable.equals(other.taxable)) {
			return false;
		}
		if (totalSold == null) {
			if (other.totalSold != null) {
				return false;
			}
		} else if (!totalSold.equals(other.totalSold)) {
			return false;
		}
		return true;
	}
}

GenericMessageObject.java

/**
 * 
 */
package com.spark.visionone.model;

import java.io.Serializable;

/**
 * @author PavanKumar Mantha
 * 
 */
public class GenericMessageObject implements Serializable{

	private Boolean success;
	private String message;

	/**
	 * @return the success
	 */
	public Boolean getSuccess() {
		return success;
	}

	/**
	 * @param success
	 *            the success to set
	 */
	public void setSuccess(Boolean success) {
		this.success = success;
	}

	/**
	 * @return the message
	 */
	public String getMessage() {
		return message;
	}

	/**
	 * @param message
	 *            the message to set
	 */
	public void setMessage(String message) {
		this.message = message;
	}

}

Here are the configuration files required for Spring and JPA to run un combination.
WEB-INF/spring/application-context.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:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xmlns:jee="http://www.springframework.org/schema/jee"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:task="http://www.springframework.org/schema/task"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
		http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
		http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd
		http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
		http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-3.2.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd">

	<!-- Activates various annotations to be detected in bean classes for ex @Autowired -->
	<context:annotation-config/>
	<mvc:annotation-driven></mvc:annotation-driven>
	
	<context:component-scan base-package="com.spark.visionone"/>
	
	<tx:annotation-driven/>
	
	<bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">
		<property name="persistenceUnitName" value="persistentUnit"/>
		<property name="dataSource" ref="dataSource"/>
		<property name="jpaVendorAdapter">
			<bean class="org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter">
				<property name="showSql" value="true"/>
				<property name="generateDdl" value="false"/>
				<property name="databasePlatform" value="org.hibernate.dialect.MySQLDialect"/>
			</bean>
		</property>
	</bean>
	
	<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="com.mysql.jdbc.Driver"/>
		<property name="url" value="jdbc:mysql://localhost:3306/visionone"/>
		<property name="username" value="root"/>
		<property name="password" value="root"/>
	</bean>
	
	<bean id="transactionManager" class="org.springframework.orm.jpa.JpaTransactionManager">
		<property name="entityManagerFactory" ref="entityManagerFactory"/>
	</bean>
</beans>

WEB-INF/spring/spring-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans: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:mvc="http://www.springframework.org/schema/mvc" xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
		http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd">

	<context:annotation-config/>
	<mvc:annotation-driven></mvc:annotation-driven>
	
	<context:component-scan base-package="com.spark.visionone"/>
	
	<tx:annotation-driven/>
	
	
	<!-- <mvc:resources location="/extjs/**" mapping="/resources/extjs"/> -->
</beans:beans>

WEB-INF/classes/META-INF/persistence.xml

<persistence xmlns="http://java.sun.com/xml/ns/persistence"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd"
	version="2.0">
	
	<persistence-unit name="persistentUnit" transaction-type="RESOURCE_LOCAL">
	<class>com.spark.visionone.model.OtherProduct</class>
	<class>com.spark.visionone.model.BaseVO</class>
	<class>com.spark.visionone.model.GenericMessageObject</class>
	</persistence-unit>
	
</persistence>

The project depending libs are as follows:
project-libs

this completes the coding part and its time for deployment and running the project. we can deploy the project to any web container and ran and say submit once all the fields ad filled you can see the request to spring controller is fired as below and data is sent in JSON format

finally the screen looks like this:
finalScreen

request

Dedicated to all those who want to learn EXTJS
Happy Coding 🙂

AngularJS a modern JavaScript

Hi all, i was doing some weekend research on the modern JavaScript frameworks and i felt there are lot many awesome features in the latest JavaScript frameworks. so now i wanted to start a series of articles which describe Angular in its vanilla flavour. Any one with basic Javascript, HTML background can start working in AngularJS without any hassle.

Let us dive into the world of AngularJS and see what it is.
AngularJS-icon

AngularJS is an open-source JavaScript framework, developed by Google . Its main aim is to incorporate browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

google maintain Angular CDN at:

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="ISO-8859-1">
<title>Angular JS Tutorial</title>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
	 Write some text in textbox:
    <input type="text" ng-model="sometext" />
 
    <h1>Hello {{ sometext }}</h1>
</body>
</html>

please run this and u will notice that view and model are bound together, when ever u change the model value, the view gets automatically changes.

here is the online demo: Demo

Happy AngularJS 🙂

JQuery mobile and jqPlot

Hi guys, its a long time i wrote a post, these days got little busy with work. So now this is a post to integrate jquery mobile api with the jqplot to render some grap dash boards in mobile and these garph dash bords when combined with jquery mobile are compatible with all popular OS like Android and iOS .. etc. So below is the code to do it and its very self explanatory.

Following files are to be included and then start the coding part
Proj_Exp

<html lang="html">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Dynamic collapsible - jQuery Mobile Demos</title>
		<link rel="stylesheet"  href="css/jquery.mobile-1.3.1.min.css">
		<link rel="stylesheet" href="css/jqm-demos.css">
		<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

		<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="js/index.js"></script>
		<script src="js/jquery.mobile-1.3.1.min.js"></script>

		<script>
			$(document).on("pageshow", function() {
				$.jqplot.config.enablePlugins = true;
				var s1 = [2, 6, 7, 10];
				var ticks = ['a', 'b', 'c', 'd'];

				plot1 = $.jqplot('chart1', [s1], {
					// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
					animate : !$.jqplot.use_excanvas,
					seriesDefaults : {
						renderer : $.jqplot.BarRenderer,
						pointLabels : {
							show : false
						}
					},
					axes : {
						xaxis : {
							renderer : $.jqplot.CategoryAxisRenderer
							//ticks : ticks
						}
					},
					highlighter : {
						show : false
					}
				});

				$('#chart1').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
					$('#info1').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
				});

				var data = [['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14], ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]];
				var plot1 = jQuery.jqplot('chart2', [data], {
					seriesDefaults : {
						// Make this a pie chart.
						renderer : jQuery.jqplot.PieRenderer,
						rendererOptions : {
							// Put data labels on the pie slices.
							// By default, labels show the percentage of the slice.
							showDataLabels : true
						}
					},
					legend : {
						show : false,
						location : 'e'
					}
				});
			});
		</script>
	</head>
	<body>

		<!-- Start of first page: #one -->
		<div data-role="page" id="one">

			<div data-role="header">
				<h1>Multi-page</h1>
			</div><!-- /header -->

			<div data-role="content" >
				<h2>Home Page</h2>

				<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
					<li data-role="list-divider">
						Log Analysis Report
					</li>
					<li>
						<a href="index.html" data-theme="e">Bar Chart Analysis</a>
					</li>
					<li>
						<a href="index.html">Pie Chart Analysis</a>
					</li>
					<li>
						<a href="index.html">Line Chart Analysis</a>
					</li>
					<li>
						<a href="index.html">Combination Chart Analysis</a>
					</li>
				</ul>
				<div>
					<span>You Clicked: </span><span id="info1">Nothing yet</span>
				</div>

				<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>

				<h3>Show internal pages:</h3>
				<p>
					<a href="#two" data-role="button" data-transition="slideup">Show Pie Report</a>
				</p>

			</div><!-- /content -->

			<div data-role="footer" data-theme="d">
				<h4>Page Footer</h4>
			</div><!-- /footer -->
		</div><!-- /page one -->

		<!-- Start of second page: #two -->
		<div data-role="page" id="two" data-theme="a">

			<div data-role="header">
				<h1>Pie Report</h1>
			</div><!-- /header -->

			<div data-role="content" data-theme="a">
				<h2>Pie Report</h2>
				<div id="chart2" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
				<p>
					<a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to Home Page</a>
				</p>

			</div><!-- /content -->

			<div data-role="footer">
				<h4>Page Footer</h4>
			</div><!-- /footer -->
		</div><!-- /page two -->

		<!-- Don't touch this! -->
		<script class="include" type="text/javascript" src="js/jquery.jqplot.min.js"></script>

		<!-- Additional plugins go here -->

		<script class="include" type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
		<script class="include" type="text/javascript" src="js/jqplot.pieRenderer.min.js"></script>

		<script class="include" type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
		<script class="include" type="text/javascript" src="js/jqplot.pointLabels.min.js"></script>

		<!-- End additional plugins -->

	</body>
</html>

and the following are the simulated output for the above code in the mobile.

first_screen

sec_screen

Happy Coding mobile apps 🙂

jqGrid + Servlet

Hello all, one of my fiend has a requirement to generate a data grid model so, we thought directly using jqGrid component here is my tutorial which will populate data in grid format.
Step 1: jqGrid will call servlet using an Ajax call.
Step 2: Servlet returns data in the form of JSON.
Step 3: jqGrid Component will parse JSON data from servlet and render it in the component.
Step 4: giving additional functionality as “add,edit,delete” directly to jqGrid component.
prj_structure

lets start looking at the logic
GridServlet.java

package com.spark.javaee.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JSONSerializer;

/**
 * Servlet implementation class LoginServlet
 */
public class GridServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		
		GridModel gridModel1 = new GridModel();
		gridModel1.setId(1);
		gridModel1.setFirstName("PavanKumar");
		gridModel1.setLastName("Mantha");
		gridModel1.setCity("Hyderabad");
		gridModel1.setState("AndhraPradesh");
		gridModel1.setPhoneNumber("1234567890");
		
		GridModel gridModel2 = new GridModel();
		gridModel2.setId(2);
		gridModel2.setFirstName("PavanKumar");
		gridModel2.setLastName("Mantha");
		gridModel2.setCity("Hyderabad");
		gridModel2.setState("AndhraPradesh");
		gridModel2.setPhoneNumber("1234567890");
		
		List<GridModel> gridModels = new ArrayList<>();
		gridModels.add(gridModel1);
		gridModels.add(gridModel2);
		
		JSONArray jsonArray = (JSONArray)JSONSerializer.toJSON(gridModels);
		String json = "{'page':1,'total':'2','records':'1','rows':"+jsonArray+"}";
		JSONObject jsonObject = (JSONObject)JSONSerializer.toJSON(json);
		
		PrintWriter out = response.getWriter();
		out.print(jsonObject.toString());
	}

}

Lets look at the model class
GridModel.java

/**
 * 
 */
package com.spark.javaee.servlets;

import java.io.Serializable;

/**
 * @author Sony
 * 
 */
public class GridModel implements Serializable {

	private int id;
	private String firstName;
	private String lastName;
	private String city;
	private String State;
	private String phoneNumber;

	/**
	 * @return the id
	 */
	public int getId() {
		return id;
	}

	/**
	 * @param id
	 *            the id to set
	 */
	public void setId(int id) {
		this.id = id;
	}

	/**
	 * @return the firstName
	 */
	public String getFirstName() {
		return firstName;
	}

	/**
	 * @param firstName
	 *            the firstName to set
	 */
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}

	/**
	 * @return the lastName
	 */
	public String getLastName() {
		return lastName;
	}

	/**
	 * @param lastName
	 *            the lastName to set
	 */
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}

	/**
	 * @return the city
	 */
	public String getCity() {
		return city;
	}

	/**
	 * @param city
	 *            the city to set
	 */
	public void setCity(String city) {
		this.city = city;
	}

	/**
	 * @return the state
	 */
	public String getState() {
		return State;
	}

	/**
	 * @param state
	 *            the state to set
	 */
	public void setState(String state) {
		State = state;
	}

	/**
	 * @return the phoneNumber
	 */
	public String getPhoneNumber() {
		return phoneNumber;
	}

	/**
	 * @param phoneNumber
	 *            the phoneNumber to set
	 */
	public void setPhoneNumber(String phoneNumber) {
		this.phoneNumber = phoneNumber;
	}

}

now its time to look at jsp

<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jqGird Demo</title>
<link rel="stylesheet"
	href="assets/themes/redmond/jquery.ui.all.css">

<script src="assets/js/jquery-1.8.0.min.js"></script>
<script src="assets/ui/jquery.ui.core.js"></script>
<script src="assets/ui/jquery.ui.widget.js"></script>
<script src="assets/ui/jquery.ui.datepicker.js"></script>
<script src="assets/js/grid.locale-en.js"></script>
<script src="assets/js/jquery.jqGrid.src.js"></script>
<script src="assets/js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="assets/js/json2.js"></script>


<link rel="stylesheet" href="assets/demos.css">
<link rel="stylesheet" href="assets/ui.jqgrid.css">
<script src="js/getGridData.js"></script>
</head>
<body>
	<table id="list">
		<tr>
			<td />
		</tr>
	</table>
	<div id="pager"></div>
</body>
</html>

lets look at the javascript

/**
 * Code for JQuery Grid.
 */
$(document)
		.ready(
				function() {
					$("#list")
							.jqGrid(
									{
										url : 'http://localhost:8080/JQueryTest/GridServlet',
										datatype : 'json',
										mtype : 'POST',
										colNames : [ 'id', 'firstName',
												'lastName', 'city', 'state',
												'phoneNumber' ],
										colModel : [ {
											name : 'id',
											index : 'id',
											width : 100
										}, {
											name : 'firstName',
											index : 'firstName',
											width : 150,
											editable : true
										}, {
											name : 'lastName',
											index : 'lastName',
											width : 150,
											editable : true
										}, {
											name : 'city',
											index : 'city',
											width : 80,
											editable : true
										}, {
											name : 'state',
											index : 'state',
											width : 100,
											editable : true
										}, {
											name : 'phoneNumber',
											index : 'phoneNumber',
											width : 80,
											editable : true
										} ],
										pager : '#pager',
										rowNum : 10,
										rowList : [ 10, 20, 30 ],
										sortname : 'invid',
										sortorder : 'desc',
										viewrecords : true,
										gridview : true,
										caption : 'Data Report',
										jsonReader : {
											repeatitems : false,
										},
										editurl : "http://localhost:8080/JQueryTest/GridServlet"
									});
					jQuery("#list").jqGrid('navGrid', '#pager', {
						edit : true,
						add : true,
						del : true,
						search : true
					});
				});


This is how the result looks by loading data
load

This is how the result looks after clicking add button and the request:
request

This is how the result looks after clicking edit button and the request:
edit

Happy Coding 🙂