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