Vytváření aplikace Vala + Gtk3. [1. část]

Po první příspěvek Přečetl jsem si komentář, že by bylo lepší začít s něčím komplexnějším než s „ahoj světem“, pak udělám sekvenci (3 o 4) příspěvek vytvářející jednoduchou aplikaci (s vala + gtk 3).

Aplikace se bude skládat z jednoduché hry s otázkami a odpověďmi s výběrem odpovědí (typ Trivia), ve které špatně končí zodpovězení 3 otázek (konec hry) a cílem je zodpovědět co nejvíce otázek, na každou otázku máte omezený čas na odpověď.

Design

Hlavní design naší aplikace bude:

Později dáme některá tlačítka, která nám dají možnost 50% (vyloučení dvou nesprávných odpovědí), pozastavení času, předání otázky. Všechny z nich lze použít pouze jednou, při použití se deaktivují.

Design a Kód
Jak vidíme v designu, můžeme vidět prvky gtk, které budeme používat:

Odpovědi -> Tlačítko.

Otázka -> Štítek.

Čas -> ProgressBar.

Špatné / správné body a otázky -> Štítek.

Vidíme, že máme svislou strukturu, takže můžeme použít GBox svisle.

Kód

int main (string [] args) {Gtk.init (ref args); var okno = nový Gtk.Window (); window.title = "aplikace"; window.window_position = Gtk.WindowPosition.CENTER; window.set_default_size (300, 340); window.destroy.connect (Gtk.main_quit); window.set_border_width (10); // vertikální rámeček var box = nový Gtk.Box (Gtk.Orientation.VERTICAL, 0); box.set_spacing (10); // Štítek pro otázku var question = new Gtk.Label ("Question?"); // lišta časového programu var time_bar = nový Gtk.ProgressBar (); timebar.set_text ("Čas"); time_bar.set_show_text (true); // Tlačítka odpovědí var response1 = new Gtk.Button.with_label ("Response 1"); var resposta2 = nový Gtk.Button.with_label ("Odpověď 2"); var resposta3 = nový Gtk.Button.with_label ("Odpověď 3"); var resposta4 = nový Gtk.Button.with_label ("Odpověď 4"); // štítky info var points = new Gtk.Label ("Points: 0"); box.pack_start (otázka); box.pack_start (time_bar); box.pack_start (odpověď1); box.pack_start (resposta2); box.pack_start (resposta3); box.pack_start (resposta4); box.pack_start (body); window.add (rámeček); window.show_all (); Gtk.main (); návrat 0;}

K posunutí „času“ používáme GLib.Timeout, kde se každých 500 milisekund aktivuje (jedná se o smyčku, kde se bude zvětšovat proměnná obsahující hodnotu naší lišty)

GLib.Timeout.add (500, () => {// Získat aktuální postup: // (0.0 -> 0%; 1.0 -> 100%) double progress = time_bar.get_fraction (); // Aktualizovat lištu: pokrok = pokrok + 0.01; time_bar.set_fraction (pokrok); // Opakujte, dokud 100% návrat pokrok <1.0;});

Zajímavé odkazy 
http://www.valadoc.org/#!wiki=index (najdete všechny prvky gtk s jejich metodami ...)