RadioButton (JavaScript)

Le terme « bouton de radio » provient de l'analogie avec les anciennes radios de nos vieux véhicules. Ils avaient des boutons poussoirs programmés et un seul pouvait resté enfoncé à la fois, transmettant une seule station. Si vous en enfonciez un autre, cela faisait sortir automatiquement le précédent. Ici, nos RadioButtons fonctionnent exactement de la même façon.

Chaque bouton de radio nécessite une étiquette texte et un groupe. Un seul bouton d'un même groupe peut être sélectionné à la fois. Ne nommez pas chaque groupe ; définissez seulement les nouveaux boutons à l'intérieur d'un groupe qui existe déjà. Si vous créez un bouton en dehors d'un groupe existant, il générera automatiquement un nouveau groupe pour s'y loger.

Bibliothèques à importer

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 est dans la classe RadioButtonExample. Le code ci-dessus crée un Gtk.Application pour y mettre nos éléments 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 des boutons de radio

Utilisez une étiquette Gtk.Label pour définir chaque groupe de boutons de radio séparément. Vous pouvez mettre les boutons de radio de tous les différents groupes où vous voulez, donc si vous voulez que l'on sache lesquels vont ensemble, vous devez organiser les choses en fonction.

Voici trois méthodes différentes pour créer des boutons de radio. La première est la méthode habituelle, où nous créons un nouveau Gtk.RadioButton et lui assignons ses propriétés en même temps. La seconde et la troisième utilisent des fonctions qui prennent en charge automatiquement quelques unes des propriétés ; new_from_widget ne prend qu'un argument : le nouveau bouton de radio que vous voulez mettre dans le même groupe, alors que new_with_label_from_widget prend ce même argument et l'étiquette qui va avec en même temps.

Le premier bouton de radio d'un groupe est celui sélectionné par défaut. Décommentez la dernière ligne de cet exemple de code pour apprendre comment en définir un autre pour qu'il devienne celui sélectionné par défaut.

Ici, nous créons l'étiquette du second groupe de boutons et ensuite nous les générons tous de la même manière.

Création du reste de l'interface utilisateur

Ce code crée un bouton Gtk.Button et le lie à une fonction qui affiche un message stupide si on clique sur OK, selon les boutons qui sont sélectionnés.

To make sure the button's "OK" label shows up properly in every language that GNOME is translated into, remember to use one of Gtk's stock button types.

Organisons chaque groupe de boutons de radio dans une grille Gtk.Grid séparée. Comme cela, nous pouvons modifier l'agencement plus aisément plus tard. Mettons une marge en haut de la deuxième grille pour séparer visuellemnt les deux ensembles de choix.

Après les avoir organisé, nous les mettons dans une troisième grille principale, avec le bouton OK. Puis, nous lions le tout à la fenêtre.

Enfin, nous indiquons à la fenêtre de s'afficher avec son contenu au démarrage de l'application.

Fonction prenant en charge votre sélection

Quand vous cliquez sur OK, une boîte de dialogue Gtk.MessageDialog s'affiche. Cette fonction crée et affiche le message surgissant et ensuite connecte son bouton OK à une fonction qui le ferme. Le contenu du message surgissant dépend de la fonction _messageText(), qui renvoie une valeur différente selon les options que vous avez choisies.

La méthode get_active() permet de savoir quel bouton de radio a été pressé. Cette fonction renvoie un message stupide différent selon le bouton qui a été pressé. Sa valeur de retour est utilisée comme propriété du texte de la boîte de dialogue de message.

Cette fonction est appelée quand le bouton OK du texte de la boîte de dialogue de message est pressé. Elle fait seulement disparaître le message surgissant.

Enfin, nous créons une nouvelle instance de la classe RadioButtonExample et lançons l'application.

Exemple complet de code

#!/usr/bin/gjs

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

const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;

class RadioButtonExample {

