Recently, someone asked a very good question on the Grails mailing lists about GrailsUI. How can someone add a button within each tab in a tabView that switches to the next tab? Well, there is nothing within the GrailsUI API that allows such custom behavior, so it’s not like you can just add addButtonToEachTabThatNavigatesToTheNextButton=”true” to the tabView attributes ;).

But there definitely is a way to access the YUI TabView component that the GrailsUI tabView tag creates. And if you can access this component and you refer to the YUI API for TabView, it turns out to be pretty easy to hook up this functionality.

For this example, lets create a simple tabbed pane with tabView first, then we’ll put buttons in each tab that will activate the next tab within the pane.

This produces a plain old tab view:

We want to put a button within each tab that will switch to the next tab, so let’s add the buttons with unique ids:

Now each tab has a button that we want to activate the next tab, but it does nothing. Note the value of each button is the index of the tab it should activate.

Nothing special yet… but now we get to the component accessibility portion of the tutorial.

What we need to do now is add event listeners to the buttons we created that will select specific tabs on the YUI TabView object that GrailsUI created for us. So after our declaration, we need to get down-and-dirty with some JavaScript. This can go anywhere in the page within script tags, because I’m wrapping it in the YUI onDOMReady function (see here for more info).

This little script is looping through the button ids and attaching an even listener to each. On click, the code within this listener will be evaluated. The important line is GRAILSUI.myTabView.set(’activeIndex’, e.target.value);, because this is where we access the YUI TabView directly. When this line is executed within the listener, the tabView active index it set by the value of the button.

That’s it. Pretty simple, really. Yes, you do have to get you hands a little dirty with some JavaScript, but if you are a UI developer nowadays, JavaScript is a pretty sharp tool in your toolbox. So get used to it ;).

One of the coolest features of the GrailsUI dataTable is its ability to turn on row expansion. In order to have enough data to do this, we need to know a URL for the dataTable to load on row click. We also need to turn the rowExpansion feature on in the tag. Let’s continue using the example I set up in my last post about using the GrailsUI dataTable tag. We’ll expand on it and I’ll link the new source code at the bottom of this post.

First off, turning on rowExpansion in the tag is easy enough.

The real work is in setting up and passing the dataUrl in the controller action that serves the dataTable:

The dataTable will only enable row expansion if it finds a ‘dataUrl’ field in the JSON data that populates it. Our controller is now creating a URL that will be called by the dataTable on row click to populate the new expanded element.

Only problem is that we don’t have a bookDetail action yet. We want to add a bookDetail action that will serve up the HTML to display in the row expansion. So let’s take our ’show’ page and break out a template to show the book detail.

And now we can render the book to this template from our bookDetail controller action:

Add a little CSS to change the row expansion background and text colors in list.gsp:

And we have dataTable with a rowExpansion that calls a controller method that renders detailed info in a template. Click on any row, and it will expand to show whatever is rendered in the bookDetail action. Click the row again to hide the expansion. Any sorting or pagination will force the expansion to close.

Here is the row expansion demo source code. Just unzip it, then run:

The GUI dataTable is the most complicated tag to set up, because there is a lot of data configuration required. You have to correctly set up the column definitions in the tag, and you have to set up the controller to serve up the proper data.

Let’s start from scratch with the basic book / author demo.

We want a to create a dataTable tag that will display all the Books I loaded up in Bootstrap.groovy. First off, since we know we’ll be using a dataTable GUI tag in our page, we need to declare this to the resources tag in the page head element. The resources tag will include all the YUI CSS and JavaScript files it knows it will need to build a dataTable.

Now for the dataTable tag. We’ll set up something basic first.

So our dataTable is now expecting at least five fields for each row of data it receives: id, name, isbn, author, and publishDate. We need to set up a controller action that will serve this data in JSON format for us. In the dataTable tag, I’ve already decided the action will be called ‘dataTableJSON’, so let’s code it.

The dataTable will be calling this method to populate itself with data, so the params will be the dataTable’s filtering information, like how to sort, where to start, etc. The GUI dataTable knows only to send params that can be understood by the Grails list domain class function, so we can just send the params directly into Book.list(params).

