Differences between revisions 11 and 58 (spanning 47 versions)

Learning wxPython by Example.

Contents

Contents

Learning wxPython by Example.

A Full Example

The following code shows an example of a wxPython application with a frame containing a menu bar, status bar and panel. The panel contains a label and a button that is bound to an exit function. The menu bar has a Help->About action that is bound to a dialog box. The dialog box shows how to display an HTML message and bring up a link in the user's default browser. You might find this example useful as a starting point that you can adapt. In a larger program it would be best to put the about box code into a separate file so that the main program file does not become too large. If this example is too large to start with then see the second example.

Toggle line numbers

   1 #!/usr/bin/python
   2 # -*- coding: <<encoding>> -*-
   3 #-------------------------------------------------------------------------------
   4 #   <<project>>
   5 # 
   6 #-------------------------------------------------------------------------------
   7 
   8 import wxversion
   9 wxversion.select("2.8")
  10 import wx, wx.html
  11 import sys
  12 
  13 aboutText = """<p>Sorry, there is no information about this program. It is
  14 running on version %(wxpy)s of <b>wxPython</b> and %(python)s of <b>Python</b>.
  15 See <a href="http://wiki.wxpython.org">wxPython Wiki</a></p>""" 
  16 
  17 class HtmlWindow(wx.html.HtmlWindow):
  18     def __init__(self, parent, id, size=(600,400)):
  19         wx.html.HtmlWindow.__init__(self,parent, id, size=size)
  20         if "gtk2" in wx.PlatformInfo:
  21             self.SetStandardFonts()
  22 
  23     def OnLinkClicked(self, link):
  24         wx.LaunchDefaultBrowser(link.GetHref())
  25         
  26 class AboutBox(wx.Dialog):
  27     def __init__(self):
  28         wx.Dialog.__init__(self, None, -1, "About <<project>>",
  29             style=wx.DEFAULT_DIALOG_STYLE|wx.THICK_FRAME|wx.RESIZE_BORDER|
  30                 wx.TAB_TRAVERSAL)
  31         hwin = HtmlWindow(self, -1, size=(400,200))
  32         vers = {}
  33         vers["python"] = sys.version.split()[0]
  34         vers["wxpy"] = wx.VERSION_STRING
  35         hwin.SetPage(aboutText % vers)
  36         btn = hwin.FindWindowById(wx.ID_OK)
  37         irep = hwin.GetInternalRepresentation()
  38         hwin.SetSize((irep.GetWidth()+25, irep.GetHeight()+10))
  39         self.SetClientSize(hwin.GetSize())
  40         self.CentreOnParent(wx.BOTH)
  41         self.SetFocus()
  42 
  43 class Frame(wx.Frame):
  44     def __init__(self, title):
  45         wx.Frame.__init__(self, None, title=title, pos=(150,150), size=(350,200))
  46         self.Bind(wx.EVT_CLOSE, self.OnClose)
  47 
  48         menuBar = wx.MenuBar()
  49         menu = wx.Menu()
  50         m_exit = menu.Append(wx.ID_EXIT, "E&xit\tAlt-X", "Close window and exit program.")
  51         self.Bind(wx.EVT_MENU, self.OnClose, m_exit)
  52         menuBar.Append(menu, "&File")
  53         menu = wx.Menu()
  54         m_about = menu.Append(wx.ID_ABOUT, "&About", "Information about this program")
  55         self.Bind(wx.EVT_MENU, self.OnAbout, m_about)
  56         menuBar.Append(menu, "&Help")
  57         self.SetMenuBar(menuBar)
  58         
  59         self.statusbar = self.CreateStatusBar()
  60 
  61         panel = wx.Panel(self)
  62         box = wx.BoxSizer(wx.VERTICAL)
  63         
  64         m_text = wx.StaticText(panel, -1, "Hello World!")
  65         m_text.SetFont(wx.Font(14, wx.SWISS, wx.NORMAL, wx.BOLD))
  66         m_text.SetSize(m_text.GetBestSize())
  67         box.Add(m_text, 0, wx.ALL, 10)
  68         
  69         m_close = wx.Button(panel, wx.ID_CLOSE, "Close")
  70         m_close.Bind(wx.EVT_BUTTON, self.OnClose)
  71         box.Add(m_close, 0, wx.ALL, 10)
  72         
  73         panel.SetSizer(box)
  74         panel.Layout()
  75 
  76     def OnClose(self, event):
  77         dlg = wx.MessageDialog(self, 
  78             "Do you really want to close this application?",
  79             "Confirm Exit", wx.OK|wx.CANCEL|wx.ICON_QUESTION)
  80         result = dlg.ShowModal()
  81         dlg.Destroy()
  82         if result == wx.ID_OK:
  83             self.Destroy()
  84 
  85     def OnAbout(self, event):
  86         dlg = AboutBox()
  87         dlg.ShowModal()
  88         dlg.Destroy()  
  89 
  90 app = wx.App(redirect=True)   # Error messages go to popup window
  91 top = Frame("<<project>>")
  92 top.Show()
  93 app.MainLoop()

