<?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="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>
<p>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.</p>
</synopsis>
<links type="section"/>
<section id="application">
<title>Základní aplikace</title>
<p>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 <code>Button </code> vyšle signál <code>"clicked"</code>, 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.</p>
<p>Jak napsat takový kód? Napojením signálu <code>"clicked"</code> 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.</p>
<p>Zde je úplně základní příklad:</p>
<media type="image" mime="image/png" src="media/03_jssignal_01.png"/>
<p>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ů.</p>
<note style="tip"><p>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é.</p></note>
<p>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ů.</p>
<code mime="application/javascript">
#!/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();
}
</code>
<p>Podívejte se na část, která používá metodu <code>connect</code> naší aplikace a <code>bind</code> k připojení jejích signálů <code>"activate"</code> a <code>"startup"</code> 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 <code>"clicked"</code>.</p>
</section>
<section id="button">
<title>Kliknutí na tlačítko</title>
<p>Jako obvykle, vložíme celý kód pro vytvoření tlačítka a ostatních widgetů do funkce <code>_buildUI</code>, která je volána, když se aplikace spouští.</p>
<code mime="application/javascript">
// Sestaví uživatelské rozhraní aplikace
_buildUI() {
</code>
<p>Nejprve vytvoříme vlastní okno:</p>
<code mime="application/javascript">
// 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!"});
</code>
<p>Všimněte si, že jsem nastavili vlastnosti <code>default_height</code> a <code>default_width</code>. Ty nám umožňují určit v pixelech, jak vysoké a široké bude okno ApplicationWindow.</p>
<p>Následně vytvoříme popisek, který bude zobrazovat počet koláčků. Můžeme použít proměnnou <var>cookies</var> jako součást vlastnosti <code>label</code> popisku.</p>
<code mime="application/javascript">
// Vytvoří popisek
this._cookieLabel = new Gtk.Label ({
label: "Number of cookies: " + cookies });
</code>
<p>Nyní se pustíme do vytvoření widgetu <code>Button</code>. Nastavíme jeho vlastnost <code>label</code>, která zobrazuje text, který chceme na tlačítku, a napojíme jeho signál <code>"clicked"</code> na funkci zpětného volání <code>_getACookie</code>, kterou napíšeme později, až dokončíme konstrukci uživatelského rozhraní naší aplikace.</p>
<code mime="application/javascript">
// 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));
</code>
<p>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 <code>_buildUI</code>, 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ů.</p>
<code mime="application/javascript">
// 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();
}
</code>
<p>Nyní napíšeme funkci <code>_getACookie</code>. Kdykoliv naše tlačítko pošle signál <code>"clicked"</code>, 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 <code>set_label</code> widgetu <code>Label</code>.</p>
<note style="tip"><p>Mnoho widgetů má stejné vlastnosti a metody. Například jak Label, tak Button má vlastnost <code>label</code>, která říká, jaký je v nich text, a metody <code>get_label</code> a <code>set_label</code>, 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.</p></note>
<code mime="application/javascript">
_getACookie: function() {
// Zvýší počet koláčků o 1 a aktualizuje popisek
cookies++;
this._cookieLabel.set_label ("Number of cookies: " + cookies);
}
};
</code>
<p>Nakonec spustíme aplikaci pomocí stejného druhu kódu, jako v poslední lekci.</p>
<code mime="application/javascript">
// Spustí aplikaci
let app = new GettingTheSignal ();
app.application.run (ARGV);
</code>
</section>
<section id="switch">
<title>Přepnutí vypínače</title>
<p>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. <code>Swith</code> nemá vlastnost <code>label</code>, takže musíme zvlášť vytvořit popisek vysvětlující, co dělá vypínač vedle něj.</p>
<media type="image" mime="image/png" src="media/03_jssignal_02.png"/>
<p>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.</p>
<p>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ě <code>Switch</code> ří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.</p>
<note style="tip"><p>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.</p></note>
<p>Zde vytvoříme widget Switch:</p>
<code mime="application/javascript">
// Vytvoří vypínač
this._cookieSwitch = new Gtk.Switch ();
</code>
<p>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 <code>"notify::active"</code> nějak takto:</p>
<code mime="application/javascript">
// Napojí vypínač k funkci, která jej obsluhuje
this._cookieSwitch.connect ('notify::active', this._cookieDispenser.bind(this));
</code>
<p>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 <code>active</code> na <code>true</code>.</p>
<code mime="application/javascript">
this._cookieSwitch = new Gtk.Switch ({ active: true });
</code>
<p>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ří:</p>
<code mime="application/javascript">
// 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);
</code>
<p>A nyní obdobně vše uspořádáme ve větší mřížce.</p>
<code mime="application/javascript">
// 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);
</code>
<p>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 <code>get_active</code>. Ta vrací <code>true</code>, když je vypínač zapnutý a <code>false</code>, když je vypínač vypnutý.</p>
<note style="tip"><p>Když je metoda použita v podmíněném výrazu <code>if</code> jako zde, je kód uvnitř výrazu proveden, pokud metoda vrátí <code>true</code>.</p></note>
<code mime="application/javascript">
_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);
}
}
</code>
</section>
<section id="radio">
<title>Ladění rádia</title>
<p>Jiný typ vstupního widgetu, který můžeme použít, se nazývá <code>RadioButton</code> (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.</p>
<media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
<p>Nejdříve ze všeho pojďme změnit název našeho <code>ApplicationWindow</code> a zvětšit jeho vlastnost <code>border_width</code>, aby v něm naše widgety nebyly příliš namačkané. Vlastnost <code>border_width</code> udává počet pixelů mezi widgetem a hranou okna.</p>
<code mime="application/javascript">
// 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'!"});
</code>
<p>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 <code>group</code> na název jiného skupinového přepínače.</p>
<code mime="application/javascript">
// 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 });
</code>
<p>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.</p>
<code mime="application/javascript">
// 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);
</code>
<p>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 <code>set_active</code>.</p>
<note style="tip"><p>Jeho vlastnost <code>active</code> můžeme nastavit na <code>true</code> také při jeho vytváření.</p></note>
<code mime="application/javascript">
// Nastaví, že skupinový přepínač, které bude nahoře, bude ve
// výchozím stavu aktivní
this._notCookieOne.set_active (true);
</code>
<p>Nyní vše jako obvykle uspořádáme v naší hlavní mřížce…</p>
<code mime="application/javascript">
// 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);
</code>
<p>A pak změníme naši funkci <code>_getACookie</code>, aby testovala, jestli je je vybrán přepínač s koláčkem.</p>
<code mime="application/javascript">
_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);
}
}
</code>
</section>
<section id="spell">
<title>Umíte hláskovat „cookie“?</title>
<p>Posledním vstupním widgetem, kterým se budeme zabývat, je <code>Entry</code> (vstupní pole), který se používá jako jednořádkové vstupní pole.</p>
<note style="tip"><p>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>.</p></note>
<media type="image" mime="image/png" src="media/03_jssignal_04.png"/>
<p>Po té, co změníme název okna, vytvoříme widget <code>Entry</code>.</p>
<code mime="application/javascript">
// Vytvoří textové vstupní pole
this._spellCookie = new Gtk.Entry ();
</code>
<p>Následně vše uspořádáme do mřížky…</p>
<code mime="application/javascript">
// 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);
</code>
<p>A nyní opět změníme podmíněný výraz ve funkci <code>_getACookie</code> a to s pomocí metody <code>get_text</code>, 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 <code>toLowerCase</code>, která v podmíněném výrazu změní zadaný text na malá písmena.</p>
<note style="tip"><p>Widget <code>Entry</code> nemá vlastnost <code>label</code>, 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 <code>text</code>, která mění to, co uživatel píše.</p></note>
<code mime="application/javascript">
_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);
}
}
</code>
</section>
<section id="whats_next">
<title>A co dál?</title>
<p>Jestli chcete vidět celý kód pro každou z verzí aplikace produkující koláčky, čtěte dál.</p>
<note style="tip"><p>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.</p></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"/>
<code mime="application/javascript" style="numbered">#!/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);
</code>
</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"/>
<code mime="application/javascript" style="numbered">#!/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);
</code>
</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"/>
<code mime="application/javascript" style="numbered">#!/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);
</code>
</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"/>
<code mime="application/javascript" style="numbered">#!/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);
</code>
</section>
</section>
</page>