1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
|
<?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="comboboxtext.js" xml:lang="fr">
<info>
<title type="text">ComboBoxText (JavaScript)</title>
<link type="guide" xref="beginner.js#menu-combo-toolbar"/>
<link type="seealso" xref="GtkApplicationWindow.js"/>
<link type="seealso" xref="messagedialog.js"/>
<revision version="0.1" date="2012-07-06" status="draft"/>
<credit type="author copyright">
<name>Taryn Fox</name>
<email its:translate="no">jewelfox@fursona.net</email>
<years>2012</years>
</credit>
<desc>Un menu déroulant texte seul</desc>
</info>
<title>BoiteCombineeTexte</title>
<media type="image" mime="image/png" src="media/combobox.png"/>
<p>Une BoiteCombinee est un menu déroulant. La différence entre une <link xref="combobox.js">BoiteCombinee</link> et une BoiteCombineeTexte est que cette dernière ne possède que des options texte de base, alors que la BoiteCombinee utilise un ListStore ou un TreeStore (qui sont de simples feuilles de calcul) pour afficher des éléments arborescents ou des images à côté de chaque choix.</p>
<note><p>À moins que vous n'ayez besoin des fonctions supplémentaires d'une BoiteCombinee, ou si vous vous sentez à l'aise dans la manipulation des ListStore et TreeStore, il est préférable d'utiliser la simplicité d'une BoiteCombineeTexte chaque fois que possible.</p></note>
<links type="section"/>
<section id="imports">
<title>Bibliothèques à importer</title>
<code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
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 ComboBoxTextExample = new Lang.Class ({
Name: 'ComboBoxText Example',
// Create the application itself
_init: function () {
this.application = new Gtk.Application ({
application_id: 'org.example.jscomboboxtext'});
// 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 windows 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 va dans la classe MessageDialogExample. 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> pour 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,
title: "Welcome to GNOME",
default_width: 200,
border_width: 10 });
]]></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="comboboxtext">
<title>Création de la BoiteCombineeTexte</title>
<code mime="application/javascript"><![CDATA[
// Create the combobox
this._comboBoxText = new Gtk.ComboBoxText();
// Populate the combobox
let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
for (let i = 0; i < distros.length; i++)
this._comboBoxText.append_text (distros[i]);
this._comboBoxText.set_active (0);
// Connect the combobox's 'changed' signal to our callback function
this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));
]]></code>
<p>Après avoir créé la BoiteCombineeTexte, utilisons la méthode <file>append_text</file> pour lui ajouter des chaînes de texte. Comme les entrées d'un tableau, les chaînes ont chacune un nombre comme identifiant, en commençant par 0. Pour simplifier les choses, créons un tableau pour les entrées de la BoiteCombineeTexte et utilisons une boucle pour les ajouter dans l'ordre, comme ici.</p>
<p>Après avoir garni la BoiteCombineeTexte, définissons sa première entrée pour qu'elle devienne active, nous pouvons ainsi voir la ligne « Select distribution » avant de cliquer dessus. Connectons ensuite son signal <file>changed</file> à la fonction _onComboChanged, pour qu'elle soit appelée à chaque fois que vous faites une nouvelle sélection dans le menu déroulant.</p>
<note><p>Pour ajouter une entrée dans une BoiteCombineeTexte, utilisez la méthode <file>insert_text</file>. Pour utiliser une chaîne texte plutôt qu'un identifiant pour chaque entrée se référant à un nombre seul, utilisez les méthodes <file>append</file> et <file>insert</file>. Reportez-vous aux liens au bas de ce tutoriel pour de plus amples informations sur leur utilisation.</p></note>
<code mime="application/javascript"><![CDATA[
// Add the combobox to the window
this._window.add (this._comboBoxText);
// Show the window and all child widgets
this._window.show_all();
},
]]></code>
<p>Enfin, ajoutons la BoiteCombineeTexte à la fenêtre et indiquons à la fenêtre de s'afficher avec ses éléments graphiques à l'intérieur.</p>
</section>
<section id="function">
<title>Fonction prenant en charge votre sélection</title>
<code mime="application/javascript"><![CDATA[
_onComboChanged: function () {
// The responses we'll use for our messagedialog
let responses = ["",
"Fedora is a community distro sponsored by Red Hat.",
"Mint is a popular distro based on Ubuntu.",
"SUSE is a name shared by two separate distros."];
]]></code>
<p>We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a message based on which distro you select. First, we create the array of responses to use. Since the first string in our ComboBoxText is just the "Select distribution" message, we make the first string in our array blank.</p>
<code mime="application/javascript"><![CDATA[
// Which combobox item is active?
let activeItem = this._comboBoxText.get_active();
// No messagedialog if you chose "Select distribution"
if (activeItem != 0) {
this._popUp = new Gtk.MessageDialog ({
transient_for: this._window,
modal: true,
buttons: Gtk.ButtonsType.OK,
message_type: Gtk.MessageType.INFO,
text: responses[activeItem]});
// Connect the OK button to a handler function
this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));
// Show the messagedialog
this._popUp.show();
}
},
]]></code>
<p>Avant d'afficher une BoiteDeDialogueDemessage, vérifions d'abord que vous n'avez pas choisi le message « Select distribution ». Ensuite, définissons son texte comme étant l'entrée dans le tableau qui correspond à l'entrée active de notre BoiteDeDialogueDemessage. Cela se fait avec la méthode <file>get_active</file>, qui renvoie l'identifiant numérique de votre sélection.</p>
<note><p>Il existe d'autres méthodes alternatives : <file>get_active_id</file>, qui renvoie l'identifiant texte assigné par <file>append</file>, et <file>get_active_text</file>, qui renvoie le texte complet de la chaîne sélectionnée.</p></note>
<p>Une fois la BoiteDeDialogueDemessage terminée, connectons son signal de retour à la fonction _onDialogResponse et indiquons lui de s'afficher toute seule.</p>
<code mime="application/javascript"><![CDATA[
_onDialogResponse: function () {
this._popUp.destroy ();
}
});
]]></code>
<p>Comme le seul bouton de la BoiteDeDialogueDemessage est le bouton OK, il n'est pas nécessaire de vérifier son response_id pour savoir quel bouton a été cliqué. Tout ce que nous faisons ici est détruire le message surgissant.</p>
<code mime="application/javascript"><![CDATA[
// Run the application
let app = new ComboBoxTextExample ();
app.application.run (ARGV);
]]></code>
<p>Enfin, nous créons un nouvel exemple de la classe ComboBoxTextExample terminée et démarrons l'application.</p>
</section>
<section id="complete">
<title>Exemple complet du code</title>
<code mime="application/javascript" style="numbered">#!/usr/bin/gjs
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const ComboBoxTextExample = new Lang.Class ({
Name: 'ComboBoxText Example',
// Create the application itself
_init: function () {
this.application = new Gtk.Application ({
application_id: 'org.example.jscomboboxtext'});
// 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 windows when active
_onActivate: function () {
this._window.present ();
},
// Callback function for 'startup' signal builds the UI
_onStartup: function () {
this._buildUI ();
},
// Build the application's UI
_buildUI: function () {
// Create the application window
this._window = new Gtk.ApplicationWindow ({
application: this.application,
window_position: Gtk.WindowPosition.CENTER,
title: "Welcome to GNOME",
default_width: 200,
border_width: 10 });
// Create the combobox
this._comboBoxText = new Gtk.ComboBoxText();
// Populate the combobox
let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
for (let i = 0; i < distros.length; i++)
this._comboBoxText.append_text (distros[i]);
this._comboBoxText.set_active (0);
// Connect the combobox's 'changed' signal to our callback function
this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));
// Add the combobox to the window
this._window.add (this._comboBoxText);
// Show the window and all child widgets
this._window.show_all();
},
_onComboChanged: function () {
// The responses we'll use for our messagedialog
let responses = ["",
"Fedora is a community distro sponsored by Red Hat.",
"Mint is a popular distro based on Ubuntu.",
"SUSE is a name shared by two separate distros."];
// Which combobox item is active?
let activeItem = this._comboBoxText.get_active();
// No messagedialog if you chose "Select distribution"
if (activeItem != 0) {
this._popUp = new Gtk.MessageDialog ({
transient_for: this._window,
modal: true,
buttons: Gtk.ButtonsType.OK,
message_type: Gtk.MessageType.INFO,
text: responses[activeItem]});
// Connect the OK button to a handler function
this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));
// Show the messagedialog
this._popUp.show();
}
},
_onDialogResponse: function () {
this._popUp.destroy ();
}
});
// Run the application
let app = new ComboBoxTextExample ();
app.application.run (ARGV);
</code>
</section>
<section id="in-depth">
<title>Documentation approfondie</title>
<p>Dans cet exemple, les éléments suivants sont utilisés :</p>
<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.ComboBoxText.html">Gtk.ComboBoxText</link></p></item>
<item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html">Gtk.MessageDialog</link></p></item>
</list>
</section>
</page>
|
