Mostrar Mensajes

C / C++ / Inicio Rápido con Qt 4

« en: Marzo 02, 2013, 01:16:47 pm »

En este tutorial cubrimos de manera rápida y sin entrar en mucho detalle, conceptos básicos de Qt como Layouts o Signals/Slots.

Revisamos la creación de los ejemplos mediante código fuente y mediante Qt Creator.

Introducción a Qt

Qt es un framework para el desarrollo de aplicaciones multiplataforma creado por la compañia Trolltech y que actualmente es propiedad de Nokia, la función más conocida de Qt es la de la creación de interfaces de usuario, sin embargo no se limita a esto, ya que también provee varias clases para facilitar ciertas tareas de programación como el manejo de sockets, soporte para programación multihilo, comunicación con bases de datos, manejo de cadenas de caracteres, entre otras.

Qt utiliza C++ de manera nativa, pero ofrece soporte para otros lenguajes como Python mediante PyQt, Java mediante QtJambi, o C# mediante Qyoto.
Qt es un framework muy poderoso, comparable con Swing de Java o .NET de Microsoft, además ofrece una suite de aplicaciones para facilitar y agilizar las tareas de desarrollo, las aplicaciones que componen esta suite son:

Qt Assistant: Herramienta para visualizar la documentación oficial de Qt.
Qt Designer: Herramienta WYSIWYG para crear interfaces de usuario.
Qt Linguist: Herramienta para la traducción de aplicaciones.
Qt Creator: IDE para el lenguaje C++, pero especialmente diseñado para Qt, integra las primeras dos herramientas mencionadas.

Qt es utilizado por empresas como Intel, Google o Dreamworks. Algunos ejemplos de aplicaciones desarrolladas utilizando Qt son:

El entorno de escritorio KDE
Google Earth
Skype
Virtual Box

Qt está disponible bajo las siguientes licencias:

Qt GNU GPL v. 3.0: Utilizada para el desarrollo de aplicaciones de código abierto. Si se realizan cambios al código fuente de Qt, estos tienen la obligación de liberarse.
Qt GNU LGPL v.2.1: Permite el desarrollo de aplicaciones privativas bajo ciertas restricciones. Si se realizan cambios al código fuente de Qt, estos tienen la obligación de liberarse.
Commercial: Es la única licencia con costo, es utilizada para el desarrollo de aplicaciones propietarias, incluye soporte y la posibilidad de liberar las aplicaciones desarrolladas bajo cualquier licencia. Si se ralizan cambios al código fuente de Qt, estos no tienen la obligación de ser compartidos.

Instalación de Qt 4

En este artículo revisamos algunas de las formas que existen de instalar y configurar el entorno de desarrollo de Qt, hablamos un poco de sus ventajas y desventajas e indicamos la forma de instalarlo.

Instalar Qt utilizando un asistente de instalación
Instalar Qt mediante la compilación del código fuente

A continuación, describimos cada una de ellas.

Instalar Qt utilizando un asistente de instalación

Ventajas: Este método también es sencillo de realizar. Permite facilmente mantenerse con la versión más reciente de Qt. Permite instalar versiones anteriores de Qt si es que lo requerimos.

Desventajas: Puede generar un poco de confusión debido a que, dependiendo de los permisos con los que realicemos la instalación, las herramientas de Qt pueden o no ser agregadas al path por el instalador.

Instrucciones: Descargar la versión que deseemos instalar, típicamente la más reciente, desde la página oficial de descargas de Qt: http://qt.nokia.com/downloads/
En dónde el nombre del instalador suele tener la forma: qt-sdk-[plataforma]-[arquitectura]-[versionlicencia]-[version]-[revision].[extension] Un ejemplo de ello es la versión 4.6.3 opensource de 32 bits para linux que lleva por nombre qt-sdk-linux-x86-opensource-2010.03.bin
Después ejecutamos el instalador y seguimos las instrucciones que nos muestra e indicamos la información que nos pide (path de instalación, aceptar el acuerdo de licencia).
Una vez terminada la instalación podemos ejecutar el entorno de desarrollo integrado Qt Creator y comenzar a crear aplicaciones o revisar los impresionantes ejemplos

.
Si queremos utilizar las herramientas desde la terminal es necesario ejecutarlas indicando el path en el que están instaladas, por ejemplo en linux, /home/usuario/qt-sdk-qt-sdk-linux-x86-opensource-2010.03/qt/bin/qmake o si lo preferimos agregar al path dicha ruta para sólo indicar el nombre del ejecutable. Si existe más de una versión en el path del sistema suele tomar en cuenta la que aparece primero.
Notas: Este método puede generar algo de confusión con la versión que se esté utilizando para compilar, sobre todo si se utiliza Qt Creator, ya que dentro de él se puede especificar con que versión de las instaladas (y que se le haya indicado previamente) se desea compilar algún proyecto, sea o no la del path.

Instalar Qt mediante la compilación del código fuente

Ventajas: A pesar de ser el método más complicado de los tres, se simplifica bastante gracias al script de configuración y compilación que se incluye, al cual sólo debemos indicarle con que parámetros deseamos incluir o excluir en la construcción de nuestro entorno de desarrollo de Qt.
Suele ser la forma ideal si requerimos alguna característica adicional a las predeterminadas, como soporte para MySQL en Windows, o si deseamos utilizar una versión aún en desarrollo.

Desventajas: Aparte de ser la forma más complicada de las tres, la compilación de Qt toma bastante tiempo, dependiendo del harware de la máquina puede llegar a unas 10 horas o más.
Algunas veces los scripts de instalación presentan algún problema que puede complicar todo ya que no se puede construir mediante los parámetros definidos en el asistente y habrá que buscar que es lo que falla y cómo solucionarlo.

Instrucciones: Descarga el código fuente desde la página oficial de descargas de Qt: http:/qt.nokia.com/downloads
Una vez descargado el archivo, lo descomprimimos, buscamos el script de configuración, de nombre configure, lo ejecutamos y seguimos las instrucciones. Luego esperamos (un largo tiempo) a que termine la instalación.
Podemos agregar una versión compilada al Qt Creator y al path del sistema con el fin de utilizarla de manera más cómoda.

Nuestro Primer Programa en Qt: "Hola Mundo"

En este artículo vamos a crear y explicar a detalle la clásica primera aplicación en programación, esta vez con Qt.
El código de un Hola Mundo en Qt es el siguiente

Código: C++

#include <QApplication>
#include <QLabel>
 
int main(int argc, char *argv[])
{
  QApplication app(argc, argv);
  QLabel *label = new QLabel("Hola Mundo!");
 
  label->show();
 
  return app.exec();
}

Revisaremos el código linea por línea:

Código: C++

#include <QApplication>
#include <QLabel>

En las primeras dos líneas incluimos los archivos de cabecera que utilizaremos para el ejemplo, QApplication es una clase que representa una aplicación gráfica de Qt, es la encargada de administrar el flujo de ejecución y la configuración principal de la aplicación. QLabel es una clase que representa a un control de interfaz de usuario etiqueta, el cual es generalmente utilizado para mostrar texto no editable en pantalla.

Código: C++

int main(int argc, char *argv[])

Declaramos nuestra función main en la cual comenzará la ejecución de nuestro programa, es necesario especificar los argumentos de línea de comandos argc (un entero que contiene el número de argumentos) y argv (un arreglo/matriz que contiene el valor de cada uno de los argumentos) ya que al crear un objeto de la clase QApplication es necesario especificarlos.

Código: C++

QApplication app(argc, argv);

Crea el objeto QApplication llamado app y pasa como parámetros los argumentos de línea de comandos.

Código: C++

QLabel label("Hola Mundo!");

Crea un objeto QLabel llamado label, y la cual contendrá el texto que queremos mostrar en pantalla, el cual especificamos como argumento del constructor.

Código: C++

label.show();

Muestra la etiqueta en pantalla. Qt se encargará de crear una ventana para poder mostrar la etiqueta en pantalla ya que nosotros no hemos asignado alguna.

Código: C++

return app.exec();

Inicia el hilo principal de la aplicación a partir de este momento el framework toma el control de la aplicación y responde a la interacción del usuario con los controles de interfaz gráfica de acuerdo a todo lo especificado anteriormente. La sentencia return regresa al sistema operativo la respuesta de la ejecución del programa una vez que ha finalizado, esta respuesta tipicamente será cero en caso de que la aplicación se haya ejecutado exitosamente.

