Cette application possède un CheckButton. L'état de la case – cochée ou non – indique s'il y a quelque chose d'affiché ou non dans la barre de titre de la fenêtre.
Un CheckButton envoie le signal d'inversion « toggled » quand il est cochée ou décochée. Tant qu'il est coché, la propriété « active » est vraie et tant qu'elle ne l'est pas, elle est fausse.
Ce sont les bibliothèques que nous devons importer pour faire fonctionner cette application. N'oubliez pas que la ligne qui informe GNOME que nous allons utiliser Gjs doit toujours se trouver au début.
Tout le code de cet exemple va dans la classe CheckButtonExample. Le code ci-dessus crée une Gtk.Application qui contiendra la fenêtre et nos composants graphiques.
Mettons tout le code nécessaire à la création de l'interface utilisateur dans la fonction _buildUI. Créons maintenant une nouvelle Gtk.ApplicationWindow pour y mettre tous nos composants graphiques.
Nous voulons que le titre de la fenêtre disparaisse quand la case à cocher devient décochée, et qu'elle réapparaisse quand elle devient cochée. Pour savoir quel est son état, il nous faut la tester. Nous appellerons pour cela la méthode get_active() dans un bloc if ou else.
Enfin, nous créons un nouvel exemple de la classe CheckButtonExample et démarrons l'application.
#!/usr/bin/gjs
imports.gi.versions.Gtk = '3.0';
const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
class CheckButtonExample {
// Create the application itself
constructor() {
this.application = new Gtk.Application({
application_id: 'org.example.jscheckbutton',
flags: Gio.ApplicationFlags.FLAGS_NONE
});
// 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 window when active
_onActivate() {
this._window.present();
}
// Callback function for 'startup' signal builds the UI
_onStartup() {
this._buildUI();
}
// Build the application's UI
_buildUI() {
// Create the application window
this._window = new Gtk.ApplicationWindow({
application: this.application,
window_position: Gtk.WindowPosition.CENTER,
default_height: 100,
default_width: 300,
border_width: 10,
title: "CheckButton Example"});
// Create the check button
this._button = new Gtk.CheckButton ({label: "Show Title"});
this._window.add (this._button);
// Have the check button be checked by default
this._button.set_active (true);
// Connect the button to a function that does something when it's toggled
this._button.connect ("toggled", this._toggledCB.bind(this));
// Show the window and all child widgets
this._window.show_all();
}
_toggledCB() {
// Make the window title appear or disappear when the checkbox is toggled
if (this._button.get_active() == true)
this._window.set_title ("CheckButton Example");
else
this._window.set_title ("");
}
};
// Run the application
let app = new CheckButtonExample ();
app.application.run (ARGV);
Gtk.Application
Gtk.ApplicationWindow
Gtk.CheckButton