How to create a GUI(Graphical User Interface) using C programming Language.. (part 3)

Hi, this is the third part of the How to create a GUI(Graphical User Interface) using C programming Language.. (part 2) post as I promised. In today’s post I’m going to tell you how to create and run Simple hello world GUI program.

And it includes how display a message when click a button.


Ok now open a new glade project and draw a GUI like above image. You have three components one label and two buttons.

Then set properties like this.

  • For the main Window

General–> Name= mainWindow
General–>Resizable= No
Common–>Height request = 400
Common–>Width request=200

  • For Display Label

General–>Name=displayLabel

General–>Label=Display

  • For Display Button

General–>Name=displayButton

General–>Label=Display

Signals–>Clicked=on_displayButton_clicked

  • For Exit Button

General–>Name=exitButton

General–>Label=Exit

Signals–>Clicked=on_exitButton_clicked

Then save it as hello.glade in libglade format.

Now open CodeBlock’s Gtk+ project. When you open a new it will automatically generates some codes, so erase and clear main.c .Then copy paste this code into your main.c .

Then copy your hello.glade file into CodeBlock project folder.

#include <stdio.h>
#include <gtk/gtk.h>
#include <glade/glade.h>

/*
Author : Gihan De Silva
gihansblog.com
*/

GladeXML *xml;
GtkWidget *widget;
GtkWidget *display;

G_MODULE_EXPORT void on_displayButton_clicked(GtkButton *button,gpointer *data)
{
/* Find the Glade XML tree containing widget. */
xml = glade_get_widget_tree(GTK_WIDGET( widget ));

/* Pull the widgets out of the tree */
display= glade_xml_get_widget(xml, “displayLabel”);

gtk_label_set_text(GTK_LABEL(display),”Hello World!n gihansblog.com”);
}

G_MODULE_EXPORT void on_exitButton_clicked(GtkButton *button,gpointer *data)
{
gtk_main_quit();
}

int main(int argc, char *argv[])
{

gtk_init(&argc, &argv);

/*import glade file*/
xml = glade_xml_new(“hello.glade”, NULL, NULL);

/* get a widget (useful if you want to change something) */
widget = glade_xml_get_widget(xml, “mainWindow”);

/* connect signal handlers */
glade_xml_signal_autoconnect(xml);

/*show widget*/
gtk_widget_show (widget);

gtk_main();

return 0;
}

Now run the project. If everything ok it will look like this and will function well :D.

The program in CodeBlocks…

Main Code Explained…

First we should initialise gtk in our code.

gtk_init(&argc, &argv);

Then we have to import our .glade file into our program and convert it into xml file format.

xml = glade_xml_new(“hello.glade”, NULL, NULL);

Now signals of widgets should be functioning with this line.

glade_xml_signal_autoconnect(xml);

And with this line, it will show the GUI at run time.

gtk_widget_show (widget);

Then call gtk main method

gtk_main();

Exit Button Code Explained…

In the exit button we call
gtk_main_quit();

to quit fro the program.

Display Button Code Explained…

Then find the Glade XML tree containing widget.
 xml = glade_get_widget_tree(GTK_WIDGET( widget ));

Now pull the label widgets out of the tree
 display= glade_xml_get_widget(xml, “displayLabel”);

Display the message on the label
gtk_label_set_text(GTK_LABEL(display),”Hello World!n gihansblog.com”);

Ok that’s all for today :D. If you want, you can DOWNLOAD my CodeBlock project here!. In next post I will show you how to add a Text Entry widget to your application.

Thank you

Gihan De Silva

