standard trick for OK/Cancel buttons?

Joe_Strout · October 30, 2008, 9:09pm

The OK and Cancel buttons are pretty common on modal dialogs, and have a standard look and behavior which varies between platforms -- for example, OK should be on the right on the Mac, but on the left on Windows.

I know there are some standard dialogs that have OK and Cancel buttons, and probably take care of that for me. But if I'm making my own custom dialog, is there any easy built-in trick for adding a pair of such buttons, getting the right position and behavior on each platform?

If not, it's easy enough to code myself, but I hate to reinvent the wheel if I don't have to...

Thanks,
- Joe

Phil_Mayes1 · October 30, 2008, 9:25pm

You need StdDialogButtonSizer.

Phil

···

At 02:09 PM 10/30/2008, you wrote:

The OK and Cancel buttons are pretty common on modal dialogs, and have
a standard look and behavior which varies between platforms -- for
example, OK should be on the right on the Mac, but on the left on
Windows.

I know there are some standard dialogs that have OK and Cancel
buttons, and probably take care of that for me. But if I'm making my
own custom dialog, is there any easy built-in trick for adding a pair
of such buttons, getting the right position and behavior on each
platform?

If not, it's easy enough to code myself, but I hate to reinvent the
wheel if I don't have to...

Thanks,
- Joe

Joe_Strout · October 30, 2008, 9:54pm

Yes, that's exactly what I was looking for. Thanks!

Best,
- Joe

···

On Oct 30, 2008, at 3:25 PM, Phil Mayes wrote:

You need StdDialogButtonSizer.

driscollis · October 31, 2008, 1:58pm

Phil Mayes wrote:

···

At 02:09 PM 10/30/2008, you wrote:

The OK and Cancel buttons are pretty common on modal dialogs, and have
a standard look and behavior which varies between platforms -- for
example, OK should be on the right on the Mac, but on the left on
Windows.

I know there are some standard dialogs that have OK and Cancel
buttons, and probably take care of that for me. But if I'm making my
own custom dialog, is there any easy built-in trick for adding a pair
of such buttons, getting the right position and behavior on each
platform?

If not, it's easy enough to code myself, but I hate to reinvent the
wheel if I don't have to...

Thanks,
- Joe

You need StdDialogButtonSizer.

Phil

I thought you could use the standard IDs as well. So the OKBtn would have wx.ID_OK and the CancelBtn would have wx.ID_CANCEL or whatever. At least, that's supposed to work for menus...

Mike

Joe_Strout · October 31, 2008, 2:07pm

In my testing, you can (and probably should) use the standard IDs -- in fact that will get you a platform (and perhaps locale?) standard caption. But it will not, by itself, position and size the buttons correctly. StdDialogButtonSizer does that.

Best,
- Joe

···

On Oct 31, 2008, at 7:58 AM, Mike Driscoll wrote:

You need StdDialogButtonSizer.

I thought you could use the standard IDs as well. So the OKBtn would have wx.ID_OK and the CancelBtn would have wx.ID_CANCEL or whatever. At least, that's supposed to work for menus...

driscollis · October 31, 2008, 2:40pm

Joe,

···

On Oct 31, 2008, at 7:58 AM, Mike Driscoll wrote:

You need StdDialogButtonSizer.

I thought you could use the standard IDs as well. So the OKBtn would have wx.ID_OK and the CancelBtn would have wx.ID_CANCEL or whatever. At least, that's supposed to work for menus...

In my testing, you can (and probably should) use the standard IDs -- in fact that will get you a platform (and perhaps locale?) standard caption. But it will not, by itself, position and size the buttons correctly. StdDialogButtonSizer does that.

Best,
- Joe

This should be in the wiki and/or the demo then. I tried to come up with a simple example, but I've never used this sizer and can't seem to quite get it.

Mike

Joe_Strout · October 31, 2008, 2:53pm

In my testing, you can (and probably should) use the standard IDs -- in fact that will get you a platform (and perhaps locale?) standard caption. But it will not, by itself, position and size the buttons correctly. StdDialogButtonSizer does that.

This should be in the wiki and/or the demo then. I tried to come up with a simple example, but I've never used this sizer and can't seem to quite get it.

I agree -- in fact I searched through the demo before posting my question (and came up empty-handed). Here's how I'm using it in my dialog:

