|
Packit |
1470ea |
|
|
Packit |
1470ea |
<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="togglebutton.js" xml:lang="fr">
|
|
Packit |
1470ea |
<info>
|
|
Packit |
1470ea |
<title type="text">ToggleButton (JavaScript)</title>
|
|
Packit |
1470ea |
<link type="guide" xref="beginner.js#buttons"/>
|
|
Packit |
1470ea |
<revision version="0.1" date="2012-06-16" status="draft"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<credit type="author copyright">
|
|
Packit |
1470ea |
<name>Taryn Fox</name>
|
|
Packit |
1470ea |
<email its:translate="no">jewelfox@fursona.net</email>
|
|
Packit |
1470ea |
<years>2012</years>
|
|
Packit |
1470ea |
</credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<desc>Reste enfoncé jusqu'à ce que vous cliquiez dessus à nouveau</desc>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Luc Rebert,</mal:name>
|
|
Packit |
1470ea |
<mal:email>traduc@rebert.name</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Alain Lojewski,</mal:name>
|
|
Packit |
1470ea |
<mal:email>allomervan@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011-2012</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Luc Pionchon</mal:name>
|
|
Packit |
1470ea |
<mal:email>pionchon.luc@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Bruno Brouard</mal:name>
|
|
Packit |
1470ea |
<mal:email>annoa.b@gmail.com</mal:email>
|
|
Packit |
1470ea |
<mal:years>2011-12</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
|
|
Packit |
1470ea |
<mal:name>Luis Menina</mal:name>
|
|
Packit |
1470ea |
<mal:email>liberforce@freeside.fr</mal:email>
|
|
Packit |
1470ea |
<mal:years>2014</mal:years>
|
|
Packit |
1470ea |
</mal:credit>
|
|
Packit |
1470ea |
</info>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<title>ToggleButton</title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/togglebutton.png"/>
|
|
Packit |
1470ea |
Un ToggleButton ressemble à un <link xref="button.js">bouton</link> 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'<link xref="spinner.js">indicateur d'activité</link> de cet exemple.
|
|
Packit |
1470ea |
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.
|
|
Packit |
1470ea |
<links type="section"/>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="imports">
|
|
Packit |
1470ea |
<title>Bibliothèques à importer</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
const Gio = imports.gi.Gio;
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
const Lang = imports.lang;
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
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.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="applicationwindow">
|
|
Packit |
1470ea |
<title>Création de la fenêtre de l'application</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
const ToggleButtonExample = new Lang.Class({
|
|
Packit |
1470ea |
Name: 'ToggleButton Example',
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
_init: function() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application({
|
|
Packit |
1470ea |
application_id: 'org.example.jstogglebutton',
|
|
Packit |
1470ea |
flags: Gio.ApplicationFlags.FLAGS_NONE
|
|
Packit |
1470ea |
});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect 'activate' and 'startup' signals to the callback functions
|
|
Packit |
1470ea |
this.application.connect('activate', Lang.bind(this, this._onActivate));
|
|
Packit |
1470ea |
this.application.connect('startup', Lang.bind(this, this._onStartup));
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'activate' signal presents window when active
|
|
Packit |
1470ea |
_onActivate: function() {
|
|
Packit |
1470ea |
this._window.present();
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'startup' signal builds the UI
|
|
Packit |
1470ea |
_onStartup: function() {
|
|
Packit |
1470ea |
this._buildUI ();
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
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.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Build the application's UI
|
|
Packit |
1470ea |
_buildUI: function() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
default_height: 300,
|
|
Packit |
1470ea |
default_width: 300,
|
|
Packit |
1470ea |
border_width: 30,
|
|
Packit |
1470ea |
title: "ToggleButton Example"});
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
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.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="togglebutton">
|
|
Packit |
1470ea |
<title>Création du ToggleButton et des autres éléments graphiques</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the spinner that the button stops and starts
|
|
Packit |
1470ea |
this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
Nous voulons que cet <link xref="spinner.js">indicateur d'activité</link> puisse s'étendre verticalement et horizontalement pour prendre le maximum d'espace disponible dans la fenêtre.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the togglebutton that starts and stops the spinner
|
|
Packit |
1470ea |
this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
|
|
Packit |
1470ea |
this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
La création d'un ToggleButton ressemble beaucoup à la création d'un <link xref="button.js">bouton</link> normal. La plus grosse différence réside dans le fait que vous manipulez un signal « toggled » au lieu d'un signal « clicked ». Ce code relie la fonction _onToggle à ce signal, de sorte qu'elle est appelée à chaque fois que le ToggleButton est commuté.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create a grid and put everything in it
|
|
Packit |
1470ea |
this._grid = new Gtk.Grid ({
|
|
Packit |
1470ea |
row_homogeneous: false,
|
|
Packit |
1470ea |
row_spacing: 15});
|
|
Packit |
1470ea |
this._grid.attach (this._spinner, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._toggleButton, 0, 1, 1, 1);
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Nous créons ici une simple <link xref="grid.js">grille</link> pour tout ranger dedans, puis nous lui attachons le Spinner (indicateur d'activité) et le ToggleButton.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Add the grid to the window
|
|
Packit |
1470ea |
this._window.add (this._grid);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
},
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Ensuite, nous ajoutons la grille à la fenêtre et demandons à celle-ci de s'afficher ainsi que ses éléments graphiques enfants quand l'application est démarrée.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="toggled">
|
|
Packit |
1470ea |
<title>Déclenchement d'une action quand le ToggleButton est commuté</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_onToggle: function() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Start or stop the spinner
|
|
Packit |
1470ea |
if (this._toggleButton.get_active ())
|
|
Packit |
1470ea |
this._spinner.start ();
|
|
Packit |
1470ea |
else this._spinner.stop ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
});
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
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.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new ToggleButtonExample ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Enfin, nous créons une nouvelle instance de la classe RadioButtonExample et lançons l'application.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="complete">
|
|
Packit |
1470ea |
<title>Exemple complet de code</title>
|
|
Packit |
1470ea |
#!/usr/bin/gjs
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
imports.gi.versions.Gtk = '3.0';
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
const Gio = imports.gi.Gio;
|
|
Packit |
1470ea |
const Gtk = imports.gi.Gtk;
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
class ToggleButtonExample {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application({
|
|
Packit |
1470ea |
application_id: 'org.example.jstogglebutton',
|
|
Packit |
1470ea |
flags: Gio.ApplicationFlags.FLAGS_NONE
|
|
Packit |
1470ea |
});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect 'activate' and 'startup' signals to the callback functions
|
|
Packit |
1470ea |
this.application.connect('activate', this._onActivate.bind(this));
|
|
Packit |
1470ea |
this.application.connect('startup', this._onStartup.bind(this));
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'activate' signal presents window when active
|
|
Packit |
1470ea |
_onActivate() {
|
|
Packit |
1470ea |
this._window.present();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Callback function for 'startup' signal builds the UI
|
|
Packit |
1470ea |
_onStartup() {
|
|
Packit |
1470ea |
this._buildUI();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Build the application's UI
|
|
Packit |
1470ea |
_buildUI() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application window
|
|
Packit |
1470ea |
this._window = new Gtk.ApplicationWindow({
|
|
Packit |
1470ea |
application: this.application,
|
|
Packit |
1470ea |
window_position: Gtk.WindowPosition.CENTER,
|
|
Packit |
1470ea |
default_height: 300,
|
|
Packit |
1470ea |
default_width: 300,
|
|
Packit |
1470ea |
border_width: 30,
|
|
Packit |
1470ea |
title: "ToggleButton Example"});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the spinner that the button stops and starts
|
|
Packit |
1470ea |
this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the togglebutton that starts and stops the spinner
|
|
Packit |
1470ea |
this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
|
|
Packit |
1470ea |
this._toggleButton.connect ('toggled', this._onToggle.bind(this));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create a grid and put everything in it
|
|
Packit |
1470ea |
this._grid = new Gtk.Grid ({
|
|
Packit |
1470ea |
row_homogeneous: false,
|
|
Packit |
1470ea |
row_spacing: 15});
|
|
Packit |
1470ea |
this._grid.attach (this._spinner, 0, 0, 1, 1);
|
|
Packit |
1470ea |
this._grid.attach (this._toggleButton, 0, 1, 1, 1);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Add the grid to the window
|
|
Packit |
1470ea |
this._window.add (this._grid);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_onToggle() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Start or stop the spinner
|
|
Packit |
1470ea |
if (this._toggleButton.get_active ())
|
|
Packit |
1470ea |
this._spinner.start ();
|
|
Packit |
1470ea |
else this._spinner.stop ();
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new ToggleButtonExample ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="in-depth">
|
|
Packit |
1470ea |
<title>Documentation approfondie</title>
|
|
Packit |
1470ea |
<list>
|
|
Packit |
1470ea |
<item><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> </item>
|
|
Packit |
1470ea |
<item><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link> </item>
|
|
Packit |
1470ea |
<item><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html">Gtk.Grid</link> </item>
|
|
Packit |
1470ea |
<item><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Spinner.html">Gtk.Spinner</link> </item>
|
|
Packit |
1470ea |
<item><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ToggleButton.html">Gtk.ToggleButton</link> </item>
|
|
Packit |
1470ea |
</list>
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
</page>
|