<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="topic" style="task" id="03_getting_the_signal.js" xml:lang="cs">

  <info>

    <link type="guide" xref="beginner.js#tutorials"/>

    <link type="seealso" xref="button.js"/>

    <link type="seealso" xref="entry.js"/>

    <link type="seealso" xref="radiobutton.js"/>

    <link type="seealso" xref="switch.js"/>

    <revision version="0.1" date="2012-08-12" status="draft"/>

    <credit type="author copyright">

      <name>Taryn Fox</name>

      <email its:translate="no">jewelfox@fursona.net</email>

      <years>2012</years>

    </credit>

    <desc>Vytvoříme tlačítka a další widgety, které budou něco dělat, když na ně klikneme.</desc>

  </info>

  <title>3. Čekání na signál</title>

  <synopsis>

    
V této lekci se naučíme, jak vytvořit widgety, jako jsou popisky, obrázky a tlačítka. Naučíme se zde, jak přimět tlačítka a další vstupní widgety, aby dělali co po nich chceme, tím, že napíšeme funkce obsluhující signály, které widgety vyslaly při kliknutí nebo jiné interakce s nimi.

  </synopsis>

  <links type="section"/>

  <section id="application">

    <title>Základní aplikace</title>

    
V GNOME widgety, které komunikují s uživatelem, jako jsou tlačítka nebo vypínače, posílají při kliknutí nebo aktivaci signály. Například Button  vyšle signál "clicked", když na něj někdo klikne. Když se tak stane, GNOME se podívá po části kódu, která říká, co se má udělat.

    
Jak napsat takový kód? Napojením signálu "clicked" od tlačítka na funkci zpětného volání, což je funkce napsaná za účelem obsluhy takového signálu. Takže, když se objeví tento signál, je spuštěna funkce napojená na něj.

    
Zde je úplně základní příklad:

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

    
V ApplicationWindow jsou widgety Button a Label uspořádané v mřížce. Kdykoliv je kliknuto na tlačítko, zvýší se o 1 proměnná, která udržuje počet koláčků, a je aktualizován popisek, které zobrazuje počet koláčků.

    <note style="tip">
Koláčky (anglicky „cookies“) jsou v tomto kódu něco jiného, než „cookies“, které znáte z webů. Tam se do nich ukládají přihlašovací informace, pamatuje se v nich, jestli jste web již navštívili apod. V našem případě prostě představují imaginární koláčky. Ale jestli chcete, můžete si upéct nějaké opravdové.
</note>

    
Zde je základní, často používaný kód, který patří na začátek aplikace, ještě než začnete vytvářet okno a widgety. Kromě toho, že aplikace musí mít jedinečný název, je největší změnou oproti běžnému základnímu kódu vytvoření globální proměnné na začátku, ve které budeme udržovat počet koláčků.

#!/usr/bin/gjs

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

const Gtk = imports.gi.Gtk;

// Začneme s 0 koláčky

var cookies = 0;

class GettingTheSignal {

    // Vytvoří vlastní aplikaci

    constructor() {

        this.application = new Gtk.Application();

        // 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();

    }

    
Podívejte se na část, která používá metodu connect naší aplikace a bind k připojení jejích signálů "activate" a "startup" na funkce, které představují okno a sestaví uživatelské rozhraní. To stejné se chystáme udělat s naším tlačítkem, až jej budeme mít, akorát napojovaný signál bude tentokrát "clicked".

  </section>

  <section id="button">

    <title>Kliknutí na tlačítko</title>

    
Jako obvykle, vložíme celý kód pro vytvoření tlačítka a ostatních widgetů do funkce _buildUI, která je volána, když se aplikace spouští.

    // Sestaví uživatelské rozhraní aplikace

