Tutorial: How to code with Vala and Glade? Simple!

Today, I’m going to show you how to code a simple and small Glade interface application in Vala using Gtk.builder.

Special thanks for my friend Ahmed Shams. He helps me a lot 🙂

Every Glade program consists of two files: the glade UI file and the program (the code) itself.

Glade uses a simple method to connect with the code while Glade uses signals to tell the code that the user interacted with a widget (clicked, hovered, selected etc…)

For example: when we create a button, In glade side we attach a signal to it, ex:”clicked”, in the code side we will use something like “when signal button_clicked received: do something” Got it? 😀

First, we will use Glade to build our simple UI that will be used in our program.

If you haven’t installed glade yet, install it using:

 sudo apt-get install glade

Then run it and start designing your UI, Firstly start with a top-level container.

In our case we will create a simple window that contains one button and a Text-Entry, We will make the button to return (when clicked) the text which typed in the text-entry widget.

Now, Open up glade and create your window:

Then, Edit the window’s destroy signal from signals tab in widgets properties section, type a name for signal that you can use in the code, in our case we will name our signal “on_window1_destroy”

Then, We are going to insert a box (container) to add widgets within it.

Then, We’ll insert our widgets:

You can change the properties of a widget through the widget proprieties section at right (change its label etc..)

Then, We are going to edit the “clicked” signal and name it “on_button1_clicked”

And we’re done! 🙂 now save the glade file in the project’s directory, name it “sample.ui”.

Now your glade file should be something looking like this:

http://paste.ubuntu.com/5574595/

Sorry for that, wordpress doesn’t allow typing XML codes in posts.

Now, it’s the code’s time!, try to understand this code, then save it in the project’s directory as “example.vala” and compile it using:

valac --pkg gtk+-3.0 --pkg gmodule-2.0 example.vala

and here’s our code:

using Gtk;
/* When button click signal received */
public void on_button1_clicked (Button source) {
    /* change button label to clicked! */
    source.label = "Clicked!";
    stderr.printf ("Clicked! --> ");
}

public void on_window1_destroy (Window source) {
    /* When window close signal received */
    Gtk.main_quit ();
}

int main (string[] args) {     
    Gtk.init (ref args);

    var builder = new Builder ();
    /* Getting the glade file */
    builder.add_from_file ("sample.ui");
    builder.connect_signals (null);
    var window = builder.get_object ("window1") as Window;
    var entry = builder.get_object ("entry1") as Entry;
    var button = builder.get_object ("button1") as Button;
    /* thats another way to do something when signal received */
    button.clicked.connect (() => {
        stderr.printf ("%s\n", entry.get_text ());
    });
    window.show_all ();
    Gtk.main ();

    return 0;
}

Now you are ready to try your first Vala/Glade app, just run it using

./example

Thanks! Hope this tutorial be helpful for you 🙂