Un ToggleButton ressemble à un bouton normal, sauf qu'il reste enfoncé après l'avoir cliqué. Vous pouvez l'utiliser comme un commutateur allumé/éteint pour contrôler des éléments comme l'indicateur d'activité de cet exemple.
La méthode get_active d'un ToggleButton renvoie « true » (vrai) s'il est enfoncé et « false » dans le cas contraire. Utilisez sa méthode set_active si vous souhaitez changer son état sans avoir besoin de cliquer dessus. Quand il passe de l'état « enfoncé » à « relâché » et vice versa, il envoie le signal « toggled » que vous pouvez connecter à une fonction afin d'effectuer une action.
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 est dans la classe RadioButtonExample. Le code ci-dessus crée un Gtk.Application pour y mettre nos éléments graphiques et la fenêtre qui les contient.
La fonction _buildUI est l'endroit où nous mettons tout le code nécessaire à la création de l'interface utilisateur de l'application. La première étape consiste à créer une Gtk.ApplicationWindow pour y mettre tous nos éléments graphiques.
Chaque fois que quelqu'un commutte le bouton, cette fonction vérifie s'il est enfoncé ou non en utilisant get_active et, selon le cas, démarre ou arrête l'indicateur d'activité. Nous voulons qu'il ne tourne que lorsque le bouton est enfoncé, donc, si get_active renvoie la valeur true (vrai), nous démarrons l'indicateur, sinon, nous lui indiquons de s'arrêter.
Enfin, nous créons une nouvelle instance de la classe RadioButtonExample et lançons l'application.
#!/usr/bin/gjs
imports.gi.versions.Gtk = '3.0';
const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
class ToggleButtonExample {
// Create the application itself
constructor() {
this.application = new Gtk.Application({
application_id: 'org.example.jstogglebutton',
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: 300,
default_width: 300,
border_width: 30,
title: "ToggleButton Example"});
// Create the spinner that the button stops and starts
this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
// Create the togglebutton that starts and stops the spinner
this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
this._toggleButton.connect ('toggled', this._onToggle.bind(this));
// Create a grid and put everything in it
this._grid = new Gtk.Grid ({
row_homogeneous: false,
row_spacing: 15});
this._grid.attach (this._spinner, 0, 0, 1, 1);
this._grid.attach (this._toggleButton, 0, 1, 1, 1);
// Add the grid to the window
this._window.add (this._grid);
// Show the window and all child widgets
this._window.show_all();
}
_onToggle() {
// Start or stop the spinner
if (this._toggleButton.get_active ())
this._spinner.start ();
else this._spinner.stop ();
}
};
// Run the application
let app = new ToggleButtonExample ();
app.application.run (ARGV);
Gtk.Application
Gtk.ApplicationWindow
Gtk.Grid
Gtk.Spinner
Gtk.ToggleButton