QT Creator Crear un proyecto nuevo, lección 01

QT Creator Crear un proyecto nuevo desde cero. Este programa permite desarrollar y programar programas que pueden se ejecutados desde una terminal o contener elementos gráficos. En este tutorial se indicará el proceso para crear un proyecto nuevo en QT. El propósito es diseñar una Interfaz Gráfica de Usuario (GUI) por sus siglas en ingles, para que contenga 1 botón y un display contador. Cada que el se presione el botón, se incrementará la cuenta de los displays de 7 segmentos.

QT Creator Crear un proyecto nuevo - Ejemplo1

Indice del tutorial:

  • Instalación de QT en Linux Ubuntu 16.04.

  • Crear un proyecto en QT Creator.

    • Elementos de una aplicación en QT.

      • Archivo de configuración .pro.
      • Código fuente y sus bibliotecas.
      • Código de la interfaz gráfica.
  • Ejemplo 1 – Diseño de una aplicación con botón y display.

  • Términos y condiciones de QT-Creator versión open-source.

     

Instalación de QT en Linux Ubuntu 16.04

Para la instalación de QT en Linux Ubuntu 16.04 se requeire una conexión a Internet. El proceso es muy sencillo, lo primero que tenemos que hacer es descargar el auto-instalador desde la página oficial. Descargar QT para esto seleccionaremos la opción de «go open source».

Paso # 1

Seleccionar en la descarga la opción «go open source» y aceptar los términos y condiciones.

Instalar QT en Linux Ubuntu 16.04 Paso # 1

Paso # 2

Seleccionar la opción «download» para iniciar la descarga del auto-instalador. No es necesario seleccionar una versión para nuestro sistema operativo, automáticamente la página web detectara el sistema operativo usado.

Instalar QT en Linux Ubuntu 16.04 Paso 2

Paso # 3

Una vez que se termino de descargar el programa, hay que cambiar los permisos. Por default, Linux tiene configurado que cada archivo descargado, no pueda ser ejecutado como un programa. Entonces esta opción se cambiara al seleccionar las propiedades del instalador con un clic derecho y en el menú de propiedades. Después habrá que buscar la pestaña de «permisos» o en ingles «permissions». En esta pestaña aparecerá una casilla de verificación que dice algo como: «Permitir ejecutar a este archivo como si fuer aun programa». Entonces hay que seleccionar esta opción y cerrar la pestaña de configuración.

Instalar QT en Linux Ubuntu 16.04

Instalar QT en Linux Ubuntu 16.04 paso 3a

 

Paso # 4 –

Ejecutar el instalador y seguir los pasos para crear una cuenta en la página oficial de QT. Una vez ingresada la cuenta, el instalador descargará las versiones disponibles que se podrán instalar.El siguiente paso es seleccionar el directorio de la instalación, dejar por default en la ubicación estándar. Después se procede a seleccionar la versión de QT que se desea instalar. Entonces para este tutorial se utilizará la versión 5.9.3 y aceptar la licencia para terminar con la opción de instalar QT.

Instalar QT en Linux Ubuntu 16.04 paso 4

 

Crear un proyecto en QT Creator

Para la crear un proyecto en QT Creator se seguirán los siguientes pasos. Primero recomiendo «anclar» el programa a la barra del menú principal. Esto si se utilizará con frecuencia el programa de QT.

Crear un proyecto en QT Paso # 1

En la primera ventana aparecerá la opción «crear un proyecto» ó «+ new project». Entonces seleccionaremos esta opción para la creación del proyecto.

Crear un proyecto en QT Creator paso 1

Crear un proyecto en QT Paso # 2

Para el paso 2 en el proceso de crear un programa en QT, aparecerán las siguientes opciones:

  1. QT Widgets Application. Esta es la opción estándar. Permite crear un programa con una interfaz gráfica.
  2. QT Console Application. Es la segunda opción más utilizada, que te permitirá crear programas que pueden correr desde una terminal (linea de comandos).
  3. QT Quick Application. Puede crear una aplicacción quick 2.
  4. QT Quick Controls 2 Application.  Lo mismo que la anterior, pero con controles de quick 2.
  5. QT Canvas 3D Application. Para proyectos con QML y proyecciones en 3D.

Crear un proyecto en QT PASO 2