    _buildUI() {

    
Nejprve vytvoříme vlastní okno:

        // Vytvoří okno aplikace

        this._window = new Gtk.ApplicationWindow({

            application: this.application,

            window_position: Gtk.WindowPosition.CENTER,

            default_height: 200,

            default_width: 400,

            title: "Click the button to get a cookie!"});

    
Všimněte si, že jsem nastavili vlastnosti default_height a default_width. Ty nám umožňují určit v pixelech, jak vysoké a široké bude okno ApplicationWindow.

    
Následně vytvoříme popisek, který bude zobrazovat počet koláčků. Můžeme použít proměnnou cookies jako součást vlastnosti label popisku.

        // Vytvoří popisek

        this._cookieLabel = new Gtk.Label ({

            label: "Number of cookies: " + cookies });

    
Nyní se pustíme do vytvoření widgetu Button. Nastavíme jeho vlastnost label, která zobrazuje text, který chceme na tlačítku, a napojíme jeho signál "clicked" na funkci zpětného volání _getACookie, kterou napíšeme později, až dokončíme konstrukci uživatelského rozhraní naší aplikace.

        // Vytvoří tlačítko na koláčky

        this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });

        // Napojí tlačítko na koláčky k funkci, která zpracovává jeho kliknutí

        this._cookieButton.connect ('clicked', this._getACookie.bind(this));

    
Nakonec vytvoříme mřížku, připojíme do ní popisek a tlačítko, přidáme ji do okna a oknu řekneme, ať zobrazí sebe a všechen svůj obsah. To vše potřebujeme uvnitř funkce _buildUI, takže ji uzavřeme složenými závorkami a za ně dáme čárku, která GNOME říká, že následuje další funkce. Všimněte si, že ačkoliv jsme napsali kód pro popisek jako první, stále jej můžete připojit do mřížky způsobem, který jej umístí dolů.

        // Vytvoří mřížku, do které se vše uspořádá

        this._grid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER,

            row_spacing: 20 });

        // Vloží vše do mřížky

        this._grid.attach (this._cookieButton, 0, 0, 1, 1);

        this._grid.attach (this._cookieLabel, 0, 1, 1, 1);

        // Přidá mřížku do okna

        this._window.add (this._grid);

        // Zobrazí okno a všechny jeho synovské widgety

        this._window.show_all();

    }

    
Nyní napíšeme funkci _getACookie. Kdykoliv naše tlačítko pošle signál "clicked", spustí se kód v této funkci. V tomto případě je vše, co udělá, že zvýší počet koláčků o 1 a zaktualizuje popisek, aby zobrazoval nový počet koláčků. To uděláme pomocí metody set_label widgetu Label.

    <note style="tip">
Mnoho widgetů má stejné vlastnosti a metody. Například jak Label, tak Button má vlastnost label, která říká, jaký je v nich text, a metody get_label a set_label, které umožňují zkontrolovat, co je to za text a případně jej změnit. Takže, když se učíte, jak nějaký widget funguje, zároveň se to učíte i o ostatních podobných.
</note>

    _getACookie: function() {

        // Zvýší počet koláčků o 1 a aktualizuje popisek

        cookies++;

        this._cookieLabel.set_label ("Number of cookies: " + cookies);

    }

};

    
Nakonec spustíme aplikaci pomocí stejného druhu kódu, jako v poslední lekci.

// Spustí aplikaci

let app = new GettingTheSignal ();

app.application.run (ARGV);

  </section>

  <section id="switch">

    <title>Přepnutí vypínače</title>

    
Tlačítka nejsou jediné vstupní widgety v nástrojové sadě GTK+. Můžeme používat například také vypínače, jako v tomto příkladu. Swith nemá vlastnost label, takže musíme zvlášť vytvořit popisek vysvětlující, co dělá vypínač vedle něj.

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

    
Vypínač má dvě polohy, vypnuto a zapnuto. Kdy je vypínač zapnutý, jeho text a barva pozadí se změní, takže poznáte, ve které poloze je.

    
Stejné vypínače jako zde můžete vidět například v nabídce zpřístupnění GNOME, kde zapínají a vypínají funkce, jako je velký text a klávesnice na obrazovce. V našem případě Switch řídí smyšlený automat na koláčky. Když je vypínač zapnutý, můžete dostat koláček kliknutím na tlačítko <gui>Get a cookie</gui>. Když je vypnutý, neděje se při kliknutí na tlačítko nic.

    <note style="tip">
Do nabídky zpřístupnění se můžete dostat kliknutím na obrys postavičky mezi ikonami v pravém horním rohu obrazovky.
</note>

    
Zde vytvoříme widget Switch:

        // Vytvoří vypínač

        this._cookieSwitch = new Gtk.Switch ();

    
Z praktického hlediska nepotřebujeme vypínač napojovat na žádnou funkci. Vše co potřebujeme, je napsat podmínku v naší funkci _getACookie, která kontroluje, jestli je vypínač zapnutý nebo vypnutý. Pokud byste však chtěli, aby se něco stalo hned, jak vypínač přepnete, napojili byste jej na signál "notify::active" nějak takto:

        // Napojí vypínač k funkci, která jej obsluhuje

        this._cookieSwitch.connect ('notify::active', this._cookieDispenser.bind(this));

    
Ve výchozím stavu je vypínač v poloze vypnuto. Pokud jej chceme na začátku mít v poloze zapnuto, nastavili bychom při jeho vytváření hodnotu jeho vlastnosti active na true.

        this._cookieSwitch = new Gtk.Switch ({ active: true });

    
Pojďme ho ale vytvořit normálně a k němu vytvoříme i popisek. Chceme, aby vypínač i popisek byly umístěny správně vedle sebe, takže pro ně vytvoříme mřížku a tu vložíme do naší větší mřížky, která má v sobě ostatní widgety. Zde máte, jak vypadá kód, který toto vše vytvoří:

        // Vytvoří vypínač, který řídí, jestli můžete vyhrát nebo ne

        this._cookieSwitch = new Gtk.Switch ();

        // Vytvoří popisek, který se řídí podle vypínače

        this._switchLabel = new Gtk.Label ({

            label: "Cookie dispenser" });

        // Vytvoří mřížku pro vypínač a jeho popisek

        this._switchGrid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER });

        // Vloží vypínač a jeho popisek do mřížky

        this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);

        this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);

    
A nyní obdobně vše uspořádáme ve větší mřížce.

        // Vše se vloží do mřížky

        this._grid.attach (this._cookieButton, 0, 0, 1, 1);

        this._grid.attach (this._switchGrid, 0, 1, 1, 1);

        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);

    
Nyní změníme funkci _getACookie tak, aby se dívala, jestli je automat na koláčky zapnutý. Uděláme to pomocí metody přepínače get_active. Ta vrací true, když je vypínač zapnutý a false, když je vypínač vypnutý.

    <note style="tip">
Když je metoda použita v podmíněném výrazu if jako zde, je kód uvnitř výrazu proveden, pokud metoda vrátí true.
</note>

    _getACookie() {

        // Je automat na koláčky zapnutý?

        if (this._cookieSwitch.get_active()) {

            // Zvýší počet koláčků o 1 a aktualizuje popisek

            cookies++;

            this._cookieLabel.set_label ("Number of cookies: " + cookies);

        }

    }

  </section>

  <section id="radio">

    <title>Ladění rádia</title>

    
Jiný typ vstupního widgetu, který můžeme použít, se nazývá RadioButton (skupinový přepínač). Vytváří se ve skupinách a jen jeden z nich pak může být v kterýkoliv okamžik vybrán. Anglicky se nazývá „rádiové tlačítko“, protože funguje podobně jako volič kanálů na starých autorádiích. Rádio může mít v jeden okamžik naladěnu jen jednu stanici, takže když jste zmáčkli kterékoliv tlačítko, všechny ostatní vyskočily.

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

    
Nejdříve ze všeho pojďme změnit název našeho ApplicationWindow a zvětšit jeho vlastnost border_width, aby v něm naše widgety nebyly příliš namačkané. Vlastnost border_width udává počet pixelů mezi widgetem a hranou okna.

        // Vytvoří okno aplikace

        this._window = new Gtk.ApplicationWindow({

            application: this.application,

            window_position: Gtk.WindowPosition.CENTER,

            default_height: 200,

            default_width: 400,

            border_width: 20,

            title: "Choose the one that says 'cookie'!"});

    
Po té vytvoříme skupinové přepínače. Pamatujete si, že jsou vytvořené ve skupině? Způsob, jak to udělat, je že u každého nového skupinového přepínače nastavíme vlastnost group na název jiného skupinového přepínače.

        // Vytvoří skupinové přepínače

        this._cookieRadio = new Gtk.RadioButton ({ label: "Cookie" });

        this._notCookieOne = new Gtk.RadioButton ({ label: "Not cookie",

            group: this._cookieRadio });

        this._notCookieTwo = new Gtk.RadioButton ({ label: "Not cookie",

            group: this._cookieRadio });

    
