Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Monday, July 09, 2007

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

Friday, July 06, 2007

Debugging AJAX Applications with IE

Note: Most of the information for this blog entry was copied from this blog (German only).

Debugging AJAX Applications (or RIA) has become much more simple with the Firefox extensions Web Developer Toolbar and the fantastic tool Firebug.

IE has lagged behind but there are now two tools which help a lot: IE Developer Toolbar which mimics the HTML/CSS editing capabilities of Firebug and some of the tools of WDT (like clearing the cache, showing outlines and disabling images). For debugging JavaScript, you can get the MS Script Debugger but you have to dig through the config to enable and disable it.

Now all I need is a way to get at the IE Dev Toolbar when the browser window has no menu ...