<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="cs">

  <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>Čistě textová rozbalovací nabídka</desc>

  </info>

  <title>ComboBoxText</title>

  <media type="image" mime="image/png" src="media/combobox.png"/>

  
ComboBox je rozbalovací nabídka. Rozdíl mezi <link xref="combobox.js">ComboBox</link> 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.

  <note>
Pokud nepotřebujete přidané funkce plného ComboBox nebo komfort práce s ListStore a TreeStore, můžete shledat jednodušším, kdykoliv to použití dovolí, ComboBoxText.
</note>

    <links type="section"/>

  <section id="imports">

    <title>Importované knihovny</title>

#!/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.

  </section>

  <section id="applicationwindow">

    <title>Vytvoření okna aplikace</title>

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ří <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> 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 <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link>, do kterého vložíme všechny naše widgety.

  </section>

  <section id="comboboxtext">

    <title>Vytvoření ComboBoxText</title>

        // 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.

    <note>
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.
</note>

        // 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.

  </section>

  <section id="function">

    <title>Funkce, která zpracovává váš výběr</title>

    _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í <link xref="messagedialog.js">MessageDialog</link>, 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.

    <note>
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.
</note>

    
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 <gui>OK</gui>, 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.

  </section>

  <section id="complete">

    <title>Úplný kód ukázky</title>

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

  </section>

  <section id="in-depth">

    <title>Dokumentace jdoucí do hloubky</title>

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

<list>

  <item>
<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>
</item>

  <item>
<link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link>
</item>

  <item>
<link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ComboBoxText.html">Gtk.ComboBoxText</link>
</item>

  <item>
<link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html">Gtk.MessageDialog</link>
</item>

</list>

  </section>

</page>