Sharing Experiences

Working with Google Maps Javascript API V3

2011-11-27T00:17:00.001-08:00

Google Maps Javascript API V3 is an awesome API provided by Google. Today I will give you a little flavor about this API. Later I will write about some advance features.

Here is a simple tool, created using this API. Click on the marker, the Latitude and Longitude position will be displayed in a window and also in the textbox. If you set a Latitude, Longitude point in the textbox and click on the button, that point will be shown in the map with a marker.

Latitude

Longitude

Now I'm going to show you, how you can make this tool..

First load the Google Maps Javascript API and the latest jQuery version . Then design the user interface.

 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://zmodal.googlecode.com/files/jquery-1.6.1.min.js"></script>

<div style="float:left; width:200px; border:1px solid #CCCCCC;">
        Latitude <input type="text" id="tbLattitude"/><br/>
        Longitude <input type="text" id="tbLongitude"/><br/>
        <input type="button" name="btCal" value="Show in Map" onclick="return showInMap();" />
    </div>
    <div id="map_canvas" style="float:left;width: 400px; height: 400px; border: 2px solid #999;margin-left:10px;">
    </div>

The DIV element with id 'map_canvas' will be the container of the Map. This id will be required when you create the map object to display in this div.

Now come to the Javascript part..

Set the window onLoad callback method and in that method, call the LoadMap method with initial latitude,longitude.

 
google.maps.event.addDomListener(window, 'load', initializeMap);
function initializeMap() {
  LoadMap(23.70992, 90.40714);
}

In the LoadMap method first create a LatLng object using the lat, long parameter

 
function LoadMap(lat, longitude) {
var latlng = new google.maps.LatLng(lat, longitude);

Create a Map object using map options and the container ID

 
var myOptions = {
  zoom: 12,
  center: latlng, // previously created LatLng object
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

For the information window first create the content of the window then create a InfoWindow object using the content. This object will be later used in the onClick event of the Marker.


var contentString = '' +
  'Latitude : '+lat+'
 Longitude : ' + longitude + ''
  '
';
var infowindow = new google.maps.InfoWindow({
  content: contentString
});

Now create the Marker object using the LatLng and Map object.


var marker = new google.maps.Marker({
  position: latlng,
  map: map,
  title: 'Location',
  draggable: true,
  animation: google.maps.Animation.DROP
});

Finally add an event listener for the Marker object. First open the InfoWindow object then call the method which set LatLng value to the textbox.


  google.maps.event.addListener(marker, 'click', function (event) {
    infowindow.open(map, marker);
    setLatLongToTextBox(event.latLng);
  });

}

Here is the setLatLongToTextBox and showInMap method


function setLatLongToTextBox(latlong) {
  var latstr = latlong + '';
  var value = latstr.slice(1, latstr.length - 1);
  var latlongs = value.split(",");
  $("#tbLattitude").attr("value", latlongs[0]);
  $("#tbLongitude").attr("value", latlongs[1]);
}

//this method is used as the onclick method of the button 
function showInMap() {
  var lat = $("#tbLattitude").attr("value");
  var longitude = $("#tbLongitude").attr("value");
  LoadMap(lat, longitude);
  return false;
}

Working with Google Chart Tools : Create a Geochart

2011-11-26T19:59:00.001-08:00

Geochart can be a handy tool if you want to represent the demographic behavior of your service. In my recent project for Bangladesh Post Office I used this tool to represent the usage of their service in each Division of Bangladesh. Another big example is the Google Analytics where you can view the location based visitor information of your site. Here I am going to show you how you can use this in your project.

First load the Google's Javascript API

<script src="https://www.google.com/jsapi" type="text/javascript">  
</script>

Now create a DIV element and give it an ID. This id will be required when you create the chart object to display in this div.

<div id="map">
    </div>

In your Javascript code first load the geomap package and set the onLoadCallback method name.

<script type="text/javascript">
 google.load('visualization', '1', { 'packages': ['geomap'] });
 google.setOnLoadCallback(drawGeoChart);

In the callback method first create a DataTable object add two columns. Just give a suitable name as per your requirement.

 function drawGeoChart() {
            var data = new google.visualization.DataTable();
            data.addRows(6);
            data.addColumn('string', 'Country');
            data.addColumn('number', 'Visit');

Now set some value to the DataTable. The first column can be an Address, country name, region name locations, or US metropolitan area codes. For country and region name follow this ISO-3166 code or text equivalent to the code. The second column will be the value of the area.


            data.setValue(0, 0, 'Germany');
            data.setValue(0, 1, 600);
            data.setValue(1, 0, 'United States');
            data.setValue(1, 1, 500);
            data.setValue(2, 0, 'Bangladesh');
            data.setValue(2, 1, 400);
            data.setValue(3, 0, 'Canada');
            data.setValue(3, 1, 200);
            data.setValue(4, 0, 'France');
            data.setValue(4, 1, 200);
            data.setValue(5, 0, 'RU');
            data.setValue(5, 1, 300);

Finally configure some property of the chart and draw it using the data previously set.


  var regionOptions = {};
  regionOptions['width'] = '400';
  regionOptions['height'] = '250';
  // Look the div id is used here to create the chart object 
  var regionChart = new  google.visualization.GeoMap(document.getElementById('map'));
  regionChart.draw(data, regionOptions);
        
}
</script>

And here is the outcome. On mouse over you can view the data of the area

You can load the chart data by a webservice call. For C# see my previous blog.Visit this link to know more about Geochart.

Working with Google Chart Tools in C# .NET : Create a Simple Pie Chart

2011-11-18T17:52:00.001-08:00

If you want to load a chart asynchronously in C# . NET, Google Chart Tools will be the perfect choice for you. It is easy to use and enough flexible to customize. Suppose you want to show how many students in your class like Pizza, Burger, Hotdog, and Fried Chicken in a Pie chart. Here I will show you how to load the students' data from server side using WebService and show it in a chart asynchronously.

First create a new WebService file suppose GoogleChart.asmx .In this file create a Public Class named FoodLikingCount

    public class FoodLikingCount
    {
        public int PizzaCount { get; set; }
        public int BurgerCount { get; set; }
        public int HotdogCount { get; set; }
        public int FriedChickenCount { get; set; }
    }

After the class declaration add the following line

[System.Web.Script.Services.GenerateScriptType(typeof(FoodLikingCount))]

It will enable you to use the FoodLikingCount object in your Javascript code.

Create a new WebMethod in the WebService class named GetFoodLikingCountData

[WebMethod]
public FoodLikingCount GetFoodLikingCountData()
{
       FoodLikingCount countModel = new FoodLikingCount 
       {
           PizzaCount = 12,
           BurgerCount = 16,
           HotdogCount = 8,
           FriedChickenCount = 4,
       };
       // you can also load data from your database here

       return countModel ;
}

Now come to client side code. Create an aspx file named GoogleChartToolTest.aspx and add this line between head tag.

 <script src="https://www.google.com/jsapi" type="text/javascript">
 </script>

Create a DIV element and give it an ID. This id will be required when you create the chart object to display in this div. Also add a ScriptManager to call your webservice method.

    <form id="form1" runat="server">
        <asp:ScriptManager ID="sm1" runat="server">
            <Services>
                 <asp:ServiceReference Path="~/[your_package]/GoogleChart.asmx" />
            </Services>
        </asp:ScriptManager>
    </form>
    <div id="pie_chart">
    </div>

Here is the Javascript code which you require to load data through the webservice call, create, and show chart in the div.

<script type="text/javascript">

//load the corechart package, the pie chart is in this package
google.load('visualization', '1', { packages: ['corechart'] });

//provide the method name which you want to call as onload callback
google.setOnLoadCallback(loadFoodLikingChart);

function loadFoodLikingChart()
{
       [your_package].GoogleChart.GetFoodLikingCountData(
            function (ws_rsp) {
              var foodLikingData= new google.visualization.DataTable();
              foodLikingData.addColumn('string', 'Food');
              foodLikingData.addColumn('number', 'Count');
              foodLikingData.addRows(4);
              
              foodLikingData.setValue(0, 0, "Pizza");
              foodLikingData.setValue(0, 1, ws_rsp.PizzaCount );
              foodLikingData.setValue(1, 0, "Burger");
              foodLikingData.setValue(1, 1, ws_rsp.BurgerCount );
              foodLikingData.setValue(2, 0, "Hotdog");
              foodLikingData.setValue(2, 1, ws_rsp.HotdogCount );
              foodLikingData.setValue(3, 0, "Fried Chicken");
              foodLikingData.setValue(3, 1, ws_rsp.FriedChickenCount );

              var options = {};
              options ['width'] = '400';
              options ['height'] = '250';
              options ['chartArea'] = { left: 20, top: 20, width: '95%', height: '90%' };

              // Look the div id is used here to create the chart object
              var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
              chart.draw(foodLikingData,options);
            },
            function (e) {
               alert("Error");
           }
      );
}
</script>

The result will be like this.

Visualize the DataTable as a two dimensional array. It will help you to understand the above code.Here is the Google Chart Gallery. You will get a lot of example there.

zModal, An Easy to Use jQuery Modal Plugin

2011-08-10T00:35:00.000-07:00

There are lots of jQuery modal plugin available in the web. For my current project I need one which, I can easily customize. I realized creating a modal by myself is the best way for gaining maximum freedom.

It is very simple and easy to use and customizable. You can give it a try. Here I will describe how to use it.

First download all the required files from here and include in the page.

Create a DIV and give it an id and set the display property 'none'.

<div id="modalContent" style="width:400px; display:none;">

</div>

You can insert any content between the DIV tag.

Now place a button, the onclick event of which will show the modal

<input type="button" name="name2" value="Show Modal" 

onclick="$('#modalContent').showModal();" />

Here is an example. Click on the button and a modal will pop up.

<div id="modalContent" style="width:400px; height: 150px; display: none;">

<p style="padding-left:20px;">

modalContent:

Click the close button to hide the modal

You can also press ESCAPE button to hide the modal

</p>

</div>

<input type="button" name="name2" value="Show Modal" 

onclick="$('#modalContent').showModal();" />

There are some configurable options for the modal.
setModalButtonCss : Set True if you want to display all buttons contained in the modal in a zModal style.
hideDefaultClose : Set True if you want to hide the default close button.
opacity : You can control the opacity of the background with this parameter.
bgColor : You can change the background color with this parameter.

Here is an example with all the options are set.

<div id="modalContent2" style="width:400px; display:none;">

<p>

User Name:<br />

<input id="tbUname" type="text" name="uName">

</p>

<p>

Password:<br />

<input id="tbPass" type="text" name="pass">

</p>

<p>

<input type="button" name="login" value="Login" onclick="$('#modalContent2').hideModal()" />

</p>

</div>

<input type="button" name="name" value="Show Modal 1" 

onclick="$('#modalContent2').showModal({'setModalButtonCss': 'True', 

'hideDefaultClose' : 'True', 

'opacity' : '.2', 

'bgColor' : '#7FCFF9' });" />

Click on the button to view the example

If you want to hide your modal like the onclick event of the Login button write this code

$('#divID').hideModal();

Remember Old School OO Principle While Using RegularExpressionValidator

2011-04-05T04:01:00.000-07:00

I'm sure all of you are frequently using RegularExpressionValidator in your project. But are sure you are not repeating same expression in multiple pages? Is your code impervious to Change? If you are a bit careful while writing code, you can avoid this. And your friend will be 'Inheritance'.

Suppose you are using a RegularExpressionValidator to validate phone number. You may possibly going to write following code block

<asp:RegularExpressionValidator ID="revPhoneNumber" Display="Dynamic" ErrorMessage="Valid phone no required." ControlToValidate="tbPhoneNumber" ValidationExpression="^\d{8,}$" runat="server">*</asp:RegularExpressionValidator>

If you need this Validator in more than one page, then writing the same code block in every page obviously produces code duplication. Moreover if your project manager asks you to allow '+' at the beginning of the phone number then you have to change the regular expression in all pages. That will be surely a painful task for you. You can make your life easy by following approach.

Create your own validator by inheriting RegularExpressionValidator. Assign a regular expression to the ValidationExpression property

namespace TestValidator.Validators
{
    public class PhoneNumberValidator : RegularExpressionValidator
    {
        public PhoneNumberValidator()
        {
            ValidationExpression = "^\\d{8,}$";
        }
    }
}

To use your own PhoneNumberValidator first add this in the Registry

<%@ Register Assembly="TestValidator(Project Name)" Namespace="TestValidator.Validators" TagPrefix="myvalidators" %>

Then use this in the following way

<myvalidators:PhoneNumberValidator ID="revPhoneNumber" Display="Dynamic" ErrorMessage="Valid phone no required." ControlToValidate="tbPhoneNumber" runat="server">*</myvalidators:PhoneNumberValidator>

Now it is a matter of seconds to accomplish what your project manager wants.

Working With GXT (Ext GWT) Grid : Add Filter Functionality

2011-02-25T23:19:00.000-08:00

Yesterday I was looking for something new (new widgets, new functionality) in the latest GXT version (2.2.1) and found that, it is now providing grid filtering support. You can add MS Excel like filtering option in your application through this. I think it was the most demanded and expected feature from the GXT developers which can be highly utilized in Enterprise Reporting. I am going to describe how to add this functionality in GXT Grid.

Create a new project named GxtFilterGrid and add GXT library in the project. As like my previous blogs about GXT Grid I have used the same Employee model and TestData class for generating data. You will find the code of these classes here. Go to the onModuleLoad method of GxtFilterGrid class and remove all the auto generated code of this method.

First create a list of ColumnConfig and a ColumnModel from this list.

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();



  ColumnConfig column = new ColumnConfig();

  column.setId("name");

  column.setHeader("Employee Name");

  column.setWidth(200);

  configs.add(column);



  column = new ColumnConfig("department", "Department", 150);

  column.setAlignment(HorizontalAlignment.LEFT);

  configs.add(column);



  column = new ColumnConfig("designation", "Designation", 150);

  column.setAlignment(HorizontalAlignment.LEFT);

  configs.add(column);



  column = new ColumnConfig("salary", "Slary", 100);

  column.setAlignment(HorizontalAlignment.RIGHT);

  final NumberFormat number = NumberFormat.getFormat("0.00");

  GridCellRenderer<Employee> checkSalary = new GridCellRenderer<Employee>() {

   @Override

   public Object render(Employee model, String property,

     com.extjs.gxt.ui.client.widget.grid.ColumnData config,

     int rowIndex, int colIndex, ListStore<Employee> store,

     Grid<Employee> grid) {

    double val = (Double) model.get(property);

    String style = val < 70000 ? "red" : "green";

    return ""

      + number.format(val) + "";



   }

  };

  column.setRenderer(checkSalary);

  configs.add(column);



  column = new ColumnConfig("joiningdate", "Joining Date", 100);

  column.setAlignment(HorizontalAlignment.RIGHT);

  column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());

  configs.add(column);



  ColumnModel cm = new ColumnModel(configs);

Now create different types of filters like Numeric, String, Date, etc. Constructor of these filter classes takes the column name to bind the specific filter with a specific column.

NumericFilter numericFilter = new NumericFilter("salary");

StringFilter nameFilter = new StringFilter("name");

StringFilter designationFilter = new StringFilter("designation");

DateFilter dateFilter = new DateFilter("joiningdate");

You can also add a ListStore as a filtering option with the help of ListFilter. For adding a list filter, create a ListStore of ModelData or your own BaseModel class and add this as the source of ListFilter.

ListStore<ModelData> departmentStore = new ListStore<ModelData>();

departmentStore.add(departement("General Administration"));

departmentStore.add(departement("Information Technology"));

departmentStore.add(departement("Marketing"));

departmentStore.add(departement("Accounts"));

 //department method is stated later

ListFilter listFilter = new ListFilter("department", departmentStore);

listFilter.setDisplayProperty("departmentname");

Display Property of the ListFilter will be the key name of your model data. Now create a GridFilters instance and add all the filters created above with this instance.

GridFilters filters = new GridFilters();

filters.setLocal(true);

filters.addFilter(numericFilter);

filters.addFilter(nameFilter);

filters.addFilter(designationFilter);

filters.addFilter(dateFilter);

filters.addFilter(listFilter);

Finally create a ListStore of Employee Model and, a Grid from this ListStore and ColumnModel. Add the GridFilters instance as the Plugin of the Grid.

ListStore<Employee> employeeList = new ListStore<Employee>();

employeeList.add(TestData.getEmployees());



Grid<Employee> grid = new Grid<Employee>(employeeList, cm);