Construcción de un Proyecto Utilizando la Terminal

Compilación y ejecución utilizando una consola o terminal

Escribimos el texto del ejemplo en un archivo de texto sin formato utilizando una herramienta como el bloc de notas de windows o editores de texto plano de GNU/Linux como GEdit o Kate, guardamos el archivo como holamundo.cpp o cualquier otro nombre con extensión “.cpp”. Abrimos una terminal en la ubicación de nuestro archivo holamundo.cpp y ejecutamos los siguientes comandos:

Para crear un archivo de proyecto para nuestra aplicación ejecutamos el comando:

Código: Text

qmake -project

Creamos un archivo de proyecto específico para la plataforma o SO en el que estamos trabajando con el comando:

Código: Text

qmake

Para especificar el archivo de proyecto a utilizar, muy útil cuando existe más de un archivo de proyecto en nuestro directorio de trabajo actual, ejecutamos el comando:

Código: Text

qmake [nombre-de-archivo-de-proyecto].pro

Para generar el archivo ejecutable de nuestra aplicación, ejecutamos el comando:

Código: Text

make

o si utilizamos windows el comando será:

Código: Text

mingw32-make

Al igual que sucedía con los archivos de proyecto, si existe más de un archivo de construcción de proyecto habrá que especificar el nombre del archivo que deseamos que se procese.
Para ejecutar el archivo ejecutable generado por el compilador al procesar nuestro código, utilizamos el comando:

Código: Text

./holamundo

o si utilizamos windows, el comando será:

Código: Text

holamundo.exe

Si todo ha ido bien deberías ver una ventana parecida a la siguiente

Construcción de un Proyecto Utilizando Qt Creator

Compilación y Ejecución utilizando Qt Creator

Ejecutamos la aplicación Qt Creator seleccionandola del menú de aplicaciones de nuestro sistema.

Al hacerlo veremos la pantalla de bienvenida de Qt Creator

En ella seleccionamos la opción "New File or Project..." del Menú "File"

Veremos un asistente de creación de nuevo proyecto, para este ejemplo seleccionaremos un proyecto vacío.

En el siguiente paso del asistente seleccionamos las plataformas (targets) para las cuales deseamos construir nuestra aplicación Qt, para este ejemplo nos sirve cualquiera, nosotros elegimos Desktop/Escritorio
En los pasos siguientes del asistente se nos solicitará el nombre del archivo e información sobre control de versiones, para el nombre nos sirve cualquiera, nosotros utilizamos HolaQt.cpp y para el control de versiones por ahora basta con presionar "Finish"

Agregamos un nuevo archivo al proyecto, haciendo clic derecho en la carpeta principal del proyecto y seleccionando la opción "Add New..." del menú contextual que aparece

Escribimos el código del ejemplo y presionamos el botón de ejecutar y construir aplicación. El botón de ejecutar y construir es el botón con una flecha color verde colocado en la parte inferior izquierda de la interfaz de Qt Creator, en la siguiente imagen está debajo del icono de una computadora y tiene un tooltip con el texto "Run Ctrl+R". Ctrl+R es el atajo de teclado para ejecutar la acción que realiza este botón.

Esperamos a que la compilación termine y veremos nuestro programa en ejecución

Layouts de Qt. Organización de los widgets

En el ejemplo anterior realizamos nuestra primera aplicación en Qt, el clásico Hola Mundo, en el cual solamente creamos una etiqueta con el texto “Hola Mundo!” y la mostramos en pantalla. Utilizamos este enfoque debido a que realizamos un programa que sólo serviría de ejemplo, pero ese ejemplo tiene el gran inconveniente de que sólo es posible utilizar un elemento de interfaz gráfica (widget) a la vez, el cual en nuestro caso fue una etiqueta.
En este artículo hablaremos acerca de los Layouts, los cuales nos ayudarán a solucionar situaciones como las del ejemplo anterior.

Los Layouts son objetos que nos permiten organizar los widgets dentro de una ventana, en Qt disponemos de los siguientes tipos básicos de Layouts:

QHBoxLayout
QVBoxLayout
QGridLayout
QFormLayout

En las secciones de esta parte del tutorial describiremos brevemente estos layouts y mostraremos un ejemplo básico de su uso.

También veremos que es posible anidar los layouts con el fin de crear interfaces de usuario más complejas que las que se pueden lograr utilizando un sólo layout.

QHBoxLayout Organizar Widgets de Manera Horizontal

El QHBoxLayout Nos permite ordenar los widgets en filas, es decir, de manera horizontal.

El código para crear una aplicación con un layout como el de la imagen anterior es el siguiente, explicaremos sólo las líneas de código que no hayan sido vistas a detalle en partes anteriores del tutorial:

Código: C++

#include <QObject>
#include <QApplication>
#include <QDialog>
#include <QHBoxLayout>
#include <QPushButton>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    QDialog ventana;
    QHBoxLayout *layout = new QHBoxLayout(&ventana);
    QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1"));
    QPushButton *boton2 = new QPushButton(QObject::trUtf8("Botón 2"));
    QPushButton *boton3 = new QPushButton(QObject::trUtf8("Botón 3"));
 
    layout->addWidget(boton1);
    layout->addWidget(boton2);
    layout->addWidget(boton3);
 
    ventana.setWindowTitle("QHBoxLayout");
    ventana.show();
 
    return app.exec();
}

Las líneas 1 a 5 importan las bibliotecas necesarias para esta aplicación, QObject nos proveerá de la función trUtf8() necesaria para escribir cadenas con caracteres Unicode, en nuestro caso, caracteres propios del español como la ñ, o el acento (tilde).
QDialog es una clase que representa un diálogo de aplicación. Utilizamos un diálogo en lugar de una ventana principal buscando mantener la simplicidad del ejemplo. Un diálogo es una ventana mediante la cual el usuario y la aplicación se comunican y los revisamos en un artículo siguiente del tutorial. Algunos de sus usos son:

Informar al usuario sobre la ocurrencia de algún evento relevante como una notificación al terminar un proceso o un error al realizarlo.
Solicitar confirmación para realizar alguna acción como borrar o guardar un archivo.
Solicitar información, como la palabra a buscar en un diálogo de buscar y reemplazar.

QHBoxLayout es una clase que representa a nuestro layout horizontal. QPushButton es una clase que representa a un botón típico.

Código: C++

QDialog ventana;
QHBoxLayout *layout = new QHBoxLayout();
QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1"));

En las líneas 11 a 13 creamos un nuevo diálogo, layout y botón mediante la sentencia new para ejecutar el constructor de cada clase, en el parámetro del constructor del layout horizontal es un apuntador a su widget padre, sobre el cual el layout tendrá efecto, el parámetro del constructor del botón es la cadena de texto que mostrará el botón. Las líneas 14 y 15 crean los otros botones de la misma forma.

Código: C++

layout->addWidget(boton1);
layout->addWidget(boton2);
layout->addWidget(boton3);

En las líneas 17 a 19 colocamos los botones dentro de nuestro layout mediante la función

Código: C++

addWidget(QWidget *widget, int stretch=0, Qt::Alignment aling=0)

Esta versión de esta función recibe como parámetros un apuntador al widget que deseamos agregar, un entero que indica el índice de “flexibilidad” (stretch) del widget y un elemento de la enumeración Qt::Alignment, los últimos dos parámetros pueden omitirse y en caso de hacerlo se les asigna el valor de cero. El stretch indica la proporción de espacio disponible en el layout que el widget ocupará, es relativo al stretch indicado en los otros widgets que están dentro del layout, entre mayor sea el valor de stretch mayor será el espacio que ocupará el widget. La enumeración Qt:Alignment indica la alineación que tendrá el widget y puede tener los siguiente valores:

Horizontales: Qt::AlignLeft (izquierda), Qt::AlignRight (derecha), Qt::AlignHCenter (centrado horizontalmente), Qt::AlignJustify (justificado)
Verticales:Qt::AlignTop (superior/arriba), Qt::AlignBottom (inferior/abajo), Qt::AlignVCenter (centrado verticalmente)
Bidimensionales:Qt::AlignCenter (centrado horizontal y verticalmente)

