programming « i xfree

Posts filed under 'programming'

A simple displaytag grid demo

Display tags are pretty good option when it comes to creating a enterprise class data grid.
The sample code given below is quite a head start for building up a bulky grid.

// Create class that returns a list
package org.ixfree.Displayags;
import java.util.*;
public class GridList {

private List aList;

public List getAList() {
return aList;
}
public void setAList(List list) {
aList = list;
}
public GridList(int i)
{
this.aList = new LinkedList<DataBean>();
}
}

// POJO bean that goes into the list. DataBean in our case.
package org.ixfree.Displayags;
public class DataBean {

private String name;
private String age;

public String getName()
{
return this.name;
}

public String getAge()
{
return this.age;
}

public String setName(String name)
{
this.name = name;
}

public String setAge(String age)
{
this.age = age;
}
}

// Get the libraries reffered
// Sql needed if you wanna get the data out of the table. Ofcourse there are much better ways to do it.
<%@ taglib uri=”http://displaytag.sf.net” prefix=”display”%>
<%@ page import=”java.util.*” %>
<%@ page import=”org.ixfree.Displayags.*” %>
<%@ page import=”java.sql.*” %>

<%
// Make a list of data for populating grid
List<DataBean> list = new GridList(6).getAList();

// .. Get the data into the bean and add it to the list.
// .. Every bean here refers to a row in the grid. Yeppiiie….

// Put the list in the request
request.setAttribute( “storedList”,list);
%>

// Make it as a XHTML (good for the browser)
<head>
<!– All script and style/references goes here –>

name attribute of the display:table tag does the magic of reading our list.

–>
<display:table name=”storedList” class=”myDisplayTagStyle” id=”displayTable” pagesize=”10″ requestURI=”theCurrentJspPage.jsp”>
<display:column sortable=”true” property=”name” title=”Name” class=”myDisplayTagStyle” headerClass=”myDisplayTagStyle”/>
<display:column sortable=”true” property=”age” title=”Age” class=”myDisplayTagStyle” headerClass=”myDisplayTagStyle” />
</display:table>
</div>
</body>

### ixfreeDemoDisplayTags.css goes this way ###
html
{
scrollbar-base-color: #dddddd;

}

table.myDisplayTagStyle
{
background-color: #dddddd;
}

td.myDisplayTagStyle
{
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
margin: 0;
font-family:Arial Verdana;
font-size:10pt;
overflow: auto;
white-space:nowrap;
padding-top: 6px;
padding-right: 6px;
padding-left: 6px;
padding-bottom: 6px;
}

tr.odd
{
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
margin: 0;
padding: 4px;
background-color: #ffffff;
white-space:nowrap;
}

tr.even
{
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
margin: 0;
padding: 4px;
background-color: #dddddd;
white-space:nowrap;
}

th.myDisplayTagStyle
{
background-color: #dddddd;
border-color: black;
border-width: 1px 1px 1px 1px;
border-style: solid;
font-size: 9pt;
white-space: nowrap;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
}

Add comment December 11, 2008

Simple Dojo Datagrid + JSON Store

Sample Dojo Grid with JSON access below

Works for Dojo 1.2, and not with earlier versions.

And one fabulous improvement with the new grid (dojox.grid.DataGrid) is that when we try to load the data from json, it shows a Loading symbol which i feel is pretty cool compared to the earlier dojox.Grid. And the layout definition is fairly simplified. What i would love to see in future is a framework with which people can work with less scripting knowledge.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Layout Markup Basic</title>
<style type=”text/css”>
@import “dijit/themes/soria/soria.css”;
@import “dijit/themes/tundra/tundra.css”;
@import “dojox/grid/resources/Grid.css”;
@import “dojox/grid/resources/tundraGrid.css”;
@import “general.css”;
</style>
<script type=”text/javascript” src=”dojo/dojo.js” djConfig=”isDebug:false, parseOnLoad: true”></script>
<script type=”text/javascript”>
dojo.require(“dojo.data.ItemFileReadStore”);
dojo.require(“dojox.grid.DataGrid”);
dojo.require(“dojo.parser”);
dojo.require(“dijit.form.Button”);
dojo.require(“dijit.form.TextBox”);
dojo.require(“dijit.form.DateTextBox”);
dojo.require(“dijit.form.ComboBox”);
dojo.require(“dijit.layout.ContentPane”);
dojo.require(“dijit.layout.TabContainer”);
var jsonStore = new dojo.data.ItemFileReadStore({ url: “MyJson.jsp” });
</script>
</head>
<body class=”soria”>
<table id=”gridNode” jsId=”grid” dojoType=”dojox.grid.DataGrid” autowidth=”true”
query=”{ customer_name: ‘*’ }” store=”jsonStore” class=”tundra” style=”height:300px;width:400px”>
<thead>
<tr>
<th field=”customer_name”>Customer Name</th>
<th field=”customer_address” width=”100px”>Customer Address</th>
</tr>
</thead>
</table>
</body>
</html>