A Bare-Bones Application

The following is a minimum wxPython application in the tradition of Hello World:

Toggle line numbers

   1 import wx
   2 
   3 app = wx.App(redirect=True)
   4 top = wx.Frame(None, title="Hello World", size=(300,200))
   5 top.Show()
   6 app.MainLoop()

The first thing to do in the main program is to create the wx.App object that provides the event loop. You need to do this first because some other objects use it behind the scenes. The redirect=True option
The topmost GUI interface element, or widget, is the wx.Frame. All it consists of is an empty rectangular frame with a title bar. In all but this very basic example the frame would be sub-classed to allow the definition of further widgets and call-back functions within it.
The frame and its contents are not displayed automatically. You must explicitly call the Show() function.
At this point the application is visible on the screen but is not responding to events. You must call the MainLoop function to do this but note that once started the event loop never returns. Although no events have been defined explicitly there are some event handlers provided by wxPython. If you click on the X icon on the title bar the application receives a wx.EVT_CLOSE event that tells the application to terminate.

Sub-Classing the Frame

It is common practice use an object-orientated approach as shown here. However, a procedural structure is equally valid and is shown in a subsequent section. To develop this application further you need to add your own frame object before you can add functionality to the wx.Frame.

Toggle line numbers

   1 import wx
   2 
   3 class Frame(wx.Frame):
   4     def __init__(self, title):
   5         wx.Frame.__init__(self, None, title=title, size=(350,200))
   6 
   7 app = wx.App(redirect=True)
   8 top = Frame("Hello World")
   9 top.Show()
  10 app.MainLoop()

If you are not very familiar with using objects in Python you should look closely at this example as sub-classing is used quite frequently in wxPython. In this example the Frame class is based on wx.Frame. Any functions that appear in the derived class will hide those of the same name in the base class. This commonly applies to the __init__ function that is called automatically when a new object is defined. In this case the statement is top = Frame("Hello World"). It is necessary for the derived class to call the __init__ function in the base class explicitly. Note that the first argument is self so that the base class knows what object is being initialized.

Adding an Event Handler

Toggle line numbers

   1 class Frame(wx.Frame):
   2     def __init__(self, title):
   3         wx.Frame.__init__(self, None, title=title, size=(350,200))
   4         self.Bind(wx.EVT_CLOSE, self.OnClose)
   5 
   6     def OnClose(self, event):
   7         dlg = wx.MessageDialog(self, 
   8             "Do you really want to close this application?",
   9             "Confirm Exit", wx.OK|wx.CANCEL|wx.ICON_QUESTION)
  10         result = dlg.ShowModal()
  11         dlg.Destroy()
  12         if result == wx.ID_OK:
  13             self.Destroy()

This example shows how to add a function that will handle the wx.EVT_CLOSE event that is generated when the user clicks on the X icon on the title bar of the frame. The Bind() function tells the event loop the name of the function to call when the event is detected. It is a useful convention to start the name of any event handlers with "On". This helps to ensure that the function name does not clash with one in the base class.

