gnome-devel-docs 3.28.0-1 / usr / share / help / cs / gnome-devel-demos / comboboxtext.js.page

<?xml version="1.0" encoding="utf-8"?>
<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"/>
  <p><code>ComboBox</code> je rozbalovací nabídka. Rozdíl mezi <link xref="combobox.js">ComboBox</link> a <code>ComboBoxText</code> (textová rozbalovací nabídka) je v tom, že má jen základní textové volby, zatímco plnohodnotný <code>ComboBox</code> používá <code>ListStore</code> nebo <code>TreeStore</code> (což jsou v podstatě tabulky) k zobrazení věcí, jako jsou rozvětvené volby nebo obrázky vedle jednotlivých voleb.</p>
  <note><p>Pokud nepotřebujete přidané funkce plného <code>ComboBox</code> nebo komfort práce s <code>ListStore</code> a <code>TreeStore</code>, můžete shledat jednodušším, kdykoliv to použití dovolí, <code>ComboBoxText</code>.</p></note>
    <links type="section"/>

  <section id="imports">
    <title>Importované knihovny</title>
    <code mime="application/javascript">
#!/usr/bin/gjs

const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
</code>
    <p>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.</p>
  </section>

  <section id="applicationwindow">
    <title>Vytvoření okna aplikace</title>
    <code mime="application/javascript">
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 ();
    },
</code>
    <p>Všechen kód této ukázky je ve třídě <code>MessageDialogExample</code>. 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.</p>
    <code mime="application/javascript">
    // 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 });
</code>
    <p>Funkce <code>_buildUI</code> 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.</p>
  </section>

  <section id="comboboxtext">
    <title>Vytvoření ComboBoxText</title>
    <code mime="application/javascript">
        // Vytvoří rozbalovací seznam
        this._comboBoxText = new Gtk.ComboBoxText();

        // Naplní rozbalovací seznam
        let distros = ["Select distribution", "Fedora", "Mint", "Suse"];
        for (let i = 0; i &lt; 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));
</code>
    <p>Po té, co jsme vytvořili textový rozbalovací seznam, použijeme jeho metodu <code>append_text</code> 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.</p>
    <p>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 <code>"changed"</code> na funkci <code>_onComboChanged</code>, takže bude zavolána pokaždé, když je v rozbalovacím seznamu proveden nový výběr.</p>
    <note><p>Když byste chtěli do <code>ComboBoxText</code> dodatečně přidat položku, můžete použít metodu <code>insert_text</code>. A pokud byste raději než čísla použili textové řetězce jako ID pro jednotlivé položky, můžete použít metody <code>append</code> a <code>insert</code>. Ohledně podrobností, jak je použít, se podívejte na odkazy ve spodní části této lekce.</p></note>

    <code mime="application/javascript">
        // Přidá rozbalovací seznam do okna
        this._window.add (this._comboBoxText);

        // Zobrazí okno a všechny jeho synovské widgety
        this._window.show_all();
    },
</code>
    <p>Nakonec přidáme ComboBoxText do okna a oknu řekneme, aby zobrazilo sebe i widgety v něm.</p>
  </section>

  <section id="function">
    <title>Funkce, která zpracovává váš výběr</title>
    <code mime="application/javascript">
    _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."];
</code>
    <p>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ý.</p>

    <code mime="application/javascript">
        // 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();
        }

    },
</code>
    <p>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 <code>get_active</code> method, která vrací číselné ID vašeho výběru.</p>
    <note><p>Jinými metodami, které bychom mohli použít jsou <code>get_active_id</code>, která vrací textové ID přiřazené metodou <code>append</code>, a <code>get_active_text</code>, která vrací celý text ve vybrané položce.</p></note>
    <p>Po té, co vytvoříme <code>MessageDialog</code>, napojíme jeho signál <code>"response"</code> na funkci <code>_onDialogResponse</code> a následně řekneme oknu, ať se zobrazí.</p>

    <code mime="application/javascript">
    _onDialogResponse: function () {

        this._popUp.destroy ();

    }

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

    <code mime="application/javascript">
// Spustí aplikaci
let app = new ComboBoxTextExample ();
app.application.run (ARGV);
</code>
    <p>Nakonec vytvoříme novou instanci konečné třídy ComboBoxTextExample a aplikaci spustíme.</p>
  </section>

  <section id="complete">
    <title>Úplný kód ukázky</title>
<code mime="application/javascript" style="numbered">#!/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 &lt; 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);
</code>
  </section>

  <section id="in-depth">
    <title>Dokumentace jdoucí do hloubky</title>
<p>V této ukázce se používá následující:</p>
<list>
  <item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link></p></item>
  <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link></p></item>
  <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ComboBoxText.html">Gtk.ComboBoxText</link></p></item>
  <item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html">Gtk.MessageDialog</link></p></item>
</list>
  </section>
</page>