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
First we need to recognise the Glade environment..
Then click 
Then click Linux BSD tab, change under type: as GRUB(Legacy)
Then reboot the computer, you will see your boot menu. That’s all 😀
Gihan's Blog.. 