Následně vytvoříme mřížku pro skupinové přepínače. Pamatujte, že widgety nemusíte do mřížky uspořádat ve stejném pořadí, v jakém jste je vytvořili.

        // Uspořádá skupinové přepínače do jejich vlastní mřížky

        this._radioGrid = new Gtk.Grid ();

        this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);

        this._radioGrid.attach (this._cookieRadio, 0, 1, 1, 1);

        this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);

    
Normálně je ve výchozím stavu vybrán ten skupinový přepínač, který má název skupiny. My ale chceme, aby byl ve výchozím stavu vybrán první skupinový přepínač „Not cookie“, takže použijeme metodu set_active.

    <note style="tip">
Jeho vlastnost active můžeme nastavit na true také při jeho vytváření.
</note>

        // Nastaví, že skupinový přepínač, které bude nahoře, bude ve

        // výchozím stavu aktivní

        this._notCookieOne.set_active (true);

    
Nyní vše jako obvykle uspořádáme v naší hlavní mřížce…

        // Vloží vše do mřížky

        this._grid.attach (this._radioGrid, 0, 0, 1, 1);

        this._grid.attach (this._cookieButton, 0, 1, 1, 1);

        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);

    
A pak změníme naši funkci _getACookie, aby testovala, jestli je je vybrán přepínač s koláčkem.

    _getACookie() {

        // Vybrali jste „cookie“ místo „not cookie“?

        if (this._cookieRadio.get_active()) {

            // Zvýší počet koláčků o 1 a aktualizuje popisek

            cookies++;

            this._cookieLabel.set_label ("Number of cookies: " + cookies);

        }

    }

  </section>

  <section id="spell">

    <title>Umíte hláskovat „cookie“?</title>

    
Posledním vstupním widgetem, kterým se budeme zabývat, je Entry (vstupní pole), který se používá jako jednořádkové vstupní pole.

    <note style="tip">
Pokud potřebujete mít možnost zadat celý odstavec nebo i více, třeba když tvoříte textový editor, měli byste se podívat po více přizpůsobitelném widgetu <link xref="textview.js">TextView</link>.
</note>

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

    
Po té, co změníme název okna, vytvoříme widget Entry.

        // Vytvoří textové vstupní pole

        this._spellCookie = new Gtk.Entry ();

    
Následně vše uspořádáme do mřížky…

        // Vloží vše do mřížky

        this._grid.attach (this._spellCookie, 0, 0, 1, 1);

        this._grid.attach (this._cookieButton, 0, 1, 1, 1);

        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);

    
A nyní opět změníme podmíněný výraz ve funkci _getACookie a to s pomocí metody get_text, která získává text, který byl zadán, takže můžeme zkontrolovat, jestli „cookie“ bylo správně hláskováno. Přitom se nechceme starat o velikost písmen, takže použijeme vestavěnou metodu jazyka JavaScript toLowerCase, která v podmíněném výrazu změní zadaný text na malá písmena.

    <note style="tip">
Widget Entry nemá vlastnost label, která by nastavovala textový řetězec, který uživatel nemůže měnit (podobně, jako například normálně nemůžete měnit text na widgetu tlačítko). Má ale vlastnost text, která mění to, co uživatel píše.
</note>

    _getACookie() {

        // Vyhláskovali jste „cookie“ správně?

        if ((this._spellCookie.get_text()).toLowerCase() == "cookie") {

            // Zvýší počet koláčků o 1 a aktualizuje popisek

            cookies++;

            this._cookieLabel.set_label ("Number of cookies: " + cookies);

        }

    }

  </section>

  <section id="whats_next">

    <title>A co dál?</title>

    
Jestli chcete vidět celý kód pro každou z verzí aplikace produkující koláčky, čtěte dál.

    <note style="tip">
Hlavní stránka s výukou jazyka JavaScript má <link xref="beginner.js#buttons">podrobnější ukázky kódu</link> pro každý jednotlivý widget, včetně několika, které zde rozebrané nejsou.
</note>

  </section>

  <section id="complete">

    <title>Celý kód ukázky</title>

    <links type="section"/>

    <section id="buttonsample">

      <title>Ukázkový kód s widgetem Button</title>

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

      #!/usr/bin/gjs

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

const Gtk = imports.gi.Gtk;

// Začneme s 0 koláčky

var cookies = 0;

class GettingTheSignal {

