Vala.dev A personal blog from a hobbist developer.

Diving Into Vala: Project Lovey v0.1.0

Building a simple GUI app with Vala & GTK+ 3.


Posted by David Rodriguez

I know I’ve been away for a while. But it was not in vain! So, while I was away, I decided to dig into Vala. Reading not only the documentation available on Valadoc.org, but the Vala Reference Manual, and the Introduction to Vala Programming: Boost Your Productivity book, by Dr. Michael Lauer. I decided to truly dive into Vala by building a GUI app…

It’s been a lot to digest and I am sure I will be going over these documents, again and again. After all, this is a learning process. So I got to thinking, “what better way to learn a language, than to build an app with it”. The only trouble I’m running into is: I have no idea what to build!

The goal for now

For now, the goal is simple. To get a GUI window up and running that is written in Vala and GTK+ 3. A screen shot of our goal is shown below, and we can slowly iterate on this code later to further develop our desktop application into something useful. For now though, let’s just focus on reproducing what’s in this screenshot.

Simple Window

The Project’s Codename

So I have no idea what the project’s final name will be. Let alone what the app will do. But, I do know for a fact that I have decided to internally name this project, Lovey. This word itself has a very personal meaning behind it and for some reason just feels right at the moment.

Getting started on Lovey v0.1.0

At the moment, we can actually make this entire window in one .vala source file. For the purposes of this project, I am just going to call it Lovey.vala for now and open it up in my code editor.

By default, Vala is an object oriented programming language and I plan to use it as such. First – in the Lovey.vala file – I am going to create the class named Lovey for the application, by extending the Gtk.Application class.

public class Lovey : Gtk.Application {

}

Setting a unique identifier

Since we’re extending the Gtk.Application class, which in turn, also extends the GLib.Application class, we should use the set_application id method to set a unique identifier (name) for our app. This essentially will be the name that the OS knows your app by.

Here, we can also set GLib.ApplicationFlags to FLAGS_NONE. The reason for this is, we are not doing anything with startup flags on this app (yet?).

public class Lovey : Gtk.Application {

  public Lovey () {
    Object (
      application_id: "dev.vala.lovey",
      flags: ApplicationFlags.FLAGS_NONE
      );
  }

}

Here, application_id is set to “dev.vala.lovey”. This name is set in Reverse Domain Name notation. This ensures uniqueness and Reverse-DNS names are a simple way of reducing name-space collisions, since any domain name is registered by only one party at a time.

In terms of Vala and application development. It ensures that your application has a unique name on the operating system of which it is installed in.

Tapping the activate method

Next, before we create the window, we need to tap into the activate() method. The activate signal is emitted on the primary instance when an activation occurs. In this case, that would be on the start of this app.

public class Lovey : Gtk.Application {

  public Lovey () {
    Object (
      application_id: "dev.vala.lovey",
      flags: ApplicationFlags.FLAGS_NONE
      );
  }

  protected override void activate () {

  }
}

Even though you should already know what’s going on here, I think it’s safe to say that this will take some explaining (just in case you’re still wrapping your head around OOP).

In order to tap into and use the activate () method that is already present in the Gtk.Application class that we are already extending, we first have to override this method. Also, since Vala is a statically typed language, we must specify the reference type that this will be. For this, I will choose protected.

If you view the Valadoc documentation, you will also see that this activate () method returns nothing, so we must specify void in its return type as well.

All that to give us this:

protected override void activate () {

}

Now, the code for our window

Let’s begin putting that activate () method to work by making our GUI window. For now, we will use type inference to handle variables with the var keyword.

(A discussion of Vala’s data types is currently outside of this post. Though you can visit the Vala Tutorial and read up on them there.)

protected override void activate () {
  var window = new Gtk.ApplicationWindow (this);
  window.title = "Hello World by Vala.dev";
  window.set_default_size (640, 480);
  window.window_position = Gtk.WindowPosition.CENTER;

  window.show_all ();
}

For the most part, this code is pretty self-explanatory. First, we create a variable named window and set it equal to a new instance of Gtk.ApplicationWindow (a subclass of Gtk.Window which extends functionality for better intergration with Gtk.Application).