The OnClose function illustrates how to use a message dialog. The ShowModal function not only displays the dialog but also waits for the user to click on one of the buttons. The result is either wx.ID_OK or wx.ID_CANCEL. The Destroy function is used to terminate the application when the OK button is pressed. If self.Close() had been used instead of self.Destroy() the program would get into a loop as a further wx.EVT_CLOSE event would be issued.

An Alternative Program Structure

Since there is only one wx.Frame object there is no need to sub-class it and you can write the whole program as a simple procedure. Since the event handler, OnClose() is no longer a member function of the frame object there is no self argument and so global variables are used instead.

Toggle line numbers

   1 import wx
   2 
   3 def OnClose(event):
   4     dlg = wx.MessageDialog(top, 
   5         "Do you really want to close this application?",
   6         "Confirm Exit", wx.OK|wx.CANCEL|wx.ICON_QUESTION)
   7     result = dlg.ShowModal()
   8     dlg.Destroy()
   9     if result == wx.ID_OK:
  10         top.Destroy()
  11 
  12 app = wx.App(redirect=True)
  13 top = wx.Frame(None, title="Hello World", size=(300,200))
  14 top.Bind(wx.EVT_CLOSE, OnClose)
  15 top.Show()
  16 app.MainLoop()

Adding Content to the Frame

This example shows how to add a menu bar, a status bar and a panel containing a button. The menu bar has only a single File menu but this is extended with a Help menu in the final example.

Toggle line numbers

   1 class Frame(wx.Frame):
   2     def __init__(self, title):
   3         wx.Frame.__init__(self, None, title=title, pos=(150,150), size=(350,200))
   4         self.Bind(wx.EVT_CLOSE, self.OnClose)
   5 
   6         menuBar = wx.MenuBar()
   7         menu = wx.Menu()
   8         m_exit = menu.Append(wx.ID_EXIT, "E&xit\tAlt-X", "Close window and exit program.")
   9         self.Bind(wx.EVT_MENU, self.OnClose, m_exit)
  10         menuBar.Append(menu, "&File")
  11         self.SetMenuBar(menuBar)
  12         
  13         self.statusbar = self.CreateStatusBar()
  14 
  15         panel = wx.Panel(self)
  16         box = wx.BoxSizer(wx.VERTICAL)
  17         
  18         m_text = wx.StaticText(panel, -1, "Hello World!")
  19         m_text.SetFont(wx.Font(14, wx.SWISS, wx.NORMAL, wx.BOLD))
  20         m_text.SetSize(m_text.GetBestSize())
  21         box.Add(m_text, 0, wx.ALL, 10)
  22         
  23         m_close = wx.Button(panel, wx.ID_CLOSE, "Close")
  24         m_close.Bind(wx.EVT_BUTTON, self.OnClose)
  25         box.Add(m_close, 0, wx.ALL, 10)
  26         
  27         panel.SetSizer(box)
  28         panel.Layout()

The full example is based on the wxPython template that is used in the Luke-SDK IDE.

-  ⇤ ← Revision 11 as of 2002-10-30 17:57:35 → 
  Size: 3254
  Editor: anonymous
  Comment: missing edit-log entry for this revision
+   ← Revision 58 as of 2012-06-28 08:10:48 → ⇥
  Size: 10371
  Editor: SWM-HIGH-SPEED2-22
  Comment: Made code use python highlight
-Deletions are marked like this.
+Additions are marked like this.
 Line 1:
-= How to learn wxPython. =

[[TableOfContents]]

We have had a lot of questions on the newsgroup asking how to go about
learning wxPython.  This page gives some pointers on how to do just that.

First of all, if you are new to Python, and especially if you are new
to programming in general, it makes the most sense to learn Python
itself first, without any GUI stuff. This can be frustrating if your
goal is to write GUI programs, and particularly if you have experience
with an environment like Visual Basic in which GUI programming is
integrated into the environment. It is worth it, however, to take some
time to learn about Python. Python is a very powerful language capable
of doing many things both with and without GUIs.

Using wxPython requires a pretty good understanding of Object Oriented
(OO) programming in Python, and all of the tutorials and references that
I will refer to later assume this knowledge.

== Learn Python ==
If you know no programming then this link is your bet:
http://www.python.org/doc/Newbies.html

