Simple wxFormBuilder question regarding panels.

2,811 views
Skip to first unread message

DJ Keebz

unread,
Feb 20, 2013, 9:00:43 AM2/20/13
to wxpytho...@googlegroups.com
Being the visual learner that I am, I decided to give wxFormBuilder a try to boost me up the learning curve of wxPython. I'm running into some issues though. As you'll see in the attached screenshot, I've got my panels wrong and my app looks funny. What I was hoping to make is almost what you see in the screenshot, except that I wanted to have a separate vertical panel on the right side of the app that would essentially be a list of the user's tasks which they have input.

Instead, that panel is at the bottom lying horizontally, and there is no panel that the other buttons, text, and other elements are attached to, so the background is ugly and clashes with the elements, but I seem unable to parent these things to a panel. Is anyone able to shed any light on this? I would deeply appreciate it!


MyApp.png

Daniel Hyams

unread,
Feb 20, 2013, 9:07:34 AM2/20/13
to wxpytho...@googlegroups.com
DJ:

I believe in wxFormBuilder, you have to create a sizer for a panel before you can create any children for it.  So while the panel is selected in the left hand panel, hit one of the sizer buttons to add a sizer, and then add children inside of the sizer.  The layout for the children will be managed by the sizer, but parented to the panel.

As far as the horizontal/vertical issue with your panel, you need to have a sizer that both panel belong to, and that sizer should be given the horizontal attribute.

If you post your wxFormBuilder file, I'm sure I can muck with it for a second and post what I think you're asking for.

On Wed, Feb 20, 2013 at 9:00 AM, DJ Keebz <seva...@gmail.com> wrote:
Being the visual learner that I am, I decided to give wxFormBuilder a try to boost me up the learning curve of wxPython. I'm running into some issues though. As you'll see in the attached screenshot, I've got my panels wrong and my app looks funny. What I was hoping to make is almost what you see in the screenshot, except that I wanted to have a separate vertical panel on the right side of the app that would essentially be a list of the user's tasks which they have input.

Instead, that panel is at the bottom lying horizontally, and there is no panel that the other buttons, text, and other elements are attached to, so the background is ugly and clashes with the elements, but I seem unable to parent these things to a panel. Is anyone able to shed any light on this? I would deeply appreciate it!


--
You received this message because you are subscribed to the Google Groups "wxPython-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wxpython-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
Daniel Hyams
dhy...@gmail.com

Werner

unread,
Feb 20, 2013, 9:17:14 AM2/20/13
to wxpytho...@googlegroups.com
Not an FB user, so from what I see you have to add a panel to your
frame, I guess you actually need to add a sizer to your frame, then a
panel to that sizer and then shift all the stuff you have to that panel.

For your bottom panel I think/guess you need a horizontal sizer which
holds the stuff you currently have in e.g. a panel plus your
bottom/right panel.

Werner

DJ Keebz

unread,
Feb 20, 2013, 9:37:22 AM2/20/13
to wxpytho...@googlegroups.com
Daniel, thanks for the response. I will try to work with that. If you'd like to look at my project file, I've attached it here.
Timer App.zip

Daniel Hyams

unread,
Feb 20, 2013, 9:53:48 AM2/20/13
to wxpytho...@googlegroups.com
DJ:

Modified .fbp attached.

Everyone probably has their own style of doing things, but if there are "logical sections" to a window, I like to use a panel for each.  In your case, there is a left section where the tools are, and a right section for picking the state of the left.

So create a panel for each, create a sizer for each of the panels, and start dropping in the GUI elements as needed (nesting the sizers appropriately to achieve the layout you desire).
Timer App modified.fbp

DJ Keebz

unread,
Feb 20, 2013, 9:55:20 AM2/20/13
to wxpytho...@googlegroups.com
Ok, I got the layout looking more like how I want it thanks to your suggestions. But there is still a problem. I attached a screenshot. What are the dark grey areas surrounding everything, and how do I get rid of them? Is that another issue with panels?
TimerApp.png

DJ Keebz

unread,
Feb 20, 2013, 9:59:59 AM2/20/13
to wxpytho...@googlegroups.com
Thanks Daniel, I'm taking a look at that right now to see if it also will help me fix the question I just posted. I really appreciate this!

Daniel Hyams

unread,
Feb 20, 2013, 9:59:43 AM2/20/13
to wxpytho...@googlegroups.com
That's the frame's background showing through underneath the panels.  What I did to get rid of that was to set the border size for both of the panels from 5 to 0.  By default, everything created in wxFormBuilder has a border width of 5 pixels.

If you remove the border, everything looks right, but if you still get a little show-through on other platforms, you may have to do something  like:

