Skip to content

Instantly share code, notes, and snippets.

@bhanuc
Last active January 10, 2023 10:19
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bhanuc/b8e6b5408fb50e93ccc9 to your computer and use it in GitHub Desktop.
Save bhanuc/b8e6b5408fb50e93ccc9 to your computer and use it in GitHub Desktop.
Minimal gnome hello world using glade + gjs
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.18.3 -->
<interface>
<requires lib="gtk+" version="3.12"/>
<template class="Gjs_AppWindow" parent="GtkApplicationWindow">
<property name="can_focus">False</property>
<property name="title" translatable="yes">gnome-hello</property>
<property name="window_position">center</property>
<property name="default_width">200</property>
<property name="default_height">100</property>
<child>
<object class="GtkBox" id="box">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkLabel" id="label">
<property name="visible">True</property>
<property name="can_focus">False</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton" id="button">
<property name="label" translatable="yes">Close</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
</child>
</template>
</interface>
const Lang = imports.lang;
const GLib = imports.gi.GLib;
const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
function readFile(filename) {
let file = Gio.file_new_for_path(filename);
let [success, data, length] = file.load_contents(null);
return data;
}
const App = Lang.Class({
Name: 'App',
Extends: Gtk.Application,
_init: function() {
this.parent();
},
vfunc_activate: function() {
this.window = new AppWindow({application: this});
this.window.present();
}
});
const AppWindow = Lang.Class({
Name: 'AppWindow',
Extends: Gtk.ApplicationWindow,
Template: readFile('hello.glade'),
Children: ['label', 'button'],
_init: function(params) {
this.parent(params);
this.label.set_text('Hello, World!');
this.button.connect('clicked', this.onClose.bind(this));
},
onClose: function() {
this.application.quit();
}
});
let app = new App();
app.run(ARGV);
@faveoled
Copy link

faveoled commented Dec 12, 2021

If GTK 4.0 is present on the system
imports.gi.versions.Gtk = "3.0";

@cwilling
Copy link

I'm using glade-3.38.2. I don't see a template option in glade so where/how can the <template ....> be added?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment