Glade and Gtk.Builder in Vala

Glade is a framework that allows building Gtk user interfaces from XML files describing the widgets that compose it. This allows developers to use GUI designer tools to build the GUI structure and latter loading it from the application, attaching signal handlers for the widget events to respond to user input.

Glade

In glade you simply start with a top-level container and add widgets to it designing the interface you want to end up.

On startup the Glade interface designer application asks you what output format it should write out. Since we want to use the integrated Gtk.Builder that’s the output format we should use.

In this case I created a simple layout that starts with a top-level window of type POPUP, with a textfield on top (Entry in Gtk) a tree (TreeView) on the center and and exit button on the bottom. The reason for the exit button is that this is a popup window and as such doesn’t have the close button of the window manager on top so we need another way to quit the application.

We save the created UI to a file. (DoWhatUI.glade in my case)

Gtk.Builder

Then in code we need to initialize the UI and bind our events. I have:

using Gtk;

namespace DoWhat.UI {

  public class DoWhatUI {
    public Window window;

    public DoWhatUI() throws Error {
      this.window = build_ui();
    }

    private Window build_ui() throws Error {
      var builder = new Builder();
      builder.add_from_file("DoWhatUI.glade");

      var window = builder.get_object("main_window") as Window;

      window.destroy.connect(Gtk.main_quit);
      builder.connect_signals(this);

      return window;
    }

on line 14 we load the UI definition we saved from Glade, and on line 19 we bind the signals defined there to our DoWhatUI object’s methods.

Signals and signal handlers

To react to a user clicking on the quit button, I have to create a signal handler for the button’s clicked signal. Something like:

    [CCode (instance_pos = -1)]
    public void on_quit(Button source){
      var confirm = new MessageDialog(this.window, DialogFlags.MODAL,
        MessageType.QUESTION, ButtonsType.YES_NO, "Leave?");

      if(ResponseType.YES == confirm.run()){
        Gtk.main_quit();
      }
      confirm.destroy();
    }

The code above will display a MessageDialog with the question “Leave?” to the user with a Yes and a No buttons and if he clicks the Yes button, the application will quit.

Glade thinks we’re C

The highlighted line above shows some hints for the Vala compiler, needed when dealing with Glade to adjust the C code generated. In this case, we’re telling the compiler to set the this element as the last argument for the C method generated. (which then Glade allows via the user_data parameter)

Another thing we need to take into account is the name mangling that goes on when translating Vala code into C.

Vala has namespaces, C does not. To support this, the Vala compiler translates the fully qualified name of an object in Vala to a corresponding underscore separated version.

So ifthe method we want to link is:

DoWhat.UI.DoWhatUI.on_quit

gets translited into the C name:

do_what_ui_do_what_ui_on_quit

and so we need to make sure to pass these translated names to Glade, otherwise it will faile to find our translated signal handler functions.

Compiling

To compile we need to add package gmodule:

valac --pkg gtk+-2.0 --pkg gmodule-2.0 main.vala DoWhatUI.vala