Los widgets se colocan en el orden en que se ejecutan las instrucciones, de forma que en este layout el primer botón de izquierda a derecha (la dirección por default de este layout) es boton1 seguido de boton2 y por último boton3. Si queremos invertir el orden de los widgets podemos escribir las instrucciones en orden inverso o podemos indicar que nuestros widgets se añadan de derecha a izquierda con la instrucción
setDirection(QBoxLayout:RightToLeft)

Código: C++

ventana.setLayout(layout);
ventana.setWindowTitle("QHBoxLayout");

Y por último en la línea 21 indicamos el título que queremos que muestre nuestra ventana, si no se especifica se utilizará el del nombre del archivo.

QVBoxLayout Organizar los Widgets de Manera Vertical

El QVBoxLayout Nos permite ordenar los widgets en columnas, es decir, de manera vertical.

El código para crear una aplicación con un layout como el de la imagen anterior es el siguiente:

Código: C++

#include <QObject>
#include <QApplication>
#include <QDialog>
#include <QVBoxLayout>
#include <QPushButton>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    QDialog ventana;
    QVBoxLayout *layout = new QVBoxLayout();
    QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1"));
    QPushButton *boton2 = new QPushButton(QObject::trUtf8("Botón 2"));
    QPushButton *boton3 = new QPushButton(QObject::trUtf8("Botón 3"));
 
    layout->addWidget(boton1);
    layout->addWidget(boton2);
    layout->addWidget(boton3);
 
    ventana.setLayout(layout);
    ventana.setWindowTitle("QVBoxLayout");
    ventana.show();
 
    return app.exec();
}

Si lo comparamos con el ejemplo anterior del QHBoxLayout, lo único que cambia es que nuestro objeto layout ahora es de tipo QVBoxLayout, el resultado de esto es que los widgets ahora se organizan de acuerdo a las reglas de este layout, es decir, de arriba hacia abajo.
Si queremos invertir el orden en que se agregan los widgets al layout utilizamos la instrucción

Código: C++

setDirection(QBoxLayout::BottomToTop)

QGrid Layout. Organizar los Widgets en Forma Tabular

El QGridLayout nos permite ordenar los widgets a manera de tabla o rejilla.

El código para crear una aplicación con un layout similar al de la imagen es:

Código: C++

#include <QObject>
#include <QApplication>
#include <QDialog>
#include <QGridLayout>
#include <QPushButton>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    QDialog ventana;
    QGridLayout *layout = new QGridLayout();
    QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1"));
    QPushButton *boton2 = new QPushButton(QObject::trUtf8("Botón 2"));
    QPushButton *boton3 = new QPushButton(QObject::trUtf8("Botón 3"));
 
    layout->addWidget(boton1, 0, 0);
    layout->addWidget(boton2, 0, 1);
    layout->addWidget(boton3, 1, 1);
 
    ventana.setLayout(layout);
    ventana.setWindowTitle("QGridLayout");
    ventana.show();
 
    return app.exec();
}

Nuevamente cambiamos el tipo de nuestro objeto layout, ahora será de la clase QGridLayout.
La forma de agregar los widgets a este tipo de layout es ligeramente distinta, ahora lo haremos mediante la función

Código: C++

addWidget(QWidget *widget, int fila, int columna, Qt::Alignment align=0)

Esta función recibe como parámetros un apuntador al widget que deseamos agregar, dos enteros que indican la fila y columna, respectivamente, de la celda sobre la cual queremos agregar el widget en cuestión y un valor de la enumeración Qt::Alignment. Las filas y columnas comienzan a contarse desde cero de tal manera que la primera celda en la esquina superior izquierda tiene la posición fila=0, columna=0.

Código: C++

layout->addWidget(boton1, 0, 0);
layout->addWidget(boton2, 0, 1);
layout->addWidget(boton3, 1, 0);

En la línea 17 colocamos al primer botón en la celda definida por la intersección de la fila cero con la columna cero, es decir, posición 0,0. Luego colocamos al boton2 y boton3 en las celdas 0,1 y 1,1 respectivamente.
El espacio vacío en la celda 1,0 se genera debido a que el QGridLayout crea tantas divisiones de filas y columnas como el número máximo de filas o columnas que indiquemos, en este caso dos, debido a la existencia de las filas y columnas uno y cero. Por ejemplo, si añadieramos los botones al layout mediante las líneas

Código: C++

layout->addWidget(boton1, 0, 0);
layout->addWidget(boton2, 1, 1);
layout->addWidget(boton3, 2, 2);

Obtendríamos el siguiente resultado:

Sin embargo habrá que tener en cuenta que las filas o columnas extras no serán visibles a menos que establezcamos el alto/ancho mínimo de cada fila/columna o que coloquemos un widget en la fila/columna correspondiente, en este último caso (que es lo que ha ocurrido en los dos ejemplos anteriores) el QGridLayout asigna automáticamente el alto/ancho mínimo de esta fila/columna con un valor igual al mínimo requerido por el widget en cuestión.
Podemos establecer el ancho mínimo de una columna y el alto mínimo de una fila con las funciones:

Código: C++

setColumnMinimumWidth(int columna, int anchoMinimo )
setRowMinimumHeight(int fila, int altoMinimo)

Por ejemplo si añadieramos los botones al layout mediante el siguiente código:

Código: C++

layout->addWidget(boton1, 0, 0);
layout->addWidget(boton2, 1, 1);
layout->addWidget(boton3, 3, 3);

Se crearían cuatro filas y cuatro columnas, es decir, una fila y columna más que en el ejemplo anterior, pero al ejecutar el programa obtendríamos el mismo resultado que se muestra en la imagen pasada. Esto ocurre debido a que aunque la fila y columna con el número dos existen, estas tienen un alto y ancho de cero ya que no hemos colocado ningún widget en ellas ni hemos establecido el tamaño mínimo para ellas. Pero si después de la línea dónde agregamos el último botón al layout añadimos las líneas:

Código: C++

layout->setColumnMinimumWidth(2, 60);
layout->setRowMinimumHeight(2, 20);

Obtendríamos el siguiente resultado:

QFormLayout. Organizar los Widgets a Manera de Formulario

El QFormLayout nos permite ordenar los widgets de manera similar a la de formulario web, es decir, filas compuestas por un par de widgets, los cuales normalmente son una etiqueta y un campo de texto.

El código para crear una aplicación con un layout como el de la imagen anterior es el siguiente:

Código: C++

#include <QObject>
#include <QApplication>
#include <QDialog>
#include <QFormLayout>
#include <QPushButton>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    QDialog ventana;
    QFormLayout *layout = new QFormLayout(&ventana);
    QPushButton *boton1 = new QPushButton(QObject::trUtf8("Botón 1"));
    QPushButton *boton2 = new QPushButton(QObject::trUtf8("Botón 2"));
    QPushButton *boton3 = new QPushButton(QObject::trUtf8("Botón 3"));
 
    layout->addRow(QObject::trUtf8("Botón 1:"), boton1);
    layout->addRow(QObject::trUtf8("Botón 2:"), boton2);
    layout->addRow(QObject::trUtf8("Botón 3:"), boton3);
 
    ventana.setWindowTitle("QVBoxLayout");
    ventana.show();
 
    return app.exec();
}

En este caso nuestro layout será del tipo QFormLayout y para añadir widgets utilizarermos la función

Código: C++

addRow(QLabel *etiqueta, QWidget *widget)

aunque también es posible utilizar la siguiente función sobre cargada, con el fin de evitar que nosotros tengamos que crear una etiqueta para cada uno de los widgets que deseeemos agregar:

Código: C++

addRow(const QString &amp;texto, QWidget *widget)

Código: C++

layout->addRow(QObject::trUtf8("Botón 1:"), boton1);
layout->addRow(QObject::trUtf8("Botón 2:"), boton2);
layout->addRow(QObject::trUtf8("Botón 3:"), boton3);

En las líneas 17 a 19 agregamos los widgets al layout, utilizamos la versión sobrecargada de addRow() en la que el primer parámetro es una cadena de texto con el fin de ahorrar código, debido a que en este ejemplo no necesitamos que el texto de alguna fila cambie y por lo tanto no es necesario conservar un apuntador hacia las etiquetas. Este tipo de layout es muy útil, por ejemplo, en la creación de formularios para la solicitud de información (como un registro de usuarios o un formulario de comentarios) en dónde debemos de indicar que información debe de capturar el usuario en cada campo.

