Panels and labels

[Chris_Norman]

Hi all,
I am a new comer to both WX and this mailing list, so please let me start off by saying how much I appreciate WX! I think it's great that I can make simple and accessible GUIs on multiple platforms.

Now for my question. The attached code is part of my first project, for which I want to be able to generate dynamic configuration screens, with a view to detaching the config stuff at a later date, and making it into a stand alone class that other folks cane use.

Anyways, the eventual goal is to have 2 controls per line, 1 label, and 1 control, which can be maniuplated to fill out the form with options.

I have no idea what my screen looks like, but from an accessibility standpoint, the controls aren't getting labeled right.

You can use the included test script to make the GUI do something useful.

Has anyone got any suggestions on how I can improve this? Any suggestions for stylistic improvements are gladly accepted too!

Cheers,

confeditor.py (4.15 KB)

test.confeditor.py (387 Bytes)

[Werner2]

Hi Chris,

I hope interspersing my comments works for you - if bottom post would be easier let us know.

I am no expert, wx and programming is just a hobby of mine, so take my comments with a grain of salt.

Hi all,
I am a new comer to both WX and this mailing list, so please let me start off by saying how much I appreciate WX! I think it's great that I can make simple and accessible GUIs on multiple platforms.

Welcome to the wxPython community - I am sure you will enjoy it.

Now for my question. The attached code is part of my first project, for which I want to be able to generate dynamic configuration screens, with a view to detaching the config stuff at a later date, and making it into a stand alone class that other folks cane use.

Anyways, the eventual goal is to have 2 controls per line, 1 label, and 1 control, which can be maniuplated to fill out the form with options.

I have no idea what my screen looks like, but from an accessibility standpoint, the controls aren't getting labeled right.

The controls are not visible, this has to do with the way they are added to the sizer. I would suggest using the wx.lib.sized_controls instead, they do a lot of the sizer work for you with sensible defaults and the UI will comply with platform (MAC, Linux, Windows) HIG's (Human_Interface_Guidelines).

The 'labels' are after the actual control, could that be the problem that they are not labelled right for you? Anyhow standard UI's will most of the time put the labels to the left of the control.

You can use the included test script to make the GUI do something useful.

Has anyone got any suggestions on how I can improve this? Any suggestions for stylistic improvements are gladly accepted too!

I attached a modified version using sized_controls and doing some of the suggestions I make below.

Here some other suggestions and remarks.

- instead of having a second file to test things you can use "if __name__ == "__main__":", whatever follows that will only be executed when you run this module and will be ignored if you import that module into another one
- I would not size the Frame with wx.DisplaySize but let the sizers do their thing to size it correctly
- I would break down the code into more methods in ConfEditor
- I would probably replace 'eval' as I believe it is a potential security whole

Stylistic comments:
- do not mix tabs and spaces for indentation (especially in view of Python 3 - this will be an error)
- maybe use an IDE which assists with PEP8 - PEP 8 -- Style Guide for Python Code
- to correct existing code there is e.g. autopep8 - autopep8 · PyPI
- I like naming my methods using camelCase, i.e. start with a lower case letter, which makes it very easy to distinguish them from e.g. wxPython methods

Hope this is useful.
Werner

confeditor-changed.py (4.72 KB)

···

On 9/26/2014 18:45, Chris Norman wrote:

[Werner2]

Hi Chris,

One more comment, the "OK" and "Cancel" buttons are on the top of each page. I think there should probably be only one set outside the Notebook, anyhow in standard UI's they are most of the time at the bottom and not the top.

Werner

[Chris_Norman]

Replying to these in reverse I know!

Thanks very much for that, I'll override .Show, to put the okay and cancel buttons in the last positions possible... Not sure how to do that with the stuff you suggested in your first email.

Thanks very much,

···

On 27/09/2014 11:48, Werner wrote:

Hi Chris,

One more comment, the "OK" and "Cancel" buttons are on the top of each page. I think there should probably be only one set outside the Notebook, anyhow in standard UI's they are most of the time at the bottom and not the top.

Werner

[Chris_Norman]

Hiya mate,
Thanks very much for your reply.

I just read over your email again, and came to the staggering conclusion that I really shouldn't send off emails in a rush - sorry for all the typos!

I'm reading over your code now, and I am pleased to say that not only did you fix the labeling issue, but also the issue that I couldn't tab from the cancel button back to the list of tabs!

So, with sizers, when you add things, how does it work?

sizer = wx.BoxSizer(wx.HORIZONTAL)
sizer.Add(control1) # I assumed this would appear on the left.
sizer.Add(control2) # And this on the right.

Unfortunately, the stuff I've read on wx doesn't code a lot of the "how stuff works", I guess 99 out of 100 people using WX can check their work by looking at the GUI... I can check mine using a trackpad on my mac, but it's hardly exact science!

