Let’s contribute Peru GNOME – session two

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

IMG_9335IMG_9341

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.

IMG_9326

IMG_9338

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>
int
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);
 gtk_widget_show(window);
 gtk_main();
 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;
};

IMG_9344IMG_9346

This is our basic code that shows a navigator

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

struct data {
	GtkWidget *address_bar;
	GtkWidget *web_view;
};

void 
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)));
}

void
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);	
}

int
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, 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. HPC researcher, a simple mortal, 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 )

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