Layouts Anidados. Interfaces de Usuario Complejas en Qt

Normalmente las aplicaciones que desarrollemos no tendrán una interfaz tan sencilla como para ser diseñadas utilizando sólo un layout, para organizar los widgets de maneras más complejas utilizamos layouts anidados, es decir, un layout dentro de otro.
La función que nos permite anidar layouts depende del tipo de layout que estemos utilizando, para QHBoxLayout y QVBoxLayout la función es:

Código: C++

addLayout(QLayout *layout, int Qt::Alignment align=0)

Para el QGridLayout además debemos especificar la fila y columna de la celda dónde deseamos agregar el layout, de la siguiente forma

Código: C++

addLayout(QLayout *layout, int fila, int columna, Qt::Alignment align=0)

Para el QFormLayout se utiliza una función sobrecargada de addRow(), en una de las siguientes formas,
dependiendo de la apariencia que deseemos lograr:

Código: C++

addRow(QLabel *label, QLayout *layout)
addRow(QString &texto, QLayout *layout)

Está función recibe como parámetros un apuntador a la etiqueta que contiene el texto que describe al layout o simplemente una QString con ese texto y un apuntador al layout que deseamos agregar.

Código: C++

addRow(QLayout *layout)

Esta función recibe cómo parámetro un apuntador al layout que deseamos agregar.
A continuación mostraremos un sencillo ejemplo de anidación de layouts para crear una interfaz de usuario muy conocida: un formulario de inicio de sesión.

Código: C++

#include <QApplication>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QDialog>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    QDialog ventana;
    QHBoxLayout *layoutUsuario = new QHBoxLayout;
    QHBoxLayout *layoutContrasenia = new QHBoxLayout;
    QHBoxLayout *layoutBotones = new QHBoxLayout;
    QVBoxLayout *layoutPrincipal = new QVBoxLayout(&ventana);
 
    QLabel *etiquetaUsuario = new QLabel("Usuario");
    QLabel *etiquetaContrasenia = new QLabel("Password");
 
    QLineEdit *campoUsuario = new QLineEdit;
    QLineEdit *campoContrasenia = new QLineEdit;
 
    QPushButton *botonAceptar = new QPushButton("Aceptar");
    QPushButton *botonCancelar = new QPushButton("Cancelar");
 
    layoutUsuario->addWidget(etiquetaUsuario);
    layoutUsuario->addWidget(campoUsuario);
 
    layoutContrasenia->addWidget(etiquetaContrasenia);
    layoutContrasenia->addWidget(campoContrasenia);
 
    layoutBotones->addStretch();
    layoutBotones->addWidget(botonAceptar);
    layoutBotones->addWidget(botonCancelar);
 
    layoutPrincipal->addLayout(layoutUsuario);
    layoutPrincipal->addLayout(layoutContrasenia);
    layoutPrincipal->addLayout(layoutBotones);
 
    ventana.setWindowTitle(QObject::trUtf8("Iniciar Sesión"));
    ventana.show();
 
    return app.exec();
}

Al ejecutar este código obtendremos una salida parecida a la siguiente imagen

En las líneas 1 a 7 incluimos los archivos de cabecera necesarios para desarrollar la aplicación, mientras que en las líneas 13 a 26 creamos los widgets que utilizaremos. En las líneas 28 y 29 colocamos los widgets del campo usuario en un QHBoxLayout, lo mismo hacemos para los campos de contraseña y para los botones. Con el fin de lograr una interfaz más agradable alineamos los botones a la derecha insertando un espacio en blanco al principio del QHBoxLayout mediante la instrucción

Código: C++

addStretch(int stretch=0);

Código: C++

layoutPrincipal->addLayout(layoutUsuario);
layoutPrincipal->addLayout(layoutContrasenia);
layoutPrincipal->addLayout(layoutBotones);

A partir de la línea 38 agregamos en el layout principal (el cual es un QVBoxLayout) el layout que contiene los controles de usuario, seguido por el que contiene los controles de contraseña y por último el que contiene los botones.
Es posible diseñar una interfaz de usuario utilizando distintas combinaciones de layouts, es cuestión de tiempo y experiencia poder encontrar aquella que sea más fácil y rápida de crear o la que se adapte mejor a las necesidades de nuestra aplicación. Para el ejemplo anterior un mejor diseño (considerando que requiere menos líneas) puede lograrse utilizando un QFormLayout en lugar de los primeros dos QHBoxLayout. El código es el siguiente:

Código: C++

#include <QApplication>
#include <QHBoxLayout>
#include <QFormLayout>
#include <QLineEdit>
#include <QPushButton>
#include <QDialog>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    QDialog ventana;
    QHBoxLayout *layoutBotones = new QHBoxLayout;
    QFormLayout *layoutPrincipal = new QFormLayout(&ventana);
 
    QLineEdit *campoUsuario = new QLineEdit();
    QLineEdit *campoContrasenia = new QLineEdit();
 
    QPushButton *botonAceptar = new QPushButton("Aceptar");
    QPushButton *botonCancelar = new QPushButton("Cancelar");
 
    layoutBotones->addStretch();
    layoutBotones->addWidget(botonAceptar);
    layoutBotones->addWidget(botonCancelar);
 
    layoutPrincipal->addRow(QString("Usuario"), campoUsuario);
    layoutPrincipal->addRow(QString("Password"), campoContrasenia);
    layoutPrincipal->addRow(layoutBotones);
 
    ventana.setWindowTitle(QObject::trUtf8("Iniciar Sesión"));
    ventana.setWindowFlags(Qt::Window);
    ventana.show();
 
    return app.exec();
}

Al ejecutar este código obtenemos una salida similar a la siguiente

La cual tiene una apariencia muy similar a la del ejemplo anterior pero que luce un poco mejor en algunos aspectos, lo relevante para este ejemplo es que el número de líneas utilizadas se redujo un poco, y es de suponer que en una aplicación de mayor tamaño el ahorro de líneas de código también será mayor.

Signals y Slots. Implementando la Funcionalidad de una Aplicación Qt

En la parte anterior de este tutorial vimos como utilizar layouts para diseñar la interfaz gráfica de nuestras aplicaciones y para ejemplificarlo diseñamos un diálogo de inicio de sesión.

En esta parte del tutorial aprenderemos a implementar la funcionalidad de nuestras aplicaciones utilizando Señales y Slots, los cuales forman el mecanismo a través del cual los objetos de una aplicación de Qt (incluyendo widgets) se comunican. Este mecanismo es una de la características distintivas de Qt, ya que otros frameworks suelen utilizar un enfoque basado en callbacks.

Una señal es una notificación que un objeto emite cuándo cambia su estado de manera que podría interesarle a otros objetos. Un slot es una función que se ejecuta cuándo una señal se emite.

Cualquier objeto en el que deseemos implementar señales y slots debe de heredar de la clase QObject, los widgets que utilizaremos normalmente cumplen con esto ya que heredan de QWidget que a su vez hereda de QObject. Los widgets que nos proporciona Qt poseen señales y slots predefinidos, pero también es posible crear un widget personalizado con el fin de añadir nuestras propias señales y slots.

A continuación mostramos el código de nuestra aplicación de inicio de sesión, en el cuál utilizamos señales y slots para implementar su funcionalidad, esto es que al capturar un nombre de usuario registrado y su contraseña correspondiente se nos permita el acceso a una sección restringida de una aplicación y que al capturar un nombre de usuario no registrado o una contraseña no coincidente se niegue el acceso.

En este ejemplo utilizaremos dos señales y dos slots, recordemos que las señales se emiten cuándo un objeto cambia de estado de manera interesante para otros objetos, en este caso serán emitidas cuando se presione alguno de los botones; Cada una de estas señales está conectada a un slot diferente, el cual se ejecuta cuando el botón respectivo es presionado. Más adelante veremos el código de estos slots.

En esta ocasión nuestra aplicación se compone de tres archivos, un archivo de definición de la clase, uno de implementación y un archivo main, definimos una nueva clase debido a que necesitamos un diálogo personalizado para implementar el slot que se ejecutará cuándo se presione el botón Aceptar en nuestra ventana de login, el slot que se ejecuta cuando se presiona el botón cancelar (close() el cual cierra la ventana) ya está predefinido.