    // Create the application itself
    constructor() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsradiobutton',
            flags: Gio.ApplicationFlags.FLAGS_NONE
        });

        // 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 window 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,
            border_width: 20,
            title: "Travel Planning"});

        // Create a label for the first group of buttons
        this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});

        // Create three radio buttons three different ways
        this._place1 = new Gtk.RadioButton ({label: "The Beach"});

        this._place2 = Gtk.RadioButton.new_from_widget (this._place1);
        this._place2.set_label ("The Moon");

        this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, "Antarctica");
        // this._place3.set_active (true);

        // Create a label for the second group of buttons
        this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });

        // Create three more radio buttons
        this._thing1 = new Gtk.RadioButton ({label: "Penguins" });
        this._thing2 = new Gtk.RadioButton ({label: "Sunscreen", group: this._thing1 });
        this._thing3 = new Gtk.RadioButton ({label: "A spacesuit", group: this._thing1 });

        // Create a stock OK button
        this._okButton = new Gtk.Button ({
            label: 'gtk-ok',
            use_stock: 'true',
            halign: Gtk.Align.END });

        // Connect the button to the function which handles clicking it
        this._okButton.connect ('clicked', this._okClicked.bind(this));

        // Create a grid to put the "place" items in
        this._places = new Gtk.Grid ();

        // Attach the "place" items to the grid
        this._places.attach (this._placeLabel, 0, 0, 1, 1);
        this._places.attach (this._place1, 0, 1, 1, 1);
        this._places.attach (this._place2, 0, 2, 1, 1);
        this._places.attach (this._place3, 0, 3, 1, 1);

        // Create a grid to put the "thing" items in
        this._things = new Gtk.Grid ({ margin_top: 50 });

        // Attach the "thing" items to the grid
        this._things.attach (this._thingLabel, 0, 0, 1, 1);
        this._things.attach (this._thing1, 0, 1, 1, 1);
        this._things.attach (this._thing2, 0, 2, 1, 1);
        this._things.attach (this._thing3, 0, 3, 1, 1);

        // Create a grid to put everything in
        this._grid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_left: 40,
            margin_right: 50 });

        // Attach everything to the grid
        this._grid.attach (this._places, 0, 0, 1, 1);
        this._grid.attach (this._things, 0, 1, 1, 1);
        this._grid.attach (this._okButton, 0, 2, 1, 1);

        // Add the grid to the window
        this._window.add (this._grid);

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

    _okClicked() {

        // Create a popup that shows a silly message
        this._travel = new Gtk.MessageDialog ({
            transient_for: this._window,
            modal: true,
            message_type: Gtk.MessageType.OTHER,
            buttons: Gtk.ButtonsType.OK,
            text: this._messageText() });

        // Show the popup
        this._travel.show();

        // Bind the OK button to the function that closes the popup
        this._travel.connect ("response", this._clearTravelPopUp.bind(this));

    }

    _messageText() {

        // Create a silly message for the popup depending on what you selected
        var stringMessage = "";

        if (this._place1.get_active()) {

            if (this._thing1.get_active())
                stringMessage = "Penguins love the beach, too!";

            else if (this._thing2.get_active())
                stringMessage = "Make sure to put on that sunscreen!";

            else stringMessage = "Are you going to the beach in space?";

        }

        else if (this._place2.get_active()) {

            if (this._thing1.get_active())
                stringMessage = "The penguins will take over the moon!";

            else if (this._thing2.get_active())
                stringMessage = "A lack of sunscreen will be the least of your problems!";

            else stringMessage = "You'll probably want a spaceship, too!";
        }

        else if (this._place3.get_active()) {

            if (this._thing1.get_active())
                stringMessage = "The penguins will be happy to be back home!";

            else if (this._thing2.get_active())
                stringMessage = "Antarctic sunbathing may be hazardous to your health!";

            else stringMessage = "Try bringing a parka instead!";
        }

        return stringMessage;

    }

    _clearTravelPopUp() {
        this._travel.destroy();
    }
};

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

Documentation approfondie

Gtk.Application

Gtk.ApplicationWindow

Gtk.Button

Gtk.Grid

Gtk.Label

Gtk.RadioButton