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