ComboBoxText (JavaScript)

ComboBox je rozbalovací nabídka. Rozdíl mezi ComboBox a ComboBoxText (textová rozbalovací nabídka) je v tom, že má jen základní textové volby, zatímco plnohodnotný ComboBox používá ListStore nebo TreeStore (což jsou v podstatě tabulky) k zobrazení věcí, jako jsou rozvětvené volby nebo obrázky vedle jednotlivých voleb.

Importované knihovny


#!/usr/bin/gjs

const Gtk = imports.gi.Gtk;
const Lang = imports.lang;

Toto jsou knihovny, které potřebujeme naimportovat, aby aplikace běžela. Pamatujte si, že řádek, který GNOME říká, že používáme Gjs, musí být vždy na začátku.

Vytvoření okna aplikace


const ComboBoxTextExample = new Lang.Class ({
    Name: 'ComboBoxText Example',

    // Vytvoří vlastní aplikaci
    _init: function () {
        this.application = new Gtk.Application ({
            application_id: 'org.example.jscomboboxtext'});

        // Napojí signály "activate" a "startup" k funkcím zpětného volání
        this.application.connect('activate', Lang.bind(this, this._onActivate));
        this.application.connect('startup', Lang.bind(this, this._onStartup));
    },

    // Funkce zpětného volání pro signál "activate" zobrazujicí okno při aktivaci
    _onActivate: function () {
        this._window.present ();
    },

    // Funkce zpětného volání pro signál "startup" sestavující uživatelské rozhraní
    _onStartup: function () {
        this._buildUI ();
    },

Všechen kód této ukázky je ve třídě MessageDialogExample. Výše uvedený kód vytvoří Gtk.Application pro naše widgety a okno, ve kterém budou.


    // Sestaví uživatelské rozhraní aplikace
    _buildUI: function () {

        // Vytvoří okno aplikace
        this._window = new Gtk.ApplicationWindow  ({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            title: "Welcome to GNOME",
            default_width: 200,
            border_width: 10 });

Funkce _buildUI je místo, ze kterého voláme všechen kód, který vytváří uživatelské rozhraní aplikace. Prvním krokem je vytvoření nového Gtk.ApplicationWindow, do kterého vložíme všechny naše widgety.

Vytvoření ComboBoxText


        // Vytvoří rozbalovací seznam
        this._comboBoxText = new Gtk.ComboBoxText();

        // Naplní rozbalovací seznam
        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);

        // Napojí signál "changed" od rozbalovacího seznamu k naší funkci zpětnoho volání
        this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));

Po té, co jsme vytvořili textový rozbalovací seznam, použijeme jeho metodu append_text pro přidání textových řetězců. Podobně jako u položek v poli má každá číslo ID, počínaje od 0. Pro zjednodušení můžete skutečně vytvořit pole a použít smyčku pro přidání jednotlivých položek tak, jako jsme to udělali zde.

Až máme textový rozbalovací seznam naplněný, nastavíme jeho první položku jako aktivní, takže před prvním kliknutím uvidíme řádek „Select distribution“ („Vyberte distribuci“). Následně napojíme signál "changed" na funkci _onComboChanged, takže bude zavolána pokaždé, když je v rozbalovacím seznamu proveden nový výběr.

Když byste chtěli do ComboBoxText dodatečně přidat položku, můžete použít metodu insert_text. A pokud byste raději než čísla použili textové řetězce jako ID pro jednotlivé položky, můžete použít metody append a insert. Ohledně podrobností, jak je použít, se podívejte na odkazy ve spodní části této lekce.


        // Přidá rozbalovací seznam do okna
        this._window.add (this._comboBoxText);

        // Zobrazí okno a všechny jeho synovské widgety
        this._window.show_all();
    },

Nakonec přidáme ComboBoxText do okna a oknu řekneme, aby zobrazilo sebe i widgety v něm.

