Ingresa tu edad Qt4

Es esta sección vamos a crear una pequeña aplicación, que demuestra cómo utilizar layouts para manejar la geometría de los widgets en una ventana y el modo de utilizar señales y slots para sincronizar dos widgets.

La aplicación pregunta al usuario su edad y el podrá responder utilizando una spin box o un slider.

La aplicación consta de tres Widgets: un QSpinBox, un QSlider, y un QWidget. El QWidget es la aplicación de la ventana principal. El QSpinBox y la QSlider se encuentran en el interior de la QWidget.

Alternativamente podemos decir que QWidget es padre de QSpinBox y de QSlider. El QWidget no tiene padre, porque se está utilizando como un nivel superior máximo de la ventana.

El código que usaremos para esta aplicación es el siguiente.

1 #include <QApplication>
2 #include <QHBoxLayout>
3 #include <QSlider>
4 #include <QSpinBox>
5 int main(int argc, char *argv[])
6 {
7 QApplication app(argc, argv);
8 QWidget *window = new QWidget;
9 window->setWindowTitle(“Ingresa tu edad”);
10 QSpinBox *spinBox = new QSpinBox;
11 QSlider *slider = new QSlider(Qt::Horizontal);
12 spinBox->setRange(0, 130);
13 slider->setRange(0, 130);
14 QObject::connect(spinBox, SIGNAL(valueChanged(int)),
15 slider, SLOT(setValue(int)));
16 QObject::connect(slider, SIGNAL(valueChanged(int)),
17 spinBox, SLOT(setValue(int)));
18 spinBox->setValue(35);
19 QHBoxLayout *layout = new QHBoxLayout;
20 layout->addWidget(spinBox);
21 layout->addWidget(slider);
22 window->setLayout(layout);
23 window->show();
24 return app.exec();
25 }

Línea 8 y 9 setWindowTitle() nos permite editar el texto que será visible en la Barra de Titulo de nuestra aplicación.

Lineas 10 y 11 crean una QSpinBox y un QSlider, mientras que las líneas 12 y 13 le dice el valor máximo y mínimo que mostrarán. Asumo que una persona vive máximo y exageradamente 130 años (yo solo sé de personas que han vivido hasta 116 años y eso porque les hacen reportajes en noticieros nacionales).

Las lineas 14 y 17 que contienen QObject::connect() garantizan que la QSpinBox y el QSlider están sincronizadas y que siempre tendrán el mismo valor. Cuando algún valor del los Widgets cambie se enviara una señal de cambio mediante valueChanged(int) mientras que el valor de el otro Widget cambiará debido a esa señal mediante setValue(int).

Línea 18 establece el valor 35 por default. Cuando esto sucede, la Spin Box emite la señal valueChanged(int) con int establece el valor 35. Este valor es pasado al slot de setValue(int) del Slider. El Slider entonces emite la señal valueChanged(int), porque su propio valor a cambiado activando el slot setValue(int) de la Spin Box. Pero en este punto, setValue(int) no emite ninguna señal, ya que el valor de la Spin Box ya es 35, esto previene una repetición infinita.

Lineas 19 a 22 en donde establezco la Spin Box y el Slider, uso un Layout Manager. Un Layout Manager es un objeto que establece el tamaño y la posición de los widgets que están bajo su responsabilidad Qt4 tiene tres 3 principales clases de Layout Manager:

• QHBoxLayout Establece widgets horizontalmente de izquierda a derecha (derecha a izquierda para otras culturas).
• QVBoxLayout Establece widgets verticalmente de arriba a abajo.
• QGridLayout Establece widgets en una cuadrícula.

La llamada a QWidget::setLayout() en la línea 22 instala el Layout Manager sobre la ventana.. Detras del proceso, la QSpinBox y QSlider son nuevamente llamados a ser niños de el widget en la que el layout es instalado, y por esta rason no necesitamos especificar un parentezco cuando construimos un widget que se pondrá en un layout.

A pesar de que no establecimos la posición o el tamaño de cualquier widget, la QSpinBox y el QSlider aparecerá bien establecido de un lado al otro. Esto es porque QHBox-Layout automáticamente asignará posiciones y tamaños razonablesa los widgets. El Layout Manager nos libera de la ardua tarea de codificación de las posiciones en nuestra pantalla de las aplicaciones y asegura el tamaño de las ventanas sin problemas.

La imagen de nuestra aplicación es la siguiente.

Haciendo conexiones en Qt4

El segundo ejemplo muestra como responderá una aplicacion a las acciones que le demos. La aplicación consiste en un botón que el usuario podrá presionar y salir de la aplicacion. El código es muy semejante a HelloQt4 a excepción porque usaremos la orden QPushButton en lugar de QLabel  y relacionaremos el click que se le dará al botón con una parte del código.

 1 #include <QApplication>