grid.setStyleAttribute("borderTop", "none");

grid.setAutoExpandColumn("name");

grid.setBorders(true);

grid.setStripeRows(true);

grid.getView().setForceFit(true);

grid.setColumnLines(true);

grid.addPlugin(filters);



ContentPanel cp = new ContentPanel();  

cp.setBodyBorder(false);  

cp.setHeading("Employee List With Filtering Option");  

cp.setButtonAlign(HorizontalAlignment.CENTER);  

cp.setLayout(new FitLayout());  

cp.setSize(700, 300); 

cp.add(grid);  

RootPanel.get().add(cp);

Here is the code of department method which is used previously.

private ModelData departement(String departement) {

  ModelData model = new BaseModelData();

  model.set("departmentname", departement);

  return model;

}

That's all. Run the project and the output will be like this

Java Image Utility

2011-02-19T20:48:00.000-08:00

Few days ago I did some image manipulation tasks like resizing, cropping, etc. java awt provides some useful functionality to do this type of tasks. Here I am going to share how I accomplish the tasks and finally and ImageUtility Class which you can use in your project.

Image Resizing
First read the image with the ImageIO which returns a BufferedImage. Then create another BufferedImage instance with the new width, height and image type.

BufferedImage originalImage = ImageIO.read(imageFile); 
BufferedImage scaledBI = new BufferedImage(100, 100, BufferedImage.TYPE_INT_RGB);

Now get the Graphics2D component of the new scaled image and draw it.

g.drawImage(originalImage, 0, 0, 100, 100, null);
g.dispose();

If you want to preserve the image quality, add following line of code before disposing the graphics component.

g.setComposite(AlphaComposite.Src);
g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g.setRenderingHint(RenderingHints.KEY_RENDERING,
RenderingHints.VALUE_RENDER_QUALITY);
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);

It's simple, is not it?

Image Croping

Read the image with ImageIO as stated previously and get the sub image of the original image.

BufferedImage originalImage = ImageIO.read(imageFile); 
originalImage .getSubimage(0,0, 100, 100);

First two parameter of the getSubimage method is the x,y coordinate, from where you want to begin cropping.

Get Byte Array of an Image

Sometimes you need this specially when you want to save an image in database in blob data type . We can get byte[] of an image with the help of ByteArrayOutputStream and ImageIO class.

BufferedImage originalImage = ImageIO.read(imageFile); 
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(originalImage , getImageExtension(), baos);
//getImageExtension method is stated later
baos.flush();
byte[] imageData = baos.toByteArray();
baos.close();

ImageUtility.java

All the above actions can be encapsulated into a simple ImageUtility class.

import java.awt.AlphaComposite;
import java.awt.Dimension;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import org.openide.util.Exceptions;

/**
 *
 * @author ratul
 */
public class ImageUtility
{
    private File imageFile;
    private BufferedImage image;
    public ImageUtility()
    {
    }

    public ImageUtility(File imageFile)
    {
        try
        {
            this.imageFile = imageFile;
            image = ImageIO.read(imageFile);
        }
        catch (IOException ex)
        {
            Exceptions.printStackTrace(ex);
        }
    }

    public ImageUtility(File imageFile, BufferedImage image)
    {
        this.imageFile = imageFile;
        this.image = image;
    }


    public File getImageFile()
    {
        return imageFile;
    }

    public void setImageFile(File imageFile)
    {
        this.imageFile = imageFile;
    }

    public BufferedImage getImage()
    {
        return image;
    }

    public void setImage(BufferedImage image)
    {
        this.image = image;
    }
    
    public String getImageExtension()
    {
        String fName = imageFile.getName();
        return fName.substring(fName.indexOf(".")+1, fName.length());
    }
    public BufferedImage getResizedCopy(int scaledWidth, int scaledHeight, boolean preserveAlpha)
    {
        return getResizedCopyOfImage(image, scaledWidth, scaledHeight, preserveAlpha);
    }
    
    public byte[] getByte()
    {
        return getByteOfImage(image);
    }
    public ImageIcon getImageIcon()
    {
        return new ImageIcon(image);
    }
    public BufferedImage getCropedImage(int x, int y, int width, int height)
    {
        return getCropedImageOfImage(image, x, y, width, height);
    }
    public BufferedImage getCropedImageFromCenter(Dimension panelDimension,int clipedWidth, int clipedHeight)
    {
        return getCropedImageOfImageFromCenter(image, panelDimension, clipedWidth, clipedHeight);
    }

    public BufferedImage getResizedCopyOfImage(BufferedImage originalImage,int scaledWidth, int scaledHeight, boolean preserveAlpha)
    {
        int imageType = preserveAlpha ? BufferedImage.TYPE_INT_RGB : BufferedImage.TYPE_INT_ARGB;
        BufferedImage scaledBI = new BufferedImage(scaledWidth, scaledHeight, imageType);
        Graphics2D g = scaledBI.createGraphics();
        if (preserveAlpha)
        {
                g.setComposite(AlphaComposite.Src);
        }
        g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
        RenderingHints.VALUE_INTERPOLATION_BILINEAR);
        g.setRenderingHint(RenderingHints.KEY_RENDERING,
        RenderingHints.VALUE_RENDER_QUALITY);
        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
        RenderingHints.VALUE_ANTIALIAS_ON);
        g.drawImage(originalImage, 0, 0, scaledWidth, scaledHeight, null);
        g.dispose();
        return scaledBI;
    }

    public byte[] getByteOfImage(BufferedImage sourceImage)
    {
        try
        {
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            ImageIO.write(sourceImage, getImageExtension(), baos);
            baos.flush();
            byte[] imageData = baos.toByteArray();
            baos.close();
            return imageData;
        }
        catch (IOException ex)
        {
            Exceptions.printStackTrace(ex);
            return null;
        }
    }

    public ImageIcon getImageIconFromImage(BufferedImage sourceImage)
    {
        return new ImageIcon(sourceImage);
    }

    public BufferedImage  getCropedImageOfImage(BufferedImage sourceImage, int x, int y, int width, int height)
    {
        return sourceImage.getSubimage(x, y, width, height);
    }
    public BufferedImage getCropedImageOfImageFromCenter(BufferedImage sourceImage, Dimension panelDimension,int clipedWidth, int clipedHeight)
    {
        Rectangle clip = new Rectangle(clipedWidth, clipedHeight);
        clip.x = (panelDimension.width - clip.width) / 2;
        clip.y = (panelDimension.height - clip.height) / 2;
        int x0 = (panelDimension.width - sourceImage.getWidth()) / 2;
        int y0 = (panelDimension.height - sourceImage.getHeight()) / 2;
        int x = clip.x - x0;
        int y = clip.y - y0;
        return sourceImage.getSubimage(x, y, clip.width, clip.height);
    }
}

Entity Inheritance Using Abstract Entity

2011-01-31T02:25:00.000-08:00

In my previous blog I shared my code re-factoring experience by using Mapped Superclass. Using Abstract Entity was another interesting experience. In our project there are some Entities like Customer, Vendor which have some common attributes like 'First Name', 'Last Name', etc. These attributes were defined in both Customer and Vendor Class. This approach not only produced code duplication but also column duplication in underlying Datastore. JPA Abstract Entity feature inspires me to use a third Entity Class which is abstract to avoid this duplication.

Let's see how it works. Suppose you have two Entities Student and Teacher, and they have following attributes

Three attributes are common in this case and you can introduce a Person class which is abstract and has these common properties. Student and Teacher class will extend Person and only have their individual properties.

Your Person, Student and Teacher Entity classes will be like this

@Entity
@Inheritance(strategy=InheritanceType.JOINED)
@Table(name = "persons")
public abstract class Person implements Serializable {
    private static final long serialVersionUID = 1L;
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Basic(optional = false)
    @Column(name = "id_nr")
    protected Long idNr;
    @Column(name = "first_name")
    protected String firstName;
    @Column(name = "last_name")
    protected String lastName;
    
    public Person() {
    } 
    //getter setter of the properties ....

@Entity
@Table(name = "teachers")
public class Teacher extends Person {
    private static final long serialVersionUID = 1L;
    @Column(name = "designation")
    protected String designation;
    // constructor, getter setter of the property....

@Entity
@Table(name = "students")
public class Student extends Person {
    private static final long serialVersionUID = 1L;
    @Column(name = "role_number")
    protected String roleNumber;
    // constructor, getter setter of the property....

For above scenario three tables will be generated in the database, persons, students and teachers. Mapping strategy of @Inheritance annotation has a great impact in table generation process. As we have used InheritanceType.JOINED as the mapping strategy, three different tables are created. If we were using default mapping strategy which is InheritanceType.SINGLE_TABLE, only persons table will be created with all the attributes. In both cases Persistence provider will also create a discriminator column in the person table called DTYPE, which will store the name of the inherited entity used to create the person.

Now run the following code and see how data is stored in the database in this design.

        @PersistenceContext(unitName = "TaskBoard-ejbPU")
        EntityManager em;

        Teacher teacher = new Teacher();
        teacher.setFirstName("Sarwar");
        teacher.setLastName("Hossain");
        teacher.setDesignation("Associate Proffessor");
        teacher.setIdNr(null);
        em.persist(teacher);
        
        Student student = new Student();
        student.setFirstName("Shams");
        student.setLastName("Zawoad");
        student.setRoleNumber("001525");
        student.setIdNr(null);
        em.persist(student);
        em.flush();

If you try with InheritanceType.SINGLE_TABLE mapping strategy you will get the following output by running the same code

Attractive feature of abstract entities is that they can be queried just like concrete queries, which were not possible in Mapped Superclass. If an abstract entity is the target of a query, the query operates on all the concrete subclasses of the abstract entity.

Entity Inheritance Using Mapped Superclass

2011-01-02T08:10:00.000-08:00

When I engaged myself into code re-factoring of our VELACORE project, I found that almost all Entities have four common properties createdBy, creationDate, modifiedBy and modificationDate. I wanted to reduce this code duplication and found that JPA is providing Mapped Superclass for this type of requirement where state and mapping information are common to multiple Entity classes. It contains persistent state and mapping information, but is not Entitity. That is, it is not decorated with the @Entity annotation and is not mapped as an entity by JPA.

Mapped Superclasses do not have any corresponding tables in the underlying Datastore (that was also my requirement). Entities that inherit from the mapped Superclass define the table mappings. Mapped superclasses are specified by decorating the class with the javax.persistence.MappedSuperclass annotation.

Here is an example of using Mapped Superclass for entity inheritance

@MappedSuperclass
public class BaseEntity
{
    @Column(name = "created_by")
    private String createdBy;
    @Temporal(TemporalType.TIMESTAMP)
    @Column(name = "creation_date")
    private Calendar creationDate;
    
   //getter setter of the properties ....
}

@Entity
public class Customer extends BaseEntity 
{
    @Column(name = "first_name")
    private String firstName;

    ...
}

@Entity
public class Invoice extends BaseEntity {
    @Column(name = "invoice_no")
    private String invoiceNo;

    ...
}

In the above code snippet BaseEntity is the MappedSuperclass which contains the mapping information of the common properties. Customer and Invoice are two Entities extending the BaseEntity. In this scenario only CUSTOMER and INVOICE tables will be created in the database not the BASEENTITY. "created_by" and "creation_date" columns will be present in both CUSTOMER and INVOICE tables.

Limitations of using Mapped Superclass :
-Mapped Superclasses are not queryable, and can’t be used in EntityManager or Query operations.
-Mapped Superclasses can’t be targets of entity relationships.

Protect Your Java Application by reCAPTCHA

2010-12-29T00:53:00.000-08:00

4 months gone since I have post my last blog. Got a very encouraging feedback from my readers in this period but can't manage to write anything. Now feeling glad to start writing again. Hope java developers will find this tutorial useful to protect their application using reCaptcha, a widely used CAPTCHA system in the industry.

First go to the reCAPTCHA website and create your reCAPTCHA key by providing the domain name of your application. You will get two keys one is Private and another is Public. Public key will be used in the JavaScript code that is served to your users. Private key is required to communicate between your server and the reCAPTCHA server. Be sure to keep the Private key secret.

Now download the recaptcha4j library from here. And place the jar file in WEB-INF/lib/ directory. It will make your life easy to display the reCAPTCHA widget, send the user request to reCAPTCHA server and get response from there.

You are now ready to use reCAPTCHA in your application. First import the required classes in your JSP page.

<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>

Now add the following code in the web page, where you want to put the reCAPTCHA box. Target of using reCAPTCHA is to protect form submission so place this between the form beginning and ending tags.

<%
ReCaptcha c = ReCaptchaFactory.newReCaptcha("your_public_key", "your_private_key", false);
          out.print(c.createRecaptchaHtml(null, null));
%>

First line of the code will create an instance of reCAPTCHA. Second line will generate and display a reCAPTCHA widget in your page.

Now come to the server side where you have to validate the submitted form with the reCAPTCHA server.

Here is a simple servlet which is used to do the validation job.

import net.tanesha.recaptcha.ReCaptchaImpl;
import net.tanesha.recaptcha.ReCaptchaResponse;

public class GreetingServlet extends HttpServlet 
{
    public void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws IOException {

        String challenge = req.getParameter("recaptcha_challenge_field");
        String response = req.getParameter("recaptcha_response_field");
        
        String remoteAddr = req.getRemoteAddr();

        ReCaptchaImpl reCaptcha = new ReCaptchaImpl();
        reCaptcha.setPrivateKey("[write your privatekey here]");

        ReCaptchaResponse reCaptchaResponse =
                reCaptcha.checkAnswer(remoteAddr, challenge, response);

        if (reCaptchaResponse.isValid()) {
            //valid do something whatever you want to do
        } 
        else
        {
            //not valid do something like send error message to user
        }
    }
}

remoteAddr is the user's IP address which is passed to the reCAPTCHA servers. response contains the user's answer to the reCAPTCHA challenge.

You are done. Visit this link to get an example of how it works.
Reference link.

Working with DnD Framework of Ext GWT (GXT) : A Basic Example of Drag and Drop

2010-08-05T03:50:00.000-07:00

DnD framework of Ext GWT is extremely powerful framework which supports drag and drop between two container, list view, grid, tree panel, tree grid and more over between heterogeneous components like list view to grid or grid to tree panel, etc. Here I am going to describe how you can drag a Html component and drop to a container.

Create a new project named BasicDnDExample and add GXT library in the project. Now go to the onModuleLoad method of BasicDnDExample class and remove all the auto generated code of this method.
First create a HorizontalPanel and a LayoutContainer as the source container. Then add source components to the source container.

     HorizontalPanel hp = new HorizontalPanel();  
     hp.setSpacing(10);  
           
     final LayoutContainer sourceContainer = new LayoutContainer();  
     sourceContainer.setLayoutOnChange(true);  
     sourceContainer.setWidth(300);  
          
     List<Employee> employeeList = TestData.getEmployees();
     for(Employee employee : employeeList)
     {
        final Html html = new Html("<div style=\"font-size:11px; border: 1px solid #DDDDDD;float:left;margin:4px 0 4px  4px; padding:2px;width:220px;\">"+
          "<div style=\"color:#1C3C78;font-weight:bold;padding-bottom:5px;padding-top:2px;text-decoration:underline;\">"+employee.getName()+"</div>"+ 
          "<div style=\"color:green\">Department:"+employee.getDepartment()+"</div>"+ 
          "<div style=\"color:blue\">Designation:"+employee.getDesignation()+"</div>"+
          "<div style=\"color:black;padding-bottom:2px;\">Salary:"+employee.getSalary()+"</div>"+ 
          "</div>" ); 
        sourceContainer.add(html, new FlowData(3));  
                 
        DragSource source = new DragSource(html) {  
           @Override  
              protected void onDragStart(DNDEvent event) {  
                event.setData(html);  
                event.getStatus().update(El.fly(html.getElement()).cloneNode(true));  
             }  
        };  
                 
    }

Using the employee list I have created a Html component for each employee and add this to the source container. Then create DragSource with the component and set this as the Data of the DNDEvent. You will find the code of Empoyee and TestData classes here.

Now create another LayoutContainer as the target container. Then create a DropTarget from the target container, which identifies components that can receive data from a drag and drop operations. While the cursor is over a target, the target is responsible for determining if the drop is valid and showing any visual indicators for the drop.

           
    final LayoutContainer targetContainer = new LayoutContainer();  
    targetContainer.setLayoutOnChange(true);  
    targetContainer.setBorders(true);  
    targetContainer.setSize(300, 500); 

