Creating the Layout - Python

wxPython is a library that makes it easy for Python programmers to build graphical user interfaces. Over the past few weeks, you have seen some articles covering this library. This week, you will learn how to create a simple but useful application with wxPython.

TABLE OF CONTENTS:

By: Peyton McCullough

Poor Best

Rating:

/ 17

July 13, 2005

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Let's start with a frame and make our way forward. Go ahead and put down the basics:

from wxPython.wx import *

class CalculatorFrame ( wxFrame ):
   def __init__ ( self ):
      wxFrame.__init__ ( self, None, -1, 'PyCalc' )
      self.Show ( True )
calculator = wxPySimpleApp()
CalculatorFrame()
calculator.MainLoop()

Now we'll add the wxGridBagSizer and the display. Borders of 1 and 1 look good with our calculator, though you can pick whatever reasonable (or unreasonable) value you want:

from wxPython.wx import *
class CalculatorFrame ( wxFrame ):
   def __init__ ( self ):
      wxFrame.__init__ ( self, None, -1, 'PyCalc' )
      # Create a panel
      self.panel = wxPanel ( self, -1 )
      # Create a wxGridBagSizer
      self.sizer = wxGridBagSizer ( 1, 1 )
      # Add a display that takes up the whole row
      self.display = wxTextCtrl ( self.panel, -1, '0.', style = wxTE_READONLY | wxTE_RIGHT )
      self.sizer.Add ( self.display, ( 0, 0 ), ( 1, 5 ), wxEXPAND )
      # Attach the sizer and adjust the frame size
      self.panel.SetSizerAndFit ( self.sizer )
      self.SetClientSize ( self.panel.GetSize() )
      self.Show ( True )
calculator = wxPySimpleApp()
CalculatorFrame()
calculator.MainLoop()

If you execute our calculator, it looks horrid, but I promise you that things will improve once we're finished. Next come the buttons. Instead of calling wxGridBagSizer's Add method over a dozen times, we'll create a list for our buttons. The list will contain one list for each row. These lists will contain one list for each button, which will contain the button's text and the button's ID number. For spaces we do not want to occupy with buttons, we will put in None. This may sound complicated in a paragraph, but it makes a lot more sense when we put it in Python. We will then add everything to the grid with a loop:

from wxPython.wx import *
class CalculatorFrame ( wxFrame ):
   def __init__ ( self ):
      wxFrame.__init__ ( self, None, -1, 'PyCalc' )
      self.panel = wxPanel ( self, -1 )
      self.sizer = wxGridBagSizer ( 1, 1 )
      self.display = wxTextCtrl ( self.panel, -1, '0.', style = wxTE_READONLY | wxTE_RIGHT )
      self.sizer.Add ( self.display, ( 0, 0 ), ( 1, 5 ), wxEXPAND )
      # Create the list of lists of lists of buttons
      buttons = [ [ None, None, None, None, None ], \
                  [ [ 'M+', 100 ], [ '1', 1 ], [ '2', 2 ], [ '3', 3 ], [ '+', 200 ] ], \
                  [ [ 'M-', 101 ], [ '4', 4 ], [ '5', 5 ], [ '6', 6 ], [ '-', 201 ] ], \
                  [ [ 'MR', 102 ], [ '7', 7 ], [ '8', 8 ], [ '9', 9 ], [ '*', 202 ] ], \
                  [ None, [ '.', 103 ], [ '0', 0 ], [ '=', 104 ], [ '/', 203 ] ], \
                  [ None, None, [ 'B', 105 ], [ '+/-', 106 ], [ 'sqrt', 204 ] ] ]
      # Add the buttons
      x = y = 0
      for row in buttons:
         for button in row:
            if button == None:
               x = x + 1
               continue
            self.sizer.Add ( wxButton ( self.panel, button [ 1 ], button [ 0 ], size = ( 30, 30 ) ), ( y, x ) )
            x = x + 1
         x = 0
         y = y + 1
      self.panel.SetSizerAndFit ( self.sizer )
      self.SetClientSize ( self.panel.GetSize() )
      self.Show ( True )
calculator = wxPySimpleApp()
CalculatorFrame()
calculator.MainLoop()

Finally, we'll add our memory display and our two-column clear button:

from wxPython.wx import *
class CalculatorFrame ( wxFrame ):
   def __init__ ( self ):
      wxFrame.__init__ ( self, None, -1, 'PyCalc' )
      self.panel = wxPanel ( self, -1 )
      self.sizer = wxGridBagSizer ( 1, 1 )
      self.display = wxTextCtrl ( self.panel, -1, '0.', style = wxTE_READONLY | wxTE_RIGHT )
      self.sizer.Add ( self.display, ( 0, 0 ), ( 1, 5 ), wxEXPAND )
      # Add the memory display and center everything
      self.memoryDisplay = wxStaticText ( self.panel, -1, '0', style = wxALIGN_CENTER )
     self.sizer.Add ( self.memoryDisplay, ( 4, 0 ), ( 1, 1 ), wxALIGN_CENTER )
      # Add the two-column clear button
      self.sizer.Add ( wxButton ( self.panel, 107, 'Clear', size = ( 30, 30 ) ), ( 5, 0 ), ( 1, 2 ), wxEXPAND )
      buttons = [ [ None, None, None, None, None ], \
                  [ [ 'M+', 100 ], [ '1', 1 ], [ '2', 2 ], [ '3', 3 ], [ '+', 200 ] ], \
                  [ [ 'M-', 101 ], [ '4', 4 ], [ '5', 5 ], [ '6', 6 ], [ '-', 201 ] ], \
                  [ [ 'MR', 102 ], [ '7', 7 ], [ '8', 8 ], [ '9', 9 ], [ '*', 202 ] ], \
                  [ None, [ '.', 103 ], [ '0', 0 ], [ '=', 104 ], [ '/', 203 ] ], \
                  [ None, None, [ 'B', 105 ], [ '+/-', 106 ], [ 'sqrt', 204 ] ] ]
      x = y = 0
      for row in buttons:
         for button in row:
            if button == None:
               x = x + 1
               continue
            self.sizer.Add ( wxButton ( self.panel, button [ 1 ], button [ 0 ], size = ( 30, 30 ) ), ( y, x ) )
            x = x + 1
         x = 0
         y = y + 1
      self.panel.SetSizerAndFit ( self.sizer )
      self.SetClientSize ( self.panel.GetSize() )
      self.Show ( True )
calculator = wxPySimpleApp()
CalculatorFrame()
calculator.MainLoop()