2 #include <QPushButton>
3 int main(int argc, char *argv[])
4 {
5     QApplication app(argc, argv);
6     QPushButton *button = new QPushButton(“Quit”);
7     QObject::connect(button, SIGNAL(clicked()),
8                      &app, SLOT(quit()));
9     button->show();
10     return app.exec();
11 }

Los Widgets emiten señales para indicar que una acción del usuario o un cambio de estado se ha producido. Por ejemplo, QPushButton emite un clicked () que es una señal cuando el usuario hace clic en el botón. Una señal puede ser conectada a una función (llamada slot), de manera que cuando se emite la señal, el slot se ejecuta automáticamente. En nuestro ejemplo, conectamos la señal del clic del botón ( clicked () )  al slot del objeto quit () de QApplication.  Los macros  (conjunto de instrucciones) SIGNAL () y SLOT () son parte de la sintaxis, que se explican con más detalle.

La aplicación quedaría de la siguiente manera.

Otro ejemplo Qt4 más divertido

Bien, usaremos el código del anterior post, pero ahora le haremos unas sencillas modificaciones para hacerlo más divertido.

#include <QApplication>
#include <QLabel>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QLabel *label = new QLabel(“<h2><i>Hello</i> “
“<font color=red>Qt!</font></h2>”);
label->show();
return app.exec();
}

Como podrán darse cuenta, cambiamos la línea que contiene

QLabel *label = new QLabel(“Hello Qt!”);

por

QLabel *label = new QLabel(“<h2><i>Hello</i> “
“<font color=red>Qt!</font></h2>”);

Con esta simple modificación obtuvimos la siguiente aplicación.

Explicando un código Qt4 sencillo

Estudiando un poco pude entender algunas cosas que significaban del código anterior, trataré de explicar ahora un poco mas profundamente.

El programa que hice fue muy sencillo (mas bien que copie), trataré de explicarlo línea por línea.

1 #include <QApplication>
2 #include <QLabel>
3 int main(int argc, char *argv[])
4 {
5 QApplication app(argc, argv);
6 QLabel *label = new QLabel(“Hello Qt!”);
7 label->show();
8 return app.exec();
9 }

La línea 1 y 2 incluyen definiciones de las clases QApplication y QLabel. Cada clase deberá tener una cabecera, es decir, deberá tener una indicación al inicio del código con el mismo nombre.

La línea 5 QApplication crea un objeto gráfico y requiere de argc y argv no se para que pero los necesita, tal vez después lo entienda. Botones, menús, scroll bars y frames son ejemplos de Widgets que a su vez pueden contener otros Widgets

Línea 6 crea un Widget (Elemento gráfico en una interfaz de usuario) que mostrará “Hello QT!”

Linea 7 hará que el widget sea visible, debemos activalrlo para ello, ya que los Widgets siempre son invisibles.

Línea 8 Este es un tipo de “Stand By” donde el programa se queda esperando las acciones que vaya a tomar el usuario y que hayan sido definidas en el código. Una acción puede ser un “click” pero si este “click” no está definido en el código, este no responderá.

La aplicación generada es la siguiente.

Aprendiendo Qt4

Escribiré mis aprendizajes sobre Qt4, en realidad se nada de este, pero creo que es genial este soft GNU. Decidí empezar a aprender a usarlo porque he programado scripts en bash, pero mis necesidades se han hecho mas grandes para crear aplicaciones en linux que me ayuden a llevar a cabo lo que necesito.

Hay muchos términos que no manejo, así que trataré de escribir lo mas claramente posible, por ello daré una advertencia, seguramente cometeré muchos errores, así que es mejor que lean cada post en su totalidad antes de hacer las cosas para que no cometan los mismos errores que yo. Este blog es creado al vuelo.

Inicio usando Qt4 en puro código, según los manuales para aprender la verdad de Qt4, así que inicio con un archivo en blanco de texto usando kate.

