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

JSF Marquee Component.

leave a comment »

I was looking around at JavaRanch and somone posted question on JSF marquee component. I don’t think it comes along with jsf jar so I thought to write a component since its easy and maybe it help to a basic understanding of JSF custom component!!

P.S: I created this component around Feb 2007 and was using JSF 1.0 for the development.  Maybe some of the classes are deprecated if you are using the latest version but I guess this will work without any errors. If you experience any problems , feel free to comment at the bottom of the page and I will try my best to help you.

Requirements :

Basic Java Knowledge, Eclipse, Apache Tomcat

For developing a custom component in JSF all we need to have is

1. Component class.
2. Tag class.
3. Renederer ( optional ) . I am not using the Renderer for this component
4. Define a TLD file for the component tags.
5. Register the component in faces-config.


I am using Eclipse 3.3.1

eclipse version

On your Eclipse . go to File->New -> Other.. ->

on the next window give , project name as JSFMarquee, click next and select Java Server Faces 1.1 from the next window , select server

create package in your “src”  , right click src -> New -> package

give the package name as com.jsf.component.marquee

Now its time to create  the Component classes

Marquee.java

package com.jsf.component.marquee;

import java.io.IOException;

import javax.faces.component.UIComponentBase;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;

public class Marquee extends UIComponentBase {

private String value;

public String getValue() {
return value;
}

public void setValue(String value) {
this.value = value;
}

public String getFamily() {
// TODO Auto-generated method stub
return null;
}

public void encodeBegin(FacesContext context) throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.startElement(“marquee”, this);
writer.write(getValue());
writer.endElement(“marquee”);
}

}

MarqueeTag.java

package com.jsf.component.marquee;

import javax.faces.component.UIComponent;
import javax.faces.webapp.UIComponentTag;

public class MarqueeTag extends UIComponentTag {

private String marquee;

public String getMarquee() {
return marquee;
}

public void setMarquee(String marquee) {
this.marquee = marquee;
}

public String getComponentType() {
// TODO Auto-generated method stub
return “com.component.marqueecomp”;
}

public String getRendererType() {
// TODO Auto-generated method stub
return null;
}

protected void setProperties(UIComponent component) {
super.setProperties(component);
Marquee marqComp = (Marquee) component;
if (marquee != null) {
marqComp.setValue(marquee);
}
}

}

This is how my faces-config.xml looks like  ( JSFMarquee\WebContent\WEB-INF\faces-config.xml )

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE faces-config PUBLIC
“-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN”
http://java.sun.com/dtd/web-facesconfig_1_1.dtd”&gt;

<faces-config>
<component>
<component-type>com.component.marqueecomp</component-type>
<component-class>com.jsf.component.marquee.Marquee</component-class>
<property>
<property-name>value</property-name>
<property-class>java.lang.String</property-class>
</property>
</component>

</faces-config>

remember , im using JSF 1.1 so my dtd file maybe different from yours if you are using latest version. Don’t worry about it if  its not same..

Create file marquee.tld and save it under JSFMarquee\WebContent\WEB-INF\

This is the content of tld file

<!DOCTYPE taglib
PUBLIC “-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN”
http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_2.dtd”&gt;

<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>1.2</jsp-version>
<short-name>marquee</short-name>

<uri>/jsf-marquee</uri>
<tag>
<name>marquee</name>
<tag-class>com.jsf.component.marquee.MarqueeTag</tag-class>
<body-content>empty</body-content>
<attribute>
<name>marquee</name>
<required>true</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
</tag>
</taglib>


create a jsp file and save it under webcontent

MarqueeTest.jsp

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<%@taglib uri=”http://java.sun.com/jsf/html&#8221; prefix=”h”%>
<%@taglib uri=”http://java.sun.com/jsf/core&#8221; prefix=”f”%>
<%@taglib uri=”/jsf-marquee” prefix=”mycomp”%>

<html>
<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Insert title here</title>
<f:view>
<mycomp:marquee marquee=”hello World”/>
</f:view>
</head>
<body>
</body>
</html>

Now its time to run the application and see how the component looks like

Download and install tomcat . Add tomcat as a server to your Eclipse. I hope you already have Tomcat installed.To add Tomcat to Eclipse,  go to Window -> Show View -> Servers

in the server tab, right click and add server. select tomcat 6.0 or which ever version you have installed.

now  right click on MarqueeTest.jsp and select “Run as” -> “Run on Server” and select tomcat from the servers listing.. I was getting “faces Servlet  not found error and to resolve it easily i created “lib” folder in WebContent/WEB-INF and copied jars in there.. here is my screenshot :=]  ( click on the pic to get an enlarged view )

For valuebinding example , click here

Written by speedrace703

November 27, 2009 at 3:11 am