Platinum Partner
java

MigLayout: Inevitable Choice for Griffon Users?

It seems to me that in the same way that Griffon will make Groovy an ever more viable option for Swing developers, so it will make MigLayout increasingly inevitable. This will not be news to anyone who is familiar with Groovy or with MigLayout. However, let's put words aside and look purely at code, for any hold outs out there, as well as for newbies to MigLayout.

Firstly, read My First Griffon App, written yesterday by Josh Reed (also to see how Griffon handles Arctic conditions), where he states:

"I spent the majority of my time on the UI. It was a seemingly endless cycle of tweaking the code and testing with griffon run-app to get it to look the way I wanted. This is no knock on Griffon; writing Java UIs, especially by hand, just plain sucks. After far too long trying to get the standard Java layout managers to do what I want, I did myself a favor and downloaded MigLayout."

That was exactly my experience in Porting to Griffon. The one single pain point that Groovy leaves one with is the design of UIs. Perhaps a GUI Builder as NetBeans IDE has for Swing could help, but that shouldn't be necessary, and I don't believe it is in fact necessary. Firstly, I'd like to point to Metawidget, an automatic UI generator, as explained in detail some time ago here on Javalobby by Richard Kennard, its creator, himself. Secondly, there's MigLayout. As pointed out above (look at the code in Josh Reed's blog entry) and below, we have Gregg Bolinger's MigLayout rewrite (line 9 to 24 below) of my horribly convoluted GridBagLayout from Porting to Griffon:

application(title:'Anagrams', minimumSize:[297, 200], location:[50,50],
    pack:true, locationByPlatform:true) {
    menuBar( id: 'menuBar') {
        menu(text: 'File', mnemonic: 'F') {
            menuItem(aboutAction)
            menuItem(exitAction)
        }
    }
    panel(border:emptyBorder(12), layout:new MigLayout('fill')) {
        label(text: 'Scrambled Word:')
        textField(id: 'scrambledWord', text: bind {model.scrambledWord},
            columns: 20, editable: false,
            constraints: "wrap")
        label(text: 'Your Guess:')
        textField(id: 'guessedWord',
            columns: 20,
            constraints: "wrap")
        label(id:'feedbackLabel', text: bind {model.feedback}, constraints: "wrap")
        panel(name:'buttonPanel', layout:new FlowLayout(FlowLayout.RIGHT),
constraints: "growx, span") {
          button(action: guessWordAction)
          button(action: nextWordAction)
        }
        bean( model, guessedWord: bind {guessedWord.text} )
    }
}

Just for contrast, look at the original GridBagLayout which, aside from its complexity, is about twice as long:

application(title:'Anagrams', minimumSize:[297, 200], location:[50,50],
pack:true, locationByPlatform:true) {
menuBar( id: 'menuBar') {
menu(text: 'File', mnemonic: 'F') {
menuItem(aboutAction)
menuItem(exitAction)
}
}
panel(border:emptyBorder(12)) {
gridBagLayout()
label(text: 'Scrambled Word:',
constraints: gridBagConstraints(
gridwidth: 1, gridheight: 1,
fill: HORIZONTAL, anchor: WEST,
weightx: 0.0, weighty: 0.0,
insets: [0,0,12,6]))
textField(id: 'scrambledWord', text: bind {model.scrambledWord},
columns: 20, editable: false,
constraints: gridBagConstraints(
gridwidth: REMAINDER, gridheight: 1,
fill: HORIZONTAL, anchor: CENTER,
weightx: 1.0, weighty: 0.0,
insets: [0,0,12,0]))
label(text: 'Your Guess:',
constraints: gridBagConstraints(
gridwidth: 1, gridheight: 1,
fill: HORIZONTAL, anchor: WEST,
weightx: 0.0, weighty: 0.0,
insets: [0,0,20,6]))
textField(id: 'guessedWord',
columns: 20,
constraints: gridBagConstraints(
gridwidth: REMAINDER, gridheight: 1,
fill: HORIZONTAL, anchor: CENTER,
weightx: 1.0, weighty: 0.0,
insets: [0,0,20,0]))
label(id:'feedbackLabel', text: bind {model.feedback},
constraints: gridBagConstraints(
gridx: 1, gridy: RELATIVE,
gridwidth: REMAINDER, gridheight: 1,
fill: HORIZONTAL, anchor: CENTER,
weightx: 1.0, weighty: 0.0,
insets: [0,0,20,0]))
button(action: guessWordAction, constraints: gridBagConstraints(
gridx: 1, gridy: RELATIVE,
gridwidth: 1, gridheight: REMAINDER,
fill: NONE, anchor: SOUTHEAST,
weightx: 1.0, weighty: 1.0,
insets: [0,0,0,6]))
button(action: nextWordAction, constraints: gridBagConstraints(
gridwidth: REMAINDER, gridheight: REMAINDER,
fill: NONE, anchor: SOUTHEAST,
weightx: 0.0, weighty: 1.0,
insets: [0,0,0,0]))
bean( model, guessedWord: bind {guessedWord.text} )
}
}

Not only was the above next to impossible to write, but just imagine needing to maintain all of that. And the result is the same as Gregg's rewrite to MigLayout. I believe that the Grails-like structure Griffon offers to Groovy users will make it increasingly attractive, which in turn will make MigLayout an inevitable first choice when it comes to designing the view of Griffon applications. And therefore, in short, if you're a convert to MiGLayout too, please show your appreciation, and your need, by voting to add MiGLayout to the JDK!

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}