GXT grids - Binding with beans

I had to use many grids in my first GXT project. I got to know that I have to use GXT right after I sent my first release of the front end to the client. I had never used GXT, the deadline was tight. I was puzzled, should I spend time in understanding the library or just start coding with the help of google. I started coding the simpler screens, I was able to show some progress to the client in next couple of days. I turned to the grids after writing all the screens in which there were no grids. I opened their demo and tried to understand the code – I was failed. I started experimenting with the examples and tried to copy it with my classes – I got no success. I searched the internet and I found one description copied to many places by different authors. The description was not enough for me. I read it again and again and tried to implement it in my application. After many trial and errors I was successful. Following is a detailed description of problem and solution.

I had prewritten data access objects which I had to use for grid data binding. I found a good tutorial for this at gxt site at following link

http://www.extjs.com/helpcenter/index.jsp?topic=/com.extjs.gxt.help/html/tutorials/beanmodel.html

After I read the above I did following steps

1) Implement BeanModelTag in all beans. Following is an example of TimeZone bean which contains Timezone record from database.

public class TimeZone extends LightEntity implements Serializable, BeanModelTag
{
private int id;

private String name;
private String defaultValue;

public int getId() {
return id;
}

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

public String getName() {
return name;
}

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

public String getDefaultValue() {
return defaultValue;
}

public void setDefaultValue(String defaultValue) {
this.defaultValue = defaultValue;
}
}

Note that it is serializable and it is marked as BeanModel by implementing BeanModelTag interface.

Next step is to fetch data from the database. My service implementation returns an ArrayList of above bean and it is as follows.


public class TimeZoneServiceImpl extends PersistentRemoteService implements
TimeZoneService {

public TimeZoneServiceImpl() {
super(HibernateUtil.getBeanManager());
}

@Override
public List getAllTimeZones() throws Exception {
Session currentSession = HibernateUtil.getSessionFactory(false)
.getCurrentSession();

List timeZones = DataCubeUtil.getTimeZoneList(currentSession);

return timeZones;
}

}

You can call this service as a simple RPC call or you can use gxt RPCProxy which handles callback on its own. Using RPCProxy is easy and straight forward it will bind the grid columns with your beans properties using ColumnModel.

final TimeZoneServiceAsync timeZoneService = GWT
.create(DeviceService.class);
RpcProxy proxy = new RpcProxy() {
@Override
public void load(Object loadConfig, AsyncCallback callback) {

timeZoneService.getAllTimeZones(callback);

}
};

Abovel lines make an RPC call and fetch data from TimeZoneService. But we have not loaded this data yet and we have not provide any grid-data binding configuration. To load data into a store we need a loader, we can use ListLoader or PagingLoader etc. I used a ListLoader in this manner

BeanModelReader reader = new BeanModelReader();
ListLoader loader = new BaseListLoader(proxy, reader);

Here reader is used to handle creating new model instances from the beans being returned from the data proxy. So at the stage when you introduce reader into your code, your actual bean is gone and at runtime the gxt libaray creates its own instance of TimeZone class.

Now I have to create a store which can store the loaded data.

ListStore store = new ListStore(loader);

So far what we have done is that we created a bean, created a proxy which brings a list of beans (filled with data), we created a reader which can read the returned beans, then we created a store and a loader, loader loads data into the store. But how it will bind the loaded data into the grid. This is done by ColumnModel.

ColumnConfig columnConfig=getColumnConfig();
ColumnModel cm = new ColumnModel(configs);

Following function creates binding by setting column id same as bean's properties. Here I would like to mention that while binding the grid column to bean's property it follows java's coding convention. Like the id of column name is "name" (column.setId("name"). While creating the binding at runtime that library find the getter method by concatenating get infront of id, in this example it would be getName(). If this getter is not found gxt will not raise any exception. It simply ignores this binding. For example if the name of getter was get_name() then your binding will not be done as expected. So be careful while creating these bindings.

private ColumnConfig getColumnConfig(){
ArrayList config=new ArrayList();

ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Name");
column.setAlignment(HorizontalAlignment.CENTER);
column.setWidth(84);
config.add(column);

ColumnConfig column = new ColumnConfig();
column.setId("defaultValue");
column.setHeader("Default Value");
column.setAlignment(HorizontalAlignment.CENTER);
column.setWidth(84);
config.add(column);


}

After you make the binding your grid is ready to go.

To me gxt grids with their store API is robust solution. You can create grids with checkboxes, with multiple headers, with custome styles for each column data etc. They saved me a lot of time and efforts.