NOTA: Sólo revisaremos a detalle las secciones que no hayan sido explicadas en partes anteriores del tutorial o que sean relevantes para esta explicación

El contenido de login.h, el archivo de definición de clase, es el siguiente:

Código: C++

#ifndef LOGIN_H
#define LOGIN_H
 
#include <QDialog>
 
class QPushButton;
class QLineEdit;
 
class Login : public QDialog
{
    Q_OBJECT
 
public:
    Login(QWidget *parent=0);
 
private slots:
    void verificarDatos();
 
private:
    QPushButton *botonAceptar, *botonCancelar;
    QLineEdit *campoUsuario, *campoPassword;
};
#endif // LOGIN_H

En la línea 4 incluimos el archivo de cabecera de QDialog el cuál necesitamos debido a que nos basaremos en él para construir nuestro diálogo.

Código: C++

#include <QDialog>

En las líneas 6 y 7 indicamos al compilador que utilizaremos las clases QPushButton y QLineEdit, pero no especificamos sus detalles, los cuales se encuentran en sus archivos .h propios, es posible hacer esto debido a que declaramos las variables como tipo apuntador y a que en este archivo sólo las definimos pero no las utilizamos. También hubiera sido posible incluir los archivos de cabecera pero el sólo indicar el nombre de las clases permite reducir el tiempo de compilación.

Código: C++

class QPushButton;
class QLineEdit;

En la línea 9 definimos nuestra nueva clase, la cual tendrá el nombre de Login y heredará de QDialog.

Código: C++

class Login : public QDialog

En la línea 11 utilizamos una macro llamada Q_OBJECT la cual es necesaria en cada clase que utilice señales y slots. Esta macro define algunas funciones de instrospección utilizadas por otras funciones como connect() y es necesaria para que el código de Qt sea traducido por el compilador meta objeto (moc, por sus siglas en inglés) a código C++ estándar.

Código: C++

Q_OBJECT

A partir de la línea 13 declalramos las funciones y los miembros de nuestra clase. En la línea 14 declaramos el constructor de nuestra clase.

Código: C++

public:
    Login();

En la línea 17 definimos nuestro slot personalizado, el cual lleva por nombre verificarDatos(), se ejecuta cuándo se presione el botón Aceptar y como su nombre lo indica se encarga de verificar que los datos ingresados sean correctos.

Código: C++

void verificar();

En las líneas 20 y 21 declaramos los widgets que utilizaremos en nuestra aplicación, dos campos de texto, uno para el nombre de usuario y otro para la contraseña y dos botones, uno para solicitar la verificación de los datos capturados y otro para salir, que sólo se provee por comodidad.

Código: C++

QPushButton *botonAceptar, *botonCancelar;
    QLineEdit *campoUsuario, *campoPassword;

El contenido del archivo login.cpp es el siguiente:

Código: C++

#include "login.h"
 
#include <QApplication>
#include <QPushButton>
#include <QLineEdit>
#include <QFormLayout>
#include <QHBoxLayout>
#include <QMessageBox>
 
Login::Login(QWidget *parent)
    : QDialog(parent)
{
    QFormLayout *layoutPrincipal = new QFormLayout;
    QHBoxLayout *layoutBotones = new QHBoxLayout;
 
    botonAceptar = new QPushButton(trUtf8("Aceptar"));
    botonCancelar = new QPushButton(trUtf8("Cancelar"));
 
    campoUsuario = new QLineEdit();
    campoPassword = new QLineEdit();
 
    layoutBotones->addStretch();
    layoutBotones->addWidget(botonAceptar);
    layoutBotones->addWidget(botonCancelar);
 
    layoutPrincipal->addRow(trUtf8("Usuario"), campoUsuario);
    layoutPrincipal->addRow(trUtf8("Contraseña"), campoPassword);
    layoutPrincipal->addRow(layoutBotones);
 
    setLayout(layoutPrincipal);
 
    connect(botonAceptar, SIGNAL(clicked()),
            this, SLOT(verificarDatos()));
 
    connect(botonCancelar, SIGNAL(clicked()),
            this, SLOT(close()));
}
 
void Login::verificarDatos()
{
    if(campoUsuario->text() == "zonaqt" && campoPassword->text() == "zonaqt"){
        QMessageBox::information(this, "", trUtf8("Bienvenido a la aplicación"));
        QApplication::quit();
    }
    else
        QMessageBox::warning(this, "", trUtf8("La combinación usuario/contraseña no es válida"));
}

En la línea 1 incluimos el archivo de definición de nuestra clase.

Código: C++

#include "login.h"

En la línea 10 comienza la implementación del constructor de nuestra clase, en él inicializamos los widgets y layouts necesario para la aplicación y definimos la apariencia de nuestro widget de la misma forma que hicimos en la sección anterior del tutorial.

Código: C++

Login::Login()
{
    QFormLayout *layoutPrincipal = new QFormLayout;
    QHBoxLayout *layoutBotones = new QHBoxLayout;
    ...

Las líneas 30 y 31 son las que presentan novedades.

Código: C++

connect(botonAceptar, SIGNAL(clicked()),this, SLOT(verificar()));
connect(botonCancelar, SIGNAL(clicked()),this, SLOT(close()));

En ellas utilizamos la función:

Código: C++

connect(QObject *emisor, const char *signal,
        QObject *receptor, const char *slot,
        Qt::ConnectionType type=Qt::AutoConnection);

La función connect es la encargada de conectar o enlazar dos QObjects, recibe como parámetros un apuntador al QObject emisor de la señal de interés, un apuntador a un arreglo de caracteres que indica la firma de función de la señal que nos interesa monitorear, un apuntador al QObject receptor de la señal y otro apuntador a un arreglo de caracteres, esta vez con la firma de función del slot que se ejecutará cuándo se emita la señal indicada.
Las macros SIGNAL() y SLOT() son requeridas por el moc al indicar el segundo y cuarto parámetro, respectivamente. Es necesario que las firmas de las funciones indicadas en estas macros coincidan en sus parámetros. Con la excepción de que la señal indicada puede tener más parámetros que los requeridos por el slot, en este caso los parámetros adicionales son ignorados.
Al utilizar la función connect() se pueden presentar los siguientes casos:

Cada señal está conectada a un slot distinto. Este es el caso más simple y es el que mostramos en este ejemplo, en él el slot que se ejecuta depende de la señal que se emite.
Más de una señal puede estar conectada a un slot. En este caso el slot se ejecutará cuándo se emita cualquiera de las señales conectadas a él.
Una señal puede estar conectada a más de un slot. En este caso todos los slots conectados a la señal en cuestión se ejecutarán cuándo dicha señal se emita, uno tras otro en un orden indeterminado.
Una señal puede estar conectada a otra señal. En este caso la señal indicada en el cuarto parámetro se emitirá al emitirse la indicada en el segundo parámetro.

En la línea 34 comienza la implementación de nuestro slot personalizado, indicamos el tipo de dato de retorno, después la clase a la que pertenece seguido del nombre del slot y su lista de parámetros, en este caso no ningún parámetro es requerido.

Código: C++

void Login::verificar()

En la línea 36 verificamos que la información capturada en los campos de texto coincida con la información de algún usuario registrado, en este caso y para mantener la simpleza indicamos en el código un único usuario: programacion, y su contraseña correspondiente: linux. La función QLineEdit::text() devuelve una QString con el contenido del QLineEdit en cuestión, en este caso el nombre de usuario para campoUsuario y la contraseña para campo Password.
QString es una clase de Qt que representa una cadena de caracteres unicode y que nos proporciona funciones bastante útiles como concatenación, traducción o búsqueda y reemplazo de caracteres, entre otras.
En caso de que la información capturada sea correcta mostramos un mensaje de bienvenida o confirmación y cerramos esta ventana para mostrar la ventana principal, debido a que en este momento sólo tenemos una ventana entonces salimos de la aplicación. En caso de que la información capturada sea incorrecta mostramos un mensaje de aviso informando que hubo un error.
Los mensajes de bienvenida o error, son mostrados al usuario utilizando las funciones estáticas de la clase QMessageBox

Código: C++

if(campoUsuario->text() == "zonaqt.com" && campoPassword->text() == "zonaqt.com"){
    QMessageBox::information(this, "", trUtf8("Bienvenido a la aplicación"));
    emit exit(0);
}
else
    QMessageBox::warning(this, "", trUtf8("La combinación usuario/contraseña no es válida"));

Esta función la utilizamos para mostrar un diálogo como el siguiente:

Código: C++

StandarButton QMessageBox::information(QWidget *padre, const QString &titulo,
        const QString &mensaje, StandarButtons boton=Ok,
        StandarButton botonPredeterminado=NoButton)

Esta función la utilizamos para mostrar un diálogo como el siguiente:

Código: C++

StandarButton QMessageBox::warning(QWidget *padre, const QString &titulo,
        const QString &mensaje, StandarButtons botones=Ok,
        StandarButton botonPredeterminado=NoButton)

Estas funciones permiten mostrar un diálogo para mostrar información relevante o hacer una pregunta al usuario y recibir una respuesta.
Estas funciones reciben como parámetros obligatorios: Un apuntador al QWidget padre, que en este caso es nuestra ventana de login lo cual indicamos con la instrucción this; Una cadena de texto que será el título del mensaje; Y una cadena de texto que aparecerá en el contenido del QMessageBox.
Y como parámetros opcionales: Un conjunto de valores de la enumeración StandarButtons, que representan los botones que la QMessageBox incluirá y un elemento de la enumeración StandarButtons el cual representa al botón por default de la QMessageBox, es decir, el cual cambiará su estado a presionado (emitirá la señal clicked()) al presionar la tecla enter, en caso de no especificar estos parámetros se seleccionará por defecto el botón Ok.
El contenido del archivo main.cpp es el siguiente

Código: C++

#include <QApplication>
#include "login.h"
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    Login *login = new Login();
 
    login->show();
 
    return app.exec();
}

