Creating Clients [Vala and Gtk 3]

Normally in Linux we miss quite a few applications, or clients of some services that come out much earlier for other platforms, because in this tutorial we will see how to create a client (it will be a vision far above), by using REST API with value (and gtk 3).


I'm not going to explain what an API is, or what the REST API is (you can find a lot of information in google), I'll just say that roughly we will make some requests (GET or POST) and it will return a response in JSON format.

For the tutorial I have decided to use the api that it provides us The Marvel movies (see api documentation), which provides us with a series of information about comics, characters ...

To access it we need a key, which we can obtain by registering, once obtained we have a limit of 3000 requests.

Let's see an example of the API, to call this api we have to make use of our keys (we have a public and a private one):


To see this simple example we can use where we put 1 "+" keyprivate "+" keypublic and that generates the hash, we can call it as it says in the image. We will get the answer (in this case it is to see the characters):

there is an error in the image the call would be comics ...


There are programs and plugins for browsers that will facilitate the view of json:

m1 We can see that it gives us the name, the description, a thumbnail (image of the character) ...

marvel web development

Treating JSON with vala (Parseando).

Nor will I explain what the formats are json, you can find information online. We can find a simple example made in Vala here!.

First of all we install the json-glib library in case we don't have it installed:

sudo apt-get install libjson-glib-1.0-0 libjson-glib-1.0-0-dev

We will also install libsoup:

sudo apt-get install libsoup-2.4 libsoup2.4-dev
I will not put neither the public key nor the hash to the requests

First of all we import the libraries that we will use:

using Soup; using Json; using Gtk;

Sending a request:

var uri = ""; var session = new Soup.SessionSync (); var message = new Soup.Message ("GET", uri); session.send_message (message);

The url will show us a maximum of 10 comics that have appeared between 2 dates (00-03-2014, 16-03-2014).
First of all we create a session, then we build the request of the GET type and send it.

Parseying json:

var root_object = parser.get_root () .get_object ();

gets the main object i.e. all the json code.

var response = root_object.get_object_member ("data"); var results = response.get_array_member ("results");

We can catch

Process the code:

foreach (var geonode in results.get_elements ()) {var geoname = geonode.get_object (); stdout.printf ("% f \ n% s \ n% s \ n \ n", geoname.get_string_member ("id"), geoname.get_string_member ("name"), geoname.get_double_member ("description")); }

You can see examples here!.

Displaying the information:

Here we can choose how to display the information, to download the images we can use this method:

public static async Gdk.Pixbuf? get_img (string url) {Gdk.Pixbuf? pix = null; var file = File.new_for_uri (url); try {GLib.InputStream @input_stream = yield file.read_async (Priority.DEFAULT, null); pix = yield new Gdk.Pixbuf.from_stream_at_scale_async (input_stream, 800, 600, true, null); } catch (Error e) {warning (e.message); } return pix; }

Being a method that is executed in another thread (asynchronous) when calling it we have to do it this way:

get_img.begin (img_url, (obj, res) => {var pix = get_img.end (res);});

Where img_url is the url of the image that we get from the json.

To compile aremos:

valac --pkg gtk + -3.0 --pkg libsoup-2.4 --pkg json-glib-1.0 customername.vala
We can find documentation for json-glib here!.


Some Tips that can help us to create our client / application:


AppIndicator is a library that allows us to put our program as an indicator in the upper panel (both in Elementary and Ubuntu).

Installing appindicator3-0.1

sudo apt-get install libappindicator3-dev


valac --pkg gtk + -3.0 --pkg appindicator3-0.1 program.vala

If you get an error, it may be because you have a newer version of appindicator, in that case go to / usr / share / vala / vapi and you will see what your version is.

Capture from 2014-02-23 15:30:57

We can find an example in the Ubuntu development website.

A little example:

Capture from 2014-02-23 17:04:52


var indicator = new Indicator ("win.title", "office-address-book", IndicatorCategory.APPLICATION_STATUS); indicator.set_status (IndicatorStatus.ACTIVE); var menu = new Gtk.Menu (); var item = new Gtk.MenuItem.with_label ("Add new contact"); item.activate.connect (() => {//indicator.set_status(IndicatorStatus.ATTENTION); // CreateContact ();}); (); menu.append (item); item = new Gtk.MenuItem.with_label ("Delete contact"); (); item.activate.connect (() => {//indicator.set_status(IndicatorStatus.ATTENTION); // DeleteContact ();}); menu.append (item); indicator.set_menu (menu);


Put an icon in our application:

We start from the constructor of the Gtk.Window class:

try {// Image directory this.icon = new Gdk.Pixbuf.from_file ("fcbb.png"); } catch (Error e) {stderr.printf ("error:% s \ n", e.message); }

Capture from 2014-02-23 15:44:00


Simple picture

A simple image in vala that we can put for example in a layout.

image = new Gtk.Image (); image.set_from_file ("fcb.png");



Use vala and gtk for clients? no, from my point of opinion it is much better and easier to use c ++ and Qt (QML), it is pending to do an article to make clients in QML.

The content of the article adheres to our principles of editorial ethics. To report an error click here!.

2 comments, leave yours

Leave a Comment

Your email address will not be published. Required fields are marked with *



  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   frameworks said

    thanks carnal 😀, it's great to see what a "few lines of code" can do when you have knowledge. the example gives many ideas for other things 😀

  2.   eliotime3000 said

    Very good tips, bro.

    See if I can make one.