JSF Marquee Component | Java Example | FlexiGrid using Servlet + JSON |

Posts Tagged ‘Flexigrid JSON example

FlexiGrid example using Servlet and JSON

with 12 comments

Required Libraries :

JQuery
FlexiGrid

Create a “Dynamic Web Project” in Eclipse.
New –> Project .. –> Dynamic Web Project.
I have my project named as “TestWeb”

click on the image for larger view

FlexiGrid


HTML File : demo.html
file Path : TestWeb/WebContent/flexigrid/demo.html

Wordpress doesn’t allow script tags . I will attach a screen shot of my demo.html.
Please click on the image to get a better view..

$(document).ready(function(){
// $('.flexme1').flexigrid({height:'auto', width:'auto'});

$('.jsonFlex').flexigrid({
url:'/TestWeb/JsonServlet',
method: 'GET',
dataType : 'json',
colModel : [
{display: 'Day of Week', name : 'daysofweek', width:100, sortable : true, align: 'center'},
{display: 'Desc', name : 'desc', sortable : true, align: 'left',width:100},
],

sortname: "iso",
sortorder: "asc",
usepager: true,
title: 'FlexiGrid Test',
useRp: true,
rp: 4,
showTableToggleBtn: true
});
});



Java Servlet :
JsonServlet.java
File Path : /TestWeb/src/com/servlets/JsonServlet.java


package com.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

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

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

/**
* Servlet implementation class for
* Servlet: JsonServlet
*
*/
public class JsonServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
static final long serialVersionUID = 1L;

/**
*
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println(" --> doGet ");
doPost(request,response);
}

/**
*
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println(" --> doPost ");
Map<String, ArrayList> strMap = new HashMap<String, ArrayList>();
ArrayList aList1 = new ArrayList();
ArrayList aList2 = new ArrayList();
ArrayList aList3 = new ArrayList();

aList1.add("Sunday");
aList1.add(" Sunday is FunDay");

aList2.add("Monday");
aList2.add(" Monday is Meh.");

aList3.add("Tuesday");
aList3.add("Tuesday is day after Meh..");

strMap.put("1",aList1);
strMap.put("2",aList2);
strMap.put("3",aList3);

JSONArray jArray = new JSONArray();
for(String key:strMap.keySet()) {
JSONObject jsonObj = new JSONObject();
jsonObj.element("id", key);
jsonObj.element("cell", strMap.get(key));

jArray.add(jsonObj);
}

JSONObject jObj = new JSONObject();
jObj.element("page", 1);
jObj.element("total", strMap.size());
jObj.element("rows", jArray);

PrintWriter out = response.getWriter();
response.setContentType("application/json");
out.println(jObj);
out.close();

}
}


Web.xml should have the following servlet mapping.

JsonServlet
JsonServlet
com.servlets.JsonServlet

JsonServlet
/JsonServlet

I have deployed the application in Tomcat 6.0
if the all js/css files and Servlet are in place , you should be seeing the following output
URL to access : http://localhost:8080/TestWeb/flexigrid/demo.html

Advertisements

Written by speedrace703

June 20, 2011 at 2:10 am