The creation method for Gtk.ApplicationWindow requires an application parameter. For that parameter, we passed in this, referring to the current Lovey class (which in and of itself is an extension of Gtk.Application) to satisfy the creation method’s requirements.

Now that window is a variable of type Gtk.ApplicationWindow, we can easily tap into the methods and properties within Gtk.Window using dot notation.

So we can set the title for the GUI window with title property in Gtk.Window and set use the set_default_size method give our window a default size.

(To see a list of available methods, static methods, properties, and signals, that are available be sure to check out Valadoc.)

Adding the “Hello World!” label

The last and final piece to this code is the “Hello World!” text in the middle of the GUI window.

To do this, we need to create another variable (you can name it whatever you want, I called this one label) and set it equal to a new instance of Gtk.Label. The Gtk.Label can be initialized with the string “Hello World!” as a parameter.

Next, we add the label to the window by using the add () method. This add () method was automatically inherited from Gtk.Container which was inherited by Gtk.ApplicationWindow (which window is an instance of).

And last but not least, we use the show_all () method to recursively show a widget (in this case, window itself) and any child widgets – if the widgets are inside of a container – (in this case, label is a child widget of window).

protected override void activate () {
  var window = new Gtk.ApplicationWindow (this);
  window.title = "Hello World by Vala.dev";
  window.set_default_size (640, 480);
  window.window_position = Gtk.WindowPosition.CENTER;

  var label = new Gtk.Label ("Hello World!");

  window.add (label);
  window.show_all ();
}

The main () method

Every single Vala application requires a main () method. It is the entry point to our application. It’s how and where things get started. So, at the bottom of the Lovey.vala file, just out of the Lovey class scope, create a main () method.

public static int main(string [] argv) {
  var app = new Lovey ();
  return app.run (argv);
}

The static method means that the method can be called without possessing a particular instance of the type. The fact that this method is called main and has the signature it does means that Vala will recognize it as the entry point for the program. And finally, the return type of int asks for an integer as a return value (0 to exit without an error, -1 or anything other than 0 to exit with an error).

The first line of code in the main () method declares and initializes a variable named app to a new instance of the Lovey class. This will initialize our Lovey class and save it to the variable named app.

var app = new Lovey ();

After that, instead of manually returning 0, we can return the result of the app (the initialized Lovey class) variable and tap the run () method – inherited from the Gtk.Application class – passing in all the the argz we have from the main method; like so:

return app.run (argv);

The final result of Lovey.vala

The end result of this should leave you with a file named Lovey.vala that contains the following contents inside:

public class Lovey : Gtk.Application {

  public Lovey () {
    Object (
      application_id: "dev.vala.lovey",
      flags: ApplicationFlags.FLAGS_NONE
      );
  }

  protected override void activate () {
    var window = new Gtk.ApplicationWindow (this);
    window.title = "Hello World by Vala.dev";
    window.set_default_size (640, 480);
    window.window_position = Gtk.WindowPosition.CENTER;

    var label = new Gtk.Label ("Hello World!");

    window.add (label);
    window.show_all ();
  }

}

public static int main(string [] argv) {
  var app = new Lovey ();
  return app.run (argv);
}

Compiling the source code

Now that we have a complete program written in Vala, we can compile it and then run the application (as long as we have no spelling or syntax errors, we should be fine).

To compile this code, you’ll first need to pull in the GTK+ 3.0 libraries by adding the GTK+ 3.0 package as an argument, like so:

$ valac -o Lovey --pkg=gtk+-3.0 Lovey.vala

Now run the app with this command:

$ ./Lovey

A GUI window should open and should look exactly like the screenshot from the beginning of this post (may vary depending on your Operating System).

Summary

Overall, this was a great start. I was able to accomplish the goal I set out for myself in one .vala source file and get a working GUI window in about 15 to 20 minutes. With practice comes perfection and once I become more proficient in Vala, I am sure I can cut that time down into a fraction of what I originally spent on it.

As for the moment, I think Project Lovey (v0.1.0) is done for now. You can find the source code on my GitLab page, here. Also, make sure to subscribe to the blog feed to keep your eye out on future articles.