Creando una App (Vala + GTK 3) [3ª parte]

En esta parte veremos como crear otra ventana y diseñarla con GTK. Veremos además algunas funcionalidades como agregar preguntas y usar los tres botones (50%,congelar y pasar).

ToolBar y ToolButton

Crear una ToolBar:

app2

Creando un ToolButton, en este caso le pondremos un icono (podéis encontrar muchos iconos por defecto aquí) con «from_stock ( Gtk.Stock.NombreDelIcono) :

Captura de 2013-12-07 23:26:52

Podemos ver que en nuestra aplicación tenemos arriba una barra con dos botones, donde el primero lo usaremos para crear nuevas preguntas y el segundo para importar preguntas (a través de un fichero):

Captura de 2013-11-08 00:30:32

Creando preguntas:
El botón que creamos anteriormente (en el toolbar) al clickar en el abriremos una nueva ventana gtk que nos permitirá agregar preguntas en nuestra base de datos:

app1

Para crear una nueva ventana crearemos una nueva clase, la cual llamaremos Preguntas, y como nuestra clase App creara una nueva ventana (this.window = new Gtk.Window ();)

Usaremos unos cuantos componentes para crear la interfaz gráfica por orden;

-Label (Preguntas)

– Entry (donde escribiremos la pregunta)

-Label (respuestas)

– 4 box horizontales que contendrán un Entry (la respuesta) y un Switch (para seleccionar si es la correcta)

-Button (para completar)

Podemos ver como queda:

Captura de 2013-12-08 01:07:08

Para guardar la pregunta tendremos que obtener el texto de los entrys, se obtienen con get_text() el cual nos devuelve un string.

app5

Para saber si si un Switch esta activo podemos usar su método get_active () el cual nos devuelve true si esta en on y flase si esta en off.

 Botones 50%, Congelar y Pasar:

 -50% :

Para el 50% solo tenemos que mirar cual es el botón correcto y quitar 2 que no sean el correcto, en este caso los anulamos con set_sensitive(false) .

app4

Resultado:

app6

-Congelar:

Ponemos la barra a 0 otra vez.

this.barra_tiempo.set_fraction (0);

-Pasar:

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

 Próxima Parte (4):

En la próxima entrega veremos como mejorar aspectos de nuestra aplicación, como por ejemplo que las preguntas no salgan siempre en la misma posición, poner un icono a la app …


Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

  1.   F3niX dijo

    Me encantan las respuestas… jaja .. Saludos

  2.   panchomora dijo

    Muy buenos estos ariculos sobre vala.. espero los otros.. saludos

  3.   cr0t0 dijo

    Tengo pendientes tus entrada sobre Vala, espero que sean muchas entregas. Saludos!

  4.   pptru dijo

    Buen artículo, gracias por compartir.

  5.   Hiram dijo

    Hola,

    He seguido tus anterior entradas para la creación de esta app el problema viene ahora que intento acceder a los entrys de la ventana nueva, lo hago de esta manera, en el metodo guardarC de la clase crearPreguntas(clase que crea la ventana).

    public void guardarC () {
    string str = preguntaE.get_text();
    stdout.printf («Tratado %s\n», str);
    }

    Pero a la salida obtengo esto:
    (bu:6196): Gtk-CRITICAL **: gtk_entry_get_text: assertion `GTK_IS_ENTRY (entry)’ failed

    Tratado (null)

    He visto algunos ejemplos y en la definición de los métodos que acceden a los entrys hacen algo así:

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

    Pero ellos solo tienen un entry y en este ejemplo hay 5, entonces aquí ya me perdí, me podrías orientar mejor.

    1.    lolbimbo dijo

      Pues cuando creas los entrys no les das el mismo nombre, para obtener el texto que tienen haces:

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

      Si quieres pon un pastebin y me lo miro

      1.    Hiram dijo

        lolbimbo si de hecho los tengo con nombres diferentes, pero solo estoy usando uno para pruebas ya que ninguno me regresa el texto que coloco en el entry, me manda el error antes comentado:

        Pero a la salida obtengo esto:
        (bu:6196): Gtk-CRITICAL **: gtk_entry_get_text: assertion `GTK_IS_ENTRY (entry)’ failed

        Tratado (null)

        Sigo investigando…

        Saludos.!!

      2.    Hiram dijo

        Listo por acá esta el source, saludos.
        http://pastebin.com/pZG8GbrY

    2.    lolbimbo dijo

      Hola Hiram, mira te cuento como tienes que hacer-lo para solucionar-lo, lo primero esto pasa por que estamos creando una nueva ventana (no es la principal), y al llamar al entry, (perdón por las palabras) no se por que mierda no devuelve como si fuera un entry sino un Widget, pero bueno, para solucionar-lo solo tienes que cambiar todos los componentes estáticos que creaste a dinamicos usando var:

      var preguntaE = new Gtk.Entry ();

      luego la función ya funcionara y recibirás el texto dentro del entry.

      guardar.clicked.connect (() => {
      //string str = this.preguntaE.get_text ();
      stdout.printf («Tratado %s\n», preguntaE.get_text());
      });

      Por ultimo no te olvides de cambiar la linea donde agregas el entry para mostrar-lo:

      preguntaE.show();

      Te dejo el código completo con la modificación para que compruebes que ya funciona, eso si debes cambiar todos los elementos (como mínimo los entry) para seguir con la aplicación.

      http://paste.desdelinux.net/5048

      Saludos

      1.    Hiram dijo

        Chale, por acá de nuevo molestando, sigo teniendo problemas, el código que me muestras furula bien, solo que ocurre algo el evento:

        guardar.clicked.connect (() => {
        //string str = this.preguntaE.get_text ();
        stdout.printf (“Tratado %s\n”, preguntaE.get_text());
        });

        esta dentro de la clase Preguntas y furula bien pero al querer ingresar desde guardarC, no compila me tira este error:

        bu01.vala:50.38-50.50: error: Argument 1: Cannot convert from `Preguntas.guardarC’ 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)

        Quiero pensar que es por la manera en que paso el parámetro cuando ocurre el evento click:
        this.guardar.clicked.connect(this.guardarC);

        Desde ya muchas gracias por el feedback; acá dejo el código que tira el error: http://pastebin.com/pLzExhrb

      2.    lolbimbo dijo

        No lo he probado pero creo que al quitar el argumento de la función ya tirara.

        public void guardarC (Gtk.Entry preguntaE) {
        string str = preguntaE.get_text ();
        stdout.printf («Tratado %s\n», str);
        }

        a:
        public void guardarC () {
        string str = preguntaE.get_text ();
        stdout.printf («Tratado %s\n», str);
        }

      3.    Hiram dijo

        lolbimbo, he probado quitando el argumento y sigue sin andar,

        Sigo tratando de entender el problema, soy nuevo en Vala y no encuentro mucha documentación, espero encontrar pronto la solución o esperar a que saques la cuarta parte xD.

        Sigo tratando…

        Saludos.