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

FlexiGrid example using Servlets and JSON

with 2 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

I have the following jars inside TestWeb\WebContent\WEB-INF\lib

  • commons-beanutils.jar
  • commons-collections-3.2.1.jar
  • commons-lang-2.4.jar
  • commons-logging-1.1.1.jar
  • ezmorph-1.0.6.jar
  • json-lib-2.3-jdk15

  • 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.


    Wordpress is stripping of servlet and servlet-mapping tags, but it is pretty straight forward 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 8:36 am

    2 Responses

    Subscribe to comments with RSS.

    1. wonderful article..Thank you for putting it all together.

      Kassie

      June 29, 2011 at 3:45 am

    2. thank you so much.

      ebi

      July 12, 2012 at 1:40 pm


    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: