Thursday, April 03, 2008

Java Builders - laying out Swing controls in text...crazy or just crazy productive?

I had a small epiphany last week...there is something to be said about seeing a screen in a GUI builder and at least getting some idea as to what it looks like.

So, assuming we still want this layout:


what if instead explicitly defining the constraints like this:
JFrame:
name: myFrame
title: Frame
content:
- JPanel:
name: groupLayoutPanel
content:
- JLabel: {name: label, text: "Find What:"}
- JTextField: {name: textField}
- JCheckBox: {name: caseCheckBox, text: Match Case}
- JCheckBox: {name: wholeCheckBox, text: Whole Words}
- JCheckBox: {name: wrapCheckBox, text: Wrap Around}
- JCheckBox: {name: searchBackwardsCheckBox, text: Search Backwards}
- JButton: {name: findButton, text: Find}
- JButton: {name: cancelButton, text: Cancel}
MigLayout:
constraints:
- label: cell 0 0
- textField: cell 1 0 4 1, grow
- caseCheckBox: cell 1 1
- wholeCheckBox: cell 2 1
- wrapCheckBox: cell 1 2
- searchBackwardsCheckBox: cell 2 2
- findButton: cell 5 0, grow
- cancelButton: cell 5 1, grow
we actually laid it out in text, with some simple hints:


JFrame:
name: myFrame
title: Frame
content:
- JPanel:
name: groupLayoutPanel
content:
- JLabel: {name: label, text: "Find What:"}
- JTextField: {name: textField}
- JCheckBox: {name: caseCheckBox, text: Match Case}
- JCheckBox: {name: wholeCheckBox, text: Whole Words}
- JCheckBox: {name: wrapCheckBox, text: Wrap Around}
- JCheckBox: {name: searchBackwardsCheckBox, text: Search Backwards}
- JButton: {name: findButton, text: Find}
- JButton: {name: cancelButton, text: Cancel}
layout: |
>label textField+2 findButton
caseCheckBox wholeCheckBox cancelButton
wrapCheckBox searchBackwardsCheckBox


Basically, the rows are defined by the fact the controls are in the same row.
The columns are automatically inferred from how the controls are aligned in the actual
"layout" node.

Some simple symbols in front of the name to indicate horizontal and vertical alignment:
> : halign right
| : halign center
/ : valign bottom
- : valign middle

and after the control name the span information

+2 : span horizontally 2 cells
+1+2 : span 1 cell horizontally, 2 cells vertically

Behind the scenes everything would be converted to regular MigLayout of course.
And I would still allow a separate constraints section to allow adding more specific
MigLayout constraints, but the ones above probably cover 80%/90% of the most common cases.

A trip down insanity lane? Or the best idea since sliced bread?

I'm still not sure myself...but I can see one making some layouts very quickly with this and
just by looking at the file getting a rough idea of what it actually looks like once
running.

10 comments:

Andres Almiray said...

Interesting indeed, maybe ZoneLayout can help you with more ideas (http://www.zonelayout.com/comparison.php)

Jacek Furmankiewicz said...

Interesting...but is the ZoneLayout code unreadable or what?

I can see it being just as powerful as regular expressions in the hands of a power code, but an utter challenge for anyone else.

Jacek Furmankiewicz said...

I'd like the layout file to be editable by mere mortals on the other hand, so can't get too cryptic and complex...want to follow the 80/20 rule as much as possible

Andres Almiray said...

True, ZoneLayout's code is a bit unreadable at first, it is definitely hard to read unless you are used to it, I just thought it may be a good idea to look what others did before. I like your proposal and if I wasn't using Groovy for my UI needs I would surely jump to YAML/Mig (you need a name for this =-))

Jacek Furmankiewicz said...

I hear SwingBuilder is already taken :-)

Maybe JBSwingBuilder?

Java Builder for Swing?

or just simply

Java Swing Builder...

At this stage, the name is still the least of my worries...

P.S. I could do it Sun-style:

SwingFX UI Builder for the Java Platform

(now that's a mouthful of corporate speak)

Marko Kocić said...

One word -> Use JGoodies FormLayout

Axel Rauschmayer said...

I used a spreadsheet-like approach to do something similar with JGoodies layout (meaning: yes, I think what you are doing is useful ;-):

- Each cell contains a constructor.

- The column and row headers contain information about fixed width and groups (columns or rows that should have the same size belong to the same group).

It was all edited in a grid. At the time, I used Jython to interpret the spreadsheet (to test it). It was saved as CSV, but one could also export it as Java code. As far as interactivity goes, it came pretty close to a true WYSIWYG editor.

Jacek Furmankiewicz said...

Regarding FormLayout..I like MigLayout better.

FormLayout is great, but I don't like the fact that you have to define the spacing between rows/columns as a separate row/column itself.

But the two are very similar...MigLayout is more powerful though at first glance.

Mikael Grev said...

Marko, MigLayout has all features that Formlayout does, and a lot more. What do you think would be the advantage of using Formlayout over MigLayout?

Anonymous said...

Sometimes in the Shadow of Legend game, after winning the enemies, they will understand to share the shadow of legend Gold as their trophy. A beautiful and rich sol gold environment coupled with an engrossing storyline in this Shadow of Legend game. A once beautiful and lush world and the first process you have to buy shadow of legend Gold, the game in fact is full of creatures and inhabitants. He constant warring left the fate of the inhabitants with cheap shadow of legend Gold of Agnes at the hands of the gods. Shadow of legend and the necessary or useful shadow of legend money is the answer for you.