Para los proyectos normales, seleccionaremos la primera opción. La segunda opción también es muy utilizada, para cuando queremos aprovechar las grandes ventajas del lenguaje de QT pero sin necesitar de una interfaz gráfica. Como podría ser un cliente web o robot web.  Después de seleccionar la primera opción: «QT Widgets Application», indicaremos la ubicación del proyecto.

Crear un proyecto en QT Paso # 3

Para las siguientes opciones seleccionaremos y configuraremos dos cosas:

  1. El nombre del proyecto.
  2. La ubicación de la carpeta del proyecto. Recomiendo crear una carpeta para nuestros proyectos QT y una carpeta por cada proyecto nuevo. Es importante mencionar que el wizard para la creación de los proyectos no creará la carpeta por default. Entonces hay que crearlas con anterioridad.

Crear un proyecto en QT Creator paso 3

 

Crear un proyecto en QT Paso # 4

Para el siguiente paso, es posible que no aparezcan las mismas opciones. Estas opciones dependen de las partes de qt que se hayan seleccionado para instalar. En mi caso, dado que tengo dos opciones de QT me aparecen dos opciones para crear aplicaciones para una computadora (desktop computer). Pero dado que también puedo crear aplicaciones de QT para una Raspberry PI, también me permite esa opción. Incluso de puede configurar para crear apps para el sistema operativo android.

Crear un proyecto en QT Creator paso 4

En la siguiente ventana aparecerá un resumen del proyecto y en la ventana que le sigue, un resumen de los archivos que lo componen:

  1. QT-Intro-proyecto1.pro   Es el archivo de configuración.
  2. main.cpp el código fuente principal, que hará referencia al código fuente de la ventana principal.
  3. mainWindow.cpp es el códifo fuente de la ventana principal. Aquí es donde estarán la mayoría de los procesos y programas que realizaremos.
  4. mainWindow.h es la cabecera del archivo anterior.
  5. mainWindow.ui ui significa User Interface y es el archivo xml que tiene la configuración de la interfaz grafica de usuario que se diseñara. El código de la ventana principal esta ligado a estos elementos.

Crear un proyecto en QT Creator paso 4a

 

Con este paso finaliza el proceso de crear el primer proyecto en el software QT-Creator. A continuación veremos los elementos del software de desarrollo.

 

QT Creator Crear un proyecto nuevo – Elementos de una aplicación en QT

Los elementos de una aplicación en QT son los archivos que se mencionaron anteriormente. Dichos archivos se componen en tres elementos:

  • Archivo de configuración (es el archivo que termina con la extensión pro).
  • Códigos fuente, son los archivos que definen el funcionamiento del programa, incluye funciones, clases, objetos y variables del lenguaje QT). QT es un lenguaje que se basa en C++ pero con sus propias definiciones y clases.
  • Código fuente de la interfaz gráfica. Es el archivo que termina con la extensión ui (user interface).

Cuando se ha generado el proyecto en la ventana del proyecto aparecerán dichos archivos en la interfaz. También aparecerán ciertas herramientas y ventanas que nos permitirán desarrollar el proyecto.

Elementos de una aplicación en QT

Si queremos diseñar la interfaz grafica (GUI) en el proyecto, requerimos seleccionar con un doble-clic al archivo mainwindows.ui. Al seleccionar esta opción la ventana cambiara a la siguiente configuración. Note como la barra de menú lateral izquierdo, cambiará a activo la pestaña de «diseño» ó «Design». Si queremos regresarnos a la ventana anterior, basta con seleccionar la pestaña «Edit» ó «editar».

Elementos de una aplicación en QT, PARTE 2

Ejemplo 1 – Diseño de una aplicación con botón y display

Ahora comenzaremos con el primer ejemplo. Diseñaremos una aplicación de QT que contenga una GUI con dos elementos. Como cualquier sistema digital o sistema embebido o sistema electrónico analógica, se tiene elementos de entrada y salida. Para este ejemplo, el elemento de entrada es un botón que permite ser accionado en forma momentánea o con memoria si así se configura. Como elemento de salida se tendrá una display a modo de contador.

Funcionamiento del ejemplo 1

Cada que se presione el botón este incrementara una variable del tipo entera. Después, la variable se mostrará en el display de 7 segmentos. El primera paso es agregar tanto el botón como el display. Entonces abriremos la opción o pestaña de diseño (design). En la barra lateral de widgets aparecerán, entre otras, dos categorías como siguen:

