# ComboBoxText (JavaScript)

Taryn Fox
jewelfox@fursona.net 2012
Un menu déroulant pour texte uniquement
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

# ComboBoxText

Une ComboBox est un menu déroulant. La différence entre une ComboBox et une ComboBoxText est que cette dernière ne possède que des options texte de base, alors que la ComboBox utilise un ListStore ou un TreeStore (qui sont en gros des feuilles de calcul) pour afficher des éléments arborescents ou des images à côté de chaque choix.

À moins que vous n'ayez besoin des fonctions supplémentaires d'une ComboBox, 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 ComboBoxText chaque fois que possible.

# Bibliothèques à importer

#!/usr/bin/gjs

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 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 (); },

Tout le code de cet exemple va dans la classe MessageDialogExample. Le code ci-dessus crée une Gtk.Application pour nos composants 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, title: "Welcome to GNOME", default_width: 200, border_width: 10 });

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 de la ComboBoxText

// 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));

Après avoir créé la ComboBoxText, utilisons la méthode append_text 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 ComboBoxText et utilisons une boucle pour les ajouter dans l'ordre, comme ici.

Après avoir garni la ComboBoxText, 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 changed à la fonction _onComboChanged, pour qu'elle soit appelée à chaque fois que vous faites une nouvelle sélection dans le menu déroulant.

Pour ajouter une entrée dans une ComboBoxText, utilisez la méthode insert_text. 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 append et insert. Reportez-vous aux liens au bas de ce tutoriel pour de plus amples informations sur leur utilisation.

// Add the combobox to the window this._window.add (this._comboBoxText);

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

Enfin, ajoutons la ComboBoxText à la fenêtre et indiquons à la fenêtre de s'afficher avec ses éléments graphiques à l'intérieur.

# Fonction prenant en charge votre sélection

_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."];

Nous allons créer une MessageDialog qui affiche un message en fonction de la distribution sélectionnée. Créons d'abord le tableau des réponses à utiliser. Comme la première chaîne de notre ComboBoxText est justement le message « Select distribution », laissons celle-ci vide.

// 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(); }

},

Avant d'afficher une MessageDialog, 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 ComboBoxText. Cela se fait avec la méthode get_active, qui renvoie l'identifiant numérique de votre sélection.

Il existe d'autres méthodes alternatives : get_active_id, qui renvoie l'identifiant texte assigné par append, et get_active_text, qui renvoie le texte complet de la chaîne sélectionnée.

Une fois la MessageDialog terminée, connectons son signal de retour à la fonction _onDialogResponse et indiquons lui de s'afficher toute seule.

_onDialogResponse: function () {

this._popUp.destroy ();

}

});

Comme le seul bouton de la MessageDialog 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.

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

Enfin, nous créons un nouvel exemple de la classe ComboBoxTextExample terminée et démarrons l'application.

# Exemple complet de code

#!/usr/bin/gjs

imports.gi.versions.Gtk = '3.0'; const Gtk = imports.gi.Gtk;

class ComboBoxTextExample {

// Create the application itself constructor() { this.application = new Gtk.Application ({ application_id: 'org.example.jscomboboxtext'});

// 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 windows 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, 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', this._onComboChanged.bind(this));

// Add the combobox to the window this._window.add (this._comboBoxText);

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

_onComboChanged() {

// 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', this._onDialogResponse.bind(this));

// Show the messagedialog this._popUp.show(); }

}

_onDialogResponse() {

this._popUp.destroy ();

}

};

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

# Documentation approfondie

Dans cet exemple, les éléments suivants sont utilisés :

Gtk.Application

Gtk.ApplicationWindow

Gtk.ComboBoxText

Gtk.MessageDialog