Simple Vala App
In this post we’ll go over how to create a simple Vala application. This app will just act as a counter. For example, whenever a user presses the “+” button the counter is incremented, the reverse happens with the “-“ button.
First of we’ll create a file named simple.vala
. And in it we’ll put the following:
// Including the Gtk namespace into the program
using Gtk;
// Create the window class and inherit from Gtk.Window
class Simple: Gtk.Window{
// Set up constructor
public Simple(){
// Set window title
this.title = "hello";
// End the program, when user quits
this.destroy.connect(Gtk.main_quit);
// Center the window on screen
this.window_position = WindowPosition.CENTER;
// Set the size for window (width, height)
this.set_default_size(350, 70);
}
}
int main(string[] args){
// Prep the Gtk library for use
// "ref" is Valas way of passing a pointer of "args"
Gtk.init(ref args);
// Create instance from the class we created
Simple app = new Simple();
// Tell the window to show it self
app.show_all();
// Start the main gui event loop
Gtk.main();
return 0;
}
Now to run the program just type
vala --pkg=gtk+-3.0 simple.vala
You should get something that looks like this
Sweet! We have a window. Next, is to add some buttons, text, and something else called a Box
which is specifially made to hold widgets such as the ones we are going to use.
class Simple: Gtk.Window{
// New Global var
Gtk.Label label;
public Simple(){
// PREVIOUS CODE HERE
// ******************
// Create Buttons
Gtk.Button add_btn = new Gtk.Button.with_label("+");
Gtk.Button subtract_btn = new Gtk.Button.with_label("-");
// Create Label
label = new Gtk.Label("0");
// Create BOX to hold all item
Gtk.Box vert_box = new Gtk.Box(Gtk.Orientation.VERTICAL, 5);
// Add button and label to BOX, the order matters
vert_box.add(add_btn);
vert_box.add(label);
vert_box.add(subtract_btn);
// add BOX to the window
this.add(vert_box);
}
Creating buttons and labels is pretty straight forward, the thing that needs some explaining is the vert_box
variable. We need a Gtk.Box
instance variable, such as vert_box
, because the window is only capable of holding one widget at a time. Since Gtk.Box
widgets are made to hold other widgets, this solves our problem of displaying multiple widgets at a time. The Gtk.Box
is created with Gtk.Orientation.VERTICAL
meaning that it will place widgets in a stack from top to bottom, and the number 5, which means how much spacing to give in between widgets.
If you run the code you should see the following like this.
If you press the buttons, you’ll see that they do nothing. The reason for this is because we haven’t told them to do anything yet, so lets do that next.
class Simple: Gtk.Window{
public Simple(){
// PREVIOUS CODE HERE
// ******************
// Tell buttons what to do when they are pressed
add_btn.clicked.connect(onClick);
subtract_btn.clicked.connect(onClick);
}
// Method that will be called when btns are pressed
private void onClick(Gtk.Button btn){
// Convert the string from label to number
int num = int.parse(label.get_label());
// Add or subtract depending on which btn was clicked
(btn.get_label() == "+")? num += 1: num -= 1;
// Set the new result to the label
label.set_label(num.to_string());
}
}
The way to bind buttons is by doing btn_var.clicked.connect(method_to_call)
and in this case onClick
, will be the method called when the buttons are pressed. What happens inside of that method is pretty straight forward. One thing that you may of asked is how did onClick
receive an argument if we never said we were going to pass one? The answer is simple, by default whichever method you bind to, it can either have no arguments or it passes the instance that cause the event.
If you run the program now, you should be able to change the label depending on which button you are pressing. Well that is all for this vala tutorial. Here is the complete code for this post