Using subclass of Gtk.ApplicationWindow to build an application

[undefined (MJ)]

Hi there!

I am learning Gtk. I have the template generated by builder but I am not sure how to proceed. The template has subclass of Gtk.ApplicationWindow in the window.js file. Below is what it looks like.

const { GObject, Gtk } = imports.gi;

var CalculatorWindow = GObject.registerClass({
    GTypeName: 'CalculatorWindow',
}, class CalculatorWindow extends Gtk.ApplicationWindow {
    _init(application) {
        super._init({ application });
    }
 });

Unfortunately, all the examples I have come across do not use subclass of the Gtk.ApplicationWindow like the template used in builder. I am learning using the gjs guide.

The example on how to create an application in the gjs guide is clear just like the hello world app. It is a matter of creating an instance of Gtk.ApplicationWindow class and adding widgets to it. But here I am, dealing with a subclass of Gtk.ApplicationWindow class. How am I supposed to add widgets to the window? Should I do it Inside the callback handling the activate signal like in the hello world example?

I am thinking of following the gjs guide example and do something like:

var CalculatorWindow = GObject.registerClass({
    GTypeName: 'CalculatorWindow',
}, class CalculatorWindow extends Gtk.ApplicationWindow {
    _init(application) {
        super._init({ application });
        this._window = null;
        this.createMainWindow();
    }
    createMainWindow(){
        this._window = new Gtk.ApplicationWindow({
           defaultWidth: 400,
           defaultHeight: 500,
           title: 'Hello World'
        });
        
    }

    present(){
        this._window.show();
    }
});

Surely what I am thinking about can’t be right, can it? CalculatorWindow is a subclass of Gtk.ApplicationWindow already. Would it therefore be correct to create a window using Gtk.ApplicationWindow and add widgets to it in CalculatorWindow?

The documentation just describes the methods and properties of the Gtk.ApplicationWindow class but not how to use it. If someone can help me add a simple button with clicked signal to the above example, it will go a long way in setting me off.

Thanks!

[ptomato (Philip Chimento)]

Right, you will have to use this instead of this._window everywhere. The only thing that’s not a straightforward replacement, is the code to create this._window (since this is already created in the constructor.) It would look something like this:

var CalculatorWindow = GObject.registerClass({
    GTypeName: 'CalculatorWindow',
}, class CalculatorWindow extends Gtk.ApplicationWindow {
    _init(application) {
        super._init({
            application,
            defaultWidth: 400,
            defaultHeight: 500,
            title: 'Hello World',
        });
    }
});

(If you organize your code this way, you also don’t need a present() method since CalculatorWindow inherits one from Gtk.ApplicationWindow)

[undefined (MJ)]

Thanks for your help. I have created a custom header using the code below but the header buttons (maximize, minimize and close buttons ) do not look anything like the standard window title buttons.

 createHeaderBar(){

       const headerBar = new Gtk.HeaderBar({
         title: 'Calculator',
         subtitle: '0.0.1',
         showCloseButton: true,
       })

       const menuBtn = new Gtk.MenuButton();
       menuBtn.add(new Gtk.Image({ iconName: "open-menu-symbolic" }))

       headerBar.pack_start(menuBtn);
       headerBar.show_all();

      this.set_titlebar(headerBar);

    }

Check the image below.

However when I create an instance of the Window class and add the custom header to it, the buttons look like the other application windows.

I hope you notice the difference between the buttons (minimize, maximize and close buttons) in the two images.

I am not very sure but the set_show_title_buttons appears to serve that purpose but it is for Gtk4. How can I make the buttons in the first image look like the ones in the second image in Gtk3?