Example use of GridLayout - Quadrants

To remind myself how to make smart layouts in Vaadin that resize appropriately to take advantage of changing window size, I built an example app. I built the app in Vaadin 7.1, but the important code should also work in Vaadin 6 and 7.0.

A Table appears in each of four corners of the layout. A variation includes a middle column and middle row containing Buttons.

I posted the source code on StackOverflow,
Use GridLayout to make a smart layout that responds to the window being resized?

Is there a better place to post examples? The wiki portion of the Vaadin.com site is pretty much unusable. This forum site does not allow image uploads. I have no Git or Mercurial skills, so GitHub etc. is beyond me.

Of special interest is that this example shows the apparent bug in GridLayout where setting equal resize ratios does not always result in equal sized areas, especially when other naturally-sized (“undefined” sized) widgets are involved. Other people have reported this problem. Notice the hack in my source code where I divide the first column’s/row’s ratio to compensate for GridLayout’s tendency to exaggerate.

I hope this might help others wrestling with GridLayout. And I’m open to criticism or suggestions about my code.