Building HTML

There are two ways to generate HTML: The right way and the JSP way. Enough has been said about JSP, what's the right way?

The right way is to have a programming language that is flexible enough to merge HTML and code painlessly. Groovy does it this way:

 def builder = new MarkupBuilder ();
 builder.html {
    head {
        title getTitle()
    }
    body {
        genBody (builder)
    }
 }

What is going on here?

First of all, you must know that you can omit several things in Groovy: parentheses or semi-colon, for example. If we add these, the example becomes less readable but better understandable for Java developers:

 def builder = new MarkupBuilder ();
 builder.html () {
    head () {
        title (getTitle());
    };
    body () {
        genBody (builder);
    };
 };

So obviously, in the first line, a method html() is called. Now, you need to know that the code in curly brackets is a closure and that closure is added as the last parameter to the call of the method in front of it. This means the code in the curly brackets is passed into html() and can be executed any time html() wants to do it. It can even invoke the closure several times. In Java, the definition of html would be: html(Closure c).

The same happens with head(), title() (which takes a String argument) and body(). Now where are these methods defined?

Nowhere. MarkupBuilder() is a class which defines a "catch all" method called invokeMethod. Whenever Groovy cannot find the right method to invoke, it will check if a class defines

 Object invokeMethod(String methodName, Object args)

and invoke this method instead. The method gets the name of the original method and all the original parameters in a list.

In our case, MarkupBuilder.invokeMethod() will use the method name as the HTML element name. That's it. A little bit of flexibility in the parser got us a long way towards HTML without making the code unreadable.

Next, we need a flexible way to pass HTML attributes. In Groovy, named arguments are supported:

 void genBody (MarkupBuilder builder) {
     builder.p (style:'font-weight: bold;', 'Impressive.')
 }

This will call MarkupBuilder.invokeMethod() with "p" as the method name and a list consisting of the map with the style and a string. This information will be used to build the element and it's content.

Of course, the builder will stream the output (which is very simple since it can wrap your code when it needs to: essentially it will just warp all the virtual methods you call), there is no way to forget a closing element (your program won't compile anymore) and splitting complex HTML into several methods is a cinch.

Life can be so simple with a little bit of flexibility.

Further reading: Using MarkupBuilder for Agile XML creation