# Loading User Interface Files In GJS

The user interface file you have created, window.ui, is a template for your application. To use this template and its widgets we need to load it.

Before you continue make sure you've read Extending GObject Classes in GJS

# Loading the template

Luckily, in GJS it is quite simple to load a user interface template.

/* imports */
var X = GObject.registerClass({
    Template: 'url://templateurl'
}, class X extends Gtk.ApplicationWindow {
    /* implementation */
});
}
1
2
3
4
5
6
7

You will find the above code in your project's window.js file. This code tells GTK+ to register the class and apply a GTK+ user interface template to it.

# Registering template widgets

We now have the template, but how do we access the widgets?

Before we had variables like this:

const button = new Button();
button.do_something();
1
2

So it was easy to call functions and manipulate the button. To achieve a similar system with templates you have to tell GTK+ what widgets you want to use by passing a list of their IDs to InternalChildren.

/* imports */
GObject.registerClass({
    Template: 'url://templateurl',
    InternalChildren: ['button']
}, class X extends GObject.Object {
    /* implementation */
});
1
2
3
4
5
6
7

# Accessing template children

Now you can access the button like this:

this._button.do_something();
1

All template widgets listend in InternalChildren are accessible with the pattern this._[childName].

Note the prefixed underscore!

Last Updated: 4/11/2021, 5:57:22 AM