If you are already familiar with programming but still need to
learn Python, then the Python Tutorial is a good place to start:
http://www.python.org/doc/current/tut/tut.html

Once you have a fundamental understanding of programming in Python, you
can start to learn wxPython for GUI programming.I would suggest starting with the Tutorial. 
It is brief, and not
complete, but it is a good start. You can find it here:

http://wxpython.org/tutorial.php

Once you have gone through that, you might want to go through the
wxPython wiki ["Getting Started"] section:


Between these two, you should have a basic grasp of how wxPython works,
and be ready to make your own application. To do this, you will want two
things: examples and a reference.

The wxPython demo is your best source of examples. It is distributed
with wxPython, and demonstrates virtually all the features of
wxPython. When you run it, you can see how different features work, and
see the source code that made it happen. Many of us look for something
in the demo that is close to what we want to do, copy it, and then alter
it to fit our needs.

== The Comprehensive Demo Files ==
Here is a copy of it attachment:wxPydemo.tar.gz

Another source of examples is the ["wxPython Cookbook"].

== The API ==
The reference manual for wxPython is the same as the reference for the
C++ version of wxWindows, and can be found here:

http://www.wxpython.org/onlinedocs.php

It is written in C++ syntax, with notes inserted when the Python
implementation differs from the C++. The fact that the docs are written
for C++ is unfortunate, not because they aren't useful to Python
programmers, but because is can be very intimidating to new users who
don't know C++. In fact, many Python programmers who don't know a bit of
C++ find that the docs can be very useful. It only takes a little while
to learn to translate from the C++ in the docs to the equivalent
Python. One of the best ways to learn to do this is to compare code from
the examples in the wxPython demo to what is in the reference manual.  There
is also the ["C++GuideForwxPythoneers"] page on this site to help you further.
+= Learning wxPython by Example. =

'''Contents'''
<<TableOfContents(2)>>

== A Full Example ==

The following code shows an example of a wxPython application with a frame containing a menu bar, status bar and panel. The panel contains a label and a button that is bound to an exit function. The menu bar has a Help->About action that is bound to a dialog box.  The dialog box shows how to display an HTML message and bring up a link in the user's default browser. You might find this example useful as a starting point that you can adapt. In a larger program it would be best to put the about box code into a separate file so that the main program file does not become too large. If this example is too large to start with then see the second example.

