gjstest

main.js

#!/usr/bin/gjs

/*
https://developer.gnome.org/platform-overview/unstable/tour-gjs.html.en
https://gitlab.gnome.org/GNOME/gjs/wikis/Home
examples at https://github.com/optimisme/gjs-examples
docs at https://devdocs.baznga.org/gtk30~3.22.12/
*/

imports.gi.versions.Gtk = '3.0';
const Gtk = imports.gi.Gtk;
const Mainloop = imports.mainloop;

class HelloWorld {
	constructor() {
		this.app = new Gtk.Application();
		this.app.connect('activate', this._onActivate.bind(this));
        this.app.connect('startup', this._onStartup.bind(this));
	}

	_onActivate() {
		this._window.show_all();
	}

	async _onStartup() {
		const builder = new Gtk.Builder();
        builder.add_from_file('ui.glade');
        this._window = builder.get_object('mainwindow');
        this.app.add_window(this._window);
        builder.get_object('header').set_title('haha!');
        await new Promise(resolve => Mainloop.timeout_add(2000, resolve));
        builder.get_object('header').set_subtitle('t macheert gewoon!');
	}
}

new HelloWorld().app.run(ARGV);

ui.glade

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.22.1 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <object class="GtkWindow" id="mainwindow">
    <property name="can_focus">False</property>
    <child type="titlebar">
      <object class="GtkHeaderBar" id="header">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="title" translatable="yes">Hello</property>
        <property name="subtitle" translatable="yes">world</property>
        <property name="show_close_button">True</property>
        <child>
          <object class="GtkStackSwitcher">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="stack">content</property>
          </object>
        </child>
      </object>
    </child>
    <child>
      <object class="GtkStack" id="content">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <child>
          <object class="GtkSpinner">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="active">True</property>
          </object>
          <packing>
            <property name="name">page0</property>
            <property name="title" translatable="yes">page0</property>
          </packing>
        </child>
        <child>
          <object class="GtkLabel">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">coucou, second tab!</property>
          </object>
          <packing>
            <property name="name">page1</property>
            <property name="title" translatable="yes">page1</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkColorButton">
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="receives_default">True</property>
          </object>
          <packing>
            <property name="name">page2</property>
            <property name="title" translatable="yes">page2</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>