Skip to content

Commit

Permalink
Add a simple Javascript example
Browse files Browse the repository at this point in the history
This shows how to use a layout manager in a widget,
implemented in javascript. The example sets up the
environment for running from the toplevel dir, assuming
that the build dir is called 'build'.
  • Loading branch information
Matthias Clasen committed Jul 5, 2021
1 parent 6efe31e commit 873f6cc
Showing 1 changed file with 50 additions and 0 deletions.
50 changes: 50 additions & 0 deletions examples/labels.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
#!/usr/bin/env -S GI_TYPELIB_PATH=${PWD}/build/gtk:${GI_TYPELIB_PATH} LD_PRELOAD=${LD_PRELOAD}:${PWD}/build/gtk/libgtk-4.so gjs

imports.gi.versions['Gtk'] = '4.0';

const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;

const DemoWidget = GObject.registerClass({
GTypeName: 'DemoWidget',
}, class DemoWidget extends Gtk.Widget {

_init(params = {}) {
super._init(params);

let layout_manager = new Gtk.GridLayout ();
this.set_layout_manager (layout_manager);
this.label1 = new Gtk.Label({ label: "Red",
hexpand: true,
vexpand: true });
this.label1.set_parent (this);
let child1 = layout_manager.get_layout_child (this.label1);
child1.set_row (0);
child1.set_column (0);

this.label2 = new Gtk.Label({ label: "Green",
hexpand: true,
vexpand: true });
this.label2.set_parent (this);
let child2 = layout_manager.get_layout_child (this.label2);
child2.set_row (0);
child2.set_column (1);
}
});

// Create a new application
let app = new Gtk.Application({ application_id: 'org.gtk.exampleapp' });

// When the application is launched…
app.connect('activate', () => {
// … create a new window …
let win = new Gtk.ApplicationWindow({ application: app });
// … with a button in it …
let widget = new DemoWidget();
win.set_child(widget);
win.present();
});

// Run the application
app.run([]);

0 comments on commit 873f6cc

Please sign in to comment.