JavaScript Gtk widgets support: Glade User Interface Designer Reference Manual

JavaScript Gtk widgets support

Add GJS/JavaScript support to your catalog — How to write and install a catalog for a JavaScript widget library

Introduction

Glade supports loading widgets programed in JavaScript by linking and running GJS from the gladegjs catalog plugin.

So in order for glade to support your JavaScript widgets you will have to:

a) specify gladegjs support code as your plugin library.

b) set glade_gjs_init as you init function.

c) make sure your catalog name is the same as your JavaScript import library since glade_gjs_init() will use this name to import your widgets into the interpreter.


<glade-catalog name="gjsplugin" library="gladegjs" domain="glade-3" depends="gtk+">
 <init-function>glade_gjs_init</init-function>

 <glade-widget-classes>
   <glade-widget-class title="MyJSGrid" name="MyJSGrid" generic-name="mygrid"/>
 </glade-widget-classes>

 <glade-widget-group name="gjs" title="Gjs">
   <glade-widget-class-ref name="MyJSGrid"/>
 </glade-widget-group>
</glade-catalog>

GJS will look up for your widgets in the same places it looks for regular catalogs plugins, that is $GLADE_ENV_MODULE_PATH environment variable and `pkg-config --variable=moduledir gladeui-2.0` So the easiest thing would be to make a symlink in one of those directory, just do not forget that the name should be the one specified in your catalog name.

gjsplugin.js


#!/usr/bin/gjs

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

var MyJSGrid = GObject.registerClass({
    GTypeName: 'MyJSGrid',
    Properties: {
      'string-property': GObject.ParamSpec.string('string-property', 'String Prop',
        'Longer description', GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
        'Foobar'),
      'int-property': GObject.ParamSpec.int('int-property', 'Integer Prop',
        'Longer description',
         GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
         0, 10, 5)
    },
    Signals: {'mysignal': {param_types: [GObject.TYPE_INT]}},
}, class MyJSGrid extends Gtk.Grid {
    _init(props) {
        super._init(props);
        this.label = new Gtk.Label ({ visible: true });
        this.add (this.label);
        this.connect('notify::string-property', this._update.bind(this));
        this.connect('notify::int-property', this._update.bind(this));
        this._update();
    }
    _update (obj, pspec) {
        this.label.set_text ('JS Properties\nInteger = ' + this.int_property + '\nString = \'' + this.string_property + '\'');
    }
});