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:

app2

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):

Capture from 2013-12-07 23:26:52

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):

Capture from 2013-11-08 00:30:32

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:

app1

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:

Capture from 2013-12-08 01:07:08

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

app5

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

app4

Result:

app6

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

 


The content of the article adheres to our principles of editorial ethics. To report an error click here!.

12 comments, leave yours

Leave a Comment

Your email address will not be published. Required fields are marked with *

*

*

  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   F3niX said

    I love the answers ... haha ​​.. Greetings

  2.   panchomora said

    Very good these articles about vala .. I hope the others .. greetings

  3.   cr0t0 said

    I have pending your entry on Vala, I hope there are many deliveries. Regards!

  4.   pptru said

    Nice article, thanks for sharing.

  5.   Hiram said

    Hello,

    I have followed your previous entries for the creation of this app, the problem comes now that I try to access the entrys of the new window, I do it this way, in the saveC method of the createQuestions class (class that creates the window).

    public void saveC () {
    string str = questionE.get_text ();
    stdout.printf ("Treaty% s \ n", str);
    }

    But on output I get this:
    (bu: 6196): Gtk-CRITICAL **: gtk_entry_get_text: assertion `GTK_IS_ENTRY (entry) 'failed

    Treaty (null)

    I have seen some examples and in the definition of the methods that access the entrys they do something like this:

    void on_activate (Gtk.Entry entry) {
    name = entry.get_text ();
    print ("\ nHello" + name + "! \ n \ n");
    }

    But they only have one entry and in this example there are 5, so here I am already lost, you could guide me better.

    1.    lolbimbo said

      Well, when you create the entrys you don't give them the same name, to get the text they have you do:

      r1 = entry1.get_text ();
      r2 = entry2.get_text ();
      r3 = entry3.get_text ();
      r4 = entry4.get_text ();

      If you want, put a pastebin and I'll look at it

      1.    Hiram said

        lolbimbo if in fact I have them with different names, but I'm only using one for tests since none of them returns the text that I put in the entry, it sends me the error mentioned above:

        But on output I get this:
        (bu: 6196): Gtk-CRITICAL **: gtk_entry_get_text: assertion `GTK_IS_ENTRY (entry) 'failed

        Treaty (null)

        I'm still investigating ...

        Cheers.!!

      2.    Hiram said

        Ready here is the source, greetings.
        http://pastebin.com/pZG8GbrY

    2.    lolbimbo said

      Hello Hiram, look, I'll tell you how you have to do it to solve it, the first thing this happens because we are creating a new window (it is not the main one), and when calling the entry, (sorry for the words) I do not know why That shit does not return as if it were an entry but a Widget, but hey, to solve it you just have to change all the static components that you created to dynamic using var:

      var questionE = new Gtk.Entry ();

      then the function will work and you will receive the text inside the entry.

      save.clicked.connect (() => {
      // string str = this.questionE.get_text ();
      stdout.printf ("Treaty% s \ n", askE.get_text ());
      });

      Finally, don't forget to change the line where you add the entry to show it:

      askE.show ();

      I leave you the complete code with the modification so that you can check that it already works, that is if you must change all the elements (at least the entries) to continue with the application.

      http://paste.desdelinux.net/5048

      regards

      1.    Hiram said

        Chale, over here bothering again, I keep having problems, the code you show me is fine, only something happens in the event:

        save.clicked.connect (() => {
        // string str = this.questionE.get_text ();
        stdout.printf ("Treaty% s \ n", askE.get_text ());
        });

        It is inside the Questions class and it works fine but when wanting to enter from saveC, it doesn't compile, it throws me this error:

        bu01.vala: 50.38-50.50: error: Argument 1: Cannot convert from `Questions.saveC 'to` Gtk.Button.clicked'
        this.guardar.clicked.connect (this.guardarC);
        ^^^^^^^^^^^^^
        bu01.vala: 251.58-251.66: warning: Gtk.Stock has been deprecated since 3.10
        bu01.vala: 260.59-260.67: warning: Gtk.Stock has been deprecated since 3.10
        Compilation failed: 1 error (s), 2 warning (s)

        I want to think that it is because of the way I pass the parameter when the click event occurs:
        this.guardar.clicked.connect (this.guardarC);

        Thanks in advance for the feedback; here I leave the code that throws the error: http://pastebin.com/pLzExhrb

      2.    lolbimbo said

        I have not tested it but I think that removing the argument from the function will throw it away.

        public void saveC (Gtk.Entry asksE) {
        string str = questionE.get_text ();
        stdout.printf ("Treaty% s \ n", str);
        }

        a:
        public void saveC () {
        string str = questionE.get_text ();
        stdout.printf ("Treaty% s \ n", str);
        }

      3.    Hiram said

        lolbimbo, I've tried removing the argument and it still doesn't work,

        I'm still trying to understand the problem, I'm new to Vala and I can't find much documentation, I hope to find the solution soon or wait for you to release the fourth part xD.

        I keep trying ...

        Greetings.