# RadioButton (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Un seul peut être sélectionné à la fois
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

# RadioButton

Le terme « bouton de radio » provient de l'analogie avec les anciennes radios de nos vieux véhicules. Ils avaient des boutons poussoirs programmés et un seul pouvait resté enfoncé à la fois, transmettant une seule station. Si vous en enfonciez un autre, cela faisait sortir automatiquement le précédent. Ici, nos RadioButtons fonctionnent exactement de la même façon.

Chaque bouton de radio nécessite une étiquette texte et un groupe. Un seul bouton d'un même groupe peut être sélectionné à la fois. Ne nommez pas chaque groupe ; définissez seulement les nouveaux boutons à l'intérieur d'un groupe qui existe déjà. Si vous créez un bouton en dehors d'un groupe existant, il générera automatiquement un nouveau groupe pour s'y loger.

# 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 RadioButtonExample = new Lang.Class({ Name: 'RadioButton Example',

// Create the application itself _init: function() { this.application = new Gtk.Application({ application_id: 'org.example.jsradiobutton', flags: Gio.ApplicationFlags.FLAGS_NONE });

// 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 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.

// 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: "Travel Planning"});

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 boutons de radio

// Create a label for the first group of buttons this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});

Utilisez une étiquette Gtk.Label pour définir chaque groupe de boutons de radio séparément. Vous pouvez mettre les boutons de radio de tous les différents groupes où vous voulez, donc si vous voulez que l'on sache lesquels vont ensemble, vous devez organiser les choses en fonction.

// Create three radio buttons three different ways this._place1 = new Gtk.RadioButton ({label: "The Beach"});

this._place2 = Gtk.RadioButton.new_from_widget (this._place1); this._place2.set_label ("The Moon");

this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica"); // this._place3.set_active (true);

Voici trois méthodes différentes pour créer des boutons de radio. La première est la méthode habituelle, où nous créons un nouveau Gtk.RadioButton et lui assignons ses propriétés en même temps. La seconde et la troisième utilisent des fonctions qui prennent en charge automatiquement quelques unes des propriétés ; new_from_widget ne prend qu'un argument : le nouveau bouton de radio que vous voulez mettre dans le même groupe, alors que new_with_label_from_widget prend ce même argument et l'étiquette qui va avec en même temps.

Le premier bouton de radio d'un groupe est celui sélectionné par défaut. Décommentez la dernière ligne de cet exemple de code pour apprendre comment en définir un autre pour qu'il devienne celui sélectionné par défaut.

// Create a label for the second group of buttons this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });

// Create three more radio buttons this._thing1 = new Gtk.RadioButton ({label: "Penguins" }); this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 }); this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });

Ici, nous créons l'étiquette du second groupe de boutons et ensuite nous les générons tous de la même manière.

# Création du reste de l'interface utilisateur

// Create a stock OK button this._okButton = new Gtk.Button ({ label: 'gtk-ok', use_stock: 'true', halign: Gtk.Align.END });

// Connect the button to the function which handles clicking it this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));

Ce code crée un bouton Gtk.Button et le lie à une fonction qui affiche un message stupide si on clique sur OK, selon les boutons qui sont sélectionnés.

To make sure the button's "OK" label shows up properly in every language that GNOME is translated into, remember to use one of Gtk's stock button types.

// Create a grid to put the "place" items in this._places = new Gtk.Grid ();

// Attach the "place" items to the grid this._places.attach (this._placeLabel, 0, 0, 1, 1); this._places.attach (this._place1, 0, 1, 1, 1); this._places.attach (this._place2, 0, 2, 1, 1); this._places.attach (this._place3, 0, 3, 1, 1);

// Create a grid to put the "thing" items in this._things = new Gtk.Grid ({ margin_top: 50 });

// Attach the "thing" items to the grid this._things.attach (this._thingLabel, 0, 0, 1, 1); this._things.attach (this._thing1, 0, 1, 1, 1); this._things.attach (this._thing2, 0, 2, 1, 1); this._things.attach (this._thing3, 0, 3, 1, 1);

// Create a grid to put everything in this._grid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER, margin_left: 40, margin_right: 50 });

// Attach everything to the grid this._grid.attach (this._places, 0, 0, 1, 1); this._grid.attach (this._things, 0, 1, 1, 1); this._grid.attach (this._okButton, 0, 2, 1, 1);

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

Organisons chaque groupe de boutons de radio dans une grille Gtk.Grid séparée. Comme cela, nous pouvons modifier l'agencement plus aisément plus tard. Mettons une marge en haut de la deuxième grille pour séparer visuellemnt les deux ensembles de choix.

Après les avoir organisé, nous les mettons dans une troisième grille principale, avec le bouton OK. Puis, nous lions le tout à la fenêtre.

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

Enfin, nous indiquons à la fenêtre de s'afficher avec son contenu au démarrage de l'application.

# Fonction prenant en charge votre sélection

_okClicked: function () {

// Create a popup that shows a silly message this._travel = new Gtk.MessageDialog ({ transient_for: this._window, modal: true, message_type: Gtk.MessageType.OTHER, buttons: Gtk.ButtonsType.OK, text: this._messageText() });

// Show the popup this._travel.show();

// Bind the OK button to the function that closes the popup this._travel.connect ("response", Lang.bind (this, this._clearTravelPopUp));

},

