ComboBoxText (JavaScript)

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.

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

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.

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

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.

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

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.

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.

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.

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