The totalRecords must be the total count of records that might be displayed in the table, not the total count of records that is being passed back by the action.

In the data map above, the ‘results’ key is where the dataTable will look by default for its data. This can be changed in the dataTable tag. For example, if you added resultsList=”myResults” in the dataTable tag, and changed the controller action to return myResults: list instead of results: list, things would work fine.

At this point, we should have something that looks very much like this:

Not bad, but that date looks nasty because it is handled as a String (there is no type formatting in the dataTable yet). And I would really rather see the Author name rather than id. Also, we don’t really want to see the Book id in the table either. So we’re going to have to dig into our controller and take a firmer grip on how the JSON is being created from our domain class.

At this point, we are in total control of the JSON being produced. Grails isn’t converting our domain objects into JSON anymore. We added a custom date format, and we drilled down into the Author to get a name. We also omitted the id field, so we’ll have to go into our tag and omit the id field in the column definitions. If the id field was left in the tag’s columnDefs, there would be an empty column in the table. While we are at it, let’s make all the columns sortable, resizeable, and draggable.

Notice that the id column definition is removed, sortable and resizeable were added to each column def, draggableColumns is on, and we added a sortedBy attribute.

Now our table looks like this:

But there is no mention anywhere of how many total records there are! Sure, you can see how many pages, how many rows per page, and do the math, but who wants to do that? So now lets say we want to display 12 rows per page, and show the total amount of records. Well, this doesn’t have anything to do with our data, so the controller action that provides the data will be fine as it is. But we do need to specify some more information to the tag on how to render the paginator.

So we’ve added rowsPerPage, and a paginatorConfig. The rowsPerPage is really a paginatorConfig value, but for the convenience of not having to define the paginatorConfig only for setting rowsPerPage, it was opened up as a main attribute. All the paginatorConfig values are passed through to the dataTable’s YUI Paginator object upon creation. More information on Paginator templates can be found on the YUI Paginator page.

Now we should have a 12-row table with total records displayed:

And there you go. Sortable, resizeable, draggable columns, with a total record count and customized data formatting. If you want to have a hands-on look, here is the source code. Just unzip it, then run:

Hibernate is used to map java objects to a relational database. Ideally, you would like your java object model to be as object-oriented as possible. It is also nice to be able to use features like java 5 enums while coding the object model. In this tutorial, I’ll share with you how I ended up mapping a simple object model using java 5 enums into Hibernate.

A Simple Example

I have a Beer object that corresponds directly to a BEER table in a database. The Beer object can wither be an “Ale” or a “Lager”, and there may be more types in the future. So the database schema looks like this:

+--------------------+
| BEER               |
+--------------------+           +----------------+
| NUMBER  | ID       |           | BEER_TYPE      |
| VARCHAR | BRAND    |           +----------------+
| NUMBER  | TYPE     | FK------- | NUMBER  | ID   |
| NUMBER  | VOLUME   |           | VARCHAR | NAME |
+--------------------+           +----------------+

It is pretty straightforward how to create a java class to represent this data. Ideally, I would like to use a java 5 enum object to keep track of the beer type, so I use it within my data object to specify type:

public class Beer {
    private BeerType type;
    private String brand;
    private double volume;

    public BeerType getType() {
        return type;
    }

    public void setType(BeerType type) {
        this.type = type;
    }

    public String getBrand() {
        return brand;
    }

    public void setBrand(String brand) {
        this.brand = brand;
    }

    public double getVolume() {
        return volume;
    }

    public void setVolume(double volume) {
        this.volume = volume;
    }
}

The BeerType enum will simply specify the type of beer for each Beer object. This enum is going to map directly to the BEER_TYPE table. So I’ve given each beer type its own id through the private internal enum constructor. There is an accessor method for hibernate to retrieve the id when it needs to do the mapping.

One of the first things I found when I started searching the internet for ways to map Java 5 enums to a database using Hibernate was this article on the Hibernate page. It shows an implementation of the Hibernate UserType in a way that will allow an enum to be used within a hibernate key mapping. So if I create a custom type definition in the key-mapping that uses the GenericEnumUserType class as the class, and passes in the actual BeerType enum classpath as a parameter, I can do the work to break out the enum details in the GenericEnumUserType implementation.