En la línea 2 incluimos el archivo de definición de nuestra clase Login.

Código: C++

#include "login.h"

Y finalmente en la línea 8 creamos e inicializamos un objeto de nuestra clase login, el cual mostramos en la línea 10.

Código: C++

Login *login = new Login();
login->show();

QMainWindow. La ventana principal de una aplicación

En el artículo anterior de este tutorial vimos como implementar la funcionalidad de una aplicación gráfica de Qt utilizando señales y slots. En este artículo revisaremos a detalle un widget especial, QMainWindow, el cuál posee características especiales para ser utilizado como la ventana principal de las aplicaciones Qt.

La estructura de la QMainWindow se puede ver en la siguiente imagen Diagrama

Una QMainWindow puede estar compuesta de las siguientes cinco áreas o secciones:

Menu Bar: Como su nombre lo indica esta barra contiene menús, los cuales están compuestos por elementos de texto o etiquetas que indican las acciones que puede realizar la aplicación y que se ejecutan al hacer clic sobre ellas. Normalmente sólo existe una de ellas en la ventana y está colocada en la parte superior, debajo de la barra de título. Algunos ejemplos muy conocidos de menús que suelen colocarse en esta barra son Archivo, Edición, Herramientas o Ayuda.
Toolbars: Al igual que la barra de menús, esta clase de barras, conocida como barra de herramientas está compuesta por las acciones que puede realizar la aplicación, con la diferencia de que en esta barra dichas acciones se muestran mediante iconos en lugar de etiquetas. Estas barras suelen estar ubicadas debajo de la barra de menús y podemos encontrar una o más de estas barras en una ventana. Un ejemplo muy conocido de iconos colocados en este tipo de barras son los de Guardar, representado por un diskette o Imprimir, representado por una impresora.
Status Bar: Esta barra, conocida como barra estatus o de estado, normalmente está colocada en la parte inferior de la ventana, en ella se muestran mensajes informativos sobre el estado de la aplicación, las acciones que está realizando o la descripción del elemento al que estemos apuntando con el mouse.
Dock Widgets: Este es un tipo de widgets que pueden ser acoplados o ajustados alrededor del widget central de una aplicación o permitir que “floten” libremente en el escritorio, al igual que las barras de herramientas contienen iconos y botones que permiten ejecutar acciones que proporciona la aplicación.
Central Widget: Este widget representa el área de trabajo de una aplicación, como la tabla de celdas de una aplicación en hoja de cálculo o el área de texto de un procesador de textos.
Podemos reconocer estás secciones en un buen número de aplicaciones, como ejemplo presentamos la ventana de Open Office Writer (clic para ampliar).

A continuación mostraremos un sencillo ejemplo de una aplicación que basada en una QMainWindow, la cual contendrá una etiqueta como widget central la cual cambiará el texto que muestra dependiendo de la acción que ejecutemos, estas acciones se encontrarán en una barra de menús y una barra de herramientas también incluiremos una barra de estatus.

La aplicación está compuesta por los siguientes tres archivos:

ventanaprincipal.h es el archivo de encabezado de la clase VentanaPrincipal, contiene la declaracion de las variables y la definición de las funciones que utilizaremos en esta aplicación.
ventanaprincipal.cpp es el archivo fuente de la clase VentanaPrincipal, contiene la implementación de las funciones declaradas en el archivo de encabezado.
main.cpp

A continuación revisaremos a detalle los archivos de la aplicación, sólo explicaremos las secciones que no hayan sido revisadas en partes anteriores de este tutorial o que sean relevantes en este contexto

ventanaprincipal.h

Código: C++

#ifndef VENTANAPRINCIPAL_H
#define VENTANAPRINCIPAL_H
 
#include <QMainWindow>
 
class QLabel;
class QToolBar;
class QAction;
class QMenu;
 
class VentanaPrincipal : public QMainWindow
{
    Q_OBJECT
 
public:
    VentanaPrincipal(QWidget *parent=0);
 
private slots:
    void accionNuevoLanzada();
    void accionAbrirLanzada();
    void accionAcercaDeLanzada();
    void accionSalirLanzada();
 
private:
    QMenu* menuArchivo;
    QMenu* menuAyuda;
    QToolBar* barraDeHerramientas;
    QAction* accionNuevo;
    QAction* accionAbrir;
    QAction* accionAcercaDe;
    QAction* accionSalir;
    QLabel* widgetCentral;
};
#endif

En la línea 4 incluimos el archivo de cabecera QMainWindow el cual contiene la definición de la clase en la que basaremos nuestra ventana principal.
En la línea 11 comenzamos con la definición de nuestra clase VentanaPrincipal e indicamos que heredará de QMainWindow.
De la líneas 18 a 22 declaramos los slots por medio de los cuales implementaremos la funcionalidad de nuestra aplicación.
Y finalmente de las líneas 24 a 32 declaramos las variables que utilizaremos en la aplicación.

Código: C++

#include "ventanaprincipal.h"
 
#include <QMenuBar>
#include <QToolBar>
#include <QLabel>
#include <QStatusBar>
#include <QMessageBox>
 
VentanaPrincipal::VentanaPrincipal(QWidget *parent)
    :QMainWindow(parent)
{
    menuArchivo = menuBar()->addMenu(trUtf8("&Archivo"));
    menuAyuda = menuBar()->addMenu(trUtf8("A&yuda"));
 
    barraDeHerramientas = addToolBar(trUtf8("&Archivo"));
 
    widgetCentral = new QLabel(trUtf8("Widget central"));
    widgetCentral->setFont(QFont("Sans-Serif", 25));
 
    accionNuevo = new QAction(QIcon("iconos/nuevo.png"), trUtf8("&Nuevo"), this);
    accionNuevo->setShortcut(QKeySequence::New);
    accionNuevo->setStatusTip(trUtf8("Crear un nuevo archivo"));
 
    accionAbrir = new QAction(QIcon("iconos/abrir.png"), trUtf8("&Abrir"), this);
    accionAbrir->setShortcut(QKeySequence::Open);
    accionAbrir->setStatusTip(trUtf8("Abrir un archivo existente"));
 
    accionSalir = new QAction(QIcon("iconos/salir.png"), trUtf8("&Salir"), this);
    accionSalir->setShortcut(QKeySequence::Quit);
    accionSalir->setStatusTip(trUtf8("Salir de la aplicación"));
 
    accionAcercaDe = new QAction(QIcon("iconos/salir.png"), trUtf8("&Acerca de"), this);
    accionAcercaDe->setShortcut(QKeySequence("Ctrl+d"));
    accionAcercaDe->setStatusTip(trUtf8("Información sobre esta aplicación"));
 
    menuArchivo->addAction(accionNuevo);
    menuArchivo->addAction(accionAbrir);
    menuArchivo->addSeparator();
    menuArchivo->addAction(accionSalir);
 
    menuAyuda->addAction(accionAcercaDe);
 
    barraDeHerramientas->addAction(accionNuevo);
    barraDeHerramientas->addAction(accionAbrir);
    barraDeHerramientas->addSeparator();
    barraDeHerramientas->addAction(accionSalir);
 
    setCentralWidget(widgetCentral);
    statusBar()->showMessage(trUtf8("Bienvenido"));
    setWindowTitle("Ventana Principal");
    setMinimumSize(200, 200);
 
    connect(accionNuevo, SIGNAL(triggered()),
            this, SLOT(accionNuevoLanzada()));
 
    connect(accionAbrir, SIGNAL(triggered()),
            this, SLOT(accionAbrirLanzada()));
 
    connect(accionAcercaDe, SIGNAL(triggered()),
            this, SLOT(accionAcercaDeLanzada()));
 
    connect(accionSalir, SIGNAL(triggered()),
            this, SLOT(accionSalirLanzada()));
}
 
