Saturday, October 8, 2011

Using Flexigrid in Grails Web Applications

The Grails Framework made Web applications development easy and fast! We will just create a Domain class and let Grails generate all the Controllers and Views for us. Then later on, we will modify this Controller and View so we can use Flexigrid for jQuery.

Update: I added a Grails Service class to process the POST request of Flexigrid for searching, sorting and pagination of items to be render in Flexigrid as enhancement! I committed it already and you should see my Project-In-Pieces to check-out the actual code.


Before we begin, you should have the ff. software in your development machine:

Creating our BlueMine Grails Web Application

1. Open NetBeans IDE and create a new Grails application (File -> New Project).
2. Click next (Groovy will be activated then if this is your first time creating a Grails project).
3. Enter BlueMine in Project Name.
4. Configure Grails (add the path where you extract Grails).
5. Click Finish.

Create The Domain Class

The domain classes in Grails is our model. In Hibernate this is what they called persistent entities. In Grails these entity are saved into the database using GORM (Grails Object Relational Mapping). It provides Expando methods such for saving, deleting and fetching data.

In this example, we will allow users to create a Ticket. Users can input title, description, status, etc. So create our Ticket domain class.

1. Right click on the project and select New -> Grails Domain Class.

2. Enter Ticket in the Artifact Name field and rondroid.todo.domain in the Package field.
3. Click finish and you should see the ff.

4. Modify Ticket.groovy and enter the ff. code.

Very short code isn't it? Next we will let Grails to generate the controller and the view necessary for our application and we'll have then our application complete! We will modify this view and controller later to integrate Flexigrid.

Generate-All Controllers and Views

1. Right click Ticket.groovy and select Generate All.

After the generation process, your project layout should be similar to this:

Now go ahead and run the applications! The Grails default layout:

And that's our basic CRUD Web Applications. Next is the integration of Flexigrid.

What Is Flexigrid?

Modifying The View

Now, find the list.gsp on Project pane and open it. Delete the code from line 20 up to line 58 as shown in image below.

Now at line 20, just enter the ff. code.

The url: '<g:createLink action="getTicketList"'/> tells Flexigrid the url of the server side code to provide the data to be displayed. We will the create an action called getTicketList in our TicketController later. The colModel tells the mapping to the fields of our domain class Ticket. The name of each display should match the field name of our domain model.

Now, let's also add the ff. line of code to reference Flexigrid CSS and JavaScript code.

Modifying The Controller

The ff. format of JSON is required so our data can be displayed on the Flexigrid:

total: (no of rec)
page : (page no)
rows : [{cell: [ (col1 value) , (col2 value) ,.. ] }, {cell: [ (col1 value) , (col2 value) ,.. ] }]

We will now add a new action to our TicketController to render our Ticket domain class as JSON complying the specified fomat above.

Find and open the TicketController.groovy and just add this code:

And that's it. Now extract the Flexigrid distributions to this Grails project web-app directory and run the applications! =)

The above image is the screenshot of this Grails application running on my Windows 7 IE9.

Thank You!

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.