    // Vytvoří vlastní aplikaci

    constructor() {

        this.application = new Gtk.Application();

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

            default_height: 200,

            default_width: 400,

            title: "Click the button to get a cookie!"});

        // Vytvoří popisek

        this._cookieLabel = new Gtk.Label ({

            label: "Number of cookies: " + cookies });

        // Vytvoří tlačítko na koláčky

        this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });

        // Připojí tlačítko na koláčky k funkci, která zpracovává jeho kliknutí

        this._cookieButton.connect ('clicked', this._getACookie.bind(this));

        // Vytvoří mřížku, do které se vše uspořádá

        this._grid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER,

            row_spacing: 20 });

        // Vloží vše do mřížky

        this._grid.attach (this._cookieButton, 0, 0, 1, 1);

        this._grid.attach (this._cookieLabel, 0, 1, 1, 1);

        // Přidá mřížku do okna

        this._window.add (this._grid);

        // Zobrazí okno a všechny jeho synovské widgety

        this._window.show_all();

    }

    _getACookie() {

        // Zvýší počet koláčků o 1 a aktualizuje popisek

        cookies++;

        this._cookieLabel.set_label ("Number of cookies: " + cookies);

    }

};

// Spustí aplikaci

let app = new GettingTheSignal ();

app.application.run (ARGV);

    </section>

    <section id="switchsample">

      <title>Ukázkový kód s widgetem Switch</title>

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

      #!/usr/bin/gjs

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

const Gtk = imports.gi.Gtk;

// Začneme s 0 koláčky

var cookies = 0;

class GettingTheSignal {

    // Vytvoří vlastní aplikaci

    constructor() {

        this.application = new Gtk.Application();

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

            default_height: 200,

            default_width: 400,

            title: "Click the button to get a cookie!"});

        // Vytvoří popisek

        this._cookieLabel = new Gtk.Label ({

            label: "Number of cookies: " + cookies });

        //  Vytvoří tlačítko na koláčky

        this._cookieButton = new Gtk.Button ({

            label: "Get a cookie" });

        // Připojí tlačítko na koláčky k funkci, která zpracovává jeho kliknutí

        this._cookieButton.connect ('clicked', this._getACookie.bind(this));

        // Vytvoří vypínač, který řídí, jestli můžete vyhrát nebo ne

        this._cookieSwitch = new Gtk.Switch ();

        // Vytvoří popisek, který se řídí podle vypínače

        this._switchLabel = new Gtk.Label ({

            label: "Cookie dispenser" });

        // Vytvoří mřížku pro vypínač a jeho popisek

        this._switchGrid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER });

        // Vloží vypínač a jeho popisek do mřížky

        this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);

        this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);

        // Vytvoří mřížku, do které se vše uspořádá

        this._grid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER,

            row_spacing: 20 });

        // Vše se vloží do mřížky

        this._grid.attach (this._cookieButton, 0, 0, 1, 1);

        this._grid.attach (this._switchGrid, 0, 1, 1, 1);

        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);

        // Přidá mřížku do okna

        this._window.add (this._grid);

        // Zobrazí okno a všechny jeho synovské widgety

        this._window.show_all();

    }

    _getACookie() {

        // Je automat na koláčky zapnutý?

        if (this._cookieSwitch.get_active()) {

            // Zvýší počet koláčků o 1 a aktualizuje popisek

            cookies++;

            this._cookieLabel.set_label ("Number of cookies: " + cookies);

        }

    }

};

// Spustí aplikaci

let app = new GettingTheSignal ();

app.application.run (ARGV);

    </section>

    <section id="radiobuttonsample">

      <title>Ukázkový kód s widgetem RadioButton</title>

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

      #!/usr/bin/gjs

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

const Gtk = imports.gi.Gtk;

// Začneme s 0 koláčky

var cookies = 0;

class GettingTheSignal {

    // Vytvoří vlastní aplikaci

    constructor() {

        this.application = new Gtk.Application();

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

        this._buildUI();

    }

    // Sestaví uživatelské rozhraní aplikace

