"Qt": Aplicaciones con Interfaz Gráfica en C++              

Demostración

                    Como se pudo observar en el primer programa, Qt nos da diversas herramientas para hacer más fácil nuestro desarrollo de interfaces gráficas utilizando el lenguaje C++ como su gran aliado. De esta forma y a modo de demostración, crearemos una ventana de simulación que incluirá el movimiento de una pelota dentro de un espacio cerrado en condiciones ideales (ignorando todo tipo de fuerzas externas).
                   Iniciamos creando el proyecto de igual forma en que se inició nuestro primer programa, sólo que esta vez el nombre del proyecto será "BallSimulation" y las clases principales se llamarán "simulation.h", "simulation.cpp" y "simulation.ui".




                   Una vez iniciado el proyecto, buscamos el archivo "simulation.ui" en el sector superior izquierdo y hacemos doble click sobre el archivo para abrir "Qt Design". Acá realizaremos las siguientes acciones:
1. "Push Button": agregaremos dos botones en el sector inferior de nuestra ventana de simulación, cambiando sus nombres a "Start" y "Stop" (tanto en la ventana como en el sector superior derecho, donde está la dependencias de objetos y clases).
2. "Vertical Layour": área dentro de nuestra ventana que será el sector en donde estará la bola y hará su movimiento, ajustando su tamaño al máximo posible (destacamos que el tamaño de la ventana queda a criterio personal). La llamaremos "AreaMovimiento".




                   Hecho esto, realizamos click derecho sobre el boton "Start" y seleccionamos la opción "Go to slot", para luego seleccionar "clicked()", dirigiéndonos en forma inmediata al código "simulation.cpp" para completar el método que hemos creado. Volvemos a "Qt Design" y repetimos los mismos pasos para el boton "Stop" (más adelante completaremos estos métodos).




                   Para incluir la bola a nuestra ventana, debemos incluir nuevos archivos, los que llamaremos "animation.h" y "animation.cpp". Nos debemos dirigir al menú superior, opción "File", "New File or Project", "C++", "C++ Class". Nos aparecerá una ventana en donde le damos el nombre "animation" y en la categoría Bass Class seleccionamos "QWidget" (se debe tener atención en la carpeta en la cual estamos creando estos archivos).

  I


                   Una vez terminado, denemos editar el archivo "animation.h", en donde, realizaremos lo siguiente:
1. void mover(int x, int y): se debe agregar este método público, el cual, se encargará de generar el movimiento de la bola y detectar los choques con las paredes.
2. void paintEvent(QPaintEvent *event): función a sobrecargar que nos ayudará en el pintado de los elementos.
3. int x, y:
variables privadas que cambiarán con el tiempo y producirán el movimiento de la bola.
4. int dirx, diry:
variables privadas que se encargan de detectar el choque de la bola con una de las paredes del sector de simulación.




                  
Ahora nos debemos dirigir a "animation.cpp", completando este archivo de esta forma:
1. #include <QPainter>: debemos agregar esta librería para ocupar los métodos de pintado y forma geométricas que posee.
2. Definir variables: en la clase "animation(QWidget *parent)", debemos inicializar las variables x, y, dirx y diry igualándolas a 0.
3. void animation::paintEvent(QPaintEvent *): método que define el área de movimiento, la bola y las características de ambos.
4. void animation::mover(int x, int y): implementación del método definido en "animation.h".




                   Agregados el lugar donde se moverá nuestra bola y la bola misma, además de definir el cálculo de la posición y la detección de choques, necesitamos agregar la variable tiempo a la simulación, además de terminar de configurar nuestra ventana. Para ello, editaremos el archivo "simulator.h" de la siguiente manera:
1. #include <QTimer>: librería que contiene los métodos para implementar un timer interno a nuestra simulación.
2. #include "animation.h":
incluímos a "animation.h" para poder crear los widgets donde estará la bola.
3. void begin(): método que se encarga de iniciar y definir el tiempo de simulación.
4. animation *panimation: variable que se soporta sobre el "AreaMovimiento" (donde vivirá la bola).
5. QTimer *timer:
variable tipo puntero que se encarga de llevar el tiempo de simulación.




                   Como último archivo a editar nos queda "simulation.cpp". Acá debemos incluir todas las relaciones faltantes e implementar los métodos de "simulation.h"  para terminar nuestro programa. De esta forma, debemos escribir lo siguiente:
1. panimation: variable del constructor que define el sector en donde estará nuestra bola. Se debe agregar al "AreaMovimiento" (área de interacción).
2. timer: variable que se encarga de llegar el tiempo de simulación. Se ayuda de "connect()" (método de QTimer).
3. void simulation::on_Start_clicked(): al hacer click sobre el botón "Start", inicia la simulación.
4.
void simulation::on_Stop_clicked(): al hacer click sobre el botón "Stop", detiene la simulación.
5. void simulation::begin(): se encarga de definir la cantidad de pixeles de avance de la bola (38 pixeles son app. 1 cm).




                  
Ya finalizada toda la edición de archivos correspondientes, sólo nos queda probar nuestro proyecto. Para esto, en el sector inferior izquierdo debemos seleccionar "Run" y esperar a que nuestro programa compile, mostrándonos en pantalla la ventana de simulación lista para ser ocupada.



Nota: cualquier error de compilación que se haya tenido en cuanto a la recreación de esta demostración, revise nuevamente esta guía desde el inicio. Ante alguna duda o incoveniente que haya surgido, favor contactar vía correo.


←Anterior                                                             Siguiente→