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

17 08 2011

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

About these ads

Actions

Information

16 responses

27 08 2011
website traffic

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

28 08 2011
home business

If you’ve got a skill, protect it.

28 08 2011
new sports cars

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

7 09 2011
Emmanuel Walezak

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

12 09 2011
Hiedi Bors

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

12 09 2011
Simon Pasek

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.

13 09 2011
sanibel island resorts

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!

13 09 2011
Gihan

Yes of course this a wordpress blog and I use Freshy theme :-) (http://theme.wordpress.com/themes/freshy/) Only thing I’ve done to the theme is changing the header. If you need any help regarding changing your blog page from Blogger to WordPress read my article on that : http://gihansblog.wordpress.com/2011/06/24/convert-your-blogger-bolg-into-wordpress-or-wordpress-blog-into-blogger/ :D

14 09 2011
Polarbit reckless getaway apk

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

15 09 2011
kore dizileri

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.

15 09 2011
Buena Mirando

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.

15 09 2011
kore dizileri

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!

16 09 2011
pormo

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!

29 11 2011
rabi

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 .

20 06 2012
Armin

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

17 10 2012
Abhishek Kumar Verma

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 ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Follow

Get every new post delivered to your Inbox.

%d bloggers like this: