Tuesday, 30 September 2014

how to make log in window using #glade and #gtk.



1:open codeblocks and click on file and then new then click on project...

2:after clicking project below window will appear.
in this window click on gtk+ project and click on go.
after that a welcome window will appear just click next.


3: now give your project a title and click next.

4:now give the path of gtk. i have gtk in my c drive.(i have renamed the gtk folder to gtk default name of the downloaded folder was too long).click next.


5:in the next window click on finish.


after doing this process a project ill be created and a main.c file will be displayed on your codeblocks.
this main.c file contains a sample program of gtk.(do not close codeblocks  IDE).

now designing part comes.

1: open glade interface designer and click on window which you can see in below image.
on clicking window tool you will get a blank grey window as i have in below image. 




2:now click on vertical box which is under containers
    a window will appear like this


3: i have selected 4 . it means i am deviding  the window in 4 equal rows.
your window will look like below image of mine.


4: now click on label which you can find in control and display section and then click on the row  where you want to place the label.
now divide  each rest of the three rows in two parts using horizontal box.
your window will look like below image of mine.



5: now second row which you have divided into two parts. in the left part put a label and change  its text to user name which will appear on the label(assuming that you know how to put text on the label). 
in right part put a text box.
do same in third row.

in the last row put a button in both left and right part and do what i did. see the image below:
do the same on second button and save the work.
when this button is clicked a signal will be generated.and we have a handler on_button1_clicked.


now your final window should look like the below image of my window


now save this work where your codeblocks project folder is.(save under that folder).

(your glade files and main.c file should be in the same folder).

now your window is ready and now go into codeblocks.
i will write the code and you can copy paste it. :)


to  be continued on next post.



now we are all set with gtk and codeblocks.

i will be using snippets of code from my project to show you how things work in gtk.

there are two ways to work with gtk. either you use glade user interface designer tool or you can directly code in gtk to design user interface.

i will recommend you to use glade because by using it:-  
  • Less code needs to be written.
  • UI changes can be seen more quickly, so UIs are able to improve.
  • Designers without programming skills can create and edit UIs.
  • The description of the user interface is independent from the programming language being used.

The user interfaces designed in Glade are saved as XML, and by using the GtkBuilder GTK+ object these can be loaded by applications dynamically as needed.so no extra memory load will be generated.

By using GtkBuilder, Glade XML files can be used in numerous programming languages including C, C++, C#, Vala, Java, Perl, Python,and others.

i will be using c language, if you have read the last post, i have mentioned that.

my project was completed on time and i got good marks. :)


for more information about glade and gtk you can prefer glade.gnome.org and www.gtk.org .


this post was only for introduction. in the next post i will show how to make a log in window.

until happy coding. :)