[PyKDE] Inserting widgets "into" a QGroupBox

[David Boddie]

On Thursday 01 February 2007 08:47, Tony Cappellini wrote:

> Here's a screenshot of what I am working towards, using another
> (non-python) WYSIWIG IDE.
> I use it to design the layout I'm trying to construct with pyQT.
> http://www.tcapp.com/wysiwig.jpg
>
> Now- there are many more group boxes and widgets in this screenshot than my
> original post, but you can still see the "basic 2-column vertical layout" I
> described.

Yes, it looks like you want to put two group boxes side by side in a
horizontal layout, then put a grid layout inside the left group box
and a vertical layout in the right group box.

> Each group will contain more than one widget, which is why I want to put
> them in a group. The Group Box Title to provide visual information to the
> user what each group is for.

Sounds fine to me.

> I want a two-column view, left & right, which is why I chose 2 vertical
> layouts (I started with a grid, but nothing would appear in it.)

I'm not sure why that is. :-(

> > If you really do want to put two vertical layouts into a horizontal layout
> > and put a group box into each of them, you need to do something like this:
> >
> > hboxLayout = QHBoxLayout()
> > hboxLayout.addLayout(leftLayout)
> > hboxLayout.addLayout(rightLayout)
> > self.setLayout(hboxLayout)
>
> Well after struggling with all of my other failures, this is what I came up
> with too.
> But the text boxes in each vlayout are about half as wide as the main form.
> So I'm now trying to make them smaller.

OK. As an experiment, let's take a look at what you would need to do in Qt
Designer:

  1. Create a new form using the Main Window template.
     (We'll ignore the menu bar for now.)
  2. Resize the form to about the same size that you want the window to be.
  3. Drag a group box from the widget box onto the left half of the form and
     drop it there, then drag another onto the right half of the form and
     drop it.
  4. Click in a blank part of the form so that neither group box is selected
     then click the "Lay Out Horizontally" toolbar button above the widget
     box. The group boxes should now occupy equals areas of the whole form.

This should give you the basic layout. Now for the right hand group box:

  1. Place a new group box in the top half of the right hand group box, and
     place another in the bottom half.
  2. Click the right hand group box so that it is the only selected widget
     then click the "Lay Out Vertically" toolbar button. The right hand
     group box should now contain two equally sized group boxes, one above
     the other.
  3. You can place a label in the top group box, and place a combobox and
     a text edit in the bottom group box. Don't apply layouts to these
     group boxes yet! (If you do, you'll cause the right hand group box to
     change size as it tries to figure out how to allocate space to all the
     widgets.)

The left hand group box is more complicated:

  1. Place group boxes in the desired locations and place horizontal spacers
     to the right of the top two group boxes.
  2. Place a push button below the group boxes in the middle of the parent
     group box and put horizontal spacer on both sides of it.
  3. Drop the radio buttons and text edits in the group boxes.

Now comes the tricky bit. You need to apply a grid layout to the widgets in
the left hand group box then apply vertical layouts to all the group boxes
within that group box. This will make editing the form quite difficult until
it is done.

Then you need to apply a vertical layout to the right hand group box, and
do the same for the group boxes inside it. The only problem left will be
that the main window allocates more space to the left hand group box than
it does to the right hand one. This can probably be fixed in Designer, but
you may never be able to guarantee that it will always look that way.

If you want .ui files showing what the user interface would look like in
Designer, let me know and I'll send you them privately.

> >>he group box is just an ordinary widget that can be used to contain other
> >>widgets. It needs a layout inside it to organise those other widgets.
>
> That's the missing piece I needed.

OK. That's useful to know from the perspective of writing about widgets
and layouts.

> >>You can experiment with this sort of thing with Qt Designer.
>
> I started with designer, then quickly dropped it. It's not like the WYSIWIG
> IDE's I've used before.
> I couldn't get the widgets I wanted to stay in the place I wanted them, nor
> stay the size I wanted. They kept resizing to the maximum width/height.
> When I dropped spacers onto the form, I couldn't position them nor keep
> them at a specific size.
> This is the first time I've dealt with automatic layout management.
> (as if you didn't know that already) ;-)

Sure. :-)

Generally speaking, I think many people come to Qt's layout system from
systems where you place and resize widgets to have fixed geometries, and
they're upset that you can't do this once you apply layouts to widgets.

Of course, the layouts are only trying to help: they help deal with the
problem that different people use different size fonts and use different
languages, and make the user interface more fluid and flexible.

But, as with many systems that try to help, you don't get to do things
directly - you have to influence the system to try and get the desired
result.

> I was able to do the pyuic compile, and subclass that form, but the widgets
> size/locations weren't what I wanted.

Actually, I was just suggesting that you take a look at the code it produced,
just for inspiration's sake. The trouble is that there's often a lot of other
code in uic or pyuic-generated files that can be confusing to beginners.

[EuroPython 2006 presentation]

> This is great! The best docs for pyQT I've seen!

Thanks. :-)

> Can you get it on the Wiki, and/or have it included in the pyqt
> distribution? It would be a great help for first time pyQT users.

I think it could be improved and made less like a presentation. Some of the
earlier slides could be removed, for example.

> BTW- on page 11- It would help me (and other newbies) if you would
> illustrate which widgets are parents and which are children.
> For a newbie, the buttons are the widgets. The implication is that the
> Layout is a also widget- the parent widget, but the "Placing widgets in a
> layout" implies that the layout is not a widget. The separation between
> parent & child isn't immediately obvious.

OK. This kind of reinforces my impressions about "learning layouts". As I
said above, I think people sometimes have preconceptions about how to
create user interfaces that aren't quite applicable when using layouts,
or there's some confusion about what layouts actually are.

Things weren't much easier to explain in Qt 3 where there were also special
container widgets with built-in layouts...

David