# Prohlížeč obrázků (JavaScript)

O trošku složitější aplikace než jednoduché „Hello world“ – napíšeme prohlížeč obrázků v GTK+. Součástí je úvod do programovacího jazyka JavaScript.
Jonh Wendell
jwendell@gnome.org
Johannes Schmid
jhs@gnome.org
Marta Maria Casetti
mmcasettii@gmail.com 2013

# Prohlížeč obrázků

      V této lekci napíšeme velmi jednoduchou aplikaci GTK, která načítá a zobrazuje soubory s obrázky. Naučíte se tyto věci:

        Napsat základní uživatelské rozhraní GTK v jazyce JavaScript.
        Zacházet s událostmi pomocí připojení signálu na obsluhu signálu.
        Rozvrhnout uživatelské rozhraní GTK pomocí kontejnerů.
        Načíst a zobrazit soubor s obrázkem.

      Abyste mohli pokračovat v této lekci, budete potřebovat následující:

        Nainstalovanou kopii IDE Anjuta
        Nainstalovanou kopii interpretu gjs
        Základní znalosti objektově orientovaného programovacího jazyka

# Vytvoření projektu ve studiu Anjuta

Než začnete s kódováním, musíte ve studiu Anjuta vytvořit nový projekt. Tím se vytvoří všechny soubory, které budete později potřebovat k sestavení a spuštění kódu. Je to také užitečné kvůli udržení všeho pohromadě.

Spusťte IDE Anjuta a klikněte na Soubor Nový Projekt, aby se otevřel průvodce projektem.

Na kartě JS zvolte Obecný JavaScript, klikněte na Pokračovat a na několika následujících stránkách vyplňte své údaje. Jako název projektu a složky použijte image-viewer.

Klikněte na Použít a vytvoří se vám projekt. Otevřete src/main.js na kartě Projekt nebo Soubor. Bude obsahovat úplně základní příklad kódu.

# Základy v jazyce JavaScript: Hello World

Než začneme s psaním prohlížeče obrázků, pojďme se dozvědět něco víc o tom, jak se JavaScript používá v GNOME. Váš první kontakt s kterýmkoliv programovacím jazykem by samozřejmě měl být „Hello World“, který již najdete v main.js:

print ("Hello world!");

Jestli jste seznámení s kterýmkoliv programovacím jazykem, tohle by vám mělo připadat povědomé. Funkce `print` je volána s argumentem `"Hello world!"`, který bude vypsán na obrazovku. Všimněte si, že každý řádek je zakončen středníkem.

# Třídy v jazyce JavaScript

Toto je standardní způsob, jak definovat třídu v jazyce JavaScript:

function MyClass () { this._init (); }

MyClass.prototype = {

_init: function () { this.propertyA = "This is an object's field"; this.propertyB = 10; },

aMethod: function (arg1, arg2) { print ("inside aMethod: " + arg1 + " " + arg2); },

dumpProperties: function () { print (this.propertyA); print (this.propertyB); }

}

Zde se definuje třída nazvaná `MyClass`. Pojďme si projít jednotlivé části definice třídy:

`function MyClass` je konstruktor třídy – jeho název musí odpovídat názvu třídy. Ke kterémukoliv členu třídy můžete přistupovat pomocí objektu `this`. Zde konstruktor volá metodu `_init` této třídy.

Blok `MyClass.prototype` je místo, kde se definuje struktura třídy. Každá třída se skládá z metod (funkce) a vlastností (proměnné). V tomto příkladu jsou tři metody a dvě vlastnosti.

První zde definovaná metoda se nazývá `_init` a specifikujeme ji, jako funkci bez argumentů:

_init: function ()

Napíšeme funkci dovnitř mezi složené závorky. Jsou zde definována dvě pole, `propertyA` a `propertyB`. První je nastavena na řetězec a druhá na celé číslo (10). Funkce nevrací žádnou hodnotu.