   DropTarget target = new DropTarget(targetContainer) {  
       @Override  
       protected void onDragDrop(DNDEvent event) {  
         super.onDragDrop(event);  
         Html html = event.getData();  
         targetContainer.add(html);  
       }  
  };  
  target.setOverStyle("drag-ok");

In the onDragDrop method you can define what you want to do after the element is dropped on the target. Here I have got the Html component from the DNDEvent and added the component in the target container.
Finally add the source and target container in the HorizontalPanel.

  hp.add(targetContainer);  
  hp.add(sourceContainer);  
  RootPanel.get().add(hp);

Output of this tutorial will be like this

Working with GXT Grid : Add Remote Pagination Functionality

2010-07-16T22:21:00.000-07:00

As promised previously today I am going write about adding remote pagination functionality with GXT Grid which was one of most demanded one from my readers. In my previous blog I have described in detail how you can load data from a remote data store and show them in GXT Grid. In this writing the same Comments entity and CommentModel are used to represent data. You will find the code of these classes here.

At first in the implementation of your GWT RPC Service add a method to load all the comments from the data store.

public List<Commentmodel> getAllComment() 

{

   List<Commentmodel> commentList = new ArrayList<Commentmodel>();

   PersistenceManager pm = PMF.get().getPersistenceManager(); 

   try {

      String query = "select from " + Comments.class.getName()+" order by  postedDate desc"; 

      List<Comments> list = (List<Comments>) pm.newQuery(query).execute();

      if (!list.isEmpty()) {

         for (Comments c : list)

         {

            //convert from entity object to DTO

            commentList.add(CommentConverter.entityToModel(c));

         }

      }

   }catch (Exception ex) {}

   finally {

      pm.close();

   }

   return commentList;

}

Now add a method public PagingLoadResult<Commentmodel> getComments(PagingLoadConfig config) in your service which takes a PagingLoadConfig object to determine the limit and offset value of the request and returns the desired list for the paging loader. Here is the implementation of the method.

@Override

public PagingLoadResult<Commentmodel> getComments(PagingLoadConfig config) {



//comments is a private variable of the service implementation class

//private List<Commentmodel> comments;

comments = getAllComment();



//get all the comments from the data store

//and sort this list according to sorting info



if (config.getSortInfo().getSortField() != null) {

final String sortField = config.getSortInfo().getSortField();

if (sortField != null) {

Collections.sort(comments, config.getSortInfo().getSortDir().comparator(new Comparator<Commentmodel>() {

public int compare(CommentModel c1, CommentModel c2) {

if (sortField.equals("comments")) {

return c1.getComments().compareTo(c2.getComments());

} else if (sortField.equals("postedBy")) {

return c1.getPostedBy().compareTo(c2.getPostedBy());

} else if (sortField.equals("postedDate")) {

return c1.getStartingDate().compareTo(c2.getStartingDate());

}

return 0;

}

}));

}

}



//Create a sublist and add data to list according

//to the limit and offset value of the config



ArrayList<Commentmodel> sublist = new ArrayList<Commentmodel>();

int start = config.getOffset();

int limit = comments.size();

if (config.getLimit() > 0) {

limit = Math.min(start + config.getLimit(), limit);

}

for (int i = config.getOffset(); i < limit; i++) {         sublist.add(comments.get(i));       }       

return new BasePagingLoadResult<Commentmodel>

(sublist, config.getOffset(), comments.size());

}

Your server side coding is done. Let's come to client side coding and see how to use this service to add remote pagination functionality with GXT Grid.

First create a RpcProxy object, proxy to make RPC call using the load configuration. With the proxy object create a PagingLoader, loader which is required to load page enabled set of data and enable the remote sorting attribute of the loader.

RpcProxy<PagingLoadResult<CommentModel>> proxy = new RpcProxy<PagingLoadResult<CommentModel>>() {

@Override

public void load(Object loadConfig,

AsyncCallback<PagingLoadResult<CommentModel>> callback) {

Gxtexamplegalary.greetingService.getComments(

(PagingLoadConfig) loadConfig, callback);

}

};



// loader

final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(

proxy);

loader.setRemoteSort(true);

Now use this loader to create a ListStore of CommentModel and bind the loader with a PagingToolBar.

ListStore<CommentModel> commentList = new ListStore<CommentModel>(loader);



final PagingToolBar toolBar = new PagingToolBar(3);

toolBar.bind(loader);

Create a List of ColumnConfig and a ColumnModel from the ColumnConfig list.

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();

column.setId("comments");

column.setHeader("Comments");

column.setWidth(200);

configs.add(column);



column = new ColumnConfig("postedBy", "Posted By", 150);

column.setAlignment(HorizontalAlignment.LEFT);

configs.add(column);



column = new ColumnConfig("postedDate", "Posting Date", 100);

column.setAlignment(HorizontalAlignment.RIGHT);

column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());

configs.add(column);



ColumnModel cm = new ColumnModel(configs);

Finally create a Grid with the commentList and the column model. Add a Listener with the Grid to handle the remote pagination functionality. In the handleEvent method of the Listener first create a PagingLoadConfig, config and set offset, limit, sort field and sort direction value of the config. Then load data by the loader with this configuration.

final Grid<CommentModel> grid = new Grid<CommentModel>(commentList, cm);

grid.setStateId("pagingGridExample");

grid.setStateful(true);

grid.addListener(Events.Attach, new Listener<GridEvent<CommentModel>>() {

public void handleEvent(GridEvent<CommentModel> be) {

PagingLoadConfig config = new BasePagingLoadConfig();

config.setOffset(0);

config.setLimit(3);



Map<String, Object> state = grid.getState();

if (state.containsKey("offset")) {

int offset = (Integer) state.get("offset");

int limit = (Integer) state.get("limit");

config.setOffset(offset);

config.setLimit(limit);

}

if (state.containsKey("sortField")) {

config.setSortField((String) state.get("sortField"));

config.setSortDir(SortDir.valueOf((String) state

.get("sortDir")));

}

loader.load(config);

}

});

grid.setLoadMask(true);

grid.setBorders(true);

grid.setAutoExpandColumn("comments");

grid.setStyleAttribute("borderTop", "none");

grid.setStripeRows(true);



ContentPanel cp = new ContentPanel();

cp.setBodyBorder(false);

cp.setHeading("Grid with Pagination");

cp.setButtonAlign(HorizontalAlignment.CENTER);

cp.setLayout(new FitLayout());

cp.setSize(700, 300);

cp.add(grid);

cp.setBottomComponent(toolBar);

RootPanel.get().add(cp);

That's all for today. Enjoy GWT and GXT :-)

Google App Engine, JDO and GXT(Ext GWT) Grid - Make All These Working Together

2010-06-03T01:13:00.000-07:00

Previously I have written some blogs about GXT Grid where the data resides in the client side. But as per the request of my readers I feel the necessity of writing some tutorials with remote data store. And for this purpose I have chosen Google App Engine data store as the back-end with JDO implementation.

It requires a configuration file in the final WAR named jdoconfig.xml which resides in the directory war/WEB-INF/classes/META-INF/. Eclipse creates this file as src/META-INF/jdoconfig.xml. This file is automatically copied into war/WEB-INF/classes/META-INF/ when you build your project. This file should contain the following contains.

<?xml version="1.0" encoding="utf-8"?>
<jdoconfig xmlns="http://java.sun.com/xml/ns/jdo/jdoconfig"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:noNamespaceSchemaLocation="http://java.sun.com/xml/ns/jdo/jdoconfig">

   <persistence-manager-factory name="transactions-optional">
       <property name="javax.jdo.PersistenceManagerFactoryClass"
           value="org.datanucleus.store.appengine.jdo.DatastoreJDOPersistenceManagerFactory"/>
       <property name="javax.jdo.option.ConnectionURL" value="appengine"/>
       <property name="javax.jdo.option.NontransactionalRead" value="true"/>
       <property name="javax.jdo.option.NontransactionalWrite" value="true"/>
       <property name="javax.jdo.option.RetainValues" value="true"/>
       <property name="datanucleus.appengine.autoCreateDatastoreTxns" value="true"/>
   </persistence-manager-factory>
</jdoconfig>

Here I am going to describe the way of loading a comment list from the App Engine data store and making the list viewable in the GXT Grid. So At first I need a POJO class to store and retrieve comments from the App Engine data store using the JDO API. Here is my Comments class.

@PersistenceCapable(identityType = IdentityType.APPLICATION)
public class Comments {
    @PrimaryKey
    @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
    private Long id;

    @Persistent
    @Column(name="comments")
    private String comments;

    @Persistent
    @Column(name="posted_by")
    private String postedBy;
    
    @Persistent
    @Column(name="posted_date")
    private Date postedDate;

    public Comments(String comments, String postedBy, Date date) {
        this.comments = comments;
        this.postedDate = date;
        this.postedBy = postedBy;
   }

    public Long getId() {
        return id;
    }

 public String getComments() {
  return comments;
 }

 public void setComments(String comments) {
  this.comments = comments;
 }

 public Date getPostedDate() {
  return postedDate;
 }

 public void setPostedDate(Date postedDate) {
  this.postedDate = postedDate;
 }

 public void setId(Long id) {
  this.id = id;
 }

 public String getPostedBy() {
  return postedBy;
 }

 public void setPostedBy(String postedBy) {
  this.postedBy = postedBy;
 }
}

Now when you want to transfer data from server to client you need a DTO (Data Transfer Object). As I am going to show the comments in GXT Grid so my DTO has to inherit the properties of GXT's BaseModel. Here is the CommentModel class which will serve my purposes.

public class CommentModel extends BaseModel {

private static final long serialVersionUID = 1L;

public CommentModel(){}

public CommentModel(String comments, String postedBy, Date date) {
set("comments", comments);
set("postedDate", date);
set("postedBy",postedBy);
}

public String getComments() {
return (String) get("comments");
}

public String getPostedBy() {
return (String) get("postedBy");
}

public Date getStartingDate() {
return ((Date) get("postedDate"));
}
}

For any operation on data store you have to request the data store for the desired operation. Each request that uses the data store creates a new instance of the PersistenceManager class through the instance of PersistenceManagerFactory class. As creating an instance of PersistenceManagerFactory class is a very costly process, I have used a Singleton class PMF for this purpose.

public final class PMF {
private static final PersistenceManagerFactory pmfInstance =
JDOHelper.getPersistenceManagerFactory("transactions-optional");

private PMF() {}

public static PersistenceManagerFactory get() {
return pmfInstance;
}
}

If you are familiar with GWT RPC Service then create a service named CommentService and add a method
List<CommentModel> getAllComment();. Here is the implementation of the method where JDOQL is used to write a query which returns all the comments from the data store.

public List<Commentmodel> getAllComment() 
{
   List<Commentmodel> commentList = new ArrayList<Commentmodel>();
   PersistenceManager pm = PMF.get().getPersistenceManager(); 
   try {
      String query = "select from " + Comments.class.getName()+" order by  postedDate desc"; 
      List<Comments> list = (List<Comments>) pm.newQuery(query).execute();
      if (!list.isEmpty()) {
         for (Comments c : list)
         {
            //convert from entity object to DTO
            commentList.add(CommentConverter.entityToModel(c));
         }
      }
   }catch (Exception ex) {}
   finally {
      pm.close();
   }
   return commentList;
}

CommentConverter is a utility class which converts an object of Comments class to an object of CommentModel class.

public class CommentConverter 
{
   public static CommentModel entityToModel(Comments comment)
   {
      CommentModel model = new CommentModel(comment.getComments(), comment.getPostedBy(), comment.getPostedDate());
      return model;
   }
}

All the server side coding is done. Let's come to client side.

First create an instance of CommentServiceAsync.

public static final CommentServiceAsync commentService = GWT.create(CommentService.class);

Then create a ListStore of CommentModel, commentStore and call the getAllComment method of the commentService. In the onSuccess method add the returned list to the commentStore.

 final Label lbError = new Label();
  final ListStore<Commentmodel> commentStore = new ListStore<Commentmodel>();
  commentService.getAllComment(new AsyncCallback<List<Commentmodel>>() {

   @Override
   public void onFailure(Throwable caught) {
    lbError.setText("data loading failure");

   }

   @Override
   public void onSuccess(List<Commentmodel> result) {
    commentStore.add(result);

   }
  });

The rest of the tasks are very familiar with the GXT users. Creating a List of ColumnConfig, a Grid with the commentStore and ColumnConfig lists, etc.

        List<Columnconfig> configs = new ArrayList<Columnconfig>();
        ColumnConfig column = new ColumnConfig();
        column.setId("comments");
        column.setHeader("Comments");
        column.setWidth(200);
        configs.add(column);

        column = new ColumnConfig("postedBy", "Posted By", 150);
        column.setAlignment(HorizontalAlignment.LEFT);
        configs.add(column);

        column = new ColumnConfig("postedDate", "Posting Date", 100);
        column.setAlignment(HorizontalAlignment.RIGHT);
        column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
        configs.add(column);

        ColumnModel cm = new ColumnModel(configs);

        final Grid<Commentmodel> grid = new Grid<Commentmodel>(commentStore, cm);
        grid.setBorders(true);
        grid.setAutoExpandColumn("comments");
        grid.setStyleAttribute("borderTop", "none");
        grid.setStripeRows(true);

        ContentPanel cp = new ContentPanel();
        cp.setBodyBorder(false);
        cp.setHeading("Grid with Pagination");
        cp.setButtonAlign(HorizontalAlignment.CENTER);
        cp.setLayout(new FitLayout());
        cp.setSize(700, 300);
        cp.add(grid);

That's all for today. You will get a live example of this tutorial here.
For more about Google App Engine and JDO visit this.

How to Use GXT XTemplate with ListView

2010-05-26T20:58:00.000-07:00

XTemplate is a very useful class of GXT that supports auto-filling arrays, conditional processing with basic comparison operators, sub-templates, basic math function support, special built-in template variables, inline code execution and more. Here i am going to illustrate how to use XTemplate with a ListView to customize the look and feel of the ListView.

Create a new project named XTemplateExample and add GXT library in the project. To create a ListView at first you need a base model class and have to generate data for that model. In this tutorial i have used the same Employee model and TestData class for generating data which I have used in my previous blogs. You will find the code of these classes here.

Now go to the onModuleLoad method of XTemplateExample class. Remove all the auto generated code of this method.
First create a ListStore of Employee model , employeeList and add data to this store which was generated in the TestData class

  ListStore<Employee> employeeList = new ListStore<Employee>(); 
   employeeList.add(TestData.getEmployees());

Now Create a ListView of Employee type and set the employeeList as the store of the list view.

   ListView<Employee> lView = new ListView<Employee>();
   //getTemplate() returns the desired template
   lView.setTemplate(getTemplate());
   lView.setStore(employeeList);