void VentanaPrincipal::accionNuevoLanzada()
{
    widgetCentral->setText(trUtf8("Acción \"Nuevo\" lanzada"));
    this->resize(QSize(widgetCentral->sizeHint().width(), 200));
}
 
void VentanaPrincipal::accionAbrirLanzada()
{
    widgetCentral->setText(trUtf8("Acción \"Abrir\" lanzada"));
    this->resize(QSize(widgetCentral->sizeHint().width(), 200));
}
 
void VentanaPrincipal::accionAcercaDeLanzada()
{
    QMessageBox::about(this, this->windowTitle(), trUtf8("Aquí se debe colocar información sobre la aplicación y la compañia que la desarolla\n\nForto, tutoriales y noticias de Qt en Español en:\nhttp://www.zonaqt.com"));
}
 
void VentanaPrincipal::accionSalirLanzada()
{
    exit(0);
}

De las líneas 1 a 7 incluimos los archivos de cabecera necesarios para implementar la aplicación.
En las línea 12 inicializamos la variable menuArchivo la cual representa un menú que podemos incluir en la barra de menús de la QMainWindow, para lograrlo utilizamos las funciones

Código: C++

QMenuBar* QMainWindow::menuBar()

Devuelve una referencia a una barra de menús que es creada al llamar a la función por primera vez.

Código: C++

QMenu* QMenuBar::addMenu(QString &texto)

Devuelve una referencia a un menú que se creará al llamar a la función y que mostrará en pantalla el texto indicado en la cadena de caracteres que se pasa como parámetro. En la línea 13 realizamos lo mismo para el menú Ayuda.
En la línea 15 inicializamos la variable que representa a una barra de herramientas. La función utilizada es:

Código: C++

QToolBar* QMainWindow::addToolBar(QString &texto);

y trabaja de manera muy similar a las descritas anteriormente, es decir, devuelve una referencia a una QToolBara que se crea cuando se llama a la función y que mostrará en pantalla la cadena que se pasa como parámetro.
En la línea 17 inicializamos la etiqueta que será utilizada como widget central en la aplicación. Y en la línea 18 establecemos la fuente que queremos que ocupe la etiqueta, esto se hace mediante la instrucción:

Código: C++

QLabel::setFont(QFont(QString &fuente, int tamanio));

La cual recibe como parámetros un objeto QFont, el cual representa una fuente de texto y que a su vez recibe como parámetros el nombre de la fuente y el tamaño de la misma.
En la línea 20 inicializamos nuestra variable accionNuevo, del tipo QAction, mediante el constructor de la clase

Código: C++

QAction::QAction(QIcon(QString &archivo), QString &texto, QWidget* padre)

Este constructor recibe como parámetros un objeto QIcon, el cual representa un icono que se mostrará cuando la acción sea colocada dentro de una barra de herramientas y que a su vez recibe como parámetro una cadena de texto con la dirección dónde se encuentra el archivo de imagen que mostrará el icono, el segundo parámetro del constructor de la clase QAction es una cadena que indica el texto que se mostrará cuando la acción sea colocada dentro de una barra de menús y el último parámetro es el widget padre de la acción.

QAction
Antes de seguir debemos definir el concepto de QAction: Una QAction es una representación abstracta de un comando de la aplicación que puede ser ejecutado por el usuario.

En muchas aplicaciones los mismos comandos, acciones o funciones pueden ser ejecutados de diferentes maneras, ya sea mediante un elemento de la barra de menús, un icono de alguna barra de herramientas o una combinación de teclas, por mencionar algunos ejemplos. Una QAction nos es muy útil en este tipo de situación ya que puede estar asociada a múltiples widgets, gracias a esto será posible proporcionar la misma función en distintos lugares de la aplicación y de manera sincronizada, entonces podemos decir que una QAction proporciona una interfaz común para la ejecución de los comandos de la aplicación.

Siguiendo con el código, en la línea 21 establecemos un atajo de teclado para nuestra acción Nuevo, mediante la función

Código: C++

QAction::setShortcut(const QKeySecuence secuencia)

la cual recibe como parámetro un elemento de la enumeración QKeySecuence, dicha enumeración nos proporciona combinaciones estándar de teclas dependiendo de la configuración del sistema operativo en el que nos encontremos. Por ejemplo en el caso de mi sistemas operativo el elemento QKeySecuence::New esta relacionado con la combinación de teclas Ctrl+N sin embargo esto puede ser distinto en otro sistema operativo en el que nos encontremos. Por ejemplo en el caso de mi sistemas operativo el elemento QKeySecuence::New esta relacionado con la combinación de teclas Ctrl+N sin embargo esto puede ser distinto en otro sistema operativo, pero al utilizar esta enumeración Qt se encargará de administrarlo y en caso de que se requiera, asociarlo a otra combinación de teclas más adecuada en esa situación.
En la línea 22 establecemos el texto que deseamos que se muestre en la barra de estatus al posicionar el cursor del mouse sobre los widgets relacionados con la acción correspondiente. Esto se logra mediante la función:

Código: C++

QAction::setStatusTip(QString &texto)

La cual recibe como parámetro una cadena con el texto que deseamos mostrar.
En las líneas 24 a 34 realizamos lo mismo para las acciones restantes.

En las líneas 36 a 39 agregamos tres de las acciones que creamos al menú Archivo. Esto lo hacemos a través de la función

Código: C++

QMenu::addAction(QAction* accion)

Con el fin de lograr un diseñod e interfaz de usuario más claro y atractivo en la línea 38 agregamos un separardor, utilizando la función

Código: C++

QMenu::addSeparator()

Un separador es una línea vertical u horizontal que separa las acciones que está colocadas dentro del mismo menú o barra de herramientas pero que pueden ser ubicadas en una categoría específica o diferente del resto de las acciones del mismo menú o barra de herramientas.
En la línea 41 agregamos la acción AcercaDe al menú Ayuda.

En las líneas 43 a 46 agregamos las acciones a la barra de herramientas de la aplicación utilizando las mismas funciones que utilizamos para agregarlas a los menús.

En la línea 49 creamos la barra de estatus mediante la función

Código: C++

QMainWindow::statusBar()

La cual funciona de manera muy similar a las funciones utilizadas para crear las otras barras de la ventana principal, es decir, creará una barra de estatus para la ventana la primera vez que es llamada.
En la misma línea utilizamos la función

Código: C++

QStatusBar::showMessage(QString &mensaje)

para mostrar un mensaje en la barra de estatus, en este caso mostramos la palabra “Listo” con el fin de indicar que la aplicación puede comenzar a utilizarse.
En las líneas 53 y 54 conectamos la acción accionNuevo con su slot correspondiente, esto lo realizamos mediante la función connect(), la cual revisamos a detalle en un artículo anterior. Debido a que una acción puede estar asociada a múltiples widgets no siempre será lanzada de la misma forma, debido a ello Qt nos proporciona la señal triggered() (lanzada o disparada) la cual se emitirá cada vez que un widget asociado a la señal sea activado, por ejemplo un clic sobre un botón lanzará una acción asociada al mismo mientras que una combinación de teclas lanzará dicha acción al ser presionada por el usuario.