Thanks very much for your suggestions, I'll look over them, and probably hit you with another pletherer of newbie questions!

Take care, and have a great day.

···

On 27/09/2014 11:44, Werner wrote:

Hi Chris,

I hope interspersing my comments works for you - if bottom post would be easier let us know.

I am no expert, wx and programming is just a hobby of mine, so take my comments with a grain of salt.

On 9/26/2014 18:45, Chris Norman wrote:

Hi all,
I am a new comer to both WX and this mailing list, so please let me start off by saying how much I appreciate WX! I think it's great that I can make simple and accessible GUIs on multiple platforms.

Welcome to the wxPython community - I am sure you will enjoy it.

Now for my question. The attached code is part of my first project, for which I want to be able to generate dynamic configuration screens, with a view to detaching the config stuff at a later date, and making it into a stand alone class that other folks cane use.

Anyways, the eventual goal is to have 2 controls per line, 1 label, and 1 control, which can be maniuplated to fill out the form with options.

I have no idea what my screen looks like, but from an accessibility standpoint, the controls aren't getting labeled right.

The controls are not visible, this has to do with the way they are added to the sizer. I would suggest using the wx.lib.sized_controls instead, they do a lot of the sizer work for you with sensible defaults and the UI will comply with platform (MAC, Linux, Windows) HIG's (Human_Interface_Guidelines).

The 'labels' are after the actual control, could that be the problem that they are not labelled right for you? Anyhow standard UI's will most of the time put the labels to the left of the control.

You can use the included test script to make the GUI do something useful.

Has anyone got any suggestions on how I can improve this? Any suggestions for stylistic improvements are gladly accepted too!

I attached a modified version using sized_controls and doing some of the suggestions I make below.

Here some other suggestions and remarks.

- instead of having a second file to test things you can use "if __name__ == "__main__":", whatever follows that will only be executed when you run this module and will be ignored if you import that module into another one
- I would not size the Frame with wx.DisplaySize but let the sizers do their thing to size it correctly
- I would break down the code into more methods in ConfEditor
- I would probably replace 'eval' as I believe it is a potential security whole

Stylistic comments:
- do not mix tabs and spaces for indentation (especially in view of Python 3 - this will be an error)
- maybe use an IDE which assists with PEP8 - PEP 8 -- Style Guide for Python Code
- to correct existing code there is e.g. autopep8 - autopep8 · PyPI
- I like naming my methods using camelCase, i.e. start with a lower case letter, which makes it very easy to distinguish them from e.g. wxPython methods

Hope this is useful.
Werner

[Werner2]

Hi Chris,

Hiya mate,
Thanks very much for your reply.

I just read over your email again, and came to the staggering conclusion that I really shouldn't send off emails in a rush - sorry for all the typos!

No problem - just don't look to close at mine:)

I'm reading over your code now, and I am pleased to say that not only did you fix the labeling issue, but also the issue that I couldn't tab from the cancel button back to the list of tabs!

So, with sizers, when you add things, how does it work?

sizer = wx.BoxSizer(wx.HORIZONTAL)
sizer.Add(control1) # I assumed this would appear on the left.
sizer.Add(control2) # And this on the right.

Yes, with a BoxSizer control1 will either be on the left when using wx.HORIZONTAL or on top with wx.VERTICAL.

But in your code you used a GridBagSizer and gave positions, didn't look much at it but maybe something was wrong how the positions where given.

When you use 'manual' sizer code instead of wx.lib.sized_controls you will also have to worry/code the 'proportion' and the 'flag' - see: http://wxpython.org/Phoenix/docs/html/Sizer.html#phoenix-title-sizer-flags

Unfortunately, the stuff I've read on wx doesn't code a lot of the "how stuff works", I guess 99 out of 100 people using WX can check their work by looking at the GUI... I can check mine using a trackpad on my mac, but it's hardly exact science!

You got pretty close to exact:)

Thanks very much for your suggestions, I'll look over them, and probably hit you with another pletherer of newbie questions!

Please do, if I can't answer I am sure others will chip in.

Have a nice day
Werner

···

On 9/28/2014 12:57, Chris Norman wrote:

[Chris_Norman]

Well, my next question is about relative sixes.

As in my previous code, I had the sizebyposition thing, which you said was a silly idea, and I concur... If nothing else, your wx.lib.sized_controls means much less typing for yours truly!

So, for the main body of the program (it's a MUD client, to give you an idea of what I'm doing), there are two text boxes:

One filling the full width of the bottom of the screen (with a label, and I have no clue how big they should be) to the left of it, but with only enough room for one line of text, since commands typically don't span more than one line.

The rest of the screen should be taken up with a truely huge multiline text field which has the output.

