Week 4 Pygtk Glade Dev Continued

Part 2: Using 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
    • 1.jpg
    • 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
    • 2.jpg
  • 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?
    • 3.jpg
    • 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!
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License