MyJson.jsp Sample goes below:

<%@ taglib prefix=”json” uri=”http://www.atg.com/taglibs/json” %>
<json:object>
<json:array name=”items” var=”item” items=”2″>
<json:object>
<json:property name=”customer_name” value=”nancy”/>
<json:property name=”customer_address” value=”LA”/>
</json:object>
<json:object>
<json:property name=”customer_name” value=”ken”/>
<json:property name=”customer_address” value=”CA”/>
</json:object>
</json:array>
</json:object>

If we need a json to be dynamically associated to the grid on any event, simple 3 steps will do:

dojo.require(“dojo.data.ItemFileReadStore”);

jsonStore = new dojo.data.ItemFileReadStore({ url: “<url for json rendering>”})
var grid = dijit.byId(“gridNode”); // our grid div
grid.setStore(jsonStore); // no need for a separate refresh call

If you have any comments or corrections, then please leave a comment.

Add comment October 7, 2008

Simple Dojo Grid

Hi Friends. I was working on a simple data grid using Dojo. Thanks to SitePen’s blogs. It was quite useful except for the fact that i messed up with the css and took some time to make over.

Dojo makes an intensive use of JSON and it’s really a brilliant idea which is evolving quite firmly. We are there to use JSON more in the future.

Try to deploy in any web server and make sure the Dojo, Digit and Dojox are in the path of this file which we deploy.

<html><head>
<script type=”text/javascript” src=”dojo/dojo.js” djconfig=”parseOnLoad: true, isDebug: false”> </script>
<script type=”text/javascript” src=”dojox/grid/Grid.js”></script>
<style type=”text/css”>
@import “dojox/grid/_grid/tundraGrid.css”;
</style>

var cell = { name: ‘Cell Name’ };
var subrow = [ cell ];
var view = { rows: subrow };
var structure = [ view ];

</head><body class=”tundra”>
<div id=”grid1″ dojotype=”dojox.Grid” autowidth=”true” model=”model” structure=”structure” class=”grid”/>
</body></html>

PS:- Try the latest Dojo version to avoid any mishaps.

Oho… This is not the way to go. Try dojo toolkit version 1.2 grid like given here

One problem regarding working on DOJO is the lack of documentation and heavy depencendy on search engines. This has been felt/discussed in many places. When i had to find the list of dijit widgets i could not get proper answers. Finally found this link: http://redesign.dojotoolkit.org/jsdoc/dijit/HEAD/dijit.form.

And do write in your comments when you try to populate grid using JSON or any other technique.

2 comments September 30, 2008

Debugging – Story of String Pools

String pools our friends can at times become out worst enemies. The nightmare story goes like this.

Ramu is a C programmer and he was one fine day asked to write a java program which was never his interest or expertise. Ramu read all the docs he could get on java programming and gave his best to write that java code. It got build and after regression testing, it was approved to be integrated with the mainstream application.

After adding this piece of logic/code to the application, it got tested in one particular application server. Everything went well and the code got released successfully. But the evil bug inside was waiting for it’s chance.

Ramu left the job and somu replaced him. One day suddenly the bug exploded. Somu our hero of the story is pretty good in debugging and tried to trace. He managed to find where the code fails and it was a condition check. This was of course not a logical mistake and much worse no system exception was thrown to stop the program execution.

The problem was that ramu tried to compare two string references rather than the value. But since it’s a String type, the string pool made it chaotic that both the references referred to the same object in spite of immutability. String pool nullifies the mutability issue till the data/value remains unchanged. Because of this String pool, this problem never rose.

The condition was:

ordered = “coffee”

orderServed= “coffee”

Ramu’s Code:

if ( ordered == orderServed)

In this case since both the strings are same, the reference matching worked(string pools to the rescue). But what happens when string pools are disabled. There are two instances (immutable of course).

The right code (non C-style comparison) would be to compare the actual values and not the addresses.

Somu’s code correction:

if ( ordered.equalsIgnoreCase(orderServed) ) // or equals()

Finally it was a happy ending. Even though this was a blunder, the program logically did well as it was intended.

1 comment August 8, 2008

A simple class in Javascript

//Lets try to make a Dog class

function Dog(name,age,family,address)
{
this.name=name;
this.age=age;
this.family=family;
this.address=address;
}

// Lets have a method
function details()
{
alert(this.name+’ age ‘+this.age+’ is of type ‘+(this.family)+’ + ‘lives at ‘ + address);
}

// Associate the methos to the class Dog prototype
Dog.prototype.details=details;

// Make a reference
dog1=new House(‘johnny’,4,’beagle’,'no.1, walkers street’);

// Make the method call
dog1.view();

Add comment July 18, 2008

i xfree

Posts filed under 'programming'

A simple displaytag grid demo

Simple Dojo Datagrid + JSON Store

Simple Dojo Grid

Debugging – Story of String Pools

A simple class in Javascript

Blogroll

Category Cloud

Archives