|
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="checkbutton.js" xml:lang="fr">
|
|
Packit |
1470ea |
<info>
|
|
Packit |
1470ea |
<title type="text">CheckButton (JavaScript)</title>
|
|
Packit |
1470ea |
<link type="guide" xref="beginner.js#buttons"/>
|
|
Packit |
1470ea |
<revision version="0.1" date="2012-06-12" 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>Une case que l'on peut cocher ou décocher</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>CheckButton</title>
|
|
Packit |
1470ea |
<media type="image" mime="image/png" src="media/checkbutton.png"/>
|
|
Packit |
1470ea |
Cette application possède un CheckButton. L'état de la case – cochée ou non – indique s'il y a quelque chose d'affiché ou non dans la barre de titre de la fenêtre.
|
|
Packit |
1470ea |
Un CheckButton envoie le signal d'inversion « toggled » quand il est cochée ou décochée. Tant qu'il est coché, la propriété « active » est vraie et tant qu'elle ne l'est pas, elle est fausse.
|
|
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 |
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 |
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 |
class CheckButtonExample {
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application({
|
|
Packit |
1470ea |
application_id: 'org.example.jscheckbutton',
|
|
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 |
Tout le code de cet exemple va dans la classe CheckButtonExample. Le code ci-dessus crée une <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> qui contiendra la fenêtre et nos composants graphiques.
|
|
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: 100,
|
|
Packit |
1470ea |
default_width: 300,
|
|
Packit |
1470ea |
border_width: 10,
|
|
Packit |
1470ea |
title: "CheckButton Example"});
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Mettons tout le code nécessaire à la création de l'interface utilisateur dans la fonction _buildUI. Créons maintenant une nouvelle <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> pour y mettre tous nos composants graphiques.
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="button">
|
|
Packit |
1470ea |
<title>Création de la case à cocher</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the check button
|
|
Packit |
1470ea |
this._button = new Gtk.CheckButton ({label: "Show Title"});
|
|
Packit |
1470ea |
this._window.add (this._button);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Have the check button be checked by default
|
|
Packit |
1470ea |
this._button.set_active (true);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the button to a function that does something when it's toggled
|
|
Packit |
1470ea |
this._button.connect ("toggled", this._toggledCB.bind(this));
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Ce code ne génère que la case à cocher. Pour créer l'étiquette à côté de la case à cocher, il faut donner à la case à cocher la propriété « label » et lui assigner une valeur de chaîne. Comme la case à cocher s'inverse selon que le titre de la fenêtre s'affiche ou non (et nous le mettons en position affiché pour commencer), il faut que la case soit cochée par défaut. Ensuite, à chaque fois que l'utilisateur coche ou décoche la case, nous appelons la fonction _toggledCB.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Ce code termine la création de l'interface utilisateur en indiquant à la fenêtre de s'afficher toute seule avec tous ses composants graphiques enfants (il n'y a que la case à cocher dans cet exemple).
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
<section id="function">
|
|
Packit |
1470ea |
<title>Fonction prenant en charge l'inversion de la case à cocher</title>
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_toggledCB() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Make the window title appear or disappear when the checkbox is toggled
|
|
Packit |
1470ea |
if (this._button.get_active() == true)
|
|
Packit |
1470ea |
this._window.set_title ("CheckButton Example");
|
|
Packit |
1470ea |
else
|
|
Packit |
1470ea |
this._window.set_title ("");
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Nous voulons que le titre de la fenêtre disparaisse quand la case à cocher devient décochée, et qu'elle réapparaisse quand elle devient cochée. Pour savoir quel est son état, il nous faut la tester. Nous appellerons pour cela la méthode get_active() dans un bloc if ou else.
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new CheckButtonExample ();
|
|
Packit |
1470ea |
app.application.run (ARGV);
|
|
Packit |
1470ea |
]]>
|
|
Packit |
1470ea |
Enfin, nous créons un nouvel exemple de la classe CheckButtonExample et démarrons 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 CheckButtonExample {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the application itself
|
|
Packit |
1470ea |
constructor() {
|
|
Packit |
1470ea |
this.application = new Gtk.Application({
|
|
Packit |
1470ea |
application_id: 'org.example.jscheckbutton',
|
|
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: 100,
|
|
Packit |
1470ea |
default_width: 300,
|
|
Packit |
1470ea |
border_width: 10,
|
|
Packit |
1470ea |
title: "CheckButton Example"});
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Create the check button
|
|
Packit |
1470ea |
this._button = new Gtk.CheckButton ({label: "Show Title"});
|
|
Packit |
1470ea |
this._window.add (this._button);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Have the check button be checked by default
|
|
Packit |
1470ea |
this._button.set_active (true);
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Connect the button to a function that does something when it's toggled
|
|
Packit |
1470ea |
this._button.connect ("toggled", this._toggledCB.bind(this));
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Show the window and all child widgets
|
|
Packit |
1470ea |
this._window.show_all();
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
_toggledCB() {
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Make the window title appear or disappear when the checkbox is toggled
|
|
Packit |
1470ea |
if (this._button.get_active() == true)
|
|
Packit |
1470ea |
this._window.set_title ("CheckButton Example");
|
|
Packit |
1470ea |
else
|
|
Packit |
1470ea |
this._window.set_title ("");
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
}
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
};
|
|
Packit |
1470ea |
|
|
Packit |
1470ea |
// Run the application
|
|
Packit |
1470ea |
let app = new CheckButtonExample ();
|
|
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.CheckButton.html">Gtk.CheckButton</link> </item>
|
|
Packit |
1470ea |
</list>
|
|
Packit |
1470ea |
</section>
|
|
Packit |
1470ea |
</page>
|