Creando una app Vala + Gtk3. [1ª parte]

Después del primer post lei un comentario que estaría mejor empezar con algo más complejo que un «hola mundo», entonces haré una sucesión (3 o 4) de post creando una sencilla aplicación (con vala + gtk 3).

La aplicación consistirá en un sencillo juego de preguntas y respuestas tipo test (tipo Triviados), en la cual al responder mal 3 preguntas se acaba (game over), y el objetivo es responder tantas preguntas como te sea posible, para cada pregunta tienes un tiempo limitado para responder.

Diseño

Diseño principal de nuestra aplicación será:

app

Más adelante pondremos unos botones que nos darán la opción de 50% (eliminando dos respuestas erróneas), congelar el tiempo, pasar una pregunta . Todos ellos solo se podrán usar una vez, quedando inhabilitados una vez usados.

Diseño a Código
Como podemos ver en el diseño podemos ver los elementos gtk que usaremos:

Respuestas -> Button.

Pregunta -> Label.

Tiempo ->  ProgressBar.

Puntos y Preguntas erroneas/correctas -> Label.

Podemos ver que tenemos una estructura vertical por lo tanto podremos utilizar GBox en forma vertical.

Código

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

//caja vertical

var box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);

box.set_spacing (10);

//Label para la pregunta

var pregunta = new Gtk.Label ("Pregunta ?");

//barra prograsiva del tiempo

var barra_tiempo = new Gtk.ProgressBar ();

barra_tiempo.set_text ("Tiempo");

barra_tiempo.set_show_text (true);

//Botones de respuesta

var resposta1 = new Gtk.Button.with_label ("Resposta 1");

var resposta2 = new Gtk.Button.with_label ("Resposta 2");

var resposta3 = new Gtk.Button.with_label ("Resposta 3");

var resposta4 = new Gtk.Button.with_label ("Resposta 4");

//labels info

var puntos = new Gtk.Label ("Puntos: 0");

box.pack_start (pregunta);

box.pack_start (barra_tiempo);

box.pack_start (resposta1);

box.pack_start (resposta2);

box.pack_start (resposta3);

box.pack_start (resposta4);

box.pack_start (puntos);

window.add (box);
window.show_all ();
Gtk.main ();

return 0;}

Captura de 2013-11-02 21:44:14

Para mover el «tiempo» usamos GLib.Timeout donde a cada 500 milisegundos se activará (es un bucle donde incrementara la variable que contenga el valor de nuestra barra)

GLib.Timeout.add (500, () => {

// Get the current progress:

// (0.0 -> 0%; 1.0 -> 100%)

double progress = barra_tiempo.get_fraction ();

// Update the bar:

progress = progress + 0.01;

barra_tiempo.set_fraction (progress);

// Repeat until 100%

return progress < 1.0;

});

Links de interés 
http://www.valadoc.org/#!wiki=index (puedes encontrar todos los elementos gtk con sus métodos…)


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.

      lozanotux dijo

    Muy bueno, che te hago una consulta como puedo hacer una especie de PESTAÑAS pero de forma vertical, aunque no necesariamente tienen que ser pestañas pueden ser botones o ToggleButtons, pero necesito el comportamiento de una pestaña, que al tocar 1 se vea su contenido y la otra pestaña se deshabilite, no se si me explico dejo una imagen a ver si puedes darme algún dato como para investigar. Gracias!

    IMAGEN: http://i.imm.io/1jURw.png

         lolbimbo dijo

      El «layout» o el cambio de texto ( por ejemplo)?

      pandev92 dijo

    parla català

      atonidas dijo

    Esto esta muy bien de hecho es algo parecido a lo que iba buscando, una pregunta ¿este pregunta se podría enlazar con la terminal de alguna forma?
    Por ejemplo: Para empezar quito el tiempo para contestar lo dejo en ilimitado y seria así lo que querria hacer.

    ¿Que entorno de escritorio quiere instalar?
    KDE
    Gnome 3
    Cinnamon
    Unity

    Y cada uno de estos que estuviera enlazado su respectivo comando de instalacion en la terminal, sudo apt-get install ubuntu-desktop

         lolbimbo dijo

      Si, solo tendrias que escribir Process.spawn_command_line_async («apt-get install ubuntu-desktop»);

      http://valadoc.org/#!api=glib-2.0/GLib.Process.spawn_command_line_sync

      Saul Uribe dijo

    Excelente, me agrado el post, estaré practicando (y veo por adelantarme), saludos