Creating A User Interface
Until now we have been creating GTK widgets with JavaScript code like this:
const button = new Button();
While this syntax is frequently used it is much easier and maintainable to build most of your application using a user interface file. A user interface file is an XML file containing all of your widgets' positioning and properties.
Your GNOME Builder project should contain a file named window.ui
. We can use Glade to edit this file.
Using Glade
![](/assets/img/glade-tutorial-step-00.png)
Open Glade
, make sure you have version 3.22.x+ and not an outdated version. The newest version of Glade
can be found on FlatHub here.
![](/assets/img/glade-tutorial-step-01.png)
Once in Glade, open the UI file from your new project.
![](/assets/img/glade-tutorial-step-02.png)
There it is!
![](/assets/img/glade-tutorial-step-04.png)
Once opened, you'll see a basic Hello, World!
application. Right click on the GtkLabel
and click delete.
![](/assets/img/glade-tutorial-step-06.png)
You should now have a window that looks like this.
![](/assets/img/glade-tutorial-step-07.png)
Select the header bar and rename the title to whatever your application is called (we chose 'Tags' randomly)
Adding a button to the header bar...
![](/assets/img/glade-tutorial-step-08.png)
To add a button to the header bar locate Number of items
in the General
section of the header bar's properties.
![](/assets/img/glade-tutorial-step-09.png)
Increase the number to 1
.
![](/assets/img/glade-tutorial-step-10.png)
Now let's find a button
.
![](/assets/img/glade-tutorial-step-11.png)
There it is! Select GtkButton
.
![](/assets/img/glade-tutorial-step-12.png)
Now anywhere we click a button will be placed.
![](/assets/img/glade-tutorial-step-13.png)
Place a button in the empty slot we've created in the header bar.
![](/assets/img/glade-tutorial-step-15.png)
Now let's name our button. We'll call it addFileButton
because we'll use it to open files for Tags.
![](/assets/img/glade-tutorial-step-16.png)
While we're at it, let's rename our header bar too because camelCasing is preferred in GJS.
![](/assets/img/glade-tutorial-step-17.png)
We want to have a +
image inside our button to symbolize adding. To do this , select Add custom content
in General
in the button's properties section.
![](/assets/img/glade-tutorial-step-18.png)
Now let's grab a GtkImage
.
![](/assets/img/glade-tutorial-step-19.png)
Pop it into the button's empty slot.
![](/assets/img/glade-tutorial-step-20.png)
Now select the image.
![](/assets/img/glade-tutorial-step-21.png)
Find Icon Name
in General
in the properties section of the GtkImage
. Click on Icon Name
.
![](/assets/img/glade-tutorial-step-22.png)
Select the appropriate semantic name for 'adding' which is list-add-symbolic
. Be certain you get list-add-symbolic
and not list-add
as symbolic icons are monochromatic and meant for menus and buttons.
![](/assets/img/glade-tutorial-step-24.png)
You should now see the symbolic name list-add-symbolic
under Icon Name
.
![](/assets/img/glade-tutorial-step-30.png)
Select GtkBox
from the widget picker.
![](/assets/img/glade-tutorial-step-31.png)
Now we will add a GtkBox
to store the window contents.
![](/assets/img/glade-tutorial-step-32.png)
Pop it into the empty space in our window, TagsWindow
.
![](/assets/img/glade-tutorial-step-33.png)
![](/assets/img/glade-tutorial-step-34.png)
Now set Number of items
in General
in the widgets properties to 1
.
![](/assets/img/glade-tutorial-step-35.png)
Now set the widget ID to mainBox
.
And we've built our UI!