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

This is a very basic tutorial to just get started on making small GUI.
I use Ubuntu but I believe any linux distro must do. Part 2 of this is specific to python but you could also do similar things with pure C.


<Important Fart>
I have decided to help readers by identifying the various parts of my posts as fart or not.This way anyone can dive into the actual stuff without having to bear with my runblings :D .
</Important Fart>


<Fart>
So yesterday night I had tried to give a small talk on the IRC channel #iitm-linux about GUI programming. I had intended to give the talk mainly based on what I had learnt during my first year summer as part of writing an application for Shaastra Distro( Shaastra-2010). 


So the main thing which irritated me initially while writing the application was that although I could drag and drop in Glade I couldn't exactly just drag and drop things at the location where I wanted. If I wanted a button at say location 70,30 in the window, I just couldn't place it there directly.And more irritating was that I couldn't even set the size of the button as I had wanted. 


It was not until later that I realized why was it like that and why that was actually a better way to make a UI. I might not have made much sense till now but you will understand what I mean as you proceed along this post. Ofcourse making UI has lot more things than just this dragging and dropping but, to me as a beginner, the most irritating part was this. That is why, although using glade is just something which you get after playing around with it for sometime, I am including it in this tutorial.
</Fart>


We Begin
To make UI there are two parts
One is to design how the application should look, where must a button be placed etc. The other part and the _important & interesting_ part is controlling how your app reacts to user inputs like clicking on buttons or pressing keys on the keyboard.


The easy way to do this is by using glade for the first part and using pygtk coding in python for the second part. This is the link to jump directly into part2


PART 1 : "Dragging and Dropping"


Little Introduction:
Most of the applications based in gnome desktop environment use gtk to show the UI. What is there in the gtk libraries are definitions of various types of objects possible i.e, windows, buttons and stuff like that. So what we try to do is use these libraries to create windows, button etc by setting various properties of these GTKObjects like width, height name, etc and assigning locations to these objects.
We do all this using glade to make our life easier and save time.


So first, install Glade software if you don't have it.
Open up glade. If a smaller window opens asking for some details and stuff like that just close it or click Ok.So first thing you need is a top level window. From your left side menu choose a window and just click on it. You should have it in your main space. You can see that on the right hand side towards the lower half all the window's properties.


Basically you will need to play around with them if you are making UI but in this intro I will just point you to some important things you can tweak in those properties on the right bottom. Name, resizable, default height, width etc can be changed in the 'General' settings tab. Right now you won't need to change anything in 'Signals' tab but that will come in Part 2.So I would suggest playing around a bit at this point in the tut.


Your glade window should look like this.

So now .. if you are done with playing around with those properties we shall proceed.
Important point to note is - when you intend to make UI, the best way to make it is by imagining the whole space into vertical and horizontal boxes. This is how glade wants you to make it. You will understand what I mean as you proceed.


I will use something called horizontal boxes and vertical boxes first. You can find Horizontal boxes and vertical boxes in the left side menu under containers.
Here are steps to follow


1) Click on vertical box
2) Place the vertical box on the window
3) Choose the number of Partitions to 2
4) Click on horizontal box
5) Choose the number to 3 after placing it into the bottom half of the vertical box.
It should look something like this

6) Click on button from left side panel and place it into the centre of the 3 partitions in the horizontal box.


You will observe the button to be huge in size and ugly. Choose the button now in the hierarchy on the top right and go to the 'Packing' tab in the bottom right.


7)Make the 'Fill' and 'Expand' properties to 'No'
8) Go to 'Common' tab and check the width request and height request boxes and fill both of them with a value 50 .


You will observe that the button is not exactly square. Now select the hbox from the hierarchy and go to its 'Packing' tab . And here again make the 'Fill' and 'Expand' property to 'No'. Now you will observe that the button is finally correct. So you should understand that when you are trying to decide a size for any item you are just requesting a size. Only if it is possible to have that size will you get it. The possibility depends on various things especially the container in which the item is placed. It also depends on the neighbors and other such factors. 


This way if you did not do the math properly and kept random sizes or if the user later resizes the window, everything will be taken care.I hope you now understood what I meant by " Imagine your whole UI in terms of vertical and horizontal boxes".


This tutorial was to just point you towards things. You will get better only by playing around with glade.


NICE TIP: I used this a lot. If you want to place something at some particular position but you are not getting it exactly at that position, then you could use an item called 'Label' in the left side menu near the buttons. You can place this at the right places where you want a space, may be so that you could move a button to further right or up. You have to remove the name of this label for it to mix into white space and your final user won't know.


This ends part 1 of the tutorial which I did not expect to be this big.
Find part two here.


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