Následující metoda se nazývá `aMethod` a má dva argumenty, které se při svém zavolání vypíše. Poslední metodou je `dumpProperties` a ta vypíše pole `propertyA` a `propertyB`.

Všimněte si, jak je definice třídy (prototyp) uspořádaná. Definice každé funkce je oddělena čárkou.

Nyní je třída MyClass nadefinována a můžeme si s ní hrát:

var o = new MyClass (); o.aMethod ("Hello", "world"); o.propertyA = "Just changed its value!"; o.dumpProperties ();

Tento kód vytvoří novou instanci třídy nazývanou o, spustí `aMethod`, změní `propertyA` na jiný řetězec a pak zavolá `dumpProperties` (která vypíše vlastnosti).

Uložte kód do main.js a následně jej spusťte pomocí Spustit Provést v nabídce nebo pomocí nástrojové lišty.

# První aplikace Gtk

Podívejme se, jak vypadá úplně základní aplikace Gtk v jazyce JavaScript:

const Gtk = imports.gi.Gtk;

Gtk.init (null, null);

var w = new Gtk.Window ({title: "Image Viewer Demo"}); w.show ();

Gtk.main ();

Podívejme se, co se stane:

První řádek importuje jmenný prostor Gtk (tzn. vloží knihovnu Gtk). Knihovny jsou poskytovány pomocí GObject Introspection (gi), který poskytuje vazbu jazyka pro řadu knihoven GNOME.

`Gtk.init` inicializuje knihovnu Gtk. Tato část je povinná pro všechny programy Gtk.

Následující řádek vytvoří hlavní okno vytvořením nového objektu `Gtk.Window`. Konstruktoru okna můžete předat několik vlastností pomocí syntaxe `{vlastnost: hodnota, vlastnost: hodnota, …}`. V tomto případě nastavujeme název okna.

Následující řádek zajistí zobrazení okna. V Gtk je každý widget ve výchozím stavu skrytý.

Nakonec `Gtk.main` spustí hlavní smyčku – jinými slovy provádění programu. Hlavní smyčka naslouchá událostem (signálům) od uživatelského rozhraní a následně volá obsluha signálu, které provede něco užitečného. Krátce si povíme něco o signálech.

Uložte kód do main.js a spusťte jej. Budete upozorněni, že aplikace se neukončí, když zavřete okno. To je tím, že zatím nemáme nastavenu obsluhu signálu `"destroy"` (close) od okna. Uděláme to za chvíli, prozatím ale použijte k ukončení programu zmáčknutí Ctrl C v terminálu.

# Přidání tříd

Správný způsob, jak programovat s Gtk, je používat třídy. Pojďme přepsat jednoduchý kód, který jste již napsali, pomocí tříd:

const Gtk = imports.gi.Gtk;

function ImageViewer () { this._init (); }

ImageViewer.prototype = { _init: function () { this.window = new Gtk.Window ({title: "Image Viewer Demo"}); this.window.show (); } }

Gtk.init (null, null); var iv = new ImageViewer (); Gtk.main ();

Všimněte si, že program je ten stejný. Jen jsme přesunuli kód vytvářející okno do samostatné třídy `ImageViewer`. Konstruktor třídy volá metodu `_init`, která vytvoří a zobrazí okno. Potom vytvoříme instanci třídy před spuštěním hlavní smyčky (`Gtk.main`).

Tento kód je modulární a můžeme jej snadno rozdělit do více souborů. Díky tomu bude čistější a snadnější ke čtení.

# Signály

Signály jsou klíčovým konceptem programování v Gtk. Kdykoliv se něco stane u nějakého objektu, tak onen objekt vyšle signál. Například, když je kliknuto na tlačítko, vyšle signál `"clicked"`. Pokud chcete, aby váš program něco udělal, když tato událost nastane, musíte napojit funkci („obsluhu signálu“) na tento signál. Zde je příklad:

function button_clicked () { print ("you clicked me!"); } var b = new Gtk.Button ({label:"Click me"}); b.connect ("clicked", button_clicked);