<hibernate-mapping>
    <typedef class="net.dangertree.GenericEnumUserType" name="beerType">
        <param name="enumClassName">net.dangertree.BeerType</param>
        <param name="identifierMethod">getId</param>
    </typedef>

    <class name="net.dangertree.Beer" table="BEER">
        <id name="id" type="int" column="ID">
            <generator class="native"/>
        </id>
        <property name="type" type="beerType" column="TYPE"/>
        <property name="brand" type="string" column="BRAND"/>
        <property name="volumn" type="double" column="VOLUME"/>
    </class>
</hibernate-mapping>

Here is the full code for the GenericEnumUserType class that I used to help map my enums into Hibernate. Reflection is used to find an “identifier” method in the enum that will get the id for each value. I have specified in the type-def in my key mapping that I’m going to use the getId() method of my enum to get an identifying attribute. By default, the class will look for the inherent name method of enum, but I’m using ids as my identifier.

The two method objects are grabbed and saved, then called in the null-safe setter and getter deeper within the Hibernate workings.

Ok, there is only one problem now. The DEFAULT_VALUE_OF_METHOD_NAME method is specified by default to be valueOf, and I have not provided a parameter to override that in the type-def. So in order for my enum to match this, I need to add a valueOf method to my enum. And when the nullSafeGet method calls the “valueOfMethod“, it sends it an identifier as a parameter, so our valueOf method needs to take an int id as a parameter.

Now I have my data object, the enum it is using, my key-mapping, and an implementation of UserType that provides a way to access the enum through a type-def element in the key-mapping.

It’s all working for me now! Does anyone have any questions or comments? This is the very first time that I have interacted with hibernate, so I’m a little bit shaky with the details (especially the UserType implementation).

Edit: correction of mapping file pointed out by commenters.

I just added Digg links to all my Wordpress posts on this page, and it was really easy. Here is a quick tutorial on how to do it yourself, just in case you don’t want to muddle through it yourself.

First, visit the Digg integration site where you’ll find what code snippets you need to add to your page. I’m going to list the code snippets that are available on their site today, but to ensure yours are up-to-date, you’ll want to go to their site and get the latest. There is good info on their page, but I’m going to show you specifically how to make the same graphic as you see on this post.

There is only one real complication: You want readers to be able to digg your posts from within the post’s permanent link page, or anywhere else it shows up in a list of posts. It is really easy to add a digg graphic to individual posts on their permanent link pages. Here is the Digg code snippet you will add:

This snippet will digg the URL of the current page the browser if viewing, so it is only appropriate to be placed on a post’s permalink page. For example, take this entry. This entry’s permalink page is http://weblog.dangertree.net /2007/06/02/ adding-digg- integration-to- wordpress/. But you may be viewing it from the main index page or an archive. To edit the post’s permalink page, you need to edit a template file that handles your theme’s presentation. I use the Wordpress default theme, Kubrick, so I’ll show you how I did it with that theme. If you use another theme, you’ll have to decide where the best place to put your Digg graphic will be.

Open wp-content/themes/default/single.php. You can do with from your server or through the Wordpress admin site (Presentation section). If single.php is not editable, you’ll have to chmod it. I wanted my Digg graphic to float just to the right of the post title, so I encased it in a div tag. So my snippet now looks like this:

Then I placed it just before the heading containing the post title (search for “the_title”). This will float the Digg graphic at the same level as the post title on the right hand side.

Now if you want Digg graphics to show up on the main page and archive pages of your site for all the posts listed, it is just a little bit (but not much!) more complicated. Take a look at the Digg integration site again and see the example for “When the URL you wish dugg differs from the current webpage”. Here is the code snippet that you’ll use:

Where you see WEBSITE_URL is where you’ll have to make Wordpress put the permalink URL to the post that is being viewed. We’re going to work on the archive page and the index page within the your theme directory. You will post the same code into both the archive.php and index.php files, and all you have to do with the code above is replace WEBSITE_URL with <?php the_permalink() ?>. This calls a php method in Wordpress that returns the current post’s permalink URL. It is that easy! So put that code wherever you want in both files, and you should be done!

Also, please Digg this entry to support this tutorial. Thanks!