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 thoughts on “How to create a GUI(Graphical User Interface) using C programming Language.. (part 3)

  1. 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.. .

  2. 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: )

  3. 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!

  4. 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.. .

  5. 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.

  6. 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.

  7. 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!

  8. 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!

  9. 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

  10. 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 ?

  11. 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

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>