{{{
#!python
#!/usr/bin/python
# -*- coding: <<encoding>> -*-
#-------------------------------------------------------------------------------
#   <<project>>
# 
#-------------------------------------------------------------------------------

import wxversion
wxversion.select("2.8")
import wx, wx.html
import sys

aboutText = """<p>Sorry, there is no information about this program. It is
running on version %(wxpy)s of <b>wxPython</b> and %(python)s of <b>Python</b>.
See <a href="http://wiki.wxpython.org">wxPython Wiki</a></p>""" 

class HtmlWindow(wx.html.HtmlWindow):
    def __init__(self, parent, id, size=(600,400)):
        wx.html.HtmlWindow.__init__(self,parent, id, size=size)
        if "gtk2" in wx.PlatformInfo:
            self.SetStandardFonts()

    def OnLinkClicked(self, link):
        wx.LaunchDefaultBrowser(link.GetHref())
        
class AboutBox(wx.Dialog):
    def __init__(self):
        wx.Dialog.__init__(self, None, -1, "About <<project>>",
            style=wx.DEFAULT_DIALOG_STYLE|wx.THICK_FRAME|wx.RESIZE_BORDER|
                wx.TAB_TRAVERSAL)
        hwin = HtmlWindow(self, -1, size=(400,200))
        vers = {}
        vers["python"] = sys.version.split()[0]
        vers["wxpy"] = wx.VERSION_STRING
        hwin.SetPage(aboutText % vers)
        btn = hwin.FindWindowById(wx.ID_OK)
        irep = hwin.GetInternalRepresentation()
        hwin.SetSize((irep.GetWidth()+25, irep.GetHeight()+10))
        self.SetClientSize(hwin.GetSize())
        self.CentreOnParent(wx.BOTH)
        self.SetFocus()

class Frame(wx.Frame):
    def __init__(self, title):
        wx.Frame.__init__(self, None, title=title, pos=(150,150), size=(350,200))
        self.Bind(wx.EVT_CLOSE, self.OnClose)

        menuBar = wx.MenuBar()
        menu = wx.Menu()
        m_exit = menu.Append(wx.ID_EXIT, "E&xit\tAlt-X", "Close window and exit program.")
        self.Bind(wx.EVT_MENU, self.OnClose, m_exit)
        menuBar.Append(menu, "&File")
        menu = wx.Menu()
        m_about = menu.Append(wx.ID_ABOUT, "&About", "Information about this program")
        self.Bind(wx.EVT_MENU, self.OnAbout, m_about)
        menuBar.Append(menu, "&Help")
        self.SetMenuBar(menuBar)
        
        self.statusbar = self.CreateStatusBar()

        panel = wx.Panel(self)
        box = wx.BoxSizer(wx.VERTICAL)
        
        m_text = wx.StaticText(panel, -1, "Hello World!")
        m_text.SetFont(wx.Font(14, wx.SWISS, wx.NORMAL, wx.BOLD))
        m_text.SetSize(m_text.GetBestSize())
        box.Add(m_text, 0, wx.ALL, 10)
        
        m_close = wx.Button(panel, wx.ID_CLOSE, "Close")
        m_close.Bind(wx.EVT_BUTTON, self.OnClose)
        box.Add(m_close, 0, wx.ALL, 10)
        
        panel.SetSizer(box)
        panel.Layout()

    def OnClose(self, event):
        dlg = wx.MessageDialog(self, 
            "Do you really want to close this application?",
            "Confirm Exit", wx.OK|wx.CANCEL|wx.ICON_QUESTION)
        result = dlg.ShowModal()
        dlg.Destroy()
        if result == wx.ID_OK:
            self.Destroy()

    def OnAbout(self, event):
        dlg = AboutBox()
        dlg.ShowModal()
        dlg.Destroy()  

app = wx.App(redirect=True)   # Error messages go to popup window
top = Frame("<<project>>")
top.Show()
app.MainLoop()
}}}

== A Bare-Bones Application ==

The following is a minimum wxPython application in the tradition of Hello World:

{{{
#!python
import wx

app = wx.App(redirect=True)
top = wx.Frame(None, title="Hello World", size=(300,200))
top.Show()
app.MainLoop()
}}}

 * The first thing to do in the main program is to create the wx.App object that provides the event loop. You need to do this first because some other objects use it behind the scenes. The `redirect=True` option 

 * The topmost GUI interface element, or ''widget'', is the `wx.Frame`. All it consists of is an empty rectangular frame with a title bar. In all but this very basic example the frame would be sub-classed to allow the definition of further widgets and call-back functions within it. 
 * The frame and its contents are not displayed automatically. You must explicitly call the `Show()` function.
 * At this point the application is visible on the screen but is not responding to events. You must call the `MainLoop` function to do this but note that once started the event loop never returns. Although no events have been defined explicitly there are some event handlers provided by wxPython. If you click on the X icon on the title bar the application receives a `wx.EVT_CLOSE` event that tells the application to terminate. 

== Sub-Classing the Frame ==
It is common practice use an object-orientated approach as shown here. However, a procedural structure is equally valid and is shown in a subsequent section.
To develop this application further you need to add your own frame object before you can add functionality to the `wx.Frame`.

{{{
#!python
import wx

class Frame(wx.Frame):
    def __init__(self, title):
        wx.Frame.__init__(self, None, title=title, size=(350,200))

app = wx.App(redirect=True)
top = Frame("Hello World")
top.Show()
app.MainLoop()
}}}

If you are not very familiar with using objects in Python you should look closely at this example as sub-classing is used quite frequently in wxPython. In this example the Frame class is based on `wx.Frame`. Any functions that appear in the derived class will hide those of the same name in the base class. This commonly applies to the `__init__` function that is called automatically when a new object is defined. In this case the statement is `top = Frame("Hello World")`. It is necessary for the derived class to call the `__init__` function in the base class explicitly. Note that the first argument is `self` so that the base class knows what object is being initialized. 

