Creating a Vala + Gtk3 app. [1st part]

After first post I read a comment that it would be better to start with something more complex than "hello world", then I will make a sequence3 or 4) post creating a simple application (with vala + gtk 3).

The application will consist of a simple multiple choice question and answer game (Trivia type), in which answering 3 questions wrongly ends (game over), and the objective is to answer as many questions as possible, for each question you have a limited time to reply.

Integrated

Main design of our application will be:

Later we will put some buttons that will give us the option of 50% (eliminating two wrong answers), freeze time, pass a question. All of them can only be used once, being disabled once used.

Design a Custom code
As we can see in the design we can see the gtk elements that we will use:

Answers -> Button.

Question -> Label.

Time -> ProgressBar.

Wrong / correct points and Questions -> Label.

We can see that we have a vertical structure therefore we can use GBox vertically.

Custom code

int main (string [] args) {Gtk.init (ref args); var window = new Gtk.Window (); window.title = "app"; window.window_position = Gtk.WindowPosition.CENTER; window.set_default_size (300, 340); window.destroy.connect (Gtk.main_quit); window.set_border_width (10); // vertical box var box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0); box.set_spacing (10); // Label for the question var question = new Gtk.Label ("Question?"); // prograsive time bar var time_bar = new Gtk.ProgressBar (); time_bar.set_text ("Time"); time_bar.set_show_text (true); // Response buttons var response1 = new Gtk.Button.with_label ("Response 1"); var resposta2 = new Gtk.Button.with_label ("Reply 2"); var resposta3 = new Gtk.Button.with_label ("Reply 3"); var resposta4 = new Gtk.Button.with_label ("Reply 4"); // labels info var points = new Gtk.Label ("Points: 0"); box.pack_start (question); box.pack_start (time_bar); box.pack_start (reply1); box.pack_start (resposta2); box.pack_start (resposta3); box.pack_start (resposta4); box.pack_start (points); window.add (box); window.show_all (); Gtk.main (); return 0;}

To move the "time" we use GLib.Timeout where every 500 milliseconds it will be activated (it is a loop where the variable that contains the value of our bar will increase)

GLib.Timeout.add (500, () => {// Get the current progress: // (0.0 -> 0%; 1.0 -> 100%) double progress = time_bar.get_fraction (); // Update the bar: progress = progress + 0.01; time_bar.set_fraction (progress); // Repeat until 100% return progress <1.0;});

Links of interest 
http://www.valadoc.org/#!wiki=index (you can find all gtk elements with their methods ...)