    _buildUI() {

        // Vytvoří okno aplikace

        this._window = new Gtk.ApplicationWindow({

            application: this.application,

            window_position: Gtk.WindowPosition.CENTER,

            default_height: 200,

            default_width: 400,

            border_width: 20,

            title: "Choose the one that says 'cookie'!"});

        // Vytvoří skupinové přepínače

        this._cookieRadio = new Gtk.RadioButton ({ label: "Cookie" });

        this._notCookieOne = new Gtk.RadioButton ({ label: "Not cookie",

            group: this._cookieRadio });

        this._notCookieTwo = new Gtk.RadioButton ({ label: "Not cookie",

            group: this._cookieRadio });

        // Uspořádá skupinové přepínače do jejich vlastní mřížky

        this._radioGrid = new Gtk.Grid ();

        this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);

        this._radioGrid.attach (this._cookieRadio, 0, 1, 1, 1);

        this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);

        // Nastaví, že skupinový přepínač, které bude nahoře, bude ve

        this._notCookieOne.set_active (true);

        // Vytvoří tlačítko na koláčky

        this._cookieButton = new Gtk.Button ({

            label: "Get a cookie" });

        // Napojí tlačítko na koláčky k funkci, která zpracovává jeho kliknutí

        this._cookieButton.connect ('clicked', this._getACookie.bind(this));

        // Vytvoří popisek

        this._cookieLabel = new Gtk.Label ({

            label: "Number of cookies: " + cookies });

        // Vytvoří mřížku, do které se vše uspořádá

        this._grid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER,

            row_spacing: 20 });

        // Vloží vše do mřížky

        this._grid.attach (this._radioGrid, 0, 0, 1, 1);

        this._grid.attach (this._cookieButton, 0, 1, 1, 1);

        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);

        // Přidá mřížku do okna

        this._window.add (this._grid);

        // Zobrazí okno a všechny jeho synovské widgety

        this._window.show_all();

    }

    _getACookie() {

        // Vybrali jste „cookie“ místo „not cookie“?

        if (this._cookieRadio.get_active()) {

            // Zvýší počet koláčků o 1 a aktualizuje popisek

            cookies++;

            this._cookieLabel.set_label ("Number of cookies: " + cookies);

        }

    }

};

// Spustí aplikaci

let app = new GettingTheSignal ();

app.application.run (ARGV);

    </section>

    <section id="entrysample">

      <title>Ukázkový kód s widgetem Entry</title>

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

      #!/usr/bin/gjs

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

const Gtk = imports.gi.Gtk;

// Začneme s 0 koláčky

var cookies = 0;

class GettingTheSignal {

    // Vytvoří vlastní aplikaci

    constructor() {

        this.application = new Gtk.Application();

        // 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: function() {

        // Vytvoří okno aplikace

        this._window = new Gtk.ApplicationWindow({

            application: this.application,

            window_position: Gtk.WindowPosition.CENTER,

            default_height: 200,

            default_width: 400,

            border_width: 20,

            title: "Spell 'cookie' to get a cookie!"});

        // Vytvoří textové vstupní pole

        this._spellCookie = new Gtk.Entry ();

        // Vytvoří tlačítko na koláčky

        this._cookieButton = new Gtk.Button ({

            label: "Get a cookie" });

        // Napojí tlačítko na koláčky k funkci, která zpracovává jeho kliknutí

        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));

        // Vytvoří popisek

        this._cookieLabel = new Gtk.Label ({

            label: "Number of cookies: " + cookies });

        // Vytvoří mřížku, do které se vše uspořádá

        this._grid = new Gtk.Grid ({

            halign: Gtk.Align.CENTER,

            valign: Gtk.Align.CENTER,

            row_spacing: 20 });

        // Vloží vše do mřížky

        this._grid.attach (this._spellCookie, 0, 0, 1, 1);

        this._grid.attach (this._cookieButton, 0, 1, 1, 1);

        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);

        // Přidá mřížku do okna

        this._window.add (this._grid);

        // Zobrazí okno a všechny jeho synovské widgety

        this._window.show_all();

    }

    _getACookie() {

        // Vyhláskovali jste „cookie“ správně?

        if ((this._spellCookie.get_text()).toLowerCase() == "cookie") {

            // Zvýší počet koláčků o 1 a aktualizuje popisek

            cookies++;

            this._cookieLabel.set_label ("Number of cookies: " + cookies);

        }

    }

};

// Spustí aplikaci

let app = new GettingTheSignal ();

app.application.run (ARGV);

    </section>

  </section>

</page>