Noticia 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á:



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





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




Continúar leyendo...