C++ / Aplicacion simple de Qt

Bienvenidos sean a este post, hoy vamos a crear nuestra primera aplicacion.

Para este ejemplo, vamos a utilizar las librerias que podemos descargar desde los repositorios. Tambien se puede utilizar el instalador de Qt para instalarlas pero no lo vamos a complicar. En algun momento, comentare como se hace pero hoy no. Nuestro primer paso, es la instalacion de lo basico para poder utilizarlo, para ello primero deben correr este comando:

$ sudo apt-get update

Esto hace que se actualice los repositorios de Debian, no es obligatorio pero si una buena practica que siempre recomiendo antes de instalar algo. Con esto realizado sin ningun error, lo siguiente sera ejecutar este comando::

$ sudo apt-get install qt6-base-dev

Esto instalara la verrsion 6 de Qt en nuestro ordenador con las librerias basicas para desarrollar algunos proyectos. En el repositorio de cada distro de linux pueden encontrar mas modulos de Qt asi como otras instalaciones. Volviendo a este post, nuestro primer paso sera crear la aplicacion, para ello generen un archivo con el siguiente codigo:

#include <QtWidgets>

int main(int argc, char** argv)
{
  QApplication app(argc, argv);
  QPushButton btn("Click me!");
  btn.show();
  return app.exec();
}

Primer detalle, no incluimos a iostream como hicimos en codigos anteriores porque no lo necesitaremos para este codigo. En el main, agregamos la posibiliad de recibir argumentos para nuestro programa. Y la primera linea sera la encargada de crear la aplicacion que mostrara lo que crearemos. En ella se mostrara todos los elementos y acciones del codigo. Tambien le paasamos los argumentos del llamado al programa. Lo siguiente es crear un boton para mostrar en nuestra aplicacion con un mensaje pero sin accion. Mediante show le indicamos que debe ser mostrado, y por ultimo no devolvemos un valor entero. En cambio devolvemos el objeto que representa a la aplicacion y mediante exec se construira en el entorno grafico donde lo ejecutemos. Si lo compilan, nos devolvera un error porque no encontrara la libreria. Para solucionarlo, debemos crear el archivo .pro para nuestro proyecto. Generen un archivo con esa extension y agreguen el siguiente codigo:

QT += widgets

SOURCES += qt.cpp

Tal como comentamos en el post anterior, primero pasaremos todos los modulos que necesitaremos para nuestro proyecto, y luego el codigo fuente del programa. En SOURCES deben pasar el nombre del archivo que eligieron para su codigo. Nuestro siguiente paso sera crear el nuevo codigo para crear nuestro programa/aplicacion. Para ello usaremos el siguiente compilador:

$ qmake6 qt.pro

Nota:
Para otras versiones mas viejas o en otros S.O puede llamarse directamente qmake

Este es el metacompilador que mencionamos en el post anterior, se encarga de convertir ese codigo en un codigo para poder crearse en el S.O donde lo compilemos pero lo podamos llevar a otro como Windows o macOs y repitamos este proceso. Esto genera un archivo Makefile, para Unix/Linux, el cual nos permite ejecutar el siguiente comando:

$ make

Este comenzara a construir nuestra aplicacion y cuando finalice nos creara un ejecutable con el nombre del codigo fuente. En mi caso, genero un archivo ejecutable llamado qt. Recuerden que deben ejecutarlo desde una interfaz grafica y no en la consola. Si cumplen todo esto, genera una ventana como la siguiente:

Si lograron algo similar, FELICITACIONESS!!!!!! crearon su primer ventana con C++. Pasemos a mejorar esta ventana, para ello volvamos al codigo de C++ y modifiquemos el codigo de la siguiente manera:

#include <QtWidgets>

int main(int argc, char** argv)
{
        QApplication app(argc, argv);

        QWidget ventana;
        ventana.resize(120,100);
        ventana.setWindowTitle("Aprendiendo C++ con tinchicus.com");
        ventana.show();

        return app.exec();
}

En este caso, eliminamos al boton pero agregamos otro objeto llamado ventana del tipo QWidget. Este nos permite crear una ventana y poder manejar sus atributos. El primero que usaremos es a resize para establecer un tamaño para la misma. El siguiente sera para establecer el titulo de la ventana y por ultimo la mostramos mediante show, tal como lo hicimos con el boton, y el resto sigue como antes. Repetimos todos los pasos de compilacion, no es necesario modificar al archivo .pro, y una vez creado el ejecutable deben obtener una ventana como la siguiente:

Tenemos una ventana con un titulo que no se puede ver, y si bien podemos cambiarlo tambien se puede hacer de otra manera. Volvamos al codigo fuente y busquemos la siguiente linea:

ventana.resize(120,100);

Y modifiquemoslo de la siguiente manera:

ventana.resize(400,100);

Como comentamos anteriormente, esto modiificara el valor inicial del tamaño de la ventana. Si lo compilan nuevamente deben obtener una ventana como la siguiente:

Con esto tenemos una idea basica de como podemos crear una aplicacion con interfaz grafica. Sin embargo, un tema que veremos mas adelante es la interaccion del usuario con la aplicacion pero ahora mencionaremos algunas cosas. Si volvemos al primer ejemplo, en este tenemos un boton pero que no realiza nada. Aqui entra en accion algo muy similar a lo que se utiliza al momento de trabajar con Javascript o frameworks derivados de este, mediante eventos. Los eventos son las acciones que se pueden realizar en los elementos, y estos van desde un simple click, modificar el tamaño de la ventana, pasar sobre una imagen, etc. Cada evento tiene su manejador especifico, tomemos como ejemplo al boton. Cuando es presionado se ejecuta la funcion keyPressedEvent, esta al ser virtual la podremos re-escribir para personalizar a nuestra necesidad, veamos un ejemplo de esto:

class MiBotoncito : public QPushButton
{
  Q_OBJECT
public:
  void keyPressedEvent(QKeyEvent* e) override
  {
    // el codigo para la accion del boton
  }
};

Para ello, debemos crear una clase para el elemento y hacerla heredera de QPushButton. Dentro de esta usaremos a Q_OBJECT que es una macro especifica de Qt que siempre debe ir como primera linea para que esta clase sea visible para MOC, luego en la parte publica tenemos la re-definicion de la funcion keyPressedEvent y recibe como argumento un objeto que representa al evento de presionar a la tecla,, este es un sub-tipo de QEvent, y en el bloque ira todo el codigo para nuestra accion. Pero es necesario un par de acciones para vincularlos y de eso, hablaremos en otro momento.

En resumen, hoy hemos visto un ejemplo simple de Qt, como se instalan las librerias basicas, un codigo simple, el archivo de proyecto, asi como tambien se debe compilarlo, otro ejemplo mas «complejo» y teoricamente como son los eventos. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.