bigpanel (border 0)
  -> leftpanel
  -> rightpanel

On Wed, Feb 20, 2013 at 9:55 AM, DJ Keebz <seva...@gmail.com> wrote:
Ok, I got the layout looking more like how I want it thanks to your suggestions. But there is still a problem. I attached a screenshot. What are the dark grey areas surrounding everything, and how do I get rid of them? Is that another issue with panels?

--
You received this message because you are subscribed to the Google Groups "wxPython-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wxpython-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
Daniel Hyams
dhy...@gmail.com

DJ Keebz

unread,
Feb 20, 2013, 10:04:30 AM2/20/13
to wxpytho...@googlegroups.com
You're awesome! Seriously. I spent lot's of time figuring out how to understand layouts in wxpython and it wasn't making sense. This has helped me immensely. Thanks a ton! I'm going to fiddle around with the file you sent me some more to see what else I can learn.

Daniel Hyams

unread,
Feb 20, 2013, 10:09:04 AM2/20/13
to wxpytho...@googlegroups.com
Have fun ;)

Another trick in wxFormBuilder: if you want to move a UI element up and down in the list (say you have a bunch of widgets underneath a sizer), select it in the tree hierarchy on the left, hold alt, and use the arrow keys to move it up/down.

wxfb is a great tool but has a few little idiosyncrasies, so take that into account as you're learning. 

On Wed, Feb 20, 2013 at 10:04 AM, DJ Keebz <seva...@gmail.com> wrote:
You're awesome! Seriously. I spent lot's of time figuring out how to understand layouts in wxpython and it wasn't making sense. This has helped me immensely. Thanks a ton! I'm going to fiddle around with the file you sent me some more to see what else I can learn.

--
You received this message because you are subscribed to the Google Groups "wxPython-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wxpython-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
Daniel Hyams
dhy...@gmail.com

Daniel Hyams

unread,
Feb 20, 2013, 10:20:38 AM2/20/13
to wxpytho...@googlegroups.com
I forgot to mention too, that instead of setting bordersize to 0 for the panels, you could also just remove the wxALL flag from both of the panels.  wxALL, wxLEFT, wxRIGHT, wxTOP, and wxBOTTOM govern which sides of the control/widget actually have a border.
--
Daniel Hyams
dhy...@gmail.com

Werner

unread,
Feb 20, 2013, 11:09:03 AM2/20/13
to wxpytho...@googlegroups.com
Hi DJ,
When I started with wxPython I absolutely wanted to do everything
visually, so I ended up using Boa, which was great and I did that for a
few years.

For about the last 2 years I don't do layouts any more with Boa, but
instead I use wx.lib.sized_controls and I get "my visual need" served by
just having "if __name__" etc at the bottom of each dialog, panel, frame
I do which allows me to run this it and see exactly how things look. I
also use "wit", so when you run it press "ctrl-alt-i" and it will show
you the details about each control and the sizers etc - excellent for
debugging sizer issues and other things.

I attach a file which implements roughly what you have done using sc,
one freeby you get out of the box with sc are HIG compliant sizing of
your UI.

Werner
alttofb.py

DJ Keebz

unread,
Feb 21, 2013, 7:49:55 AM2/21/13
to wxpytho...@googlegroups.com
Thanks Werner, I'll take a look at that. I don't know anything about sized controls to be honest but if it makes things easier, I'd like to learn more about it.

Mario Lacunza

unread,
Feb 21, 2013, 8:40:48 AM2/21/13
to wxpytho...@googlegroups.com
Hello,

I think with the structure showed in your image you will have some
problems, Im attaching the correct one I used all the time in my
programs with no problems in majors OS.

Saludos / Best regards

Mario Lacunza
Email:: mlac...@gmail.com
Personal Website:: http://www.lacunza.biz/
OpenOffice.org Perú:: http://openoffice-peru.com/
Hosting:: http://mlv-host.com/
Mascotas Perdidas:: http://mascotas-perdidas.com/
Google Talk / Y! messenger / Skype: mlacunzav
MSN: mlac...@hotmail.com

El 20/02/13 09:55, DJ Keebz escribió:
> Ok, I got the layout looking more like how I want it thanks to your
> suggestions. But there is still a problem. I attached a screenshot.
> What are the dark grey areas surrounding everything, and how do I get
> rid of them? Is that another issue with panels? --
wxformbuilder

Werner

unread,
Feb 21, 2013, 8:49:11 AM2/21/13
to wxpytho...@googlegroups.com
They are a well kept secret - besides me mentioning them quit a bit.

BTW, there is a demo for them within the wxPython demo.

Werner
Reply all
Reply to author
Forward
0 new messages