17 Comments

  1. Reply
    website traffic August 27, 2011

    You can educate yourself right out of a relationship with God.

  2. Reply
    home business August 28, 2011

    If you’ve got a skill, protect it.

  3. Reply
    new sports cars August 28, 2011

    Regards for sharing How to create a GUI(Graphical User Interface) using C programming Language.. (part 3) Gihan's Blog.. with us keep update bro love your article about How to create a GUI(Graphical User Interface) using C programming Language.. (part 3) Gihan's Blog.. .

  4. Reply
    Emmanuel Walezak September 7, 2011

    It’s a good shame you don’t contain a give money press button! I’d definitely give money for this fantastic web page! That i think in the meantime i’ll be satisfied with bookmarking together with putting an individual’s Feed that will my best Msn balance. That i appearance ahead that will recent messages and definitely will promote the web site utilizing my best Facebook or twitter team: )

  5. Reply
    Hiedi Bors September 12, 2011

    I’ve thought about writing something about this before. Good job! Can I put a link to this in my blog?

  6. Reply
    Simon Pasek September 12, 2011

    This web page is really a walk-via for all of the info you needed about this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it.

  7. Reply
    sanibel island resorts September 13, 2011

    Heya, I need to ask you something. Is this a wordpress web log? We are making plans for changing our blog page from Blogger to wordpress, ya think that is possible? In addition did you construct this theme yourself some how? Thanks for the help!

  8. Reply
    Polarbit reckless getaway apk September 14, 2011

    Appreciate it for sharing How to create a GUI(Graphical User Interface) using C programming Language.. (part 3) Gihan's Blog.. with us keep update bro love your article about How to create a GUI(Graphical User Interface) using C programming Language.. (part 3) Gihan's Blog.. .

  9. Reply
    kore dizileri September 15, 2011

    I’m not sure where you’re getting your info, but great topic. I needs to spend some time learning much more or understanding more. Thanks for wonderful information I was looking for this information for my mission.

  10. Reply
    Buena Mirando September 15, 2011

    Terrific piece of writing and also quick to be able to fully understand story. How do My partner and i begin acquiring agreement to be able to place component with the page within my new newssheet? Offering right credit rating for your requirements the particular source and also weblink for the online site will not be described as a concern.

  11. Reply
    kore dizileri September 15, 2011

    This is very interesting, You’re a very skilled blogger. I’ve joined your feed and look forward to seeking more of your fantastic post. Also, I have shared your web site in my social networks!

  12. Reply
    pormo September 16, 2011

    Hello there, just became alert to your blog through Google, and found that it’s truly informative. I’m going to watch out for brussels. I will appreciate if you continue this in future. Lots of people will be benefited from your writing. Cheers!

  13. Reply
    rabi November 29, 2011

    hello, i want one help regarding theme. i don’t know how can i apply a theme in the gtk application. if any body have any idea please help me.

    please send to my mail pani_rabi@sify.com

    thanks in advance .

  14. Reply
    Armin June 20, 2012

    Can You please explain more about how did u do:
    “Now open CodeBlock’s Gtk+ project. When you open a new it will automatically generates some codes, so erase and clear main.c .Then copy paste this code into your main.c .”

    how can we make the relation ?

    cheers

  15. Reply
    Abhishek Kumar Verma October 17, 2012

    I am having some problem here ..

    ravi@ravi:~/gtk/hello$ gcc -Wall -g main.c `pkg-config gtk+-2.0 –cflags –libs` -I/usr/include/libglade-2.0/ -lglade-2.0ravi@ravi:~/gtk/hello$ ./a.out

    (a.out:15605): libglade-WARNING **: could not find glade file ‘hello.glade’

    (a.out:15605): libglade-CRITICAL **: glade_xml_get_widget: assertion `self != NULL’ failed

    (a.out:15605): libglade-CRITICAL **: glade_xml_signal_autoconnect: assertion `self != NULL’ failed

    (a.out:15605): Gtk-CRITICAL **: IA__gtk_widget_show: assertion `GTK_IS_WIDGET (widget)’ failed

    what should i do now ?

  16. Reply
    jbdough March 13, 2013

    First build I got error
    /gihansblog hello.glade/main.c|3|fatal error: glade/glade.h:
    No such file or directory

    I removed compiler and linker other options you suggest in part one, and it worked.

    Great tutorial, I thank you

Leave a Reply