Quand vous cliquez sur OK, une boîte de dialogue Gtk.MessageDialog s'affiche. Cette fonction crée et affiche le message surgissant et ensuite connecte son bouton OK à une fonction qui le ferme. Le contenu du message surgissant dépend de la fonction _messageText(), qui renvoie une valeur différente selon les options que vous avez choisies.

_messageText: function() {

// Create a silly message for the popup depending on what you selected var stringMessage = "";

if (this._place1.get_active()) {

if (this._thing1.get_active()) stringMessage = "Penguins love the beach, too!";

else if (this._thing2.get_active()) stringMessage = "Make sure to put on that sunscreen!";

else stringMessage = "Are you going to the beach in space?";

}

else if (this._place2.get_active()) {

if (this._thing1.get_active()) stringMessage = "The penguins will take over the moon!";

else if (this._thing2.get_active()) stringMessage = "A lack of sunscreen will be the least of your problems!";

else stringMessage = "You'll probably want a spaceship, too!"; }

else if (this._place3.get_active()) {

if (this._thing1.get_active()) stringMessage = "The penguins will be happy to be back home!";

else if (this._thing2.get_active()) stringMessage = "Antarctic sunbathing may be hazardous to your health!";

else stringMessage = "Try bringing a parka instead!"; }

return stringMessage;

},

La méthode get_active() permet de savoir quel bouton de radio a été pressé. Cette fonction renvoie un message stupide différent selon le bouton qui a été pressé. Sa valeur de retour est utilisée comme propriété du texte de la boîte de dialogue de message.

_clearTravelPopUp: function () {

this._travel.destroy();

}

});

Cette fonction est appelée quand le bouton OK du texte de la boîte de dialogue de message est pressé. Elle fait seulement disparaître le message surgissant.

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

Enfin, nous créons une nouvelle instance de la classe RadioButtonExample et lançons 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 RadioButtonExample {

// Create the application itself constructor() { this.application = new Gtk.Application({ application_id: 'org.example.jsradiobutton', 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, border_width: 20, title: "Travel Planning"});

// Create a label for the first group of buttons this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});

// Create three radio buttons three different ways this._place1 = new Gtk.RadioButton ({label: "The Beach"});

this._place2 = Gtk.RadioButton.new_from_widget (this._place1); this._place2.set_label ("The Moon");

this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica"); // this._place3.set_active (true);

// Create a label for the second group of buttons this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });

// Create three more radio buttons this._thing1 = new Gtk.RadioButton ({label: "Penguins" }); this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 }); this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });

// Create a stock OK button this._okButton = new Gtk.Button ({ label: 'gtk-ok', use_stock: 'true', halign: Gtk.Align.END });

// Connect the button to the function which handles clicking it this._okButton.connect ('clicked', this._okClicked.bind(this));

// Create a grid to put the "place" items in this._places = new Gtk.Grid ();

// Attach the "place" items to the grid this._places.attach (this._placeLabel, 0, 0, 1, 1); this._places.attach (this._place1, 0, 1, 1, 1); this._places.attach (this._place2, 0, 2, 1, 1); this._places.attach (this._place3, 0, 3, 1, 1);

// Create a grid to put the "thing" items in this._things = new Gtk.Grid ({ margin_top: 50 });

// Attach the "thing" items to the grid this._things.attach (this._thingLabel, 0, 0, 1, 1); this._things.attach (this._thing1, 0, 1, 1, 1); this._things.attach (this._thing2, 0, 2, 1, 1); this._things.attach (this._thing3, 0, 3, 1, 1);

// Create a grid to put everything in this._grid = new Gtk.Grid ({ halign: Gtk.Align.CENTER, valign: Gtk.Align.CENTER, margin_left: 40, margin_right: 50 });

// Attach everything to the grid this._grid.attach (this._places, 0, 0, 1, 1); this._grid.attach (this._things, 0, 1, 1, 1); this._grid.attach (this._okButton, 0, 2, 1, 1);

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

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

_okClicked() {

// Create a popup that shows a silly message this._travel = new Gtk.MessageDialog ({ transient_for: this._window, modal: true, message_type: Gtk.MessageType.OTHER, buttons: Gtk.ButtonsType.OK, text: this._messageText() });

// Show the popup this._travel.show();

// Bind the OK button to the function that closes the popup this._travel.connect ("response", this._clearTravelPopUp.bind(this));

}

_messageText() {

// Create a silly message for the popup depending on what you selected var stringMessage = "";

if (this._place1.get_active()) {

if (this._thing1.get_active()) stringMessage = "Penguins love the beach, too!";

else if (this._thing2.get_active()) stringMessage = "Make sure to put on that sunscreen!";

else stringMessage = "Are you going to the beach in space?";

}

else if (this._place2.get_active()) {

if (this._thing1.get_active()) stringMessage = "The penguins will take over the moon!";

else if (this._thing2.get_active()) stringMessage = "A lack of sunscreen will be the least of your problems!";

else stringMessage = "You'll probably want a spaceship, too!"; }

else if (this._place3.get_active()) {

if (this._thing1.get_active()) stringMessage = "The penguins will be happy to be back home!";

else if (this._thing2.get_active()) stringMessage = "Antarctic sunbathing may be hazardous to your health!";

else stringMessage = "Try bringing a parka instead!"; }

return stringMessage;

}

_clearTravelPopUp() { this._travel.destroy(); } };

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

# Documentation approfondie

Gtk.Application

Gtk.ApplicationWindow

Gtk.Button

Gtk.Grid

Gtk.Label

Gtk.RadioButton