== Adding an Event Handler ==
{{{
#!python
class Frame(wx.Frame):
    def __init__(self, title):
        wx.Frame.__init__(self, None, title=title, size=(350,200))
        self.Bind(wx.EVT_CLOSE, self.OnClose)

    def OnClose(self, event):
        dlg = wx.MessageDialog(self, 
            "Do you really want to close this application?",
            "Confirm Exit", wx.OK|wx.CANCEL|wx.ICON_QUESTION)
        result = dlg.ShowModal()
        dlg.Destroy()
        if result == wx.ID_OK:
            self.Destroy()
}}}

This example shows how to add a function that will handle the `wx.EVT_CLOSE` event that is generated when the user clicks on the X icon on the title bar of the frame. The `Bind()` function tells the event loop the name of the function to call when the event is detected. It is a useful convention to start the name of any event handlers with "On". This helps to ensure that the function name does not clash with one in the base class.

The `OnClose` function illustrates how to use a message dialog. The `ShowModal` function not only displays the dialog but also waits for the user to click on one of the buttons. The result is either `wx.ID_OK` or `wx.ID_CANCEL`. The Destroy function is used to terminate the application when the OK button is pressed. If `self.Close()` had been used instead of `self.Destroy()` the program would get into a loop as a further `wx.EVT_CLOSE` event would be issued.  

== An Alternative Program Structure ==
Since there is only one `wx.Frame` object there is no need to sub-class it and you can write the whole program as a simple procedure. Since the event handler, `OnClose()` is no longer a member function of the frame object there is no `self` argument and so global variables are used instead.

{{{
#!python
import wx

def OnClose(event):
    dlg = wx.MessageDialog(top, 
        "Do you really want to close this application?",
        "Confirm Exit", wx.OK|wx.CANCEL|wx.ICON_QUESTION)
    result = dlg.ShowModal()
    dlg.Destroy()
    if result == wx.ID_OK:
        top.Destroy()

app = wx.App(redirect=True)
top = wx.Frame(None, title="Hello World", size=(300,200))
top.Bind(wx.EVT_CLOSE, OnClose)
top.Show()
app.MainLoop()
}}}

== Adding Content to the Frame ==
This example shows how to add a menu bar, a status bar and a panel containing a button. The menu bar has only a single File menu but this is extended with a Help menu in the final example. 

{{{
#!python
class Frame(wx.Frame):
    def __init__(self, title):
        wx.Frame.__init__(self, None, title=title, pos=(150,150), size=(350,200))
        self.Bind(wx.EVT_CLOSE, self.OnClose)

        menuBar = wx.MenuBar()
        menu = wx.Menu()
        m_exit = menu.Append(wx.ID_EXIT, "E&xit\tAlt-X", "Close window and exit program.")
        self.Bind(wx.EVT_MENU, self.OnClose, m_exit)
        menuBar.Append(menu, "&File")
        self.SetMenuBar(menuBar)
        
        self.statusbar = self.CreateStatusBar()

        panel = wx.Panel(self)
        box = wx.BoxSizer(wx.VERTICAL)
        
        m_text = wx.StaticText(panel, -1, "Hello World!")
        m_text.SetFont(wx.Font(14, wx.SWISS, wx.NORMAL, wx.BOLD))
        m_text.SetSize(m_text.GetBestSize())
        box.Add(m_text, 0, wx.ALL, 10)
        
        m_close = wx.Button(panel, wx.ID_CLOSE, "Close")
        m_close.Bind(wx.EVT_BUTTON, self.OnClose)
        box.Add(m_close, 0, wx.ALL, 10)
        
        panel.SetSizer(box)
        panel.Layout()

}}}

-----
The full example is based on the wxPython template that is used in the [[http://luke-sdk.berlios.de|Luke-SDK ]] IDE.

Diff for "wxPython by Example"

Learning wxPython by Example.

A Full Example

A Bare-Bones Application

Sub-Classing the Frame

Adding an Event Handler

An Alternative Program Structure

Adding Content to the Frame