Taryn Fox
jewelfox@fursona.net 2012
Vytvoříme tlačítka a další widgety, které budou něco dělat, když na ně klikneme.

# 3. Čekání na signál

        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.

# Základní aplikace

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:

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

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

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"`.

# Kliknutí na tlačítko

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

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.

_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);

# Přepnutí vypínače

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.

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 Get a cookie. Když je vypnutý, neděje se při kliknutí na tlačítko nic.

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.

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

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

_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);

}

}

# Ladění rádia

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.

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

Jeho vlastnost `active` můžeme nastavit na `true` také při jeho vytváření.

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

}

}

# Umíte hláskovat „cookie“?

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

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

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.

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.

_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);

}

}

# A co dál?

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

Hlavní stránka s výukou jazyka JavaScript má podrobnější ukázky kódu pro každý jednotlivý widget, včetně několika, které zde rozebrané nejsou.

# Celý kód ukázky

## Ukázkový kód s widgetem Button

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

## Ukázkový kód s widgetem Switch

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

## Ukázkový kód s widgetem RadioButton

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

## Ukázkový kód s widgetem Entry

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