<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" id="image-viewer.vala" xml:lang="cs">

  <info>

  <title type="text">Prohlížeč obrázků (Vala)</title>

    <link type="guide" xref="vala#examples"/>

    <desc>O trošku složitější aplikace GTK+ než jednoduché „Hello world“.</desc>

    <revision pkgversion="0.1" version="0.1" date="2011-03-18" status="review"/>

    <credit type="author">

      <name>Dokumentační projekt GNOME</name>

      <email its:translate="no">gnome-doc-list@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Johannes Schmid</name>

      <email its:translate="no">jhs@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Philip Chimento</name>

      <email its:translate="no">philip.chimento@gmail.com</email>

    </credit>

    <credit type="editor">

     <name>Tiffany Antopolski</name>

     <email its:translate="no">tiffany.antopolski@gmail.com</email>

    </credit>

  <credit type="editor">

    <name>Marta Maria Casetti</name>

    <email its:translate="no">mmcasetti@gmail.com</email>

    <years>2013</years>

  </credit>

  </info>

<title>Prohlížeč obrázků</title>

<synopsis>

  
V této lekci vytvoříte aplikaci, která otevře a zobrazí soubor s obrázkem. Naučíte se:

  <list type="numbered">

    <item>
Jak vytvořit základní projekt pomocí <link xref="getting-ready">IDE Anjuta</link>.
</item>

    <item>
Jak napsat <link href="http://developer.gnome.org/platform-overview/stable/gtk">aplikaci Gtk</link> v jazyce Vala.
</item>

    <item>
Některé základní koncepty programování s <link href="http://developer.gnome.org/gobject/stable/">GObject</link>
</item>

  </list>

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

  <list>

    <item>
Základní znalosti programovacího jazyka <link href="https://live.gnome.org/Vala/Tutorial">Vala</link>.
</item>

    <item>
Nainstalovanou kopii vývojářského studia <app>Anjuta</app>.
</item>

    <item>
Může se vám hodit referenční příručka k API <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link>, ačkoliv pro tuto výuku není nutná.
</item>

  </list>

</synopsis>

<media type="image" mime="image/png" src="media/image-viewer.png"/>

<section id="anjuta">

  <title>Vytvoření projektu ve studiu Anjuta</title>

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

  <steps>

    <item>

      
Spusťte aplikaci <app>Anjuta</app> a klikněte na  <gui>Vytvořit nový projekt</gui> nebo <guiseq><gui>Soubor</gui> <gui>Nový</gui> <gui>Projekt</gui></guiseq>, aby se otevřel průvodce projektem.

    </item>

    <item>

      
Na kartě <gui>Vala</gui> zvolte <gui>GTK+ (jednoduchý)</gui>. Klikněte na <gui>Pokračovat</gui> a na několika následujících stránkách vyplňte své údaje. Jako název projektu a složky použijte <file>image-viewer</file>.

   	</item>

    <item>

      
Ujistěte se, že <gui>Použít GtkBuilder k tvorbě uživatelského rozhraní</gui> je vypnuto, protože jej chceme v této lekci vytvořit ručně.

     <note>
Jak používat builder k tvorbě rozhraní se můžete naučit v lekci <link xref="guitar-tuner.vala">Kytarová ladička</link>.
</note>

    </item>

    <item>

      
Klikněte na <gui>Pokračovat</gui> a pak na <gui>Použít</gui> a vytvoří se vám projekt. Otevřete <file>src/image_viewer.vala</file> na kartě <gui>Projekt</gui> nebo <gui>Soubor</gui>. Měli byste vidět kód, který začíná řádky:

using GLib;

using Gtk;

public class Main : Object

{

	public Main ()

	{

		Window window = new Window();

		window.set_title ("Hello World");

		window.show_all();

		window.destroy.connect(on_destroy);

	}

	public void on_destroy (Widget window)

	{

		Gtk.main_quit();

	}

	static int main (string[] args)

	{

		Gtk.init (ref args);

		var app = new Main ();

		Gtk.main ();

		return 0;

	}

}

    </item>

  </steps>

</section>

<section id="build">

  <title>Prvotní sestavení kódu</title>

  
Kód načte (prázdné) okno ze souboru s popisem uživatelského rozhraní a zobrazí jej. Dále to podrobněji rozebereme. Pokud jste již pochopili základy, tak tento seznam můžete přeskočit:

  <list>

    <item>

      
Dva řádky using v horní části naimportují jmenné prostory, abychom je nemuseli výslovně uvádět.

    </item>

    <item>

      
Konstruktor třídy Main vytvoří nové (prázdné) okno a napojí <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">signál</link>, aby se aplikace ukončila, když se zavře okno.

      
Napojení signálu je způsob, jak definovat, co se má stát, když zmáčknete tlačítko nebo se prostě něco přihodí. Zde je zavolána metoda destroy (a ukončení aplikace) při zavření okna.

    </item>

    <item>

      
Funkce static main se spustí jako výchozí, když spustíte aplikaci napsanou v jazyce Vala. Volá pár funkcí, které vytvoří třídu Main a nastaví a spustí aplikaci. Funkce <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html">Gtk.main</link> spustí <link href="http://en.wikipedia.org/wiki/Event_loop">hlavní smyčku</link> GTK, která spustí uživatelské rozhraní a začne naslouchat událostem (jako je kliknutí nebo zmáčknutí klávesy).

    </item>

  </list>

  
Kód je připravený k použití, takže jej můžete zkompilovat kliknutím na <guiseq><gui>Sestavit</gui> <gui>Sestavit projekt</gui></guiseq> (nebo zmáčknutím <keyseq><key>Shift</key> <key>F7</key></keyseq>).

  
Změňte <gui>Konfiguraci</gui> na <gui>Výchozí</gui> a klikněte na <gui>Spustit</gui>, aby se nakonfigurovala složka, ve které se provádí sestavení. Stačí to udělat jen jednou, pro první sestavení.

</section>

<section id="ui">

  <title>Vytvoření uživatelského rozhraní</title>

  
Nyní prázdné okno oživíme. GTK uspořádává uživatelské rozhraní pomocí widgetů <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html">Gtk.Container</link>, které mohou obsahovat další widgety i další kontejnery. Zde použijeme nejjednodušší dostupný kontejner <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html">Gtk.Box</link>.

Přidejte následující řádky na začátek třídy Main:

private Window window;

private Image image;

Nyní nahraďte současný konstruktor tímto uvedeným níže:

public Main () {

	window = new Window ();

	window.set_title ("Image Viewer in Vala");

	// Nastaví uživatelské rozhraní

	var box = new Box (Orientation.VERTICAL, 5);

	var button = new Button.with_label ("Open image");

	image = new Image ();

	box.pack_start (image, true, true, 0);

	box.pack_start (button, false, false, 0);

	window.add (box);

	// Zobrazí dialogové okno při otevírání souboru

	button.clicked.connect (on_open_image);

	window.show_all ();

	window.destroy.connect (main_quit);

}

  <steps>

    <item>

      
První dva řádky jsou částí GUI a budeme k nim potřebovat přístup z více než jedné metody. Proto je deklarujeme zde, takže budou přístupné skrze třídu. Jinak by byly přístupné jen v metodě, kde by byly vytvořeny.

    </item>

    <item>

      
První řádek konstruktoru vytvoří prázdné okno. Následující řádky vytvoří widgety, které chceme používat: tlačítko pro otevření obrázku, vlastní widget pro zobrazení obrázku a box sloužící jako kontejner.

    </item>

    <item>

      
Volání <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html">pack_start</link> přidává dva widgety do boxu a definuje jejich chování. Obrázek se roztáhne přes veškeré dostupné místo, zatímco tlačítko bude jen tak velké, jak je potřeba. Všimněte si, že jsem u widgetů výslovně nenastavili velikost. GTK to obvykle nepotřebuje, což usnadňuje udělat rozvržení, které vypadá dobře při různých velikostech okna. Následně je box přidán do okna.

    </item>

    <item>

      
Potřebujeme nadefinovat, co se stane, když uživatel klikne na tlačítko. GTK používá koncept signálů.

      
Když je kliknuto na <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">button</link>, vyšle se signál <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html">clicked</link>, který může být napojen na nějakou akci (definovanou v metodě <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">zpětného volání</link>).

      
To se udělá pomocí metody connect signálu clicked u tlačítka, což v tomto případě řekne GTK, aby ve chvíli, kdy je na tlačítko kliknuto, zavolalo (zatím nenadefinovanou) metodu zpětného volání on_image_open. Zpětné volání nadefinujeme v další části.

      
Ve zpětném volání potřebujeme přístup k widgetům window a image, což je důvod, proč je definujeme jako soukromé členy na začátku naší třídy.

    </item>

    <item>

      
Poslední volání funkce connect zajistí, že se aplikace ukončí, když je zavřeno okno. Kód, který vygenerovala Anjuta, volá metodu zpětného volání on_destroy, která volá  <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html">Gtk.main_quit</link>, ale prosté napojení signálu na main_quit je jednodušší. Metodu on_destroy můžete smazat.

    </item>

  </steps>

</section>

<section id="image">

  <title>Zobrazení obrázku</title>

  
Nyní nadefinujeme obsluhu signálu pro signál clicked tzn. pro tlačítko zmíněné dříve. Přidejte tento kód za konstruktor:

public void on_open_image (Button self) {

	var filter = new FileFilter ();

	var dialog = new FileChooserDialog ("Open image",

	                                    window,

	                                    FileChooserAction.OPEN,

	                                    Stock.OK,     ResponseType.ACCEPT,

	                                    Stock.CANCEL, ResponseType.CANCEL);

	filter.add_pixbuf_formats ();

	dialog.add_filter (filter);

	switch (dialog.run ())

	{

		case ResponseType.ACCEPT:

			var filename = dialog.get_filename ();

			image.set_from_file (filename);

			break;

		default:

			break;

	}

	dialog.destroy ();

}

  
Toto je trochu složitější, takže si to pojďme rozebrat:

  <note>
Obsluha signálu je typ metody zpětného volání, která je volána, když je vyslán signál. Běžně se k označní používají oba termíny.
</note>

  <list>

    <item>

      
Prvním argumentem metody zpětného volání je vždy widget, který signál vyslal. Někdy za ním může následovat další argument související se signálem, ale clicked žádný nemá.

      
V tomto případě button vyšle signál clicked, který je napojen na metodu zpětného volání on_open_image:

        button.clicked.connect (on_open_image);

  
Metoda on_open_image přebírá jako argument tlačítko, které vyslalo signál:

        public void on_open_image (Button self)

    </item>

    <item>

      
Dalším zajímavým řádkem je ten, kde je vytvořeno dialogové okno pro výběr souboru. Konstruktor widgetu <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html">FileChooserDialog</link> přebírá název do záhlaví dialogového okna, rodičovské okno a několik voleb, jako je počet tlačítek a jim odpovídající hodnoty.

      
Všimněte si, že používáme <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html">standardní</link> 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.

    </item>

    <item>

      
Následující dva řádky omezí dialogové okno <gui>Open</gui>, aby zobrazovalo jen soubory, které lze otevřít pomocí GtkImage. Nejprve je vytvořen filtr a pak do něj přidáme všechny druhy souborů podporované v <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html">GdkPixbuf</link> (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 <gui>Open</gui>.

    </item>

    <item>

      
<link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html">dialog.run</link> zobrazí dialogové okno <gui>Open</gui>. Dialogové okno bude čekat na uživatele, než si vybere obrázek. Až tak učiní, vrátí dialog.run hodnotu <output>ResponseType.ACCEPT</output> typu <link href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html">ResponseType</link> nebo by mohl vrátit <output>ResponseType.CANCEL</output>, když uživatel klikne na <gui>Cancel</gui>. Otestujeme to výrazem switch.

    </item>

    <item>

      
Při předpokladu, že uživatel klikl na <gui>Open</gui>, následující řádek získá název souboru s obrázkem, který uživatel vybral a řekne widgetu GtkImage, aby jej načetl a zobrazil.

    </item>

    <item>

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

      
Zlikvidováním se dialogové okno automaticky skryje.

    </item>

  </list>

</section>

<section id="run">

  <title>Sestavení a spuštění aplikace</title>

  
Celý kód by nyní měl být připravený k fungování. Klikněte na <guiseq><gui>Sestavit</gui> <gui>Sestavit projekt</gui></guiseq>, aby se vše znovu sestavilo a pak na <guiseq><gui>Spustit</gui> <gui>Spustit</gui></guiseq>, aby se aplikace spustila.

  
Pokud jste tak ještě neučinili, zvolte aplikaci <file>src/image-viewer</file> v dialogovém okně, které se objeví. Nakonec klikněte na <gui>Spustit</gui> a užijte si ji!

</section>

<section id="impl">

  <title>Ukázková implementace</title>

  
Pokud v této lekci narazíte na nějaké problémy, porovnejte si svůj kód s tímto <link href="image-viewer/image-viewer.vala">ukázkovým kódem</link>.

</section>

<section id="next">

  <title>Další postup</title>

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

  <list>

  <item>
Nastavit ji tak, že když se okno otevře, bude mít konkrétní počáteční velikost. Například 200 × 200 pixelů.
</item>

   <item>

     
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.

   </item>

   <item>

     
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.

     
<link href="http://www.gegl.org/api.html">GEGL</link> poskytuje mocné schopnosti pro práci s obrázky.

   </item>

   <item>

     
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 <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> a pro obsluhu skeneru <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link>.

   </item>

  </list>

</section>

</page>