   ContentPanel cp = new ContentPanel(); 
   cp.setBodyBorder(false); 
   cp.setHeading("Using XTemplate"); 
   cp.setButtonAlign(HorizontalAlignment.CENTER); 
   cp.setLayout(new FitLayout()); 
   cp.setSize(500, 420);
   cp.add(lView); 
   RootPanel.get().add(cp);

Here goes the definition of the getTemplate() method

private native String getTemplate() /*-{ 
       return ['<tpl for=".">', 
       '<div style="border: 1px solid #DDDDDD;float:left;margin:4px 0 4px  4px; padding:2px;width:220px;">',
       '<div style="color:#1C3C78;font-weight:bold;padding-bottom:5px;padding-top:2px;text-decoration:underline;">{name}</div>', 
       '<div style="color:green">Department:{department}</div>', 
       '<div style="color:blue">Designation:{designation}</div>',
       '<div style="color:black;padding-bottom:2px;">Salary:{salary}</div>', 
       '</div>', 
       '</tpl>', 
       ''].join(""); 
        
 }-*/;

Properties of the Employee model are placed between {}. The style will be applied on every element of the employeeList. And the outcome of the work will be like this.

You can give your own look and feel by simply changing the CSS.

Sending Mail Using JavaMail API and Gmail as SMTP server

2010-05-13T19:32:00.000-07:00

The JavaMail API provides a platform-independent and protocol-independent framework to build mail and messaging applications. The API defines classes such as Message, Session, and Transport. It includes support for the IMAP4, POP3, and SMTP protocols. Here I am going to show you how you can use this API to send mail through SMTP protocol.

First create a MailUtility class which you can use later from your client code.

public class MailUtility {

//Set Gmail as SMTP host 
private String SMTP_HOST_NAME = "smtp.gmail.com";
private String SMTP_AUTH_USER = "yourgmailid@gmail.com";
private String SMTP_AUTH_PWD = "password";

public void postMail(String recipients[], String subject,
String message, String from) throws MessagingException {
boolean debug = false;

//Set the required JavaMail session properties
Properties props = new Properties();
props.put("mail.smtp.starttls.enable", "true");
props.put("mail.smtp.host", SMTP_HOST_NAME);
props.put("mail.smtp.user", SMTP_AUTH_USER);
props.put("mail.smtp.password", SMTP_AUTH_PWD);
props.put("mail.smtp.auth", "true");
props.put("mail.smtp.port", "465");
props.put("mail.smtp.ssl", "true");

props.put("mail.smtp.socketFactory.port", "465");
props.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
props.put("mail.smtp.socketFactory.fallback", "false");

//Create an Authenticator. You will find the SMTPAuthenticator class defination later
Authenticator auth = new SMTPAuthenticator();

//Create a Session from the Properties and the Authenticator
Session session = Session.getInstance(props, auth);
session.setDebug(debug);

// Create a MimeMessage
MimeMessage msg = new MimeMessage(session);

// Set the from and to address
InternetAddress addressFrom = new InternetAddress(from);
msg.setFrom(addressFrom);

InternetAddress[] addressTo = new InternetAddress[recipients.length];
for (int i = 0; i < recipients.length; i++) {
addressTo[i] = new InternetAddress(recipients[i]);
}
msg.setRecipients(Message.RecipientType.TO, addressTo);

//Set message subject and text
msg.setSubject(subject);
msg.setText(message);

//Finally now send the message.
try {
Transport.send(msg);
} catch (MessagingException messagingException) {
messagingException.printStackTrace();
} catch (Exception ex) {
ex.printStackTrace();
}

}

//SimpleAuthenticator is used to do simple authentication
//when the SMTP server requires it.

private class SMTPAuthenticator extends javax.mail.Authenticator {

@Override
public PasswordAuthentication getPasswordAuthentication() {
String username = SMTP_AUTH_USER;
String password = SMTP_AUTH_PWD;
return new PasswordAuthentication(username, password);
}
}
}

And here is the client code that uses the MailUtility class for sending mail.

String emailMsgTxt = "Hello, this is a test mail from my mail application.\n";
String emailSubjectTxt = "Test Mail";
String emailFromAddress = "yourgmailid@gmail.com";
String[] receipentList=
 {
      "abc@gmail.com",
      "wxx@yahoo.com"
 };
try
{
      MailUtility smtpMailSender = new MailUtility();
      smtpMailSender.postMail(receipentList, emailSubjectTxt, emailMsgTxt, emailFromAddress);
} catch (MessagingException messagingException)
{
      messagingException.printStackTrace();
} catch (Exception ex)
{
     ex.printStackTrace();
}

That's all. Another day I will describe how you can send mail asynchronously using this mail API.

How to Call a Servlet in GWT

2010-04-18T23:05:00.000-07:00

Sometimes you may need a HttpServlet other than GWT Rpc Service in a real life application. If needed then how to call the Servlet from your GWT client? Here you will find the answer.

Here is a simple HelloServlet

public class HelloServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{ 
String name = request.getParameter("name");
response.getWriter().write("Hello "+name+", Welcome in My Servlet");
}
}

The Servlet uses a request a parameter 'name' and writes it in the response writer.

To call the Servlet from the client first configure the web.xml (war/WEB-INF/web.xml) file to let your GWT client know about the HelloServlet.


 HelloServlet
 org.ratul.servlettest.server.HelloServlet


 HelloServlet
 /hello

Value of the url-pattern node will be used later to call the Servlet.

Now make a simple UI with a TextBox and a Button.

final Button sendButton = new Button("Send");
final TextBox nameField = new TextBox();
RootPanel.get().add(nameField);
RootPanel.get().add(sendButton);

In the Click Handler of the sendButton call the Servlet with the 'name' parameter in the following way

sendButton.addClickHandler(new ClickHandler() {
  public void onClick(ClickEvent event) {
    Window.Location.replace("/hello?name="+nameField.getText());
    //the url-pattern value is used here
  }
});

Thats' all for today. Happy coding with GWT :-)

Getting Started with GXT (Ext GWT) Chart : Crate a Simple Horizontal Bar Chart

2010-04-10T21:35:00.000-07:00

Ext GWT is providing us a very handy Chart library based on Open Flash Chart. Here you will find a step by step detail description about creating a simple horizontal bar chart using the GXT chart library.

Create a new project named GXTBascicChart and add GXT library in the project. Go to the GXTBascicChart.gwt.xml file and add this line

<inherits name='com.extjs.gxt.charts.Chart'/>

Now go to the directory where you have extracted the GXT library. In the resource folder you will find all the resources for using GXT. Copy the chart and flash folders in the war folder of you application.

Go to the onModuleLoad method of GXTBascicChart class and remove all the auto generated code of this method. Create a Content Panel to place the chart

ContentPanel cp = new ContentPanel();  
cp.setHeading("Horizontal Bar chart");  
cp.setFrame(true);  
cp.setSize(550, 400);  
cp.setLayout(new FitLayout());

Now create a Chart component by providing the location of the open flash chart Shockwave file which resides in the chart folder.

String url = "chart/open-flash-chart.swf";  
final Chart chart = new Chart(url);

Set a Chart Model for the chart object and add this to the Content Panel

chart.setBorders(true);  
chart.setChartModel(getHorizontalBarChartModel());  
cp.add(chart);      
RootPanel.get().add(cp);

The Chart Model is responsible for the chart title, axes, legends, labels, and draw-able elements in your chart. Here is the getHorizontalBarChartModel method

public ChartModel getHorizontalBarChartModel() 
{ 
  //Create a ChartModel with the Chart Title and some style attributes
  ChartModel cm = new ChartModel("Students by Department", "font-size: 14px; font-family:      Verdana; text-align: center;");
 
  XAxis xa = new XAxis();
  //set the maximum, minimum and the step value for the X axis
  xa.setRange(0, 200, 50);  
  cm.setXAxis(xa);
  
  YAxis ya = new YAxis();
  //Add the labels to the Y axis  
  ya.addLabels("CSE", "EEE", "CE", "ME","CHE");  
  ya.setOffset(true);  
  cm.setYAxis(ya);

  //create a Horizontal Bar Chart object and add bars to the object  
  HorizontalBarChart bchart = new HorizontalBarChart();  
  bchart.setTooltip("#val#Students");  
  bchart.addBars(new HorizontalBarChart.Bar(60, "#ffff00")); 
  //different color for different bars 
  bchart.addBars(new HorizontalBarChart.Bar(180, "#0000ff"));  
  bchart.addBars(new HorizontalBarChart.Bar(180, "#00ff00"));  
  bchart.addBars(new HorizontalBarChart.Bar(120, "#ff0000"));
  bchart.addBars(new HorizontalBarChart.Bar(120, "#333ccc"));

  //add the bchart as the Chart Config of the ChartModel
  cm.addChartConfig(bchart);       
  cm.setTooltipStyle(new ToolTip(MouseStyle.FOLLOW));  
  return cm;  
}

And here is the last step before running your application.
Go to the GXTBascicChart.html file and add the following line in the head section

<script language='javascript' src='flash/swfobject.js'></script>

That's all. Run the application and the output will be like this

How to Use Your Session Beans from GWT Client

2010-04-08T20:19:00.000-07:00

Recently we have finished a project in which we were using EJB3.0 in the business tier and a GWT client for the user interface. Here i will share you how we connected them in a very convenient way.

Suppose you have an Entity class, Department and a stateless Session Bean named DepartmentBean which implements a remote interface DepartmentBeanRemote. To save a department the bean class
has a create method

public BigInteger create(Department department)
{
try
{
em.persist(department);
em.flush();
return department.getIdNr();
} catch (InvalidStateException in)
{
in.printStackTrace();
} catch (Exception ex)
{
ex.printStackTrace();
}
return null;
}

Now how to call this create method from your GWT client?

First create a GWT RPC Service named DepartmentService and DepartmentServiceImpl is the implementation class of this service interface. The service implemenltation class will serve as a gateway between client and bean class.

Create an instance of DepartmentBeanRemote by dependency injection in DepartmentServiceImpl.

@EJB
private DepartmentBeanRemote departmentBeanRemote;

Now use this instance to call the methods of the DepartmentBean in the following way

public Long create()
{
try
{
Department department = new Department();
department.setIdNr(null);
department.setDepartmentNameSt("Computer Science");
department.setDepartmentDescriptionSt("Most popular department of the university");
BigInteger returnValue = departmentBeanRemote.create(department);
return new Long(returnValue.toString());
}
catch (Exception e)
{
e.printStackTrace();
return null; 
}
}

Call the service method from the client. You have just made a complete path between your GWT Client and the Session Beans.

How to Run Multiple Domain of GlassFish Simultaneously (Use --portbase option)

2010-02-13T06:37:00.000-08:00

In many cases you may need to run multiple domains of GlassFish simultaneously. Few days ago I was in a situation to run 3 domains concurrently. At first I was creating domain with only --adminport option to assign different admin port to different domains. But when I try to run those domains simultaneously I was getting port conflict error. Then I found that there are many other ports in GlassFish for other purposes. Default ports for GlassFish are

4848 Admin port
8080 HTTP Instance port
7676 JMS port
3700 IIOP port
8181 HTTP_SSL port
3820 IIOP_SSL port
3920 IIOP_MUTUALAUTH port
8686 JMX_ADMIN port

So to avoid port conflict you have to assign different port numbers in different domains for each purpose. The easy way of doing this is using portbase option in create-domain command. You just have to set a base port number and the values for the ports are calculated as follows

Admin port: portbase + 48
HTTP listener port: portbase + 80
IIOP listener port: portbase + 37
JMX port: portbase + 86

Here is an example of create-domain command with portbase option

asadmin create-domain --user admin --portbase 2000 --savemasterpassword=true domain2

Remember
-> Adminport should be between 1 and 65535. So choose a portbase value such that the resulting port number doesn't exceed 65535

->The --portbase option can't be used with the --adminport or the --instanceport option

Session Management (Set and Get Data from Session) in GWT

2009-12-11T01:45:00.000-08:00

When you think about the Security of a web application 'Session Management' is the first thing that strikes in your head. I am now working with an enterprise web application using GWT and you know security is a very vital issue in an enterprise application. And we have ensured the security by managing session data. Here i will describe how to store and retrieve data from session by using GWT RPC.

Suppose you want to store the user name in session after login to the application and check the session value later. Then what do you do?

First create a GWT RPC Service named 'SessionManagementService'. You can give any other name as you like. In SessionManagementService interface add two methods

public void setUserName(String userName);
public String getUserName();

And synchronize the methods with 'SessionManagementServiceAsync'.

public void setUserName(String userName, AsyncCallback<Void> asyncCallback);
public void getUserName(AsyncCallback<String> asyncCallback);

Now implement the methods in 'SessionManagementServiceImpl'. Let's first talk about the setter method.

public void setUserName(String userName)
{
     HttpSession httpSession = getThreadLocalRequest().getSession(true);
     httpSession.setAttribute("userName", userName);
}

The getThreadLocalRequest method returns you a HttpServletRequest object for the current call. For simultaneous invocation you will get different request object. And the getSession method returns you the current HttpSession for the associated request. So you can get the current session of the current call by getThreadLocalRequest().getSession(true).

The setAttribute method binds an object to the associated session. It stores the object's value as a Name-Value pair. You can put any thing as the value of the object. A String value or List<String> any thing. Here the name of the object is "useName" and the object is bound to this session with this name.

Now come to the getter method.

public String getUserName()
{
    HttpSession session = getThreadLocalRequest().getSession(true);
    if (session.getAttribute("userName") != null)
    {
        return (String) session.getAttribute("userName");
    }
    else 
    {
        return "";
    }
}

Get the current session in the same way as described for the setter method. The getAttribute method returns the value of the object which is bound with this session with the specific name. Then simply cast it with your desired type.

Thats all. Just call the services according to your requirement. Play with GWT and stay in touched. :-D

How to Create an Editable TreeGrid in GXT(Ext GWT)

2009-12-05T20:12:00.000-08:00

In our project I need to add the editable functionality with the GXT TreeGrid. Here I am going to share my experience about how to create an editable TreeGrid.

You may have already known that to build a TreeGrid the tree node objects must possess the functionality of BaseTreeModel of GXT. I have used the same EmployeeTreeNode and Folder class for leaf and parent nodes that i used in my previous blogs about GXT TreePanel. And in the TestData class i have populated the data to build the TreeGrid. You will find the code for these classes here.
(If you are new in GWT and GXT read my blogs about creating a new project in gwt and add GXT library)

First create a root object named model of the Folder class from TestData.getTreeModel() method.

Folder model = TestData.getTreeModel();

Then create a TreeStore object,store from this model and add data to the store

TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);

Now the time for defining ColumnConfig objects. First create a ColumnConfig, name and set a TextField as the editor of this object.

ColumnConfig name = new ColumnConfig("name", "Name", 100);
name.setRenderer(new TreeGridCellRenderer<ModelData>());
TextField<String> text = new TextField<String>();
text.setAllowBlank(false);
name.setEditor(new CellEditor(text));

The second column is the salary column so you can set a NumberField as the editor for this column.

ColumnConfig salary = new ColumnConfig("salary", "Salary", 100);
salary.setEditor(new CellEditor(new NumberField()));

In my example the third column is the joining date column. So you have to set a DateField as the editor for this column. For this first create a DateField object dateField and set the display format of the field. Then create a ColumnConfig object date and set the dateField as the editor of the date.

DateField dateField = new DateField();  
dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));
     
ColumnConfig date = new ColumnConfig("joiningdate", "Joining Date", 100); 
date.setAlignment(HorizontalAlignment.RIGHT);
date.setEditor(new CellEditor(dateField));  
date.setDateTimeFormat(DateTimeFormat.getMediumDateFormat());

Now create a ColumnModel from these three ColumnConfig objects.

ColumnModel cm = new ColumnModel(Arrays.asList(name, salary, date));

From the ColumnModel and TreeStore create an EditorTreeGrid object and set some property of the object.

EditorTreeGrid<ModelData> editorTreeGrid = new EditorTreeGrid<ModelData>(store,cm);
editorTreeGrid.setClicksToEdit(ClicksToEdit.TWO);
editorTreeGrid.setBorders(true);
editorTreeGrid.setSize(400, 400);
editorTreeGrid.setAutoExpandColumn("name");
editorTreeGrid.setTrackMouseOver(false);

The setter methods are self explanatory.

Finally create a ContentPanel and add the editorTreeGrid in this panel.

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Cell TreeGrid Editing (2-Clicks)");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setFrame(true);
cp.setSize(600, 300);
cp.add(editorTreeGrid);
RootPanel.get().add(cp);

To view the live demo of this tutorial Click here.
The output will be like this

How to Create a Basic TreeGrid using GXT(Ext GWT)

2009-11-03T02:53:00.000-08:00

When you want to display hierarchical data tree grid will be the right choice for this. GXT TreeGrid is a very powerful UI component which provides us with some wonderful functionality like row editor, row number, widget render etc. Here i present you the way of creating a basic TreeGrid in detail.

Create a new project named GxtBasicTreeGrid and add GXT library in the project. The tree node objects must possess the functionality of BaseTreeModel of GXT. I have used the same EmployeeTreeNode and Folder class for leaf and parent nodes that i used in my previous blogs about GXT TreePanel. And in the TestData class i have populated the data to build the TreeGrid. You will find the code for these classes here.

First create a root object named model of the Folder class from TestData.getTreeModel() method and create a TreeStore object,store from this model.
Folder model = TestData.getTreeModel();

TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);

Now define three ColumnConfig objects and create a ColumnModel from these objects.
ColumnConfig name = new ColumnConfig("name", "Name", 100);

name.setRenderer(new TreeGridCellRenderer<ModelData>());

 ColumnConfig salary = new ColumnConfig("salary", "Salary", 100);

 ColumnConfig date = new ColumnConfig("joiningdate", "Joining Date", 100);

 ColumnModel cm = new ColumnModel(Arrays.asList(name, salary, date));

Create a TreeGrid, treeGrid from the TreeStore, store and ColumnModel, cm. Then set some property of the treeGrid. Finally create a ContentPanel and add the treeGrid to this panel.
TreeGrid<ModelData> treeGrid = new TreeGrid<ModelData>(store, cm);

