A XML Based Swing Layout Manager - Soronthar's Software Development Diary

(repost 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.

In my opinion, 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 shaken. 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.

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, though, raises an interesting question: Is it 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 x,y corresponding to the cell where the component is placed
gridwidth=N	<td colspan=”N”>
gridheight=N	<td rowspan=”N”>
ipadx=N	<td rowspan=”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:

// CENTER and NONE are short of 
// GridBagConstraints.CENTER and GridBagConstraints.NONE)
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)
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);

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>

<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.