<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="radiobutton.js" xml:lang="fr">
<info>
<title type="text">RadioButton (JavaScript)</title>
<link type="guide" xref="beginner.js#buttons"/>
<revision version="0.1" date="2012-06-15" status="draft"/>
<credit type="author copyright">
<name>Taryn Fox</name>
<email its:translate="no">jewelfox@fursona.net</email>
<years>2012</years>
</credit>
<desc>Un seul peut être sélectionné à la fois</desc>
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
<mal:name>Luc Rebert,</mal:name>
<mal:email>traduc@rebert.name</mal:email>
<mal:years>2011</mal:years>
</mal:credit>
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
<mal:name>Alain Lojewski,</mal:name>
<mal:email>allomervan@gmail.com</mal:email>
<mal:years>2011-2012</mal:years>
</mal:credit>
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
<mal:name>Luc Pionchon</mal:name>
<mal:email>pionchon.luc@gmail.com</mal:email>
<mal:years>2011</mal:years>
</mal:credit>
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
<mal:name>Bruno Brouard</mal:name>
<mal:email>annoa.b@gmail.com</mal:email>
<mal:years>2011-12</mal:years>
</mal:credit>
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
<mal:name>Luis Menina</mal:name>
<mal:email>liberforce@freeside.fr</mal:email>
<mal:years>2014</mal:years>
</mal:credit>
</info>
<title>RadioButton</title>
<media type="image" mime="image/png" src="media/radiobuttontravel.png"/>
<p>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.</p>
<p>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.</p>
<links type="section"/>
<section id="imports">
<title>Bibliothèques à importer</title>
<code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
]]></code>
<p>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.</p>
</section>
<section id="applicationwindow">
<title>Création de la fenêtre de l'application</title>
<code mime="application/javascript"><![CDATA[
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 ();
},
]]></code>
<p>Tout le code de cet exemple est dans la classe RadioButtonExample. Le code ci-dessus crée un <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pour y mettre nos éléments graphiques et la fenêtre qui les contient.</p>
<code mime="application/javascript"><![CDATA[
// 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"});
]]></code>
<p>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 <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> pour y mettre tous nos éléments graphiques.</p>
</section>
<section id="button">
<title>Création des boutons de radio</title>
<code mime="application/javascript"><![CDATA[
// Create a label for the first group of buttons
this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});
]]></code>
<p>Utilisez une étiquette <link xref="label.js">Gtk.Label</link> 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.</p>
<code mime="application/javascript"><![CDATA[
// 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);
]]></code>
<p>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.</p>
<p>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.</p>
<code mime="application/javascript"><![CDATA[
// 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 });
]]></code>
<p>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.</p>
</section>
<section id="ui">
<title>Création du reste de l'interface utilisateur</title>
<code mime="application/javascript"><![CDATA[
// 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));
]]></code>
<p>Ce code crée un bouton <link xref="button.js">Gtk.Button</link> et le lie à une fonction qui affiche un message stupide si on clique sur OK, selon les boutons qui sont sélectionnés.</p>
<p>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 <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock button types</link>.</p>
<code mime="application/javascript"><![CDATA[
// 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);
]]></code>
<p>Organisons chaque groupe de boutons de radio dans une grille <link xref="grid.js">Gtk.Grid</link> 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.</p>
<p>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.</p>
<code mime="application/javascript"><![CDATA[
// Show the window and all child widgets
this._window.show_all();
},
]]></code>
<p>Enfin, nous indiquons à la fenêtre de s'afficher avec son contenu au démarrage de l'application.</p>
</section>
<section id="function">
<title>Fonction prenant en charge votre sélection</title>
<code mime="application/javascript"><![CDATA[
_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));
},
]]></code>
<p>Quand vous cliquez sur OK, une boîte de dialogue <link xref="messagedialog.js">Gtk.MessageDialog</link> 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.</p>
<code mime="application/javascript"><![CDATA[
_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;
},
]]></code>
<p>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.</p>
<code mime="application/javascript"><![CDATA[
_clearTravelPopUp: function () {
this._travel.destroy();
}
});
]]></code>
<p>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.</p>
<code mime="application/javascript"><![CDATA[
// Run the application
let app = new RadioButtonExample ();
app.application.run (ARGV);
]]></code>
<p>Enfin, nous créons une nouvelle instance de la classe RadioButtonExample et lançons l'application.</p>
</section>
<section id="complete">
<title>Exemple complet de code</title>
<code mime="application/javascript" style="numbered">#!/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);
</code>
</section>
<section id="in-depth">
<title>Documentation approfondie</title>
<list>
<item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link></p></item>
<item><p><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link></p></item>
<item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Button.html">Gtk.Button</link></p></item>
<item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html">Gtk.Grid</link></p></item>
<item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.html">Gtk.Label</link></p></item>
<item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.RadioButton.html">Gtk.RadioButton</link></p></item>
</list>
</section>
</page>