treeGrid.setBorders(true);
 treeGrid.getStyle().setLeafIcon(ICONS.user_add());
 treeGrid.setSize(400, 400); 
 treeGrid.setAutoExpandColumn("name");
 treeGrid.setTrackMouseOver(false);

 ContentPanel cp = new ContentPanel();
 cp.setBodyBorder(false);
 cp.setHeading("TreeGrid");
 cp.setButtonAlign(HorizontalAlignment.CENTER);
 cp.setLayout(new FitLayout());
 cp.setFrame(true);
 cp.setSize(600, 300);
 cp.add(treeGrid);
 RootPanel.get().add(cp);

Run the application and the output will be like this.

To view the live demo of this tutorial Click here.

An Example Gallery of GXT(Ext GWT)

2009-10-27T07:19:00.000-07:00

After written some blogs about GXT Grid and Tree I planned for merging all those in a single application. Beside this I want to test JDO in Google App Engine. As a result of this I have made a tiny application and deployed in the Google App Engine. Ext GWT (GXT) Example Gallery. I will be very pleased if you visit the site and give your valuable comment.

You can also check out the latest code of the project from Google svn by running this command

svn checkout http://gxtexamplegallery.googlecode.com/svn/trunk/ gxtexamplegallery-read-only

Add Context Menu with GXT(Ext GWT) TreePanel

2009-10-02T03:31:00.000-07:00

Context Menu is frequently used with tree if you want to present a very user friendly interface to user like add,delete or enable,disable a tree node. Here i show you how you can add a context menu with add and delete menu items with GXT TreePanel very easily.
Create a new project named GxtContextMenuTree and add GXT library in the project. The tree node objects must possess the functionality of BaseTreeModel of GXT. I have used the same EmployeeTreeNode and Folder class for leaf and parent nodes that i used in my previous blogs related to GXT TreePanel. And in the TestData class i have populated the data to build the tree. You will find the code for these classes here. Create a new package model under the client package and place the EmployeeTreeNode and Folder class there.

Now remove all the auto generated code from the GxtContextMenuTree class which is the entry point class of your project. Go to the onModuleLoad method of the class and first create a root node of the tree. Then create a TreeStore, store and add data to this store from the root node. Now create a TreePanel, tree from this store and set some property of the tree.

final Folder rootNode = TestData.getTreeModel();

final TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add((List) rootNode.getChildren(), true);

final TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
tree.setDisplayProperty("name");
tree.getStyle().setLeafIcon(ICONS.user_add());
tree.setWidth(250);

Now create a gxt Menu and add two MenuItem insert and remove with the menu.

Menu contextMenu = new Menu();
contextMenu.setWidth(140);

MenuItem insert = new MenuItem();
insert.setText("Insert Item");
insert.setIcon(ICONS.add());
contextMenu.add(insert);

MenuItem remove = new MenuItem();
remove.setText("Remove Selected");
remove.setIcon(ICONS.delete());
contextMenu.add(remove);

What you want to do by clicking on these menu items, just write them in the addSelectionListener method of the MenuItem. Then set the menu to the tree as a context menu by setContextMenu method of the TreePanel.

insert.addSelectionListener(new SelectionListener<MenuEvent>() {
public void componentSelected(MenuEvent ce) {
ModelData folder = tree.getSelectionModel().getSelectedItem();
if (folder != null) {
Folder child = new Folder("Add Child " + count++);
store.add(folder, child, false);
tree.setExpanded(folder, true);
}
}
});

remove.addSelectionListener(new SelectionListener<MenuEvent>() {
public void componentSelected(MenuEvent ce) {
List<ModelData> selected = tree.getSelectionModel().getSelectedItems();
for (ModelData sel : selected) 
{
store.remove(sel);
}
}
});

tree.setContextMenu(contextMenu);
RootPanel.get().add(tree);

In the addSelectionListener method of the insert menu item i have written the code for adding a Folder node with the selected node and in the same method of the remove menu item code for removing a list of selected nodes. To view the live demo of this tutorial Click here.

Add Filter Functionality with GXT(Ext GWT) TreePanel

2009-09-26T02:46:00.000-07:00

In my previous blog i have articulated how you can create a basic tree using the GXT TreePanel. In the next few blogs i will try to write about some marvelous features which can be easily integrated with TreePanel. Here i state how to add filter functionality with TreePanel.

Create a new project named GxtFilterTree and add GXT library in the project. The tree node objects must possess the functionality of BaseTreeModel of GXT. I have used the same EmployeeTreeNode and Folder class for leaf and parent nodes that i used in my previous blog. And in the TestData class i have populated the data to build the tree. You will find the code for these classes here.

Go to the onModuleLoad method of GxtFilterTree class. Remove all the auto generated code of this method. Now create a TreeLoader, loader.

TreeLoader<ModelData> loader = new BaseTreeLoader<ModelData>(
  new TreeModelReader<List<ModelData>>());

BaseTreeLoader is default implementation of the TreeLoader interface which also extends the functionality of BaseLoader. Then create TreeStore, store by using the loader and create a TreePanel, tree with the store. Pass the root of the tree to the loader.load method as a load configuration which loads data using the configuration. You can get the root node from getTreeModel method of TestData class.

TreeStore<ModelData> store = new TreeStore<ModelData>(loader);
TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
tree.setAutoLoad(true);
tree.setDisplayProperty("name");
tree.setWidth(250);
tree.setIconProvider(new ModelIconProvider<ModelData>() {
  public AbstractImagePrototype getIcon(ModelData model) {
    if (((TreeModel) model).isLeaf()) {
      return ICONS.user_add();
    }
    return null;
  }
});
loader.load(TestData.getTreeModel());

setAutoLoad method sets whether all children should automatically be loaded recursively. Other setter methods of TreePanel are self explanatory.

Now the time for creating a StoreFilterField and bind this to the store.

StoreFilterField<ModelData> filter = new StoreFilterField<ModelData>() {
  @Override
  protected boolean doSelect(Store<ModelData> store,
  ModelData parent, ModelData record, String property,
  String filter) {
    // only match leaf nodes
    if (record instanceof Folder) { 
      return false;
    }
    String name = record.get("name");
    name = name.toLowerCase();
    if (name.startsWith(filter.toLowerCase())) {
      return true;
    }
    return false;
  }
};
filter.bind(store);

StoreFilterField can filter any Store implementation. You just have to implement the doSelect method this class. Here i have matched only the leaf node.

You are just one step behind to run the application. Create a panel to add the filter and the tree and add that panel to the RootPanel. That’s all. Run the application and check the filter functionality.

VerticalPanel panel = new VerticalPanel();
panel.addStyleName("x-small-editor");
panel.setSpacing(8);
panel.add(new Html("<span class=text>Enter a search string such as 'dirk'</span>"));
panel.add(filter);
panel.add(tree);
RootPanel.get().add(panel);

}

To view the live demo of this tutorial Click here.

How to Create a Simple Tree Using GXT(Ext GWT) TreePanel

2009-09-23T01:29:00.000-07:00

TreePanel is another powerful UI tools provide by GXT. It has expand-collapse functionality. You can add context menu or can add filter functionality with the TreePanel very easily. Here i describe every steps of creating a simple basic Tree using GXT in detail.

First create a new project named GxtBasicTree and add GXT library in the project. The tree node objects must possess the functionality of BaseTreeModel of GXT. In my example the leaf node objects are of EmployeeTreeNode class and parent node objects are of Folder class. Both of the classes extend BaseTreeModel class. Here is the code for the Employee class.

package com.ratul.GxtBasicTree.client.model;

import java.util.Date;

import com.extjs.gxt.ui.client.data.BaseTreeModel;

public class EmployeeTreeNode extends BaseTreeModel {
 private static final long serialVersionUID = 1L;

public EmployeeTreeNode() {
  }

  public EmployeeTreeNode(String name, double salary, Date joiningdate) {
    set("name", name);
    set("salary", salary);
    set("joiningdate", joiningdate);
  }

  public Date getJoiningdate() {
    return (Date) get("joiningdate");
  }

  public String getName() {
    return (String) get("name");
  }

  public double getSalary() {
    Double salary = (Double) get("salary");
    return salary.doubleValue();
  }
  public String toString() {
    return getName();
  }
}

As i have said previously the objects of the Folder class can be parent node for the Tree. So this class should have the functionality of adding children nodes. The constructor with a String and an Array of BaseTreeModel object serves the purpose. Here is the code for the Folder class.

package com.ratul.GxtBasicTree.client.model;

import java.io.Serializable;

import com.extjs.gxt.ui.client.data.BaseTreeModel;

public class Folder extends BaseTreeModel implements Serializable {
 private static final long serialVersionUID = 1L;
private static int ID = 0;
  
  public Folder() {
    set("id", ID++);
  }

  public Folder(String name) {
    set("id", ID++);
    set("name", name);
  }

  public Folder(String name, BaseTreeModel[] children) {
    this(name);
    for (int i = 0; i < children.length; i++) {
      add(children[i]);
    }
  }

  public Integer getId() {
    return (Integer) get("id");
  }

  public String getName() {
    return (String) get("name");
  }

  public String toString() {
    return getName();
  }
}

Now populate a root node containing all the child nodes by using the above two classes in the getTreeModel methodh of the TestData class.

package com.ratul.GxtBasicTree.client;

import com.google.gwt.i18n.client.DateTimeFormat;
import com.ratul.GxtBasicTree.client.model.Employee;
import com.ratul.GxtBasicTree.client.model.Folder;

public class TestData {

  public static Folder getTreeModel() 
  {
     DateTimeFormat f = DateTimeFormat.getFormat("yyyy-mm-dd");
  Folder[] folders = new Folder[] {
   new Folder("General Administration", new Folder[] {
    new Folder("General Manager", new EmployeeTreeNode[] {
     new EmployeeTreeNode("Hollie Voss", 150000, f.parse("2006-05-01")),
     new EmployeeTreeNode("Heriberto Rush", 150000,f.parse("2007-08-01")), }),
    new Folder("Executive", new EmployeeTreeNode[] {
     new EmployeeTreeNode("Christina Blake", 45000,f.parse("2008-11-01")),
     new EmployeeTreeNode("Chad Andrews", 45000, f.parse("2008-07-01")), }), }),
 
   new Folder("Information Technology",new Folder[] {
    new Folder("Senior S/W Engineer",new EmployeeTreeNode[] {
     new EmployeeTreeNode("Dirk Newman", 70000,f.parse("2007-08-21")),
     new EmployeeTreeNode("Emerson Milton",72000,f.parse("2009-05-07")),
     new EmployeeTreeNode("Gail Horton", 680000,f.parse("2008-05-01")), }),
    new Folder("S/W Engineer",new EmployeeTreeNode[] {
     new EmployeeTreeNode("Claudio Engle", 50000,f.parse("2007-02-01")),
     new EmployeeTreeNode("Buster misjenou",52000,f.parse("2009-06-10")),
     new EmployeeTreeNode("Bell Snedden", 50000,f.parse("2008-12-01")),
     new EmployeeTreeNode("Benito Meeks", 55000,f.parse("2006-05-01")), }), }),
 
   new Folder("Marketing", new Folder[] { 
    new Folder("Executive",new EmployeeTreeNode[] {
     new EmployeeTreeNode("Candice Carson", 50000, f.parse("2007-08-21")),
     new EmployeeTreeNode("Mildred Starnes", 50000,f.parse("2008-05-01")),
     new EmployeeTreeNode("Claudio Engle", 50000, f.parse("2009-06-15")), }), }), 
  };

  Folder root = new Folder("root");
  for (int i = 0; i < folders.length; i++) {
   root.add((Folder) folders[i]);
  }

  return root;
  }
}

You data is now ready to create a simple Tree. Go to the onModuleLoad method of GxtBasicTree class. Remove all the auto generated code of this method. Now first create a root object named model of the Folder class from TestData.getTreeModel() method and create a TreeStore object,store from this model.

public static final ExampleIcons ICONS = GWT.create(ExampleIcons.class);
public void onModuleLoad() 
{
       Folder model = TestData.getTreeModel();  
     
       TreeStore<ModelData> store = new TreeStore<ModelData>();  
       store.add(model.getChildren(), true);

Now create a TreePanel, tree from this store and set display name, width and style of the tree.

final TreePanel<ModelData> tree = new TreePanel<ModelData>(store);  
       tree.setDisplayProperty("name");  
       tree.setWidth(250);  
       tree.getStyle().setLeafIcon(ICONS.user_add());

The two button expand and collapse provide the expand and collapse functionality by simple calling the tree.expandAll() and tree.collapseAll() method.

ButtonBar buttonBar = new ButtonBar();  
       Button expand = new Button("Expand All"); 
       Button collapse = new Button("Collapse All"); 
       expand.addSelectionListener(new SelectionListener<ButtonEvent>() {  
       public void componentSelected(ButtonEvent ce) {  
           tree.expandAll();  
         }  
       });
       
       collapse.addSelectionListener(new SelectionListener<ButtonEvent>() {  
        public void componentSelected(ButtonEvent ce) {  
            tree.collapseAll();  
          }  
        });
       buttonBar.add(expand);
       buttonBar.add(collapse);
        
       RootPanel.get().add(buttonBar);
       RootPanel.get().add(tree);
       
 }

That's all. Run it and check the functionality of the simple tree. To view the live demo of this tutorial Click here.

Working with GXT(Ext GWT) Grid : Create an Editable Grid

2009-09-05T09:47:00.000-07:00

Last week i was so busy that i can not afford to manage time on writing. And i am afraid that whether i can keep my promise on writing a series of tutorials about GXT and GWT or not. In the upcoming days i have to work in six! projects simultaneously. Good thing is that there will be a lot of new things that i can learn and surely i will share those here whenever i get time. Now i will show you how you can make a GXT Grid editable with TextField, ComboBox and Date Picker.

Create a new project named GxtEditableGrid and add GXT library in the project. As like my previous blogs about GXT Grid i have used the same Employee model and TestData class for generating data. You will find the code of these classes here. Go to the onModuleLoad method of GxtEditableGrid class and remove all the auto generated code of this method.

Starting with creating a list of ColumnConfig and a ColumnConfig instance named column. Configure this column to show and edit Employee Name first. To add the editing functionality create a TextField and a CellEditor with this TextField. Then set the CellEditor as the editor of the column.

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Employee Name");
column.setWidth(200);
TextField<String> text = new TextField<String>();  
text.setAllowBlank(false);  
text.setAutoValidate(true);  
column.setEditor(new CellEditor(text));
configs.add(column);

For the Department column rather than using a TextField we are going to use a ComboBox to edit this field. First create a SimpleComboBox and add the possible values to it.

final SimpleComboBox<String> combo = new SimpleComboBox<String>();  
combo.setTriggerAction(TriggerAction.ALL);  
combo.add("General Administration");  
combo.add("Information Technology");  
combo.add("Marketing");  
combo.add("Accounts");

Then create a CellEditor with the SimpleComboBox and set it as the editor of the department column.

CellEditor editor = new CellEditor(combo) {  
@Override  
public Object preProcessValue(Object value) {  
if (value == null) {  
return value;  
}  
return combo.findModel(value.toString());  
}  

@Override  
public Object postProcessValue(Object value) {  
if (value == null) {  
return value;  
}  
return ((ModelData) value).get("value");  
}  
};  

column = new ColumnConfig("department", "Department", 150);
column.setAlignment(HorizontalAlignment.LEFT);
column.setEditor(editor);  
configs.add(column);

For the Designation column configure it like the Employee Name column and for the Salary column set a cell editor with NumberField. That is this field will only accept numeric values.

column = new ColumnConfig("designation", "Designation", 150);
column.setAlignment(HorizontalAlignment.LEFT);
TextField<String> text2 = new TextField<String>();  
text2.setAllowBlank(false);  
text2.setAutoValidate(true);  
column.setEditor(new CellEditor(text2));
configs.add(column);

column = new ColumnConfig("salary", "Slary", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
final NumberFormat number = NumberFormat.getFormat("0.00");  
GridCellRenderer<Employee> checkSalary = new GridCellRenderer<Employee>() {  
public String render(Employee model, String property, ColumnData config, int rowIndex,  
int colIndex, ListStore<Employee> employeeList, Grid<Employee> grid) {  
double val = (Double) model.get(property);  
String style = val < 70000 ? "red" : "green";  
return "<span style='color:" + style + "'>" + number.format(val) + "</span>";
}  
};  
column.setRenderer(checkSalary); 
column.setEditor(new CellEditor(new NumberField()));  
configs.add(column);

To change date field in a Grid with date picker create a DateField, set a date fomat for the DateField and finally set this as the editor for the ColumnConfig.

DateField dateField = new DateField();  
dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));