class MemberEntryWindow(Window):
     def __init__(self, title = "Member"):
         Window.__init__(self, title, size=(
                 (80+200+8)*2 + gui.SIDE_MARGIN*2 + 16,451),
                 style=wx.SYSTEM_MENU | wx.CAPTION
                     > wx.CLOSE_BOX | wx.MINIMIZE_BOX)
         panel = wx.Panel(self)

vbox = wx.BoxSizer(wx.VERTICAL)
panel.SetSizer(vbox)

# ... add all my other controls ...

         buttonsBox = wx.StdDialogButtonSizer()
         vbox.Add(buttonsBox, 0,
                  wx.ALIGN_RIGHT | wx.LEFT | wx.RIGHT, gui.SIDE_MARGIN)
         cancelButn = wx.Button(panel, wx.ID_CANCEL)
         buttonsBox.AddButton(cancelButn)
         okButn = wx.Button(panel, wx.ID_OK)
         buttonsBox.AddButton(okButn)
         okButn.SetDefault()
         buttonsBox.Realize()

cancelButn.Bind(wx.EVT_BUTTON, self.OnCancel)
okButn.Bind(wx.EVT_BUTTON, self.OnOK)

This seems to work for me (but I'm still a newbie to wxPython, and confess that I still get confused by sizers on occasion, so if I'm doing anything pointless or silly in the above, I hope someone will point it out).

I haven't tested this on Windows or Linux yet, but I can confirm that on the Mac, the OK button appears on the right where it belongs. It should be on the left on other platforms.

For the wiki, I would guess the most appropriate place would be here?
<http://wiki.wxpython.org/SizerTutorials>

I don't know what to make of the bit there about "Until I get them all moved over" though (and who is "I" in a wiki that can be edited by anybody?).

As for the demo, how does one go about contributing to that?

Best,
- Joe

···

On Oct 31, 2008, at 8:40 AM, Mike Driscoll wrote:

Mike_Driscoll1 · October 31, 2008, 3:01pm

Joe Strout wrote:

In my testing, you can (and probably should) use the standard IDs -- in fact that will get you a platform (and perhaps locale?) standard caption. But it will not, by itself, position and size the buttons correctly. StdDialogButtonSizer does that.

This should be in the wiki and/or the demo then. I tried to come up with a simple example, but I've never used this sizer and can't seem to quite get it.

I agree -- in fact I searched through the demo before posting my question (and came up empty-handed). Here's how I'm using it in my dialog:

class MemberEntryWindow(Window):
    def __init__(self, title = "Member"):
        Window.__init__(self, title, size=(
                (80+200+8)*2 + gui.SIDE_MARGIN*2 + 16,451),
                style=wx.SYSTEM_MENU | wx.CAPTION
                    > wx.CLOSE_BOX | wx.MINIMIZE_BOX)
        panel = wx.Panel(self)

        vbox = wx.BoxSizer(wx.VERTICAL)
        panel.SetSizer(vbox)

    # ... add all my other controls ...

        buttonsBox = wx.StdDialogButtonSizer()
        vbox.Add(buttonsBox, 0,
                 wx.ALIGN_RIGHT | wx.LEFT | wx.RIGHT, gui.SIDE_MARGIN)
        cancelButn = wx.Button(panel, wx.ID_CANCEL)
        buttonsBox.AddButton(cancelButn)
        okButn = wx.Button(panel, wx.ID_OK)
        buttonsBox.AddButton(okButn)
        okButn.SetDefault()
        buttonsBox.Realize()

        cancelButn.Bind(wx.EVT_BUTTON, self.OnCancel)
        okButn.Bind(wx.EVT_BUTTON, self.OnOK)

This seems to work for me (but I'm still a newbie to wxPython, and confess that I still get confused by sizers on occasion, so if I'm doing anything pointless or silly in the above, I hope someone will point it out).

I haven't tested this on Windows or Linux yet, but I can confirm that on the Mac, the OK button appears on the right where it belongs. It should be on the left on other platforms.

For the wiki, I would guess the most appropriate place would be here?
   <http://wiki.wxpython.org/SizerTutorials>

I don't know what to make of the bit there about "Until I get them all moved over" though (and who is "I" in a wiki that can be edited by anybody?).