QT Elementos graficos

 

Para agregar a dichos elementos de entrada/salida se arrastran con el clic del ratón. Se colocaran en forma ordenada en la GUI. Para que este como la siguiente imagen:

QT Creator - Crear un proyecto Nuevo - Ejemplo1

Ahora se creará una función que permita detectar el evento del clic en el botón. Para dicho propósito se selecciona con el clic derecho al botón y la opción «goto slot».

QT propiedades del boton

Al seleccionar la opción anterior, aparecerán las siguientes opciones:

  • clicked()      es la opción que seleccionaremos. Permite crear automáticamente una función en el código MainWindow.cpp con el prototipo agregado a la cabecera MainWindow.h con el propósito de ejecutarse asincronamente cada vez que se presione el botón.
  • clicked(bool)  es la misma opción que la anterior, excepto que se utiliza cuando el botón se le configura para tener memoria. Entonces esta función cuando se ejecuta nos indicara el estado lógico del boton.
  • pressed() . Es una función que se ejecutaría cuando el botón es presionado.
  • release(). Es la función que se ejecutaría cuando el botón sea soltado por el mouse.
  • toggled(bool). Se ejecuta cada que la función cambia de estado lógica cuando se le configura para que tenga memoria.

Funciones del boton en QT

 

 Código de MainWindow.cpp para el ejempo 1

Se modificará el código original del códifo fuente llamado MainWindow.cpp para agregarle lo siguiente:

  1. Variable global llamada cuenta: int cuenta = 0;
  2. Dentro de la función void MainWindow::on_pushButton_clicked() se agregará el siguiente código:
    1. cuenta++;
    2. ui->lcdNumber->display(cuenta);

Descarga el proyecto completo.

Ejemplo 2 – Creación de carpetas con QT y mkdir

El propósito del ejemplo dos, es crear una interfaz gráfica que permite crear una carpeta con el nombre del texto que contenga el LineEdit. La carpeta se creará al momento de seleccionar con un clic al botón. Posteriormente aparecerá un mensaje de «carpeta creada» en el texto de la etiqueta. El proyecto 2 incluirá a los siguientes elementos:

QT Crear proyecto - EJemplo2

 

Crear una función para el evento clic.

  1. Clic derecho en el botón.
  2. Seleccionamos la opción «go to slot».
  3. clicked();
  4. Dentro de la función creada, se agregará el siguiente código.

 

 

Y con esto terminamos este tutorial de como crear un proyecto en QT.

Términos y condiciones de QT-Creator versión open-source.

Traducción de la versión en Ingles.

(L) GPL se ha escogido como la versión principal de la licencia de software-libre para QT, esto es porque puede proveer al usuario final con software-libre en «cuatro grados de libertad».

  • Permite distribuir copias de tu versión o las de un grupo de trabajo para la colaboración en equipo.
  • Permite distribuir copias de todas las versiones modificadas de tu programa a otras personas. Al hacer esto, pueden proporcionar a toda la comunidad del beneficio de sus cambios. Acceder al código fuente es una pre-condición para esto.
  • Le permite correr el programa como guste y para cualquier propósito.
  • Esta permitido estudiar como funciona un programa y cambiarlo para que realice los calculos que quiera agregar y/o modificar. Acceder al código fuente es un derecho o pre-condición para dicho proposito.

Todos los usuarios de QT que trabajen bajo la licencia (L)GPL DEBEN de adherirse a estos cuatro puntos para cumplir con todos los requisitos que establece la licencia (L)GPL.

 

Por ultimo, si te gusto este tutorial, favor de dejar un comentario, lo agradeceremos mucho. Por lo tanto te recomendamos visitar nuestra pagina principal para que veas los nuevos tutoriales en HETPRO. Tenemos tutoriales de ArduinoPCBsprogramación y muchos más. En conclusión, esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivar 4.0 Internacional.

Autor: Dr: Rubén Estrada Marmolejo

 

 

One Response

  1. Guillermo julio 16, 2018

Escríbenos tus dudas o comentarios

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos Cookies en nuestro sitio WEB

Por favor confirma, si aceptas nuestras cookies de rastreo. También puedes negar el uso de cookies de rastreo y seguir navegando sin que ninguna información sea enviada a servicios de terceros.