Let’s contribute Peru GNOME – session two

Thanks to Cesar Fabian who guided us to do a basic Web browser using GTK+ and webkit.


Following our plan, he was explained about the technologies that are useful for our Web, when one of the participants asked about IDE to do this (because it is kind of hard to remember all the events and objects). So, Fabian told us that Christian Hergert was in charge of building an IDE to make easier the development stuff in GNOME.



Some of us had troubles with the packages that were missing during the compilation time. gcc main.c `pkg-config –cflags –libs gtk+-3.0` -o main

This was our first main.c program:

#include <gtk/gtk.h>
main(int argc, char ** argv)
 GtkWidget *window;
 gtk_init (&argc,&argv); 
 window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
 gtk_window_set_default_size (GTK_WINDOW (window), 800, 600);
 gtk_window_set_title (GTK_WINDOW (window), "Hello world");
 g_signal_connect (window, "delete-event", gtk_main_quit,NULL);
 return 0;

In my particular case the libgtk-3 was missing

yulytas@yulytas:/home/yulytas$ sudo apt-get install libgtk-3-dev
 Need to get 10.1 MB of archives.
 After this operation, 40.0 MB of additional disk space will be used.
 Do you want to continue? [Y/n] y
 Get:1 http://arsip.blankonlinux.or.id/blankon/ suroboyo/main libcairo-script-interpreter2 amd64 1.12.16-2 [575 kB]

Some things I understood from this experience:

gtk_window is a container and we should respect the gtk hierarchy to add objects.

we can use “delete-event”or “destroy” when it is your first time to try this.

There is a widget that does not need the events delete or destroy:  the gtk application.

#include <gtk/gtk.h>
#include <webkit2/webkit2.h>
struct _Dummy {
  GtkWidget *web_view;
  GtkWidget *address_bar;


This is our basic code that shows a navigator

#include <gtk/gtk.h>
#include <webkit2/webkit2.h>

struct data {
	GtkWidget *address_bar;
	GtkWidget *web_view;

navigate_button_cb (GtkWidget *navigate_button, struct data *datos)
	GtkWidget* web_view = datos->web_view;
	GtkWidget* address_bar = datos->address_bar;
	webkit_web_view_load_uri (WEBKIT_WEB_VIEW (web_view), gtk_entry_get_text (GTK_ENTRY (address_bar)));

activate (GtkApplication *app, gpointer user_data)
	GtkWidget *window, *web_view, *box, *bar, *address_bar, *navigate_button;	
	struct data *datos;
	datos = malloc(sizeof(struct data));
	window = gtk_application_window_new (app);
	gtk_window_set_title (GTK_WINDOW (window), "web-browser");
	gtk_window_set_default_size (GTK_WINDOW (window), 800, 600);
	web_view = webkit_web_view_new();
	webkit_web_view_load_uri (WEBKIT_WEB_VIEW (web_view), "http://www.google.com.pe");
	box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 0);
	bar = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
	address_bar = gtk_entry_new ();
	navigate_button = gtk_button_new_with_label ("Go");
	datos->address_bar = address_bar;
	datos->web_view = web_view;
	g_signal_connect (navigate_button, "clicked", G_CALLBACK (navigate_button_cb), datos);
	gtk_box_pack_start (GTK_BOX (bar), address_bar, TRUE, TRUE, 0);
	gtk_box_pack_start (GTK_BOX (bar), navigate_button, FALSE, TRUE, 0);
	gtk_box_pack_start (GTK_BOX (box), bar, FALSE, FALSE, 0);
	gtk_box_pack_start (GTK_BOX (box), web_view, TRUE, TRUE, 0);
	gtk_container_add (GTK_CONTAINER (window), box);
	gtk_widget_show_all (window);	

main (int argc, char **argv)
	GtkApplication *app;
	int status;
	app = gtk_application_new ("org.gtk.web-browser", G_APPLICATION_FLAGS_NONE);
	g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
	status = g_application_run (G_APPLICATION (app), argc, argv);
	return 0;

After that we updated to click on the GO button and used address bar, which is an entry

GtkWidget *address_bar, *navigate

and gtk_box and its event start

To update and direct to the page is webkit_web_view_load_uri (WEBKIT_WEB_VIEW (web_view), uri);  when the address received the signal CLICK it is uploaded in  wegbkit_web_view_load_uri (WEBKIT_WEB_VIEW (user_data->web_view)

We can make the back button with webkit_web_view_go_back() or the forward function.

These are the objects that Fabian used to explain the code:

IMG_9361 IMG_9358

I feel so optimistic in saying that there will be 2 new women Peruvian GSoC next rounds 🙂IMG_9349IMG_9348

Briggette and Lizeth in the picture – UNI PERU.

About Julita Inca

Ingeniero de Sistemas UNAC, Magíster en Ciencias de la Computación PUCP, Magíster en Computación de Alto Rendimiento de la Universidad de Edimburgo, OPW GNOME 2011, Miembro de la GNOME Foundation desde el 2012, Embajadora Fedora Perú desde el 2012, ganadora del scholarship of the Linux Foundation 2012, experiencia como Admin Linux en GMD y Especialista IT en IBM, con certificaciones RHCE, RHCSA, AIX 6.1, AIX 7 Administrator e ITILv3. Experiencia académica en universidades como PUCP, USIL y UNI. Leader of LinuXatUNI Community, HPC Software Specialist at UKAEA, and reviewer of the Technological Magazine of ESPOL-RTE, and volunteering Linux training for MINSA Peru... a simple mortal, just like you!
This entry was posted in GNOME, τεχνολογια :: Technology and tagged , , . Bookmark the permalink.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s