En las líneas 56 a 63 conectamos las acciones restantes a sus respectivos slots.

En la línea 66 comienza la implementación de los slots, los slots accionNuevoLanzada y accionAbriLanzada cambiarán el texto que se muestra en la etiqueta utilizada como widget central y redimensionarán la ventana para ajustarla al nuevo texto mostrado. El cambio de texto de la etiqueta se realiza mediante la función

Código: C++

QLabel::setText(QString &texto)

la cual recibe como parámetro una cadena de caracteres con el texto que se desea mostrar.
El cambio de tamaño de la ventana se realiza mediante la función

Código: C++

QMainWindow::resize(QSize(int width, int height))

esta función recibe como parámetro un objeto QSize, el cual es una estructura que incluye el ancho y alto de un widget y que a su vez recibe como parámetros dos enteros indicando el ancho y alto del widget, respectivamente.
También utilizamos la función sizeHint() la cual devuelve un objeto QSize con el tamaño requerido por el widget sobre el que se llamo la función.
En la línea 78 comienza la implementación del slot asociado a la acción acercaDe, en la línea 80 indicamos que al dispararse dicha acción se mostrará el conocido diálogo acerca de el cuál contiene información sobre la aplicación como versióno fecha de lanzamiento y sobre la compañia que creo la aplicación.
Finalmente en las líneas 83 a 86 implementamos el slot asociado a la acción salir, en la línea 85 utilizamos la función exit(int codigo) para indicar que deseamos salir de la aplicación, la aplicación devolverá un código el código de error indicado como parámetro. Normalmente un valor de cero indica que la aplicación termino normalmente, es decir, sin ningún error.

main.cpp

Código: C++

#include <QApplication>
#include "ventanaprincipal.h"
 
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    VentanaPrincipal w;
    w.show();
 
    return a.exec();
}

En la línea 1 incluimos el archivo de cabecera de la clase VentanaPrincipal, mientras que en la línea 8 creamos e inicializamos un objeto de dicha clase, y finalmente en la línea 10 mostramos nuestra ventana principal.
Al ejecutar esta aplicación de ejemplo obtendremos algo parecido a lo mostrado en las siguientes imagenes:

Diálogos en Qt. Comunicación con el Usuario.

En esta sección del tutorial hablaremos acerca de los diálogos, pequeñas ventanas secundarias que sirven para comunicarse con el usuario.

Los diálogos son útiles en ocasiones en las que requerimos la confirmación del usuario antes de ejecutar una acción, como al guardar o eliminar un archivo o al salir de una aplicación, también suelen utilizarse para obtener pequeñas cantidades de información, como la palabra a buscar en un diálogo de buscar y reemplazar o el nombre que se desea dar a un marcador/favorito en un navegador web.

Podemos utilizar diálogos de Qt de dos formas distintas, una es creándolos nosotros como lo hemos hecho en otros artículos de este tutorial y la otra es utilizar el API estática de diálogos comúnmente utilizados que nos provee Qt, entre estos diálogos se encuentran los de petición de información al usuario o los de selección de carpetas, archivos, fuentes o colores.

En esta sección del tutorial mostramos dos ejemplos de uso de diálogos. El primero trata sobre diálogos modales y no modales y sobre como obtener el valor de una opción seleccionada por un usuario en un diálogo. En el segundo revisamos lso diálogos estándar que ofrece Qt para obtener valores de tipo específico como números, cadenas de texto, colores, tipos de letra, nombres de archivo, etc.

Diálogos modales y no modales.

En este artículo del tutorial crearemos un ejemplo de diálogos modales y no modales.

Podemos mostrar un diálogo en pantalla con una de las siguientes dos funciones:

Código: C++

void QWidget::show();

Esta función se hereda de QWidget y es equivalente a llamar a la función setVisible con un parámetro booleano con valor de true, mostrar un diálogo a través de esta función es útil si queremos que el usuario pueda continuar interactuando con la ventana que mostró el diálogo, los diálogos que permiten dicha interacción se conocen con el nombre de diálogos no modales.

Código: C++

int QDialog::exec();

Esta función sirve para mostrar un diálogo modal, este es un tipo de diálogos que bloquean el acceso a las demás ventanas de la aplicación. Mostrar un diálogo con la función exec() permite obtener el valor de la respuesta elegida por el usuario.
A continuación mostramos un ejemplo para observar de mejor manera la diferencia entre show y exec.

El ejemplo se compone de los siguientes archivos:

dialogomodal.h
dialogomodal.cpp
widgetprincipal.h
widgetprincipal.cpp
main.cpp

La clase DialogoModal, representa un diálogo personalizado muy simple que sólo muestra una etiqueta en el lugar en dónde se colocarían los widgets en un diálogo de una aplicación real, está clase nos servirá para ver cómo podemos gestionar las respuestas que puede emitir un diálogo modal.

El código de la clase DialogoModal es el siguiente:

NOTA: Sólo explicaremos las líneas relevantes para el ejemplo o que no hayan sido explicadas en artículos anteriores de este tutorial.

dialogomodal.h

Código: C++

#ifndef DIALOGOMODAL_H
#define DIALOGOMODAL_H
 
#include <QDialog>
 
class QLabel;
class QPushButton;
 
class DialogoModal : public QDialog
{
    Q_OBJECT
public:
    explicit DialogoModal(QWidget *parent = 0);
 
private:
    QLabel *nombre;
    QPushButton *botonAceptar;
    QPushButton *botonRechazar;
    QPushButton *botonOtro;
 
private slots:
    void botoonOtroPresionado();
};
 
#endif // DIALOGOMODAL_H

dialogomodal.cpp

Código: C++

#include "dialogomodal.h"
 
#include <QHBoxLayout>
#include <QLabel>
#include <QPushButton>
#include <QVBoxLayout>
 
DialogoModal::DialogoModal(QWidget *parent) :
        QDialog(parent)
{
    QVBoxLayout* layoutPrincipal = new QVBoxLayout;
    QHBoxLayout* layoutBotones = new QHBoxLayout;
 
    nombre = new QLabel(trUtf8("Diálogo Modal"));
    botonAceptar = new QPushButton(trUtf8("Aceptar"));
    botonRechazar = new QPushButton(trUtf8("Rechazar"));
    botonOtro = new QPushButton(trUtf8("Otro"));
 
    nombre->setFont(QFont("Sans-Serif", 15));
 
    layoutBotones->addStretch();
    layoutBotones->addWidget(botonAceptar);
    layoutBotones->addWidget(botonRechazar);
    layoutBotones->addWidget(botonOtro);
 
    layoutPrincipal->addWidget(nombre);
    layoutPrincipal->addLayout(layoutBotones);
 
    setLayout(layoutPrincipal);
 
    connect(botonAceptar, SIGNAL(clicked()), this, SLOT(accept()));
    connect(botonRechazar, SIGNAL(clicked()), this, SLOT(reject()));
    connect(botonOtro, SIGNAL(clicked()), this, SLOT(botonOtroPresionado()));
}
 
void DialogoModal::botonOtroPresionado() {
    done(42);
}

Starfield: el juego que revolucionará el espacio y la tecnología

Temas - Expermicid

Visual Basic / [VB6] CommandLine Bit [Videotutorial] [By Expermicid]

Visual Basic / [VB6] Creador de Variables [Videotutorial] [By Expermicid]

Otros / Curso Assembler + IDE RadASM RvlCN

Visual Basic / [VB6] Como hacer un Encryptador de String Basico [By Expermicid]

Visual Basic / [VB6] Como hacer un Editor Hexa Basico [By Expermicid]

Visual Basic / [VB6] Igualador de Offset [By Expermicid]

Visual Basic / [VB6] Compilador de Proyectos [By Expermicid]

Java y Android / Utilizando Socket en Java

C / C++ / GetOS en C++

C / C++ / MultiThread C/C++

Python / [Python] Descargando Archivos

C / C++ / Inicio Rápido con Qt 4

Python / Keylogger v1.1 [By Expermicid]

Investigación de Malware / [JAVA] Downloader [By Expermicid]

Java y Android / [JAVA] Capturador de Pantalla remoto [By Expermicid]