Photobucket

Thursday, July 7, 2011

How to create a User Interface (UI) using Glade and pygtk - 2

So this is part 2 in which I am going to explain controlling UI. You can find part 1 here. The coding part will be done in python in this post but you can also do the same in C


PART 2: "Being the God to your UI"
Before we go into the coding you need to understand what I mean by 'controlling'.It is how you would want the application to respond to user clicking and stuff like that. So for this what actually happens is something like this ....


Little Introduction:
There is something called an 'X server' running on your comp. Long long ago when there used to be long bearded hippie coders in front of giant sized terminals and everyone used mechanical keyboards. The main 'X server' would actually be running some place else on some main computer with lots of computing power . Now anyone who wants a window, suppose a gedit window, would request this 'Xserver' to send it a window of gedit You could have asked from any room in your university and the main computer which is running the server will send the data to your machine on how to render this window. 


So your machine just renders this on the screen. When you suppose click on some place, this X server is the one which gets to know where you clicked and it will hand these events to your application so that you can control what happens when a particular event occurs. So the X events include mouse click, key-press, key-release and many more which the 'X server' captures and tells your application about it if it is relevant to it.


To summarize what I said in the last paragraph, there are things called events which you need to handle which is the final step to make UI.


Let us get started.
Select the 'Signals' tab of the button and under 'GtkButton' select the 'clicked' event and under the Handler column for this event select a function name which you would like to define soon. I chose 'on_button1_clicked' .
Some thing like this


Save the file. Now you are ready for coding.
Here is how your python file can be.
import gtk, gobject

class UI:

    def main(self):
        builder = gtk.Builder()
        builder.add_from_file("/home/devesh/Desktop/test2.glade")
        signal_connections = { "on_button1_clicked" : self.myFunc}
        builder.connect_signals( signal_connections)

        self.button = builder.get_object("button1")

        self.window = builder.get_object("window1")

        self.window.show_all()
        gtk.main()

    def myFunc(self, arg):
        print 'Hi'
        
ui = UI()

if __name__ == "__main__":
    ui.main()


If you haven't changed the names of the button and window items in your glade file then the important things which you need to change in this file to get your UI working are
line 7 : File position
line 8 : Function name which you chose in the glade file.


Now you are good to go. Just save the python file and run it. You should see a window as soon as you run the python file. Click on the button to get a 'Hi' in your terminal. Notice that the window you get will be only a small one. It won't be too large. This is because there aren't any elements in the window which occupy additional space.


You can find both the python code and glade file here


Brief explanation of the code
Line 8: Creating a dictionary of handler functions which you are going to use for particular events.
Line 9: Connecting the signals
Line 16: when you do gtk.main(), this is when your application starts listening for any events. So basically inside the gtk.main() function all that is happening is a continuous infinite while loop 'while(1)' which keeps looking for events and then calls your corresponding function as and when it hears one.


I can't recall what resources I had used to read about all this but seems like this is a good one.
http://www.pygtk.org/pygtk2tutorial/

Ignore the 'Read more' button here. This is the end of the post.

3 comments:

  1. Great tutorial dude. Many thanks...

    ReplyDelete
  2. Nice one da!
    Why not monospace font for the code?

    ReplyDelete
  3. Nice, I'm really glad you did this tutorial :-). There is a lack of simple "how-to" glade tutorials out there.

    I agree with Sujeet on the monospace, but also think on a tangential point the blog theme might be made a little simpler; it's a bit hard to read the text with the weird background.

    ReplyDelete