Funkce, která zpracovává váš výběr


    _onComboChanged: function () {

        // Reakce, které použijeme v našem dialogovém okně se zprávou
        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."];

Budeme vytvářet vyskakovací MessageDialog, který vám zobrazí zprávu podle vybrané distribuce. Nejdříve vytvoříme pole odpovědí, které se budou používat. Protože první položkou v našem rozbalovacím seznamu je jen informace „Select distribution“, ponecháme první řetězec v našem poli prázdný.


        // Která položka rozbalovacího seznamu je aktivní?
        let activeItem = this._comboBoxText.get_active();

        // Žádné dialogové okno se zprávou, když je vybráno „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]});

            // Napojí tlačítko OK na obslušnou funkci
            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));

            // Zobrazí dialogové okno se zprávou
            this._popUp.show();
        }

    },

Než zobrazíme dialogové okno se zprávou, nejprve otestujeme, že není vybrána volba „Select distribution“. Po té nastavíme text podle položky v poli, která odpovídá aktivní položce v rozbalovacím seznamu. To uděláme pomocí metody get_active method, která vrací číselné ID vašeho výběru.

Jinými metodami, které bychom mohli použít jsou get_active_id, která vrací textové ID přiřazené metodou append, a get_active_text, která vrací celý text ve vybrané položce.

Po té, co vytvoříme MessageDialog, napojíme jeho signál "response" na funkci _onDialogResponse a následně řekneme oknu, ať se zobrazí.


    _onDialogResponse: function () {

        this._popUp.destroy ();

    }

});

Protože jediným tlačítkem, které dialogové okno se zprávou má, je tlačítko OK, nepotřebujeme testovat hodnotu response_id, abychom zjistili, na které tlačítko bylo kliknuto. Vše, co uděláme, je, že dialogové okno zlikvidujeme.


// Spustí aplikaci
let app = new ComboBoxTextExample ();
app.application.run (ARGV);

Nakonec vytvoříme novou instanci konečné třídy ComboBoxTextExample a aplikaci spustíme.

Úplný kód ukázky

#!/usr/bin/gjs

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

class ComboBoxTextExample {

    // Vytvoří vlastní aplikaci
    constructor() {
        this.application = new Gtk.Application ({
            application_id: 'org.example.jscomboboxtext'});

        // Napojí signály "activate" a "startup" k funkcím zpětného volání
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
    }

    // Funkce zpětného volání pro signál "activate" zobrazujicí okno při aktivaci
    _onActivate() {
        this._window.present ();
    }

    // Funkce zpětného volání pro signál "startup" sestavující uživatelské rozhraní
    _onStartup() {
        this._buildUI();
    }

    // Sestaví uživatelské rozhraní aplikace
    _buildUI() {

        // Vytvoří okno aplikace
        this._window = new Gtk.ApplicationWindow  ({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            title: "Welcome to GNOME",
            default_width: 200,
            border_width: 10 });

        // Vytvoří rozbalovací seznam
        this._comboBoxText = new Gtk.ComboBoxText();

        // Naplní rozbalovací seznam
        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);

        // Napojí signál "changed" od rozbalovacího seznamu k naší funkci zpětnoho volání
        this._comboBoxText.connect ('changed', this._onComboChanged.bind(this));

        // Přidá rozbalovací seznam do okna
        this._window.add (this._comboBoxText);

        // Zobrazí okno a všechny jeho synovské widgety
        this._window.show_all();
    }

    _onComboChanged() {

        // Reakce, které použijeme v našem dialogovém okně se zprávou
        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."];

        // Která položka rozbalovacího seznamu je aktivní?
        let activeItem = this._comboBoxText.get_active();

        // Žádné dialogové okno se zprávou, když je vybráno „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]});

            // Napojí tlačítko OK na obslušnou funkci
            this._popUp.connect ('response', this._onDialogResponse.bind(this));

            // Zobrazí dialogové okno se zprávou
            this._popUp.show();
        }

    }

    _onDialogResponse() {

        this._popUp.destroy ();

    }

};

// Spustí aplikaci
let app = new ComboBoxTextExample ();
app.application.run (ARGV);

Dokumentace jdoucí do hloubky

V této ukázce se používá následující:

Gtk.Application

Gtk.ApplicationWindow

Gtk.ComboBoxText

Gtk.MessageDialog