Best practices for laying out controls

["Dave Foster" <dave foster gmail com>]

Hi,

I'm currently developing an application which has a lot of input widgets to
it.  After consulting the HIG [1], specifically the portion about Window
Layout [2], it left me quite confused with exactly how I should implement
the guidelines it suggests.  I understand the importance of alignment and
good visual flow here, but I'm not sure which containers/widgets I should be
using in order to achieve a nice, aligned layout.

Originally, I was using a GtkTable but I am not convinced that it is the
proper container.  I was led to use this by the fact that I wanted labels
(in a column) to be all aligned based on the largest size of the labels, and
the controls on the right (in another column) to be aligned to the left
there, all making a neat line.  However, working with a GtkTable in glade-3
has been a bit problematic, and I'm seeking suggestions as to how other
people would lay out a dialog, using what containers, etc.

I had thought about using a VBox, and then a number of HBoxes inside of the
VBox, but then the labels/controls quickly go out of alignment with one
another.  Check this screenshot of a mockup of this scenario in glade (glade
file available here [3]):

http://d.minuslab.net/files/gtk-layout-test-1.png

Notice how the color button and spin button controls take up more horizontal
room.  I played a bit with the size requests fields but they don't appear to
really request a size, perhaps they are controlled by something more with
the parent controls (the hbox and vbox, respectively).

Doing the opposite (an HBox with many VBoxes) leads to vertical misalignment
between labels and controls.

Basically my question is this, given the HIG dialog in [2], how exactly is
that dialog made?  What lines everything up so nicely so that the labels are
on the left and the input controls are in a neat line?  There must be
something significant that I am missing about laying out a dialog.

If you want to just point me to some source or a glade file that does
something similar to the HIG dialog in [2] I would be grateful as well, but
an explanation would really help.

Thanks,
dave

[1] http://library.gnome.org/devel/hig-book/stable/
[2] http://library.gnome.org/devel/hig-book/stable/design-window.html.en
[3] http://d.minuslab.net/files/gtk-layout-test.glade