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

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

12 Responses

Subscribe to comments with RSS.

  1. I couldn’t get this example to work. The only difference is I am using NetBeans. I can’t successfully hit the “doGet” method in the JsonServlet.

    The flexigrid should show up right when the page is loaded, correct? The button doesn’t seem to serve any purpose.

    Any help would be appreciated.

    Thanks

    Derek Adams

    August 23, 2011 at 12:16 am

  2. I don’t think netbeans has anything to do with it. if you are using firefox, can you open firebug and see if you are seeing any error ?

    Also, try accessing the servlet directly from browser something like
    http://localhost:8080/TestWeb/JsonServlet and see if you are getting JSON response.

    speedrace703

    August 23, 2011 at 12:50 am

  3. looks like in the source code i mentioned here i made the flexigrid to load when the page loads and in the image ( screen shot of html page) , flexigrid gets loaded on button click.. both should work.. let me know how it goes.

    speedrace703

    August 23, 2011 at 1:57 am

    • You would also need to include JQuery Cookie plugin. Else it is complaining that $.cookie is not a function

      Vikas

      June 14, 2012 at 10:43 am

      • Also, make sure to include commons-beanutils.jar, commons-collections.jar, commons-lang.jar, ezmorph.jar and json-lib-2.4-jdk15.jar. Servlet will complain of missing class files if any of these jars are not included.

        Vikas

        June 15, 2012 at 4:50 am

  4. {display: ‘Day of Week’, name : ” ‘daysofweek’ “, width:100, sortable : true, align: ‘center’},
    {display: ‘Desc’, name : ” ‘desc’ “, sortable : true, align: ‘left’,width:100},
    how did you connect the name “daysofweek” to the JSON array and also the “desc”?

    hope you can help me.

    thanks.

    Steven

    February 29, 2012 at 9:40 am

    • the data displayed in the grid is maintained by the json object created my the server. In JsonServelt.java if you change the order of aList1 to something like this
      aList1.add(” Sunday is FunDay”);
      aList1.add(“Sunday”);
      aList1.add(img);

      you can see the change in grid display..
      Hope it helps ..

      speedrace703

      February 29, 2012 at 6:12 pm

  5. excelente ejemplo, me has ayudado bastante 🙂

    Ceninfor

    May 12, 2012 at 4:09 pm

  6. Your example is excellent.. I have one question though .. I cannot have the previous next buttons to work with this example.. I have 50 rows and everything shows op on page load and when i click next it still goes back to my servlet but stays on the same page 1

    sid

    June 8, 2012 at 6:19 pm

  7. Thank you so much for you helpful post.

    ebi

    July 12, 2012 at 10:24 pm

  8. flexigrid is coming but data is not coming ..

    jiya

    January 8, 2013 at 12:40 pm

    • hey, were you able to get it resolved ? I think it works if you have followed all the instructions 🙂

      speedrace703

      February 2, 2013 at 12:50 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: