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

  <info>

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

    <desc>O trošku složitější aplikace GTKmm 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="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 se seznámíme s následujícími věcmi:

  <list>

    <item>
Některé základní koncepty programování s C++/GObject
</item>

    <item>
Jak psát aplikace Gtk v jazyce C++
</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 IDE Anjuta a klikněte na <guiseq><gui>Soubor</gui> <gui>Nový</gui> <gui>Projekt</gui></guiseq>, aby se otevřel průvodce projektem.

    </item>

    <item>

    
Na kartě <gui>C++</gui> zvolte <gui>GTKmm (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ě. Jestli se chcete naučit, jak používat návrhář uživatelského rozhraní, podívejte se do lekce <link xref="guitar-tuner.cpp">Kytarová ladička</link>.

    </item>

    <item>

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

#include <gtkmm.h>

#include <iostream>

#include "config.h">

    </item>

  </steps>

</section>

<section id="build">

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

  
Jedná se o zcela základní kód C++ nastavující GTKmm. Podrobněji je to popsáno dále. Pokud základům rozumíte, tak tento sezmam přeskočte:

  <list>

  <item>

    
Tři řádky #include na začátku vkládají knihovny config (užitečné definice pro sestavení pomocí autotools), gtkmm (uživatelské rozhraní) a iostream (C++-STL). Funkce z těchto knihoven se používají ve zbytku kódu.

   </item>

   <item>

    
Funkce main vytvoří nové (prázdné) okno a nastaví název do jeho záhlaví.

   </item>

   <item>

    
Funkce kit::run() spustí hlavní smyčku GTKmm, která spustí uživatelské rozhraní a začne naslouchat událostem (jako jsou kliknutí nebo zmáčknutí kláves). Protože jsme této funkci jako argument předali okno, ukončí se aplikace automaticky při zavření tohoto okna.

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

  
V následujícím okně zmáčkněte <gui>Spustit</gui>, aby se nakonfigurovalo ladicí sestavení. Stačí to udělat jen jednou, pro první sestavení.

</section>

<section id="ui">

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

Nyní oživíme prázdné okno. GTKmm uspořádává uživatelské rozhraní pomocí kontejneru Gtk::Container, který může obsahovat další widgety a také další kontejnery. Zde použijeme nejjednodušší dostupný kontejner Gtk::Box:

int

main (int argc, char *argv[])

{

	Gtk::Main kit(argc, argv);

	Gtk::Window main_win;

	main_win.set_title ("image-viewer-cpp");

	Gtk::Box* box = Gtk::manage(new Gtk::Box());

	box->set_orientation (Gtk::ORIENTATION_VERTICAL);

	box->set_spacing(6);

	main_win.add(*box);

	image = Gtk::manage(new Gtk::Image());

	box->pack_start (*image, true, true);

	Gtk::Button* button = Gtk::manage(new Gtk::Button("Open Image…"));

	button->signal_clicked().connect (

		sigc::ptr_fun(&on_open_image));

	box->pack_start (*button, false, false);

	main_win.show_all_children();

	kit.run(main_win);

	return 0;

}

  <steps>

    <item>

    
První řádky vytvoří widgety, které chceme používat: tlačítko pro otevření obrázku, vlastní widget pro zobrazení obrázku a box,, který použijeme jako kontejner.

    </item>

    <item>

    
Volání pack_start 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. GTKmm 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. GTKmm používá koncept signálů. Když je kliknuto na tlačítko, spustí se signál clicked, který můžeme napojit na nějakou akci. To se udělá pomocí funkce signal_clicked().connect, která řekne GTKmm, aby zavolalo funkci on_open_image, když je na tlačítko kliknuto. Funkci zpětného volání nadefinujeme v další části.

    </item>

    <item>

    
Posledním krokem je zobrazit všechny widgety v okně pomocí show_all_children(). Je to stejné, jako byste zavolali metodu show() postupně u všech našich synovských widgetů.

    </item>

  </steps>

</section>

<section id="show">

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

Nyní budeme definovat obsluhu signálu pro signál clicked tzn. pro tlačítko zmíněné dříve. Přidejte tento kód před metodu main.

Gtk::Image* image = 0;

static void

on_open_image ()

{

	Gtk::FileChooserDialog dialog("Open image",

	                              Gtk::FILE_CHOOSER_ACTION_OPEN);

	dialog.add_button (Gtk::Stock::OPEN,

	                   Gtk::RESPONSE_ACCEPT);

	dialog.add_button (Gtk::Stock::CANCEL,

	                   Gtk::RESPONSE_CANCEL);

	Glib::RefPtr<Gtk::FileFilter> filter =

		Gtk::FileFilter::create();

	filter->add_pixbuf_formats();

	filter->set_name("Images");

	dialog.add_filter (filter);

	const int response = dialog.run();

	dialog.hide();

	switch (response)

	{

		case Gtk::RESPONSE_ACCEPT:

			image->set(dialog.get_filename());

			break;

		default:

			break;

	}

}

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

  <list>

      <item>

      
Dialogové okno pro výběr souboru je vytvořeno pomocí konstruktoru Gtk::FileChooserDialog. Jako argumenty přebírá název a typ dialogového okna. V našem případě je to dialogové okno Open.

    </item>

    <item>

    
Následující dva řádky přidají do dialogového okna tlačítka Open a Close.

    
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.

    
Druhým argumentem metody add_button() je hodnota identifikující kliknuté tlačítko. I zde použijeme předdefinované hodnoty poskytované GTKmm.

    </item>

    <item>

    
Následující dva řádky omezí dialogové okno <gui>Open</gui>, 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 <gui>Open</gui>.

    
Glib::RefPtr je chytrý ukazatel, který zde použijeme, aby se zajistilo, že filtr bude zlikvidován, až na něj nepovede žádný odkaz.

    </item>

    <item>

    
dialog.run 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>Gtk::RESPONSE_ACCEPT</output> nebo by mohl vrátit <output>Gtk::RESPONSE_CANCEL</output>, když uživatel klikne na <gui>Cancel</gui>. Otestujeme to výrazem switch.

    </item>

    <item>

    
Skryjeme dialogové okno <gui>Open</gui>, protože jej již nebudeme potřebovat. Stejně by mohl být skryt později, protože jde jen o místní proměnnou a bude zlikvidována (a tím dialogové okno skryto), až se dorazí na konec rozsahu působnosti.

    </item>

    <item>
Při předpokladu, že uživatel klikl na <gui>Open</gui>, následující řádky načtou soubor do Gtk::Image, takže se zobrazí.

    </item>

  </list>

</section>

<section id="build2">

  <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>Debug/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.cc">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>

   
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>