# SpinButton (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Un champ de saisie de nombres avec des boutons + et -
Luc Rebert,
traduc@rebert.name 2011
Alain Lojewski,
allomervan@gmail.com 2011-2012
Luc Pionchon
pionchon.luc@gmail.com 2011
Bruno Brouard
annoa.b@gmail.com 2011-12
Luis Menina
liberforce@freeside.fr 2014

# SpinButton

A SpinButton is not related to a Spinner. It's a text entry field which only accepts numbers, and which has plus and minus buttons to let you change the value without having to type anything in.

Son utilisation est optimale quand il apparaît évident que seul un nombre peut y être saisi. Dans cet exemple, nous utilisons deux BoutonDactivités pour définir le nombre de chatons et le nombre de boîtes de thon à leur donner.

# Bibliothèques à importer

#!/usr/bin/gjs

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

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.

# Création de la fenêtre de l'application

const SpinButtonExample = new Lang.Class({ Name: 'SpinButton Example',

// Create the application itself _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jsspinbutton' });

// 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 window when active _onActivate: function() { this._window.present(); },

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

Tout le code de cet exemple va dans la classe SpinButtonExample. Le code ci-dessus crée une Gtk.Application pour nos éléments graphiques et la fenêtre qui les contient.

// 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: 20, title: "Kitten Feeder"});

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.

# Création des BoutonDactivités

// Create the first spinbutton using a function this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1); this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));

Utilisons la fonction new_with_range pour créer rapidement un nouveau BoutonDactivité. Son premier paramètre est la valeur de départ du BoutonDactivité, le second est la valeur maximale et le troisième est la valeur de l'incrément lorsque les boutons plus ou moins sont pressés.

Après avoir généré le premier BoutonDactivité, nous connectons son signal value-changed à une fonction qui gère ce qui se passe quand le nombre à l'intérieur d'un des deux BoutonDactivités change.

// Create an adjustment to use for the second spinbutton this._adjustment = new Gtk.Adjustment ({ value: 1, lower: 0, upper: 9001, step_increment: 1, page_increment: 10 });

// Create the second spinbutton this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment }); this._tuna.connect ("value-changed", Lang.bind (this, this._newValue));

// this._tuna.set_digits (1); // this._tuna.set_wrap (true);

If you want more fine-grained control over a SpinButton, or want to create a bunch of SpinButtons which all use the same parameters, you can create an object called an Adjustment. Then you can use that object as a new SpinButton's adjustment property, and it sets all the values at once. Afterwards, you can change all the SpinButtons which use that adjustment by changing the Adjustment object's properties.

Ici, les lignes placées en commentaires vous montrent des moyens de personnaliser votre BoutonDactivité. Vous pouvez, par exemple, définir le nombre de décimales après la virgule, ou lui indiquer qu'il doit aller à la ligne s'il dépasse les limites supérieures ou inférieures que vous avez définies.

Dans l'intérêt des chatons, il est préférable de ne pas autoriser set_digits à paramétrer un nombre décimal de chatons.

# Création du reste de l'interface utilisateur

// Create the text labels to go with the spinbuttons this._startLabel = new Gtk.Label ({ label: "There are " }); this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "}); this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."}); this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value())); this._lastLabel = new Gtk.Label ({ label: "That's " + this.perKitten + " can(s) of tuna per kitten." });

Créons chaque étiquette individuellement et attachons-les ensemble avec les BoutonDactivités. La dernière étiquette doit afficher le nombre de boîtes de thon par chaton, elle comprend donc une variable au milieu qui correspond à une équation qui utilise les fonctions get_value des BoutonDactivités pour trouver à quelles valeurs ils sont définis. On utilise une méthode mathématique de base en JavaScript pour arrondir le nombre de boîtes de thon par chaton à l'entier le plus proche.

// Create a grid to put the spinbuttons and their labels in this._spinGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER, margin_bottom: 20 });

// Attach everything to the grid this._spinGrid.attach (this._startLabel, 0, 0, 1, 1); this._spinGrid.attach (this._kittens, 1, 0, 1, 1); this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1); this._spinGrid.attach (this._tuna, 3, 0, 1, 1); this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);

// Create a main grid to hold it and the last label this._mainGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER });

// Attach the smaller grid and the last label to the main grid this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1); this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);

Ici, nous utilisons des éléments graphiques grille pour tout ranger. Une grille maintient les étiquettes et les BoutonDactivités dans l'ordre pendant que l'autre affiche la première grille en haut et la dernière étiquette en bas.

Il n'y a pas de mauvaise façon de ranger les éléments dans les grilles, à partir du moment où cela vous convient. Dans notre cas, la grille du haut comporte une marge en bas pour la séparer de l'étiquette qui se trouve au-dessous et qui est dans une grille indépendante centrée par rapport aux étiquettes et BoutonDactivités du haut.

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

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

Enfin, ajoutons la grille la plus grande à la fenêtre et indiquons à la fenêtre de s'afficher avec tous les éléments graphiques à l'intérieur.

# Fonction prenant en charge les valeurs numériques des BoutonDactivités en cours de réglage

_newValue: function () {

// Update the label which shows how many cans there are per kitten this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value())) this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten.");

}

});

Ici, nous mettons à jour la variable parchaton en fonction des nouvelles valeurs des BoutonDactivités et utilisons les propriétés de set_label pour actualiser ce qu'affiche _lastLabel. Comme les deux BoutonDactivités ont leur signal value-changed connecté à cette fonction, celle-ci met à jour l'étiquette à chaque fois qu'un des nombres change.

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

Enfin, nous créons un nouvel exemple de la classe SpinButtonExample et démarrons l'application.

# Exemple complet de code

#!/usr/bin/gjs

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

const Gio = imports.gi.Gio; const Gtk = imports.gi.Gtk;

class SpinButtonExample {

// Create the application itself constructor() { this.application = new Gtk.Application({ application_id: 'org.example.jsspinbutton' });

// 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, border_width: 20, title: "Kitten Feeder"});

// Create the first spinbutton using a function this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1); this._kittens.connect ("value-changed", this._newValue.bind(this));

// Create an adjustment to use for the second spinbutton this._adjustment = new Gtk.Adjustment ({ value: 1, lower: 0, upper: 9001, step_increment: 1, page_increment: 10 });

// Create the second spinbutton this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment }); this._tuna.connect ("value-changed", this._newValue.bind(this));

// this._tuna.set_digits (1); // this._tuna.set_wrap (true);

// Create the text labels to go with the spinbuttons this._startLabel = new Gtk.Label ({ label: "There are " }); this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "}); this._tunaLabel = new Gtk.Label ({ label: " can(s) of tuna."}); this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value())); this._lastLabel = new Gtk.Label ({ label: "That's " + this.perKitten + " can(s) of tuna per kitten." });

// Create a grid to put the spinbuttons and their labels in this._spinGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER, margin_bottom: 20 });

// Attach everything to the grid this._spinGrid.attach (this._startLabel, 0, 0, 1, 1); this._spinGrid.attach (this._kittens, 1, 0, 1, 1); this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1); this._spinGrid.attach (this._tuna, 3, 0, 1, 1); this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);

// Create a main grid to hold it and the last label this._mainGrid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER });

// Attach the smaller grid and the last label to the main grid this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1); this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);

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

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

_newValue() { // Update the label which shows how many cans there are per kitten this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value())) this._lastLabel.set_label ("That's " + this.perKitten + " can(s) of tuna per kitten."); } };

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

# Documentation approfondie

Gtk.Adjustment

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Label

Gtk.SpinButton