There is a large debate among GWT developpers on whether to use native GWT for applications and do everything from scratch or to make use of the large set of ready to use components and widgets provided by GXT. Personally, I prefer GWT as I do not like to be tied to any particular way of styling components. Based on my experience, GXT provide a great set of widgets that proved to be extremely useful; however, customizing them can be very time consuming. GXT components’ performance is inferior to native GWT components. That being said, we can not deny that GXT can help developpers save time on developping some components which are considered standard in web UIs. Building a tree grid is an example. A tree grid can be useful to represent data in a hierarchical fashion. In this tutorial, we are going to build a treegrid using GXT.
Requirements:
– Eclipse with GWT plugin
– GXT library (Free for personal use or for open source projects)
The first thing we need to do is to create a google web application project. Go to File -> New -> Other -> Google and click on Web application project. The project has the following structure:
Once the project is created, we need to add GXT to referenced libraries and also to GWT module configuration file. Right click on the project, and then go to build path -> configure build path. Click on “Add External JARs” and add the Jar of GXT.
The GWT module confiugration describes the libraries that will be used in the project, the entry point( which can be translated as Welcome page), and where the translatable code lies.
Now, we are going to create our widget using the following components:
– TreeGrid_disqus: the actual treegrid widget
– ColumnConfig: object used for configuring columns
– TreeStore: object that serves as data model for the widget
– PropertyAccess: interface that links the object data to the data model. The methods need to have the same name as the object T properties.
We are going to create a widget called MyTreeGrid that represents the data of an object named “Concept”.
We can use the same object to hold data for the second level of the hierarchy, but for clarity sake, we are going to use an object that extends “Concept”.
Next, we need to create our PropertyAccess interface that will serve as a glue between the object and the view:
Note: methods need to have the same name as object properties.
Finally, we can create our widget:
Result:
We have an out of the box tree grid that we can use as needed. It can be customized with editors for each cell if needed.