Lately, I have been developing an extension for Firefox and I've really taken a liking to how it separates UI design with XUL and CSS. Developing Java UIs feels so cumbersome in comparison.

Now, what if we could somehow meld XUL and GridBagLayout together? I have some thoughts, but no idea how well it would work. Imagine if we could write the following:

ExampleXulLayout.xul:

<layout>
  <hbox>
    <box id="label-1"/>
    <hbox id="textbox-1" flex="1"/>
  </hbox>
  <vbox>
    <box id="label-2"/>
    <box id="textfield" flex="1"/>
  </vbox>
</layout>

This should end up looking something like my poor text rendition below:

+--------------------------------------------+
|                                            |
| Textbox-1's label ________________________ |
|                                            |
| Description:                               |
| +----------------------------------------+ |
| |                                        | |
| |                                        | |
| +----------------------------------------+ |
|                                            |
+--------------------------------------------+

The source code that works with the XUL to produce the above would look like the following:

ExampleXulLayout() {
    JPanel panel = new JPanel();
    panel.setLayout(new XULGridBagLayout("ExampleXulLayout.xul"));

    JLabel label1 = new JLabel("Textbox-1's label");
    panel.add(label1, "label-1");

    JTextField title = new JTextField();
    panel.add(title, "textfield-1");

    JLabel descLabel = new JLabel("Description:");
    panel.add(descLabel, "label-2");

    JEditorPane pane = new JEditorPane();
    panel.add(pane, "textarea");
}

This would be equivalent to the below if we were using GridbagLayout directly:

GridBagConstraints c = new GridBagConstraints();

c.gridx = 0;
c.gridy = 0;
panel.add(label1, c);

c.gridx = 1;
c.gridy = 0;
c.weightx = 1.0;
panel.add(title, c);

c.gridx = 0;
c.gridy = 1;
c.weightx = 0.0;
panel.add(descLabel, c);

c.gridx = 1;
c.gridy = 1;
c.weightx = 1.0;
c.weighty = 1.0;
c.gridwidth = 2;
panel.add(pane, c);

Does this sound like a good idea? Could it be useful or even usable?