As for the demo, how does one go about contributing to that?

Best,
- Joe

Oops. I wrote that entire section and accidentally left that statement in there because I didn't know how long it would take to transfer my sizer tutorials from my blog to the wiki. They're all on the wiki now, so I just deleted that sentence. I do plan on writing a few more tutorials on this subject as there are a few more sizers to write about, but I've been distracted by our local Python Users Group and other coding examples.

If you do write a tutorial, be sure to also show how to set the orientation of the buttons.

Mike

···

On Oct 31, 2008, at 8:40 AM, Mike Driscoll wrote:

Chris_Barker1 · October 31, 2008, 6:35pm

Joe Strout wrote:

For the wiki, I would guess the most appropriate place would be here?
<http://wiki.wxpython.org/SizerTutorials>

Good, but put a link to it here also:

http://wiki.wxpython.org/Optimizing%20for%20Mac%20OS%20X

as it's mostly an issue when you're trying to make cross-platfrom apps look Mac-native.

-Chris

···

--
Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Barker@noaa.gov

Joe_Strout · October 31, 2008, 7:30pm

Or, in my case, make cross-platform apps like Windows- or Linux-native when they happen to be running on those platforms!

Best,
- Joe

···

On Oct 31, 2008, at 12:35 PM, Christopher Barker wrote:

Good, but put a link to it here also:

Optimizing for Mac OS X - wxPyWiki

as it's mostly an issue when you're trying to make cross-platfrom apps look Mac-native.

Chris_Barker1 · October 31, 2008, 8:09pm

Joe Strout wrote:

Or, in my case, make cross-platform apps like Windows- or Linux-native when they happen to be running on those platforms!

good point. Perhaps we need a Wiki Page for "Developing Cross-platform apps with native look and feel", though, in theory, that's what you're always trying to do with wx....

-Chris

···

--
Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Barker@noaa.gov

Robin · November 1, 2008, 1:40am

Joe Strout wrote:

As for the demo, how does one go about contributing to that?

Just write a module that starts out looking like template.py and send it to me, or submit it as a patch at http://trac.wxwidgets.org/

···

--
Robin Dunn
Software Craftsman
http://wxPython.org Java give you jitters? Relax with wxPython!

roee_shlomo · November 1, 2008, 10:27pm

You can also use the wxDialog methods CreateButtonSizer and CreateSeparatedButtonSizer

Here is a little example:

···

import wx

class MyDlg(wx.Dialog):
def init(self, *args, **kwargs):
wx.Dialog.init(self, *args, **kwargs)

Create a sizer

sizer = wx.BoxSizer(wx.VERTICAL)

Add some stuff…

sizer.Add(self.CreateTextSizer(“Just Some Text”), 0, wx.EXPAND|wx.ALL, 2)
sizer.Add(wx.TextCtrl(self, -1, style=wx.TE_MULTILINE), 1, wx.EXPAND|wx.ALL, 5)

Add Button Sizer

sizer.Add(self.CreateSeparatedButtonSizer(wx.OK|wx.CANCEL)) # or CreateButtonSizer
self.Bind(wx.EVT_BUTTON, self.onOK, id = wx.ID_OK) # custom event handler for OK button

Set sizer

self.SetSizerAndFit(sizer)

def onOK(self, event):
print “you clicked ok…”
self.EndModal(wx.ID_OK) # or event.Skip()

if name == “main”:
app = wx.App(0)
dlg = MyDlg(None, title = “Simple Dialog”)
dlg.ShowModal()
dlg.Destroy()

On Thu, Oct 30, 2008 at 11:09 PM, Joe Strout joe@strout.net wrote:

The OK and Cancel buttons are pretty common on modal dialogs, and have a standard look and behavior which varies between platforms – for example, OK should be on the right on the Mac, but on the left on Windows.

I know there are some standard dialogs that have OK and Cancel buttons, and probably take care of that for me. But if I’m making my own custom dialog, is there any easy built-in trick for adding a pair of such buttons, getting the right position and behavior on each platform?

If not, it’s easy enough to code myself, but I hate to reinvent the wheel if I don’t have to…

Thanks,

Joe

wxpython-users mailing list

wxpython-users@lists.wxwidgets.org

http://lists.wxwidgets.org/mailman/listinfo/wxpython-users