Poslední dva řádky vytvoří `Gtk.Button` nazvané `b` a napojí jeho signál `clicked` na funkci `button_clicked`, která byla definována dříve. Pokaždé, když je kliknuto na tlačítko, provede se kód ve funkci `button_clicked`. Ten akorát vypíše zprávu.

Syntax pro připojení nějakého signálu k funkci je:

object.connect (<název_signálu>, <funkce_která_se_má_volat>);

Definice signálů pro všechny možné objekty najdete v Příručce ke třídám GTK.

Můžeme kód zjednodušit použitím vložené definice funkce:

`b.connect ("clicked", function () { print ("you clicked me!"); });`

# Zavření okna

Když zavřete okno Gtk, ve skutečnosti se nezavře, ale skryje. To umožňuje zachovat si okno bokem (což se například hodí, když se chcete uživatele zeptat, jestli chce okno opravdu zavřít).

V našem případě opravdu chceme okno zavřít. Nejjednodušší způsob, jak to udělat, je napojit signál `"hide"` objektu `GtkWindow` na funkci, která zavře aplikaci. Běžte zpět do souboru image-viewer.js a přidejte následující kód do metody `_init` na řádek na `this.window.show`:

this.window.connect ("hide", Gtk.main_quit);

Tímto se napojí signál `"hide"` okna na funkci `main_quit` z Gtk, která ukončí provádění hlavní smyčky Gtk. Jakmile je hlavní smyčka dokončena, dojde k návratu z funkce `Gtk.main`. Náš program by pokračovat během kódu napsaného za řádkem `Gtk.main ()`, ale zatím tam žádný kód nemáme, takže program skončí.

# Kontejnery: Rozvržení uživatelského rozhraní

Widgety (ovládací prvky, jako jsou tlačítka a popisky) lze v okně uspořádat pomocí kontejnerů. Můžete dohromady kombinovat různé kontejnery, jako jsou boxy nebo mřížky.

`Gtk.Window` je samo o sobě kontejner, ale přímo do něj můžete vložit jen jeden widget. My bychom měli rádi dva widgety, obrázek a tlačítko, takže musíme do okna vložit „vysokokapacitní“ kontejner, pro tyto další widgety. Je dostupná řada typů kontejnerů, ale my zde použijeme `Gtk.Box`. Ten může obsahovat několik widgetů uspořádaných vodorovně nebo svisle. Složitější rozvržení můžete udělat vložením několika boxů do jiného boxu atd.

Existuje návrhář grafického uživatelského rozhraní nazývaný Glade, který je zaintegrován i do IDE Anjuta. S ním můžete navrhovat uživatelské rozhraní opravdu snadno. V tomto příkladu ale vše napíšeme ručně.

Pojďme přidat box a widgety do okna. Vložte následující kód do metody `_init`, hned nad řádek `this.window.show`:

var main_box = new Gtk.Box ({orientation: Gtk.Orientation.VERTICAL, spacing: 0}); this.window.add (main_box);

První řádek vytvoří `Gtk.Box` nazvaný main_box a nastaví dvě jeho vlastnosti: `orientation` (otočení) je nastavena na svislou (takže widgety jsou uspořádány do sloupce) a `spacing` (rozestupy) mezi widgety jsou nastaveny na 0 pixelů. Následující řádek pak přidá nově vytvořený `Gtk.Box` do okna.

Zatím okno obsahuje jen prázdný `Gtk.Box` a pokud spustíte program nyní, neuvidíte oproti dřívějšku žádné změny (`Gtk.Box` je průhledný kontejner, takže jej tam nemůžete vidět).

# Balení: Přidání widgetů do kontejneru

Abyste přidali nějaké widgety do `Gtk.Box`, vložte následující kód přímo pod řádek `this.window.add (main_box)`:

this.image = new Gtk.Image (); main_box.pack_start (this.image, true, true, 0);

První řádek vytvoří nový `Gtk.Image` nazvaný `image`, který bude použit k zobrazení souboru s obrázkem. Následně je widget obrázku přidán (zabalen) do kontejneru main_box pomocí metody `pack_start` widgetu `Gtk.Box`.

`pack_start` přebírá 4 argumenty: widget, který je přidáván do boxu (`child`); zda by se měl box zvětšit, když je přidán nový widget (`expand`); zda by měl nový widget zabrat všechno vytvořené dodatečné místo, když je box větší (`fill`); jak moc místa, v pixelech, by mělo být mezi widgetem a jeho sousedem uvnitř boxu (`padding`).

Kontejnery Gtk (a widgety) se dynamicky roztahují, aby zaplnily dostupné místo, pokud jim to tedy dovolíte. Neumisťujte widgety zadáváním přesných souřadnic x,y v okně. Místo toho je umisťujte relativně vůči sobě. To umožní oknu, které se o ně stará, jednodušeji měnit velikost a widgety by tak měli dostat automaticky rozumnou velikost ve většině situací.

Všimněte si také, jak jsou widgety uspořádány do hierarchie. Jakmile jsou zabaleny v `Gtk.Box`, je `Gtk.Image` považován za potomka Gtk.Box. To umožňuje zacházet se všemi potomky widgetu jako se skupinou. Například byste mohli skrýt `Gtk.Box`, což by zároveň skrylo i všechny jeho potomky.

Nyní vložte tyto dva řádky pod ty dva, které jsme již přidali:

var open_button = new Gtk.Button ({label: "Open a picture..."}); main_box.pack_start (open_button, false, false, 0);

Tyto řádky jsou podobné jako první dva, ale tentokrát vytváří `Gtk.Button` a přidávají ho do widgetu main_box. Všimněte si, že zde nastavujeme argument `expand` (ten druhý) na `false`, zatímco pro `Gtk.Image` byl nastaven na `true`. To způsobí, že obrázek zabere všechno dostupné místo a tlačítko jen tolik místa, kolik potřebuje. Když okno maximalizujete, zůstane velikost tlačítka stejná, ale obrázek se zvětší, aby zabral celý zbytek okna.

Nakonec musíme změnit řádek `this.window.show ();` takto:

this.window.show_all ();

Tím se zobrazí potomci v okně Gtk a všichni jejich potomci a potomci těchto potomků atd. (Pamatujte, že widgety Gtk jsou ve výchozím stavu skryté.)

# Načtení obrázku: Napojení signálu `clicked` od tlačítka

Když uživatel klikne na tlačítko Open, mělo by se objevit dialogové okno, ve kterém si uživatel může vybrat obrázek. Až jej má vybraný, měl by se obrázek načíst a zobrazit ve widgetu obrázku.

Prvním krokem je napojení signálu `"clicked"` od tlačítka na funkci obsluhující signál, kterou nazveme `_openClicked`. Vložte tento kód hned za řádek `var open_button = new Gtk.Button`, kde je tlačítko vytvořeno:

open_button.connect ("clicked", Lang.bind (this, this._openClicked));

Používáme zde pomocnou třídu jazyka JavaScript `Lang`. Ta umožňuje napojit na signál metodu třídy namísto prosté funkce (bez třídy), což jsem udělali před tím pro signál `"hide"` u okna. Teď si s tím nedělejte starosti, je to jen drobný technický detail. Aby to fungovalo, potřebujete navíc na začátek souboru vložit následující řádek:

const Lang = imports.lang;

# Načítání obrázku: Psaní zpětných volání pro signály

Nyní můžeme vytvořit metodu `_openClicked()`. Vložte následující do bloku `ImageViewer.prototype` za metodu `_init` (a nezapomeňte na čárku):

_openClicked: function () { var chooser = new Gtk.FileChooserDialog ({title: "Select an image", action: Gtk.FileChooserAction.OPEN, transient_for: this.window, modal: true}); chooser.add_button (Gtk.STOCK_CANCEL, 0); chooser.add_button (Gtk.STOCK_OPEN, 1); chooser.set_default_response (1);

var filter = new Gtk.FileFilter (); filter.add_pixbuf_formats (); chooser.filter = filter;

if (chooser.run () == 1) this.image.file = chooser.get_filename ();

chooser.destroy (); }

Toto je trochu komplikovanější než vše, o co jsme se doposud pokusili, takže si to pojďme rozebrat:

Řádek začínající `var chooser` vytvoří dialogové okno Open, které může uživatel použít k výběru souboru. Nastavíme čtyři vlastnosti: název dialogového okna; akci (typ) dialogového okna (jde o dialogové okno Open, ale mohli bychom použít `SAVE`, pokud by záměrem bylo uložení souboru; `transient_for`, která nastaví rodičovské okno dialogového okna; `modal`, která, když je nastavena na `true`, zabrání uživateli kliknout na jiné místo aplikace, dokud není dialogové okno zavřeno.

Následující dva řádky přidají do dialogového okna tlačítka Cancel a Open. Druhým argumentem metody `add_button` je celočíselná hodnota, která bude vrácena při zmáčknutí tlačítka: 0 pro Cancel a 1 pro Open.

Všimněte si, že používáme standardní názvy tlačítek z Gtk, místo abychom ručně psali „Cancel“ nebo „Open“. Výhodou použití standardních názvů je, že popisky tlačítek budou vždy přeloženy do uživatelova jazyka.

`set_default_response` určuje tlačítko, které bude aktivováno, když uživatel dvojitě klikne na soubor nebo zmáčkne Enter. V našem případě používáme jako výchozí tlačítko Open (které má hodnotu 1).

Následující tři řádky omezí dialogové okno Open, aby zobrazovalo jen soubory, které lze otevřít pomocí `Gtk.Image`. Nejprve je vytvořen filtr a pak do něj přidáme všechny druhy souborů podporované v `Gdk.Pixbuf` (což zahrnuje většinu obrázkových formátů, včetně PNG a JPEG). Nakonec tento filtr nastavíme aby byl filtrem dialogového okna Open.

`chooser.run` zobrazí dialogové okno Open. Dialogové okno bude čekat na uživatele, než si vybere obrázek. Až tak učiní, vrátí `choose.run` hodnotu 1 nebo by mohl vrátit 0, když uživatel klikne na Cancel. Otestujeme to výrazem `if`.

Předpokládejme, že uživatel klikl na Open. Následující řádek nastaví vlastnost `file` v `Gtk.Image` na název souboru s obrázkem, který si uživatel vybral. `Gtk.Image` vybraný obrázek načte a zobrazí.

Na posledním řádku této metody zlikvidujeme dialogové okno Open, protože jej již nebudeme potřebovat.

# Spuštění aplikace

Všechen kód, který potřebujete, je nyní nachystaný, takže jej můžete zkusit spustit. Tím jste během krátké chvíle získali, co jsme slíbili – plně funkční prohlížeč obrázků (a tím končí naše cesta jazykem JavaScript a knihovnou Gtk).

# Ukázková implementace

Pokud v této lekci narazíte na nějaké problémy, porovnejte si svůj kód s tímto ukázkovým kódem.

# Další postup

Zde je pár nápadů, jak byste mohli tuto jednoduchou ukázku rozšířit:

Umožnit uživateli výběr složky místo souboru a poskytnout ovládání pro procházení všech obrázků v této složce.

Použít při načtení obrázku náhodné filtry a efekty a umožnit uživateli takto změněný obrázek uložit.

GEGL poskytuje mocné schopnosti pro práci s obrázky.

Umožnit uživateli načíst obrázky ze síťového sdílení, skenerů a dalších složitějších zdrojů.

Pro práci se síťovými přenosy můžete použít GIO a pro obsluhu skeneru GNOME Scan.