I have the code for this already, and the whole interface works, but I'm wondering if there's a better way than my sizers to do it, possibly with the sized_controls?

Cheers,

···

On 28/09/2014 15:12, Werner wrote:

Hi Chris,

On 9/28/2014 12:57, Chris Norman wrote:

Hiya mate,
Thanks very much for your reply.

I just read over your email again, and came to the staggering conclusion that I really shouldn't send off emails in a rush - sorry for all the typos!

No problem - just don't look to close at mine:)

I'm reading over your code now, and I am pleased to say that not only did you fix the labeling issue, but also the issue that I couldn't tab from the cancel button back to the list of tabs!

So, with sizers, when you add things, how does it work?

sizer = wx.BoxSizer(wx.HORIZONTAL)
sizer.Add(control1) # I assumed this would appear on the left.
sizer.Add(control2) # And this on the right.

Yes, with a BoxSizer control1 will either be on the left when using wx.HORIZONTAL or on top with wx.VERTICAL.

But in your code you used a GridBagSizer and gave positions, didn't look much at it but maybe something was wrong how the positions where given.

When you use 'manual' sizer code instead of wx.lib.sized_controls you will also have to worry/code the 'proportion' and the 'flag' - see: http://wxpython.org/Phoenix/docs/html/Sizer.html#phoenix-title-sizer-flags

Unfortunately, the stuff I've read on wx doesn't code a lot of the "how stuff works", I guess 99 out of 100 people using WX can check their work by looking at the GUI... I can check mine using a trackpad on my mac, but it's hardly exact science!

You got pretty close to exact:)

Thanks very much for your suggestions, I'll look over them, and probably hit you with another pletherer of newbie questions!

Please do, if I can't answer I am sure others will chip in.

Have a nice day
Werner

[Nathan_McCorkle]

Have you checked out the demos/samples on the wxpython download page? There are lots of examples of the different sizers there, as well as the basic stuff like labels and text boxes. I looked into the sized_controls a while ago, but I wasn’t convinced enough to try them out… and I seem to be getting along pretty well when it comes to sizers.

As for your main idea, it seems you basically want to define a data structure that defines the GUI layout in some part of the GUI. I did something like this a while ago, and it seemed to work OK. There’s also some DataViewCtrl widgets that do something like this, but I haven’t looked into them much.

···

On Sunday, September 28, 2014 7:19:56 AM UTC-7, Chris Norman wrote:

I have the code for this already, and the whole interface works, but I’m
wondering if there’s a better way than my sizers to do it, possibly with
the sized_controls?

[Werner2]

Hi Chris,

...

One filling the full width of the bottom of the screen (with a label, and I have no clue how big they should be) to the left of it, but with only enough room for one line of text, since commands typically don't span more than one line.

The rest of the screen should be taken up with a truely huge multiline text field which has the output.

I have the code for this already, and the whole interface works, but I'm wondering if there's a better way than my sizers to do it, possibly with the sized_controls?

With sized_controls you use sizers automagically, they use sensible defaults and ensure HIG's complience, but a lot of people prefer to code directly with sizers, so either way is 'correct', the one thing you don't want to do is use hard coded sizes and positions.

Your command entry control would have a "proportion=0" and "flag=wx.EXPAND" and your multiline text field would have "proportion=1" and "flag=wx.EXPAND".

Feel free to send me the code if you like me to look at it and if it is huge convert it to use sized_controls so you get a feel for it.

See you
Werner

···

On 9/28/2014 16:19, Chris Norman wrote:

[Chris_Norman]

That’s great stuff,
Sorry I’ve not replied, the email’s sat in my inbox, and been used as reference material!

Cheers,

···

On 29 Sep 2014, at 08:14, Werner <wernerfbd@gmx.ch> wrote:

Hi Chris,

On 9/28/2014 16:19, Chris Norman wrote:

...

One filling the full width of the bottom of the screen (with a label, and I have no clue how big they should be) to the left of it, but with only enough room for one line of text, since commands typically don't span more than one line.

The rest of the screen should be taken up with a truely huge multiline text field which has the output.

I have the code for this already, and the whole interface works, but I'm wondering if there's a better way than my sizers to do it, possibly with the sized_controls?

With sized_controls you use sizers automagically, they use sensible defaults and ensure HIG's complience, but a lot of people prefer to code directly with sizers, so either way is 'correct', the one thing you don't want to do is use hard coded sizes and positions.

Your command entry control would have a "proportion=0" and "flag=wx.EXPAND" and your multiline text field would have "proportion=1" and "flag=wx.EXPAND".

Feel free to send me the code if you like me to look at it and if it is huge convert it to use sized_controls so you get a feel for it.

See you
Werner

--
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-users+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.