column = new ColumnConfig("joiningdate", "Joining Date", 100);
column.setAlignment(HorizontalAlignment.RIGHT);
column.setEditor(new CellEditor(dateField));  
column.setDateTimeFormat(DateTimeFormat.getMediumDateFormat());
configs.add(column);

To enable the editable functionality of grid you have to create an instance of EditorGrid class instead of a Grid class now. Other things are described in my previous tutorials about GXT Grid.

ListStore<Employee> employeeList = new ListStore<Employee>();
employeeList.add(TestData.getEmployees());
ColumnModel cm = new ColumnModel(configs);

final EditorGrid<Employee> grid = new EditorGrid<Employee>(employeeList, cm);
grid.setStyleAttribute("borderTop", "none");
grid.setAutoExpandColumn("name");
grid.setBorders(true);
grid.setStripeRows(true);

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Employee List");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setSize(700, 300);
cp.add(grid);
RootPanel.get().add(cp);

That's all. Run the application check the magic GXT. To view the live demo of this tutorial Click here.

Working with GXT(Ext GWT) Grid : Add Grouping Funtionality

2009-08-26T21:47:00.000-07:00

Grouping is very helpful when you view a large set of data. It creates a more readable view for the user. GXT provides us with a very easy way of adding grouping functionality with a grid. Here i describe how to add grouping functionality with GXT grid.

Create a new project named GxtGridGrouping and add GXT library in the project. As like my previous blogs about GXT Grid i have used the same Employee model and TestData class for generating data. You will find the code of these classes here. Go to the onModuleLoad method of GxtGridGrouping class and remove all the auto generated code of this method.

First create an instance of GroupingStore, a specialized store implementation which extends the ListStore that provides for grouping models by one of the available fields.

GroupingStore<Employee> employeeList = new GroupingStore<Employee>();  
employeeList.add(TestData.getEmployees());  
employeeList.groupBy("department");

The groupBy method takes a property of your model by which you want to group your grid. In the example i have grouped the grid by 'department' property. You can change it to 'designation' property and see how it works.

Now define a list of ColumnConfig and a ColumnModel by using this list as before.

List<Columnconfig> configs = new ArrayList<Columnconfig>();

ColumnConfig column = new ColumnConfig();  
column.setId("name");  
column.setHeader("Employee Name");  
column.setWidth(200);  
configs.add(column);

column = new ColumnConfig("department", "Department", 150);  
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("designation", "Designation", 150);   
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("salary", "Slary", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
final NumberFormat number = NumberFormat.getFormat("0.00");  
GridCellRenderer<Employee> checkSalary = new GridCellRenderer<Employee>() {  
public String render(Employee model, String property, ColumnData config, int rowIndex,  
int colIndex, ListStore<Employee> employeeList, Grid<Employee> grid) {  
double val = (Double) model.get(property);  
String style = val < 70000 ? "red" : "green";  
return "<span style='color:" + style + "'>" + number.format(val) + "</span>"; 
}  
};  
column.setRenderer(checkSalary);  
configs.add(column);

column = new ColumnConfig("joiningdate", "Joining Date", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());  
configs.add(column);

final ColumnModel cm = new ColumnModel(configs);

Create an instance of GroupView which groups the data based on the GroupStore. Then set it as the view of the Grid.

GroupingView view = new GroupingView();  
view.setForceFit(true);  
view.setGroupRenderer(new GridGroupRenderer() {  
public String render(GroupColumnData data) {  
String f = cm.getColumnById(data.field).getHeader();  
String l = data.models.size() == 1 ? "Item" : "Items";  
return f + ": " + data.group + " (" + data.models.size() + " " + l + ")";  
}  
});  

Grid<Employee> grid = new Grid<Employee>(employeeList, cm);  
grid.setView(view);  
grid.setBorders(true);

Here setForceFit is set true to auto expand the columns to fit the grid width and setGroupRenderer is used to create a heading for the groups.

Finally add the grid to the content panel.

ContentPanel cp = new ContentPanel();  
cp.setBodyBorder(false);  
cp.setHeading("Employee List");  
cp.setButtonAlign(HorizontalAlignment.CENTER);  
cp.setLayout(new FitLayout());  
cp.setSize(700, 420); 
cp.add(grid);  
RootPanel.get().add(cp);

Run the application and see how readable the grid is now. To view the live demo of this tutorial Click here.

Working with GXT(Ext GWT) Grid : Add Local Pagination Functionality

2009-08-24T22:48:00.000-07:00

In my previous blog i have described how to create a simple Grid of GXT. I have a plan to write a series of blog about other useful functionalities which can be added to the Grid. Here i write down the way of adding local pagination functionality with the Grid.

Create a new project named GxtPagingExample and add GXT library in the project. To create a grid at first you need a base model class and have to generate data for that model. In this tutorial i have used the same Employee model and TestData class for generating data which i used in my previous blog. You will find the code of these classes there.

Now go to the onModuleLoad method of GxtPagingExample class. Remove all the auto generated code of this method. First create an instance of PagingModelMemoryProxy which is a specialized DataProxy that supports paging when the entire data set is in the memory.

PagingModelMemoryProxy proxy = new PagingModelMemoryProxy(TestData.getEmployees());
   PagingLoader loader = new BasePagingLoader(proxy);
   loader.setRemoteSort(true);
   ListStore<Employee> employeeList = new ListStore<Employee>(loader);

BasePagingLoader is an implementation of the PagingLoader interface which loads data using the proxy.If remote sort is enable then it will allow you to sort between the whole data set otherwise the sorting will be done only between the viewable data set. Then create a ListStore of Employee type.

Now create a PagingToolBar widget then bind it with the loader. It takes the page size in the constructor.

final PagingToolBar toolBar = new PagingToolBar(5);
   toolBar.bind(loader);
   loader.load(0, 5);

The arguments of the load method of PagingLoader are the begin index and page size.

Create a list of ColumnConfig and define each column. Then create a grid and add the grid and the PagingToolBar in a panel.

List<Columnconfig> configs = new ArrayList<Columnconfig>();

ColumnConfig column = new ColumnConfig();  
column.setId("name");  
column.setHeader("Employee Name");  
column.setWidth(200);  
configs.add(column);

column = new ColumnConfig("department", "Department", 150);  
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("designation", "Designation", 150);  
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("salary", "Slary", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
final NumberFormat number = NumberFormat.getFormat("0.00");  
GridCellRenderer<Employee> checkSalary = new GridCellRenderer<Employee>() {  
public String render(Employee model, String property, ColumnData config, int rowIndex,  
int colIndex, ListStore<Employee> employeeList, Grid<Employee> grid) {  
double val = (Double) model.get(property);  
String style = val < 70000 ? "red" : "green";  
return "<span style='color:" + style + "'>" + number.format(val) + "</span>"; 
}  
};  
column.setRenderer(checkSalary);  
configs.add(column);

column = new ColumnConfig("joiningdate", "Joining Date", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());  
configs.add(column);

ColumnModel cm = new ColumnModel(configs);
Grid<Employee> grid = new Grid<Employee>(employeeList, cm); 
grid.setStyleAttribute("borderTop", "none"); 
grid.setAutoExpandColumn("name"); 
grid.setBorders(true); 
grid.setStripeRows(true);

ContentPanel cp = new ContentPanel();  
cp.setBodyBorder(false);  
cp.setHeading("Employee List");  
cp.setButtonAlign(HorizontalAlignment.CENTER);  
cp.setLayout(new FitLayout());  
cp.setSize(700, 300); 
cp.add(grid);  
cp.setBottomComponent(toolBar);
RootPanel.get().add(cp);

Explanation of the above code is written here.
That's all. Run the application and test the pagination functionality. To view the live demo of this tutorial Click here.

How to create a simple Grid using GXT(Ext GWT)

2009-08-21T22:41:00.000-07:00

GXT provides us with many powerful UI tools. One of this is the Grid. You can select which column you want to see or which you want to discard from the Grid at run time. Can sort the Grid by any column in both ascending and descending order. More over with the GridCellRenderer you can customized the look and feel of a cell. This tutorial describes every steps of creating a simple Grid using GXT in detail.

First create a new project named GxtGridExample and add GXT library in the project. To show a list of data in the Grid you have to prepare the data first. In this tutorial i am going to show you a list of employee. So i need a Employee class which extends the BaseModel class of the GXT. Here is the code for the Employee class.

package com.ratul.GxtGridExample.client.model;
import java.util.Date;
import com.extjs.gxt.ui.client.data.BaseModel;

public class Employee extends BaseModel {
private static final long serialVersionUID = 1L;

public Employee() {
}
public Employee(String name, String department, String designation,double salary, Date joiningdate) {
set("name", name);
set("department", department);
set("designation", designation);
set("salary", salary);
set("joiningdate", joiningdate);
}
public Date getJoiningdate() {
return (Date) get("joiningdate");
}
public String getName() {
return (String) get("name");
}
public String getDepartment() {
return (String) get("department");
}
public String getDesignation() {
return (String) get("designation");
}
public double getSalary() {
Double salary = (Double) get("salary");
return salary.doubleValue();
}
public String toString() {
return getName();
}
}

Employee has 5 properties and to set the value of a property the set method is used. First parameter of the method is the property name and second is the value of that property. The class has also the getter method for each property.

Now populate a list of Employee in the TestData class.

package com.ratul.GxtGridExample.client;

import java.util.ArrayList;
import java.util.List;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.ratul.GxtGridExample.client.model.Employee;

public class TestData {

public static List<Employee> getEmployees()
{
  List<Employee> employees = new ArrayList<Employee>();
DateTimeFormat f = DateTimeFormat.getFormat("yyyy-mm-dd");
  employees.add(new Employee("Hollie Voss","General Administration","Executive Dir  ector",150000,f.parse("2006-05-01")));
  employees.add(new Employee("Emerson Milton","Information Technology","CTO",12000  0,f.parse("2007-03-01")));
  employees.add(new Employee("Christina Blake","Information Technology","Project M  anager",90000,f.parse("2008-08-01")));
  employees.add(new Employee("Heriberto Rush","Information Technology","Senior S/W  Engineer",70000,f.parse("2009-02-07")));
  employees.add(new Employee("Candice Carson","Information Technology","S/W Engine  er",60000,f.parse("2007-11-01")));
  employees.add(new Employee("Chad Andrews","Information Technology","Senior S/W E  ngineer",70000,f.parse("2008-02-01")));
  employees.add(new Employee("Dirk Newman","Information Technology","S/W Engineer"  ,62000,f.parse("2009-03-01")));
  employees.add(new Employee("Bell Snedden","Information Technology","S/W Engineer  ",73000,f.parse("2007-07-07")));
  employees.add(new Employee("Benito Meeks","Marketing","General Manager",105000,f  .parse("2008-02-01")));
  employees.add(new Employee("Gail Horton","Marketing","Executive",55000,f.parse("  2009-05-01")));
  employees.add(new Employee("Claudio Engle","Marketing","Executive",58000,f.parse  ("2008-09-03")));
  employees.add(new Employee("Buster misjenou","Accounts","Executive",52000,f.pars  e("2008-02-07")));

return employees;
}
}

You data is prepared now to place in a GXT Grid.

Go to the onModuleLoad method of GxtGridExample class. Remove all the auto generated code of this method.

First create a list of ColumnConfig and configure each column.

List<Columnconfig> configs = new ArrayList<Columnconfig>();

ColumnConfig column = new ColumnConfig();  
column.setId("name");  
column.setHeader("Employee Name");  
column.setWidth(200);  
configs.add(column);

column = new ColumnConfig("department", "Department", 150);  
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("designation", "Designation", 150);  
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("salary", "Slary", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
final NumberFormat number = NumberFormat.getFormat("0.00");  
GridCellRenderer<Employee> checkSalary = new GridCellRenderer<Employee>() {  
public String render(Employee model, String property, ColumnData config, int rowIndex,  
int colIndex, ListStore<Employee> employeeList, Grid<Employee> grid) {  
double val = (Double) model.get(property);  
String style = val < 70000 ? "red" : "green";  
return "<span style='color:" + style + "'>" + number.format(val) + "</span>";   
}  
};  
column.setRenderer(checkSalary);  
configs.add(column);

column = new ColumnConfig("joiningdate", "Joining Date", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());  
configs.add(column);

The setId method bind the column with a property of the model and the setHeader method set the column header. You can also set this property of the ColumnConfig by using the constructor. For the salary column here i define a custom GridCellRenderer<Employee> and set it with the setRenderer method which set the color of the salary value either green or red by checking its value. The other methods are self explanatory.

Create a ListStore of Employee type and add the employee list created in the TestData class.

ListStore<Employee> employeeList = new ListStore<Employee>();  
employeeList.add(TestData.getEmployees());

Now create a ColumnModel with the column configurations defined above and a Grid of Type Employee.

ColumnModel cm = new ColumnModel(configs);
Grid<Employee> grid = new Grid<Employee>(employeeList, cm); 
grid.setStyleAttribute("borderTop", "none"); 
grid.setAutoExpandColumn("name"); 
grid.setBorders(true); 
grid.setStripeRows(true);

The setAutoExpandColumn is used to defined which column will be expanded automatically when you hide a column. Other methods are self identifying.

You are just one step away from running the code. Create a ContentPanel and add the Grid to the panel.

ContentPanel cp = new ContentPanel();  
cp.setBodyBorder(false);  
cp.setHeading("Employee List");  
cp.setButtonAlign(HorizontalAlignment.CENTER);  
cp.setLayout(new FitLayout());  
cp.setSize(700, 300); 
cp.add(grid);  
RootPanel.get().add(cp);

Run the application and check the magic of GXT Grid. To view the live demo of this tutorial Click here.

Keep yourself updated with the latest GWT technologies (gwt , app engine and gxt)

2009-08-21T09:39:00.001-07:00

It’s been long since i have worked with GWT. I have been very busy with my scheduled tasks and can not afford to spend time on investing the features of this outstanding web technology. Today i have sit with it and found that everything is required to be updated. The SDK for GWT, Google App Engine and the Ext GWT Library (The world is running fast?huh). I have updated all these and here i write down the procedure for eclipse 3.4.

Download GWT version 1.7 from here and Google App Engine SDK 1.2.2 from here. Unzip the folders then open the Window->Preference window of eclipse.

Expand the Google menu from the left tree menu. Select the Web Toolkit menu and it will show you the previous version of GWT. Click on the Add Button and select the unzipped folder as the installation directory. Now check the latest SDK so that it will be the default SDK for the newly created projects.

Now select the App Engine menu and follow the steps stated above to add the latest version of the SDK.

You are now ready to use the latest version of GWT and Google App Engine SDK.

To use the latest version of Ext GWT library download this from here and follow my previous blog about how to use it in your GWT project.

How to use Ext GWT(GXT) in Eclipse 3.4 to create a rich internet application

2009-06-12T17:14:00.000-07:00

Ext GWT is a Java library for building rich internet applications with the Google Web Toolkit (GWT). If you have started working with GWT you will find the Ext GWT library very helpful for its high performance and customizable UI widgets. Here I describe you how to use this library in your GWT project.

First of all download Ext GWT 1.2.4 SDK, the latest stable version of this library and extract it.

Now Create a GWT project by following the steps I have described in my previous blog. Follow the steps to add gxt.jar to the project.

->Right click on project and select the properties menu..
->Select Java Build Path.
->Select Libraries tab.
->Click on Add External JARS and select gxt.jar. (You will find this jar file inside the folder where you have extracted the library previously. )

Now change the your_project_name.gwt.xml file. Add the following line in this file.

<inherits name='com.extjs.gxt.ui.GXT'/>

Here goes the tricky part. You will find a folder named resources in the extracted folder. This contains the css and images used in this library. Copy the css and images folder in the war folder of your application. Now add the following stylesheet to your host page.

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

And remember Ext GWT requires no doctype or the following doctype (quirksmode).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

That's all. You are now ready to use the Ext GWT library to enhance your application.

Getting started with GWT : Create your first GWT application in Eclipse 3.4

2009-06-06T04:07:00.000-07:00

To my mind GWT is going to take the lead among the web application development tools. So this is the high time to start learning about GWT. Here I describe you how to create your first GWT application in Eclipse 3.4 (Ganymede).

If you have not installed Google plugin and SDK for eclipse please go to this page and follow the instructions.

Create your project
Select File-> New-> Web Application project. Enter "FirstGwtApp" for your project name and "com.ratul.FirstGwtApp" for the package name.

Create GWT entry point

Now you have to create an Entry point class which is similar to the main method in Java.
Right click on the "com.ratul.FirstGwtApp.client" and select New-> Class. Enter "HelloWorld" as the name of the class.

This class must implement the interface "com.google.gwt.core.client.EntryPoint".
So click on the Add button and write "entrypoint" in the choose interface text field.
Select the matching item.

Here is the code of the HelloWorld class

package com.ratul.FirstGwtApp.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {

@Override
public void onModuleLoad() {
Label label = new Label("Enter your name:");
final TextBox textBox = new TextBox();
Button button = new Button("Click Here");
button.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
Window.alert("Hello "+ textBox.getText());
}
});

RootPanel.get().add(label);
RootPanel.get().add(textBox);
RootPanel.get().add(button);
}
}

Now change the FirstGwtApp.gwt.xml in package com.ratul.FirstGwtApp to set the HelloWorld class as the entry point class of your application.

Create a Start HTML page

In the war folder you will find a file, named FirstGwtApp.html. Between the body tag write the following code

<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabindex="-1" style="border: 0pt none ; position: absolute; width: 0pt; height: 0pt;"></iframe>

<h1>Welcome to my first GWT Application</h1>

Configure the web.xml

Go to war-> WEB-INF folder and there you will find a web.xml file. The Google Plug-in created this configuration file and placed a reference to a servlet.
Set the FirstGwtApp.html as the welcome file of your application.

You are only one step away from running your first GWT application.

Run GWT application

To run your application right-click the project and select Run As -> "Web application".

The result will be like this.

Enter your name in the text field and click on the button. Your name will be appeared in the alert window :).

Implementing Strategy pattern to support different fingerprint device login system

2009-05-26T07:07:00.002-07:00

In our ERP project one of the features of Human resource module is managing daily attendance of the employee using biometric authentication. Our client wants to use NAC 3000 as a fingerprint verification device.

The task is simple. The software of that device writes data in an access database and in a log file whenever an employee place finger on it. We just have to pull the data from the access file or the log file after certain interval. The problem is that as our ERP is generalized and can be customizable for any type of organization so we have to think about other devices that serve the same purpose.

We analyze that all the devices vary in one point and that is the format of the log file or the database file. That is only the file parsing algorithm varies from device to device. This motivates me to use Strategy pattern here as the Strategy pattern defines a family o algorithms, encapsulate each one and makes them interchangeable.

Class diagram

Details
LogInDevice is an abstract class which has an instance fileParser as the interface type not a concrete class implementation type. The LogInDevice objects will set the variable polymorphically to reference the specific file parser.

The FileParser is an interface which has four mehthods. The NAC300Parser, NAC2500Parser implements this interface. When we need to integrate a new device we just have to create a new class that will implement this interface. The code of parsing the logfile will be written in the parseFile() method.

Implementation of the doParsing() method of LogInDevice class

  
   public void doParsing()
   {
       this.fileParser.parseFile();
       userId = this.fileParser.getUserId();
       purpose = this.fileParser.getPurpose();
       time = this.fileParser.getTime();
      //Code block for saving the data to database goes here.
   }

In this part of the code we don't care about what kind of file parser it is.

Are you thinking of setting the fileParser instance variable? Let’s take a look at the NAC3000 class


   public class NAC3000 extends LogInDevice
   {
     public NAC3000()
     {
       this.fileParser = new NAC3000Parser();
     }
   }

The NAC3000 uses the NAC3000Parser to handle its file parsing. So when the doParsing() is called the responsibility for the parsing is delegated to the NAC3000Parser object and we got our desired data.

Change the FileParser dynamically

To change the parsing algorithm dynamically you just need a setter method in LogInDevice class


   public void setFileParser(FileParser fileParser)
   {
       this.fileParser = fileParser;
   }

We can call this method anytime we want to change the file parsing algorithm on the fly.

With this design we can integrate a new Fingerprint or any other authentication device very easily in our system and obviously without modifying the existing code.

How to call a method dynamically using Java Reflection

2009-05-09T17:25:00.000-07:00

In my previous post i have shown you how to create an instance dynamically using java reflection. Here i will show you how to call a method dynamically using reflection.

Let us start with a simple example. Assume that the method name is refreshForm and it has no argument. You can get the method using class.getMethod(methodName) method and then call the method using method.invoke(instance of the class) method.

 
String className = "com.commlink.cbs.appclient.gl.ChartsOfAccount"
String methodName = "refreshForm";

//get the Class
Class class = Class.forName(className);

// get the instance
Object obj = class.newInstance();

// get the method
Method method = class.getMethod(methodName );

//call the method
method.invoke(obj);

Things will be little complex if the method has some arguments. Suppose the refreshForm method takes two String values. To call this method using reflection first create an array of Class and then an array of Object. Use the class array in getMethod method and the Object array in invoke method in the following way.


String className = "com.commlink.cbs.appclient.gl.ChartsOfAccount"
String methodName = "refreshForm";
Class class = Class.forName(className );

Object obj = class.newInstance();

//create the class array 
Class[] types = new Class[] { String.class,String.class};

//get the method
Method method = class.getMethod(methodName ,types);

//create the object array
Object[] args = new Object[]{new String("Hello"), new String("World")};

//call the method
method.invoke(obj,args);

How to create an instance of a class at runtime using Java Reflection

2009-05-09T17:03:00.000-07:00

Java Reflection gives us the facility of creating an instance of any class at run time. In our ERP project it helps us a lot to solve some critical problems.

First create a class using the class name then use the class.newInstance method
to create an instance of that class.


javax.swing.JPanel newPanel = null;

String className= "com.commlinkinfotech.cbs.appclient.gl.ChartsOfAccount";

Class class = Class.forName(className);

//we know that the ChartsOfAccount is a JPanel class so cast this to JPanel
newPanel = (JPanel) class.newInstance();

But if the constructor of your class takes some parameters then what will you do?

You have to create an array of your argument class. Use this to create a constructor of your class using the class.getConstructor method. Now call the constructor.newInstance method with the value of the arguments and it gives you an instance of the class.


javax.swing.JPanel newPanel = null;

String className= "com.commlinkinfotech.cbs.appclient.gl.ChartsOfAccount";

//create an array of parameter classes
Class[] types = new Class[] { String.class };

Class class = Class.forName(className);
//create a constructor with the types array
Constructor constructor = class.getConstructor(types);

//create an array of argument values
Object[] args = new Object[] {new String("Hello")};

//now use ther args array to create an instance
newPanel = (JPanel) constructor .newInstance(args);

Understanding GroupLayout in Java

2009-04-17T03:06:00.000-07:00

GroupLayout is one of the most effective layout managers in Java to place the GUI elements in a very organized way. Here I show you how to use Group Layout to build your GUI.

GroupLayout works with the horizontal and vertical layouts separately. The layout is defined for each dimension independently and it uses two types of arrangements -- sequential and parallel, combined with hierarchical composition. Usually, components placed in parallel in one dimension are in a sequence in the other, so that they do not overlap.

Let’s start with a very simple example to understand this layout.

Suppose you have to put one JLabel and one JTextField component in a row within a container named jpTestGroupLayout

You have to put these comonents both in a Horizontal sequential group and in a Vertical sequential group. But how?

To add the components in a horizontal sequential group at first you need to create two parallel groups. Add the JLable and the JTextField in the parallel groups then add these groups sequentially in the Horizontal sequential group.

And to add the components in a Vertical sequential group, create one parallel group and add the components in the group. Then add this parallel group to your vertical sequential group.

Now let’s look at the code to create the layout described above.


//declare the two component
JLabel label = new javax.swing.JLabel();
label.setText("JLabel");
label.setBorder(null);
JTextField jtfValue = new javax.swing.JTextField();
jtfValue.setText("JTextField");

//create a GroupLayout object associate with the panel
GroupLayout grpLayout = new GroupLayout(jpTestGroupLayout); jpTestGroupLayout.setLayout(grpLayout);
grpLayout.setAutoCreateGaps(true);      // specify automatic gap insertion
grpLayout.setAutoCreateContainerGaps(true);

//create the Horizontal and Vertical and sequential group
GroupLayout.SequentialGroup horizontalSeqGrp = grpLayout.createSequentialGroup();
GroupLayout.SequentialGroup verticalSeqGrp = grpLayout.createSequentialGroup();

//create two parallel group for adding the components in the horizontal sequential group
GroupLayout.ParallelGroup hParallelGroup1 = grpLayout.createParallelGroup(GroupLayout.Alignment.LEADING);
GroupLayout.ParallelGroup hParallelGroup2 = grpLayout.createParallelGroup(GroupLayout.Alignment.LEADING);

//add the components
hParallelGroup1.addComponent(label);
hParallelGroup2.addComponent(textField);

//add two parallel groups sequentially in the horizontal sequential group
horizontalSeqGrp.addGroup(hParallelGroup1);
horizontalSeqGrp.addGroup(hParallelGroup2);

//create one parallel group for adding the components in the vertical sequential group
GroupLayout.ParallelGroup vparallelGroup1 = grpLayout.createParallelGroup(GroupLayout.Alignment.BASELINE);

//add the components
vparallelGroup1.addComponent(label);
vparallelGroup1.addComponent(textField);

//add this parallel group in the vertical sequential group
verticalSeqGrp.addGroup(vparallelGroup1);

//finally set the both sequential group to the grpLayout object
grpLayout.setHorizontalGroup(horizontalSeqGrp);
grpLayout.setVerticalGroup(verticalSeqGrp);

If you want to add another JLabel in the same row then what will you do?

It is very simple now. Just create another parallel group to add the new JLable in the Horizontal sequential group and to add this to the Vertical sequential group add this in the existing vertical parallel group.


JLabel label2 = new javax.swing.JLabel();
label2.setText("JLabel2");
label2.setBorder(null);
GroupLayout.ParallelGroup hParallelGroup3 = lout.createParallelGroup(GroupLayout.Alignment.LEADING);
hParallelGroup3.addComponent(label2);

//add the new parallel group to the horizontal sequential group
horizontalSeqGrp.addGroup(hParallelGroup3); 
vparallelGroup1.addComponent(labe2l);

Now I describe another scenario. Suppose you want to add the second JLable in the following way.

The code will be like this


//add the new component in the hParallelGroup1
hParallelGroup1.addComponent(label2);

//create a new parallel group to add the new component in the vertical Sequential group
GroupLayout.ParallelGroup vparallelGroup2 = grpLayout.createParallelGroup(GroupLayout.Alignment.BASELINE);

//add the component to the new group
vparallelGroup2.addComponent(label2);

//add the new parallel group to the vertical sequential group
verticalSeqGrp.addGroup(vparallelGroup2);

Try the above examples yourself and definitely you will find this layout very easy to manage. For more information visit this link.

Filter a JTable row with input in a text field

2009-02-12T20:36:00.000-08:00

In an enterprise application when there is huge amount data in a table
users feel comfortable if you provide them a option for filtering the
table. Here I show you an example of how to filter a JTable row with
input in a JTextField.

Declare a JTable and your own table model


private MyTableModel tableModel;
private javax.swing.JTable jtblSampleTable;

Now declare a table row sorter for that table model


private TableRowSorter sorter ;
//

Initialize all the above three declared variables


jtblSampleTable  = new javax.swing.JTable();
tableModel  = new MyTableModel();
sorter = new TableRowSorter(tableModel);
//

Bind the model with the table


jtblSampleTable.setModel(tableModel);

Set the sorter as the row sorter for the table


jtblSampleTable.setRowSorter(sorter);

Now declare a JTextField


jtfSearch = new javax.swing.JTextField();

Add a document listener for the search text field.


jtfSearch.getDocument().addDocumentListener(
   new DocumentListener()
   {
      public void changedUpdate(DocumentEvent e)
      {
          newFilter();
      }
      public void insertUpdate(DocumentEvent e)
      {
          newFilter();
      }
      public void removeUpdate(DocumentEvent e)
      {
         newFilter();
      }
   }
);

Here is the newFilter method


private void newFilter()
{
    RowFilter< MyTableModel  , Object> rf = null; 
    //declare a row filter for your table model
    Try
    {
        rf = RowFilter.regexFilter("^" + jtfSearch.getText(), 0);  
        //initialize with a regular expression
    }
    catch (java.util.regex.PatternSyntaxException e)
    {
        return;
    }
    sorter.setRowFilter(rf);
}

The above example is able to filter JTable for its first column.

Show video from YouTube in your own website

2009-02-02T01:04:00.000-08:00

To show a video from your website, first upload the video in YouTube.
After uploading the vidio add the following code in your website.


<object style="width: 360; height: 250; margin-top: auto; margin-bottom: auto; vertical-align: middle;">

<param name="movie" value="http://www.youtube.com/v/r-gDDUcaVqI&hl=en&fs=1> 
</param>

<param name="allowFullScreen" value="true"> </param>

<embed src="http://www.youtube.com/v/r-gDDUcaVqI&hl=en&fs=1 type="application/x-shockwave-flash" allowfullscreen="true" width="360" height="250">
</embed>

</object>

In the param tag the value attribute holds the url of your video.
To change the display screen size simply change the width and height attribute
of the embed tag.

This is very simplet just copy and paste the code in your site and test it..

Creating a colorful rounded cornered Div

2009-01-28T19:04:00.000-08:00

Rounded corner is one of the hottest topics in today’s web designing. Here you find a nice way of creating different colored rounded div. In my example, I have created one green and one yellow div.

The required css is


b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
h4,p{margin: 0 10px}

