(reposted from a long-forgotten blog)

There used to be a movement to promote the creation of complex GUI using XML. This seems like a good idea, if you can find a nice way to express what you want.

IMO, the flaw in the implementations I have found so far is that all of them seems to mix up both definition of the component (properties, etc), the behavior of the component (Listener registration) and the Layout. Everything is thrown in the same bag and shaked. It's just a way to express things with XML instead of Java, so there is no true advantage to that approach unless you want to cut down the compilation process (see [1]).

So, why would I want to represent a GUI as XML?... I can see two reasons:
 * Ease the GUI manipulation by tools
 * Tackle the complexity of GUI building with Awt/Swing

The first one is pretty much straightforward: It's easier to maintain a script that has a well known (albeit rigid) semantic than to maintain a class that the programmer will try to modify to bend it to it's will.
The second point raises an interesting question: Is really that complex to create a GUI? If so, why?

Most Java  programmers I know tremble at the mention of two dreaded words: SWING and AWT. Those few braves who don't tremble, but are willing and sometimes eager to dive in the complexity of building, GUI start to shake at the mention of one "simple" class: GridBagLayout. This layout is famed for it's flexibility and complexity... Add this to the fact that struggling with the layout managers, preferred sizes, layout hints and so on to make the components be displayed the way we want can be one of the most titanical and time-consuming task in the GUI development and you can see that making a good GUI in Swing can be daunting to some people.

But what if laying out the GUI were a task as simple as building an HTML table? Perhaps this first barrier would be lifted and the programmer can concentrate in what he knows best: To program logic.

I'm willing to bet (I'm betting some spare time, for sure) that this can be done using GridBagLayout. How so? Well, my hypothesis is that most elements of the GridBagConstraint can be mapped to a standard HTML tag for tables.

Here is the match I'm thinking of:


GridBagConstraints field         HTML equivalent
     gridx, gridy               The correspond to the cell where the component is placed
     gridwidth=N                <td colspan="N">
     gridheight=N               <td rowspan="N">
     gridheight=N               <td rowspan="N">
     ipadx=N                    <table cellpadding="N">
     ipadx=N                    <table cellpadding="N">
     ipadx=N                    <table cellpadding="N">
     ipadx=N                    <table cellpadding="N">
     insets(N,N,N,N)            <table cellspacing="N">
     anchor                     a combination of align and valign in either the td or tr tags 
     weightx=N                  <td width=N>

Of course, GridBagLayout is more powerful in it's ways than an HTML table (for example, specify the x padding and y padding individually and finer control over the insets), but the above table is a start.

The HTML syntax could be extended to provide the features that GridBagLayout has and then it would be possible to specify the layout using an XML document. The key point here is that only the layout will be expressed. This could lead to a clean separation between component declaration and component layout, thus leading to cleaner code.

An example: Having 4 components and adding them to a container using GridBagLayout could be something like this:

add(component1,new GridBagConstraints(1,1,1,2,0,0,CENTER,NONE,new Insets(0,0,0,0), 2,2)
add(component2,new GridBagConstraints(1,2,1,1,0,0,CENTER,NONE,new Insets(0,0,0,0), 2,2)
add(component3,new GridBagConstraints(2,2,2,1,0,0,CENTER,NONE,new Insets(0,0,0,0), 2,2)
add(component4,new GridBagConstraints(1,3,3,1,0,0,CENTER,NONE,new Insets(0,0,0,0), 2,2)

(CENTER and NONE are short of GridBagConstraints.CENTER and GridBagConstraints.NONE)

In my proposed, but not yet mature, XML syntax it would be like this:

<table cellpadding=2 cellspacing=0>
<row><cell rowspan=2>component1</cell><cell>component2</cell></row>
<row><cell colspan=2>component3</cell></row>
<row><cell colspan=3>component4</cell></row>
</table>

I think I'll bet more of my spare time and implement this. We'll see what happen.

Related Links:

XUL Planet

Jelly Swing Example

Packer: Simplifying the GridBagLayout

Some articles about Xmltalk

SwingML


Author's Note: This was posted long ago. I put my code where my mouth was, and created XMLGridLayout
. Sadly, due Sourceforge change in policy, the TWikI installation where the docs were just stopped working. I'll put them back in this site.

[1] XUL, on itself, is not a bad idea if you want to develop client-side GUI in the Mozilla platform. That would not be my first choice, but is a least it's a choice.






No TrackBacks

TrackBack URL: http://tech.soronthar.com/mt/mt-tb.cgi/28

Leave a comment

About this Entry

This page contains a single entry by Soronthar published on November 6, 2007 11:23 PM.

Playing with MT was the previous entry in this blog.

XmlGridLayout 0.4 Manual is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.