Week 4 Pygtk Glade Dev Continued

Part 2: Using Glade

• Portions of this were adapted from Creating a GUI using PyGTK and Glade

Needed Software

• Glade is a GUI editing application
• If you're on Linux, run the following command

apt-get install python-glade2

• If on Windows, install Glade here

Getting Started

• Glade enables us to lay out an entire user interface without typing a line of code
• What we're going to do is recreate the tic-tac-toe assignment from the previous week
• Now open up glade and create a new project called tictactoe
  • Do this by saving the project and changing the project name

Creating the GUI

• Now drag a new window from the palette into the main Glade window
  • This is the window of your program
• What's the best way to create a tic-tac-toe board?
• We suggest creating a 2 row vbox
  • How does a vbox differ from an hbox?
  • The first row will have a "status label"
  • The second will be a 3x3 table
• Click on the vbox button and click within the rendered window
• Now add a label to the top of the vbox
  • This will serve as the status label
  • 
  • click on it and change the name to statuslabel
• Now add a table from the palette, with dimensions 3x3
  • Insert buttons into each of the cells
  • 
• Click on each button and change their label to ' ' and their name to "top left", "left" in the properties
• Now comes the important part
  • How are we going to know if a button's been clicked?
  • 
  • For each of the buttons, go to the properties, then the Signals, and then "…"
  • Add a "clicked" signal, and give the handler the name "on_btn_clicked" - this is how you will identify a button click in your program
• A couple of final things
  • Also add a destroy signal to the main window
  • Glade will create C files for you - don't worry about them
  • You only care about the XML file generated

On Your Own

• In your code, the following snippets will be very useful

    import gtk
      import gtk.glade

    self.gladefile = "tictactoe.glade"  
    self.wTree = gtk.glade.XML(self.gladefile) 

    #Create our dictionay and connect it
    dic = { "on_btn_clicked" : self.btn_clicked,
        "on_MainWindow_destroy" : gtk.main_quit }
    self.wTree.signal_autoconnect(dic)

• You're going to want to define the function btn_clicked
• Look at the PyGTK API to figure out how to change the status label when a game event occurs
• How are you going to discern between the different buttons on the board when btn_clicked is called?

The Assignment

• Finish up tic-tac-toe!