/*for yellow div*/
div#yellow_div{
margin: 0 5%;
background: #F7FC62;           
/*change color here to get a different color div */
}
b.rtop_yellow, b.rbottom_yellow{display:block;background: #FFF}
b.rtop_yellow b, b.rbottom_yellow b{display:block;height: 1px;
overflow: hidden; background: #F7FC62}                                      
/*change color here to get a different colored div */
b.rtop_yellow b.r4, b.rbottom_yellow b.r4{margin: 0 1px;
height: 2px}

/*for green div*/
div# green_div{
margin: 0 5%;
background: #8FFF63;                 
/*color changed  */
}
b.rtop_green, b.rbottom_green{display:block;background: #FFF}
b.rtop_green b, b.rbottom_green b{display:block;height: 1px;
overflow: hidden; background: #8FFF63}                                   
/*color changed */
b.rtop_green b.r4, b.rbottom_green b.r4{margin: 0 1px;
height: 2px}

Now you will find how to use this css to create two colorful div


<div id=" yellow_div " style="width:250px; ">
<b class="rtop_yellow"><b class="r1"></b><b class="r2"></b><b class="r3"></b>
<b class="r4"></b></b>
    place your content here<br>
   place your content here<br>
   place your content here<br>
<b class="rbottom_yellow"><b class="r4"></b><b class="r3"></b><b class="r2">
</b><b class="r1"></b></b>
</div>
<br>
<div id=" green_div " style="width:250px; ">
<b class="rtop_green"><b class="r1"></b><b class="r2"></b><b class="r3">
</b><b class="r4"></b></b>
   place your content here<br>
   place your content here<br>
   place your content here<br>
<b class="rbottom_green"><b class="r4"></b><b class="r3"></b><b class="r2">
</b><b class="r1"></b></b>
</div>

The result will be like this.

You can easily create you own color div just by changing the color in css I mentioned above
and use that name in div id and class attribute of b tag.

Showing your own custom dialog box in java

2008-09-22T20:16:00.000-07:00

While developing our ERP application we need to show a list of
all accounts in a dialog box and upon selecting an account the
base form will be updated. For this we need our custom dialog
box to show the list of accounts. Here i give an example of how
can you show your own custom dialog box and get desired value on
closing the dialog.

At first i like to describe the custom dialog class.



import javax.swing.JDialog;
import javax.swing.JFrame;

/**
* @author  ratul
*/
public class CustomDialog extends JDialog {

   private javax.swing.JLabel jLabel1;
   private javax.swing.JButton jbtOK;
   private javax.swing.JTextField jtfInput;
   private String inputString = "";

   public CustomDialog(JFrame frame, boolean modal) {
       super(frame, modal);
       initComponents();
       pack();
       setLocationRelativeTo(frame);
       setVisible(true);
   }

   private void initComponents() {

       jbtOK = new javax.swing.JButton();
       jtfInput = new javax.swing.JTextField();
       jLabel1 = new javax.swing.JLabel();

       setLayout(new org.netbeans.lib.awtextra.AbsoluteLayout());

       jbtOK.setText("OK");
       jbtOK.addActionListener(new java.awt.event.ActionListener() {
           public void actionPerformed(java.awt.event.ActionEvent evt) {
               jbtOKActionPerformed(evt);
           }
       });
       add(jbtOK, new org.netbeans.lib.awtextra.AbsoluteConstraints(160, 190,
           -1,-1));

       jtfInput.addKeyListener(new java.awt.event.KeyAdapter() {
           public void keyReleased(java.awt.event.KeyEvent evt) {
               jtfInputKeyReleased(evt);
           }
       });
       add(jtfInput, new org.netbeans.lib.awtextra.AbsoluteConstraints(180, 120,
           160, 20));

       jLabel1.setText("Input some text here:");
       add(jLabel1, new org.netbeans.lib.awtextra.AbsoluteConstraints(70, 120,
           -1, -1));
   }

   private void jbtOKActionPerformed(java.awt.event.ActionEvent evt) 
   {
      this.dispose();
   }

   private void jtfInputKeyReleased(java.awt.event.KeyEvent evt) 
   {
      inputString += evt.getKeyChar();
   }

   public String getInputText()
   {
       return inputString;
   }

}

The CustomDialog class extends the JDialog class. The first
parameter of the constructor is the parent frame, second parameter
determines whether the parent frame is disabled or enabled when
the dialog box will be shown.

In the key released action of the text field i populate the inputString.
The dialog box can be closed either by clicking the 'OK' button or close
button of the top right corner. You can get the value of the input
field from the parent from by calling the public String getInputText() method.

Now i describe how to open your custom dialog box:
In the action handler of a button in the parent frame write the following code


  
   CustomDialog cDialog = new CustomDialog(this, true);
   this.jtfShowText.setText(cDialog.getInputText());

This will show the dialog box. Now Input some text on the text field
and close the dialog box. The input text will be shown in the text
field of the parent frame.

NB: use null or absolute layout to design the custom dialog box.

Introduction to Java Persistence Query Language (JPQL)

2008-08-14T02:23:00.000-07:00

The Java Persistence Query Language(JPQL) is one of the basic area of Java Persistence which allows you to write portable queries that work regardless of the underlying data store. It uses a SQL-like syntax to select objects or values based on entity abstract schema types and relationships among them. An entity is a lightweight persistence domain object. Typically an entity represents a table in a relational database, and each entity instance corresponds to a row in that table.

Here i describes some syntax of the language so that you can build
your own query in JPQL easily.

Lets start from a basic select query
SELECT p FROM Player p
This statement retrieves all players from Player entity.

Now write a query with WHERE clause and input parameter
SELECT DISTINCT p FROM Player p WHERE p.position = ?1
Retrieves players with the position specified. The DISTINCT keyword eliminates duplicate values. ?1 element denotes the input parameter of the query. Here position a persistent field of the Player Entity.

Select statement with named parameters
SELECT DISTINCT p FROM Player p WHERE p.position = :position AND p.name = :name
The WHERE clause compares the values of these fields with the
named parameters of the query, set using the Query.setNamedParameter
method. The query language denotes a named input parameter using
colon (:) followed by an identifier. The first input parameter is
:position, the second is :name.

At the time of writing Entity we relates one entity with another. Lets
talk about queries that navigate to related entities. One thing to
remember"Expressions can navigate to relationship fields (related
entities), but not to persistent fields"
SELECT DISTINCT p FROM Player p, IN(p.teams) t
Retrieves All players who belong to a team. The IN keyword signifies
that teams is a collection of the Player entity. The p.teams
expression navigates from a Player to its related Team. The period
in the p.teams expression is the navigation operator.

JOIN statement for the same query
SELECT DISTINCT p FROM Player p JOIN p.teams t

Another statement that serves the same purpose
SELECT DISTINCT p FROM Player p WHERE p.team IS NOT EMPTY

Navigating to single valued relationship field
SELECT t FROM Team t JOIN t.league l WHERE l.sport = 'soccer' OR l.sport ='football'

Navigating relationship field with input parameter
SELECT DISTINCT p FROM Player p, IN (p.teams) t WHERE t.city = :city

Some times you need to traverse multiple relationships. Following query navigate over two relationships.
SELECT DISTINCT p FROM Player p, IN (p.teams) t WHERE t.league = :league

To reach to a persistent field of league you can navigate by following way
SELECT DISTINCT p FROM Player p, IN (p.teams) t WHERE t.league.sport = :sport
Here sport is a persistent field of League. And you have to navigate from Player to League via Team.

After WHERE clause you have to use some conditional expression.
Lets talk about conditional expressions of JPQL
LIKE:
SELECT p FROM Player p WHERE p.name LIKE 'Mich%'

IS NULL:
SELECT t FROM Team t WHERE t.league IS NULL
Retrieves All teams not associated with a league.

IS EMPTY:
SELECT p FROM Player p WHERE p.teams IS EMPTY
Retrieves all players not belong to a team

BETWEEN:
SELECT DISTINCT p FROM Player p WHERE p.salary BETWEEN :lowerSalary AND :higherSalary

[NOT] MEMBER [OF]:(Determines whether a value is a member of a collection. The value and the collection members must have the same type):
SELECT o FROM Order o WHERE :lineItem MEMBER OF o.lineItems

[NOT] EXISTS:(Return true only if the result of the subquery consists of one or more values and is false otherwise):
SELECT DISTINCT emp FROM Employee emp WHERE EXISTS (SELECT spouseEmp FROM Employee spouseEmp WHERE spouseEmp = emp.spouse)

ALL and ANY:
The ALL expression is used with a sub-query, and is true if all the
values returned by the sub-query are true, or if the sub-query is empty.

The ANY expression is used with a sub-query, and is true if some of
the values returned by the sub-query are true. An ANY expression
is false if the sub-query result is empty, or if all the values returned
are false. The SOME keyword is synonymous with ANY.
The ALL and ANY expressions are used with the =, <, <=, >, >=, <>
comparison operators.
SELECT emp FROM Employee emp WHERE emp.salary > ALL (
SELECT m.salary FROM Manager m WHERE m.department = emp.department)

The following two queries tell you how to write UPDATE and DELETE
statement in JPQL
UPDATE Player p SET p.status = 'inactive' WHERE p.lastPlayed < :inactiveThr
DELETE FROM Player p WHERE p.status = 'inactive' AND p.teams IS EMPTY

Lets talk about aggregate functions of JPQL, Some frequently used aggregate functions are AVG, COUNT, MAX, MIN, SUM.
SELECT AVG(o.quantity) FROM Order o

SELECT SUM(l.price) FROM Order o JOIN o.lineItems l JOIN o.customer c WHERE c.lastname = 'Coss' AND c.firstname = 'Roxane'

In most cases after aggregate functions you have to use GROUP_BY or HAVING clause. but how to use them in JPQL? Here is the answer
SELECT c.country, COUNT(c) FROM Customer c GROUP BY c.country

SELECT c.status, AVG(o.totalPrice) FROM Order o JOIN o.customer c GROUP BY c.status HAVING c.status IN (1, 2, 3)

If you want to fetch data by your defined order then use ORDER_BY in the query
SELECT o FROM Customer c JOIN c.orders o JOIN c.address a WHERE a.state = 'CA' ORDER BY o.quantity, o.totalcost

Constructor expressions: It is an advance feature of JPQL. It allows you to return Java instances that store a query result element instead of an Object[]. The following query creates a CustomerDetail instance per Customer matching the WHERE clause. A CustomerDetail stores the customer name and customer’s country name. So the query returns a List of CustomerDetail instances.
SELECT NEW com.xyz.CustomerDetail(c.name, c.country.name) FROM customer c WHERE c.lastname = 'Coss' AND c.firstname = 'Roxane'

For more information about JPQL click here

How to create a Open flash chart in Rails Application

2008-07-03T05:08:00.000-07:00

Open flash chart is a free service, by using it you can create different types of charts easily.

To create a open flash chart in Rails application at first you need
the open flash chart plugin. To get this plugin go to your project folder and run:
ruby script/plugin install http://svn.pullmonkey.com/plugins/trunk/open_flash_chart/

After this Move the open_flash_chart.swf file into your RAILS_ROOT/public directory

Now create a controller and add the following code


def index
  @graph_data = open_flash_chart_object(450,220, 
                '/flash_chart/show_flash_chart',false,'/',true)
end


def show_flash_chart
  begin
    chart = draw_chart
    render :text => chart
    rescue Exception => error
    logger.debug "error>>" + error.inspect
  end
end


def draw_chart

  chart_data = get_chart_data
 
  #get data to display in chart
  x_lebels = chart_data[:x_level]
  
  # get x labels in a array
  data = chart_data[:value]
  
  # get y axis value 
  line_data_hashes = [{:color => "#e11456", 
                    :legend => "Cost", :values => data}]
  g = Graph.new
  
  #draw line
  if line_data_hashes
    line_data_hashes.each do |line|
      g.line(2, line[:color], line[:legend], 10)
      g.set_data(line[:values])
    end
  end
  
  g.set_tool_tip('Year: #x_label#
  Cost: #val#')
  g.set_title("Sample Flash Chart",
              '{font-size: 14px; color: #784016}')
  
  #set minimum y axis value
  g.set_y_min(0) 
  
  #set maximum y axis value
  g.set_y_max(100)
  
  #set number of steps in y axis
  g.set_y_label_steps(5) 
  
  # set y axis legend
  g.set_y_legend("Cost", 12, "#b9d800") 
  
  # set x axix value
  g.set_x_labels(x_lebels)
  
  #set x axis label's style
  g.set_x_label_style(10, '#000000', 2) 
  
  #set x axis legend
  g.set_x_legend("Year", 12, "#b9d800")  

  return g.render

end

In index.rhtml put the following code


  <%= @graph_data %>

Now run it and you will see the magic

How to run cruisecontrol.rb for continuous integration of Ruby on Rails application

2008-06-26T02:40:00.000-07:00

CruiseControl.rb is a continuous integration tool for Ruby on Rails application. Its basic purpose is to alert members of a software project when one of them checks something into source control that breaks the build.

To run cruisecontrol.rb first download it from http://cruisecontrolrb.thoughtworks.com/
Unpack the downloaded file.
Then go to the folder from command prompt where it is unpacked
and run: cruise add project_name --url (url of your subversion trunk)

This will create a directory under [cruise_data]/project/project_name and then checks out your project from the subversion URL you provided to [cruise_data]/projects/project_name/work/

Now run: cruise start
This will start your web browser on port 3333
Browse http://localhost:3333 and press the “Build Now” button on the Dashboard to build your project.

After this every time any one checks something into source control cruise control automatically
builds your project and report about the Build Changeset , Test failures and errors, etc.

Sending mail asynchronously by using Amazon SQS and ActiveMessaging

2008-06-06T22:40:00.000-07:00

From our application we send mail to our users in many cases. Sending mail synchronously slows down the whole process. So to improve our application’s performance we feel the need of sending mail asynchronously. And I have done it using the Amazon SQS and ActiveMessaging.

What is Amazon SQS:

Amazon Simple Queue Service (Amazon SQS) offers a reliable, highly scalable, hosted queue for storing messages as they travel between computers.
Developers can push message to the queue any time and get the message when required. They can create an unlimited number of Amazon SQS queues, each of which can send and receive an unlimited number of messages. The message body can contain up to 8 KB of text in any format. A message is "locked" while a computer is processing it Messages can be retained in queues for up to 4 days

What is ActiveMessaging:

ActiveMessaging is a Rails plug-in framework, which simplifies messaging integration. It is a generic framework to ease using messaging, but is not tied to any particular messaging system - in fact, it now has support for Stomp, JMS (using Stomp Connect or direct on JRuby), WebSphere MQ, Amazon Simple Queue Service (SQS), and the all Ruby ReliableMessaging. With ActiveMessaging and Rails now you can loosely integrate with systems as disparate as mainframes sending MQ messages or J2EE webapps, offload processing long-running tasks, or create applications with event or message-driven architectures.

To integrate ActiveMessagin with your apllication
you have to install the following gem and pugin

gem install daemons
ruby script/plugin installhttp://activemessaging.googlecode.com/svn/trunk/plugins/activemessaging

First create a process using the following command
script/generate processor message
Running this generate for the first time outputs the following:

create app/processors
create app/processors/message_processor.rb
create config/messaging.rb
create config/broker.yml
create app/processors/application.rb
create script/poller

Now configure the broker.yml as which broker you are using.
I have used Amazon SQS as a broker. Here is my configure file

development:
adapter: asqs
access_key_id: xxxxxxxxxxxxxxxxxxxxxxxx
secret_access_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

test:
adapter: asqs
access_key_id: xxxxxxxxxxxxxxxxxxxxxxxx
secret_access_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

production:
adapter: asqs
access_key_id: xxxxxxxxxxxxxxxxxxxxxxxx
secret_access_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Define your own queue by changing the config/messaging.rb file

s.destination :queue_name, ' queue_name

Add the following to the controller from where you push message to the queue

require 'activemessaging/processor'
include ActiveMessaging::MessageSender
publishes_to : queue_name

def method_from_where_push_message_to_queue
publish : scrumpadmailer, “put the required value to process the message"
end

Add the following to the app/processors/message_processor.rb

subscribes_to : queue_name
def on_message(message)
begin
send mail by processing the message
rescue
publish : scrumpadmailer, “put the received message"
end
end

Now run the poller which monitors the queue continuously and upon receiving a message it calls the on_message method of app/processors/message_processor.rb

Go to your application directory and run the following command
ruby script/poller run

To run the poller as a background process in linux run the following command
nohup ruby script/poller run >> mail_logger.txt &

Everything is done. Now when a message is pushed in the queue the on_message method
Is triggered and mail will be sent

Automatic Deployment of Rails Application by Capistrano

2008-06-05T23:21:00.000-07:00

Previously we deployed our application manually in our Linux box. This was taking a lot of time and after every deploy we were facing some serious issues. Automatic deployment by Capistrano has made deployment life easy. Here i have shared my experience about deployment by Capistrano.

Requirements:
Install Capistrano in local machine by : gem install capistrano
Install subversion command line client in local machine
Install subversion in Linux box. I have done it by a rpm

Assumptions:

You are deploying to a single server, at least initially.
Your username is the same for both your subversion repository and your deployment machine.
Your subversion repository is accessible from both your local host, and the host that you will be deploying to
You have configured a public key to use for SSH access to your target host

Run Capistrano:

From command prompt go to your application directory then run .capify.This will create a capfile in the application root directory and deploy.rb in config folder.

Configure deploy.rb:

Now modify the deploy.rb file to deploy your application. Here is my deploy.rb

require 'mongrel_cluster/recipes‘

set :application, “your application name"
set :repository, “url of your repository"
set :scm_username, “name"
set :scm_password, “password"
set :rails_env, "production --trace"
set :deploy_to, "/var/www/rails/#{application}"

#ssh configuration
set :user, ‘user_name'
ssh_options[:port] = 22
ssh_options[:username] = ‘user_name‘
ssh_options[:host_key] = 'ssh-dss'

#set app, web, db role
role :app, "www.scrumpad.com"
role :web, "www.scrumpad.com"
role :db, "www.scrumpad.com", :primary => true

#configure for mongrel cluster
set :mongrel_servers, 3
set :mongrel_port, 6010
set :mongrel_environment, 'production'
set :mongrel_conf,"#{deploy_to}/current/config/mongrel_cluster.yml"

Now the time for deploying your application:

Go to your project directory and run cap deploy:setup Capistrano will now log into your server and try to set up a simple directory hierarchy. The basic layout is:
#{deploy_to}/
#{deploy_to}/releases
#{deploy_to}/shared
#{deploy_to}/shared/log
#{deploy_to}/shared/system
#{deploy_to}/shared/pids

Every time you deploy your application, a new directory is created under the releases directory, and then a symlink is created at “#{deploy_to}/current that points at the newr elease. This current symlink should be considered the root directory of the currently active release.

run cap -q deploy:check to check dependencies.

Cold deploy: The first time your application is not running. Things are “cold”. For this case, run cap deploy:cold

Subsequent Deploys: After the first deploy every time you want to deploy just
run cap deploy

Roll back your application to the previous release cap deploy:rollback

Problem I faced:
After deploying my application on a Linux box, I faced some permission related problem to run the application. To solve this I had to put the required file in a directory and modify my deploy.rb in the following way:

after "deploy:symlink", :copy_permitted_files
task :copy_permitted_files, :roles => :app do
run "cp -rpf /var/www/rails/Permitted/public/* /var/www/rails/# application}/current/public/"
run "cp -pf /var/www/rails/Permitted/database.yml /var/www/rails/#{application}/current/config/"
run "cp -rpf /var/www/rails/Permitted/log/* /var/www/rails/#{application}/current/log/"
end