Creating an App (Vala + GTK 3) [3rd part]

In this part we will see how to create another window and design it with GTK. We will also see some functionalities such as adding questions and using the three buttons (50%, freeze and pass).

ToolBar and ToolButton

Create a ToolBar:

Creating a ToolButton, in this case we will put an icon (you can find many icons by default here) with «from_stock (Gtk.Stock.IconName):

We can see that in our application we have at the top a bar with two buttons, where we will use the first to create new questions and the second to import questions (through a file):

Creating questions:
The button that we created previously (in the toolbar) when we click on it, we will open a new gtk window that will allow us to add questions to our database:

To create a new window we will create a new class, which we will call Questions, and how our App class will create a new window (this.window = new Gtk.Window ();)

We will use a few components to create the graphical interface in order;

-Label (Questions)

- Entry (where we will write the question)

-Label (responses)

- 4 horizontal boxes that will contain an Entry (the answer) and a Switch (to select if it is correct)

-Button (to complete)

We can see how it looks:

To save the question we will have to obtain the text of the entrys, they are obtained with get_text () which returns a string.

To know if if a Switch is active we can use its method get_active () which returns true if it is on and flase if it is off.

 50%, Freeze and Pass buttons:

 -fifty% :

For 50% we only have to look at which is the correct button and remove 2 that are not correct, in this case we cancel them with set_sensitive (false).

Result:

-Freeze:

We set the bar to 0 again.

this.timebar.set_fraction (0);

-Pass:

button3.clicked.connect (() => {
this.bd_select_preguntas ();
this.next_pregunta();
});

 Next Part (4):

In the next installment we will see how to improve aspects of our application, such as that the questions do not always appear in the same position, put an icon on the app ...