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.
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
file. For the purposes of this project, I am just going to call it
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.
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
The reason for this is, we are not doing anything with startup flags on this app (yet?).
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.
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
All that to give us this:
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
(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.)
For the most part, this code is pretty self-explanatory. First, we create a variable
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.
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
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.
static method means that the method can be called without possessing a
particular instance of the type. The fact that this method is called
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
app to a new instance of the
This will initialize our
Lovey class and save it to the variable named
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
argz we have from the main method; like so:
The final result of Lovey.vala
The end result of this should leave you with a file named
contains the following contents inside:
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:
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).
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.