Browsing Russian translation

11.

GTK+ stands for "GIMP Toolkit". It's like a toolbox of widgets that you can reach into, while building your applications. It was originally written for <link href="http://www.gimp.org/">the GIMP</link>, which is a free software image editor.

12.

Setting up our application

13.

Before we dig out any widgets from the GTK+ toolbox, we first need to write the basic boilerplate code that our application requires.

14.

#!/usr/bin/gjs

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

15.

This part always goes at the start of your code. Depending on what you'll be doing with it, you may want to declare more imports here. What we're writing today is pretty basic, so these are all we need; Gtk for the widgets, using the stable '3.0' API.

16.

Speaking of which:

17.

class WelcomeToTheGrid {
// Create the application itself
constructor() {
this.application = new Gtk.Application();

// Connect 'activate' and 'startup' signals to the callback functions
this.application.connect('activate', this._onActivate.bind(this));
this.application.connect('startup', this._onStartup.bind(this));
}

// Callback function for 'activate' signal presents windows when active
_onActivate() {
this._window.present();
}

// Callback function for 'startup' signal builds the UI
_onStartup() {
this._buildUI ();
}

18.

This is the start of the application itself, and the _init function which creates it. It tells _buildUI to create an ApplicationWindow, which we're going to call _window, and it tells our window to present itself whenever needed.

19.

This part, again, is pretty much copy-and-paste, but you always want to give your application a unique name.

20.

// Build the application's UI
_buildUI() {

// Create the application window
this._window = new Gtk.ApplicationWindow({
application: this.application,
window_position: Gtk.WindowPosition.CENTER,
border_width: 10,
title: "Welcome to the Grid"});