languageSelector.js

#!/usr/bin/gjs

const Gtk = imports.gi.Gtk;
const Lang = imports.lang;

const LanguageSelector = new Lang.Class({
	Name: "Language Selector",

	// Create the application itself
	_init: function() {
		this.application = new Gtk.Application();

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

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

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

	// Build the application's UI
	_buildUI: function() {
		// Create the application window
		this._window = new Gtk.ApplicationWindow({
			application: this.application,
			window_position: Gtk.WindowPosition.CENTER,
			border_width: 10,
			title: "Language selector"
		});

		// Create the Grid
		this._grid = new Gtk.Grid({
			// column_homogeneous: true,
			column_spacing: 20,
			row_spacing: 20
		});

		// Create a label
		this._label = new Gtk.Label({
			label: "Selecciona tu lenguaje favorito"
		});

		// Attach the images and button to the grid
		// left top width height
		this._grid.attach(this._label, 1, 1, 4, 1);
		this._language1 = new Gtk.Label({
			label: "Javascript"
		});
		this._button1 = new Gtk.LinkButton({
			label: "Javascript page",
			uri: "https://www.javascript.com"
		});

		this._language2 = new Gtk.Label({
			label: "C"
		});
		this._button2 = new Gtk.LinkButton({
			label: "Go C web",
			uri: "https://www.learn-C.org"
		});
		this._language3 = new Gtk.Label({
			label: "Python"
		});
		this._button3 = new Gtk.LinkButton({
			label: "Python web page",
			uri: "https://www.python.org"
		});
		this._language4 = new Gtk.Label({
			label: "Java"
		});
		this._button4 = new Gtk.LinkButton({
			label: "Java web page",
			uri: "https://www.java.com"
		});

		// Add the grid to the window
		this._window.add(this._grid);

		this._grid.attach(this._language1, 1, 2, 2, 1);
		this._grid.attach(this._button1, 3, 2, 2, 1);

		this._grid.attach(this._language2, 1, 3, 2, 1);
		this._grid.attach(this._button2, 3, 3, 2, 1);

		this._grid.attach(this._language3, 1, 4, 2, 1);
		this._grid.attach(this._button3, 3, 4, 2, 1);

		this._grid.attach(this._language4, 1, 5, 2, 1);
		this._grid.attach(this._button4, 3, 5, 2, 1);

		// Show the window and all child widgets
		this._window.show_all();
	}
});

// Run the application
let app = new LanguageSelector();
app.application.run(ARGV);