gtk + javascript = gjs, делаем "hello world"

Давно хотел посмотреть какой-нибудь гуёвый фреймворк, а тут оказалось, что под gtk можно писать на javascripte. Мне показалось это на много интереснее чем electron.

Для начала нужно поставить gjs:

sudo apt install gjs

Затем создаём hello.js и фагачим минимальное приложение:

const Gtk = imports.gi.Gtk;

let app = new Gtk.Application({ application_id: 'org.gtk.HelloWorld' });

app.connect('activate', () => {
  log( '*** START ***' );
});

app.run([]);

Запускаем:

gjs hello.js

Теперь давайте добавим главное окно приложения и метку:

const Gtk = imports.gi.Gtk;

let app = new Gtk.Application({ application_id: 'org.gtk.HelloWorld' });

app.connect('activate', () => {
  log( '*** Hello World ***' );
  
  let win = new Gtk.ApplicationWindow({ application: app });
  let label = new Gtk.Label({ label: '*** Hello World ***' });
  
  win.add(label);
  win.show_all();
});

app.run([]);

В завершении, давайте добавим кнопку и повесим на неё onClick событие:

const Gtk = imports.gi.Gtk;

let app = new Gtk.Application({ application_id: 'org.gtk.HelloWorld' });

app.connect('activate', () => {
  log( '*** Hello World ***' );
  
  let win = new Gtk.ApplicationWindow({ application: app });
  let label = new Gtk.Label({ label: '*** Hello World ***' });
  let button = new Gtk.Button({ label: 'Click me' });
  
  win.add(label);
  win.add(button);
  win.show_all();
});

app.run([]);

Внимательно читаем варнинг, и понимаем, что нужно сперва читать мануал , а уже потом кодить.

Из мануала следует, что окно может содержать только 1 виджет. А значит нам нужно добавить сперва контейнер для виджетов, а уже потом, в этот контейнер добавить лейбл и кнопку:

const Gtk = imports.gi.Gtk;

let app = new Gtk.Application({ application_id: 'org.gtk.HelloWorld' });

app.connect('activate', () => {
  log( '*** Hello World ***' );
  
  let win = new Gtk.ApplicationWindow({ application: app });
  let boxContainer = new Gtk.Box();
  let label = new Gtk.Label({ label: '*** Hello World ***' });
  let button = new Gtk.Button({ label: 'Click me' });
  
  boxContainer.add(label);
  boxContainer.add(button);
  
  win.add(boxContainer);
  win.show_all();
});

app.run([]);

Вот теперь всё ок, остаётся таки добавить обработку нажатия кнопки:

  button.connect ('clicked', () => {
    label.label = '** CLICKED **';
  });

И наш первый hello world на gtk+javascript гтов.