La siguiente línea, siempre deberá ir escrita para cada archivo Qt4, tal como lo es la linea que se usa en el inicio para los scripts en bash (#!/bin/bash)

#include <QApplication>

La siguiente línea me imagino que es para indicarle que usaremos botones en nuestra futura aplicación.

#include <QPushButton>

Hay un famoso ejemplo llamado “hola mundo” del cual ya me harte y crearé el mismo código, pero este lo llamaré “Test”.

Copiaré tal y cual el programa que hay en un manual:

#include <QApplication>
#include >QPushButton>

int main(int argc, char *argv[])
{
AQpplication app(argc, argv);
QPushButton hello(“¡TEST!”);
hello.resize(100, 30);

hello.show();
return app.exec();
}

Hasta este momento no se que significan muchas cosas que dice el código, el manual dice que significa cada una pero con muchos tecnicismos que aún no entiendo, asi que ire explorando, a fin de cuentas lo que ahorita quiero hacer es, crear un código y ejecutarlo de tal manera que se vea en un widget (ventanita) como el boton de “TEST”, que no servirá sino como ejemplo, porque en realidad hace nada.

Despues de haberlo escrito en kate (editor de texto) lo guardo como test.ui porque con esa extensión se guarda cuando usas Qt4 en el modo grafico. Ahora me voy a la consola de comandos y en el directorio donde tengo el archivo test.ui y lo compilo (convertirlo de órdenes humanas a órdenes de máquina) mediante los comandos siguientes:

$qmake -project

$qmake

$make

Vaya, creo que no me fue bien, no se porque me lanzó un error.

/usr/bin/uic-qt4 test.ui -o ui_test.h
File ‘test.ui’ is not valid
make: *** [ui_test.h] Error 1

Ahora para probar, guardaré mi texto creado en kate como test pero sin extensión para ver que sucede.

Vuelvo a ejecutar:

$qmake -project

$qmake

$make

make: No se hace nada para `first’.

Tampoco terminó bien, ahora me imagino que mi código (texto en kate) ha de tener algun error por ahí. Me doy cuenta que pierdo mucho tiempo en escribir, me gustaría que mi pensamiento se escribiera automáticamente en este blog, pero esto todavía no es posible, tal vez cuando sea un experto en programación lo pueda desarrollar. Por el momento tendré que seguir escribiendo, para que a algún buen linuxero se le facilite la vida.

Lo dicho, estaba mal en el codigo que copie:

escribí

AQpplication app(argc, argv);

debería ser así

QApplication app(argc, argv);

Fueron creados algunos archivos cuando compile y ahora borro todos los archivos que fueron creados, menos test para que no me vaya a crear ningun problema, porque en algún momento no los borré y traté de compilar nuevamente y la consola de comandos empezó a crear archivos como loca.

Me volvío a sacar el error:

$ qmake -project
$ qmake
$ make
make: No se hace nada para `first’.

Reviso nuevamente el codigo y me doy cuenta que otra linea esta mal, como lo copie a mano, cometí varios errores.

dice

#include >QPushButton>

debería decir

#include <QPushButton>

Trato de compilar nuevamente y me vuelve a sacar otro error.

$ qmake -project
$ qmake
$ make
make: No se hace nada para `first’.

Volví a revisar, ahora no encontre ninguna falta ortografica, solo le quite las lineas en blanco que estaban al final de } para ver si era eso, ya que en algunas ocasiones creando algunos scripts no querían funcionar solo por ese pequeño detalle.

Elimino los archivos que fueron creados y nuevamente compilo, a ver si ahora si funciona, esperemos que si.

$ qmake -project
$ qmake
$ make
make: No se hace nada para `first’.

Mismo error, ahora en lugar de ejecutar

$qmake -project

escribiré

$ qmake -project test

Me lanza otro error:

g++ -o ej -L/usr/lib -lQtGui -lQtCore -lpthread
/usr/lib/gcc/i486-linux-gnu/4.1.2/../../../../lib/crt1.o: In function `_start’:
../sysdeps/i386/elf/start.S:115: referencia a `main’ sin definir
collect2: ld returned 1 exit status
make: *** [ej] Error 1

Uff no se que decir, pero esto me esta diciendo algo que de plano no sé. Sigo leyendo el manual y me dice que guarde el archivo como main.cpp y que ejecute

$qmake -project

y luego

$qmake

y por ultimo

$make

Lo hago y

$qmake -project

me crea un archivo llamado ej.pro me imagino que ej significa ejecutable, no lo se.

Ejecuto

$qmake

Entonces esta orden me crea otro archivo llamado Makefile que segun el autor este comando toma el archivo ej.pro y en base a el crea Makefile de acuerdo al sistema operativo que estamos usando, por ultimo make que me crea la aplicación que tanto ansiaba junto con otro archivo llamado test.o que no sé para que sirve.

La aplicación es creada con el nombre ej

Lo hago y espero que ahora si funcione…

¡Ajua! si funciono, ahora guardo el mismo código pero con el nombre de test.cpp solo para ver si tiene siempre se tiene que llamar main o le puedo cambiar el nombre, lo vuelvo a compilar y me doy cuenta que no importa como guarde el codigo, me creó la aplicación, solo que tengo que guardarlo con la extensión .cpp . También puedo predecir que debo copiar mi codigo en una carpeta de códigos que vaya haciendo o probando así como las aplicaciones creadas, porque parece ser que el compilador siempre creará la aplicacion con el nombre ej y este sustituirá o sobreescribirá a cualquiera que haya con este nombre.

RESUMEN DE MI PRIMERA EXPERIENCIA

1. Usar cualquier editor de textos como kate, nano, o algun bloc de notas.
2. Revisar bien el codigo que escribo.
3. Guardarlo con extensión cpp
4. Mediante consola de comandos ejecutar
5. Copiar mi código y aplicacion en carpetas creadas para ello, ya que el compilador siempre creará la aplicación con el nombre ej y si hay alguna con el mismo nombre, entonces la sobrescribira.