En C++, la programación de la interfaz gráfica de usuario (GUI) es importante en el desarrollo de aplicaciones modernas donde los usuarios tienen buenos gráficos con los que trabajar. Aunque C++ suele estar relacionado con la programación de sistemas y la escritura de juegos, puede ser una excelente alternativa a la escritura de GUI. En este artículo, analizaremos la programación de GUI en C++, algunas bibliotecas de GUI populares para C++ y cómo crear una aplicación GUI básica en C++.
Requisitos previos: Fundamentos de C++, programación orientada a objetos de C++, alguna biblioteca GUI.
¿Qué es la GUI (interfaz gráfica de usuario)?
La interfaz gráfica de usuario (GUI) es una interfaz de aplicación visual que se proporciona mediante gráficos como ventanas, cuadros de texto y botones a través de los cuales los usuarios pueden comunicarse con el software. GUI ofrece una plataforma interactiva y fácil de usar en comparación con la interfaz de línea de comandos (CLI), ya que los usuarios pueden usar el mouse u otros dispositivos de entrada, como una pantalla táctil, etc., sin depender únicamente del teclado.
Conceptos principales de programación GUI
Una interfaz gráfica de usuario (GUI) implica el diseño de ventanas, cuadros de diálogo, botones, etc., que son todos componentes interactivos de la interfaz de usuario. Luego controlamos estos widgets usando controladores de eventos como onClick, onHover, etc.
Los conceptos principales de la programación GUI son:
widgets
Una interfaz gráfica de usuario (GUI) se compone de widgets. Por ejemplo, estos incluyen botones, cuadros de texto, etiquetas, etc. Las propiedades y comportamientos de cada widget se pueden personalizar de acuerdo con las necesidades específicas de una aplicación. Generalmente existen los siguientes widgets en una biblioteca GUI:
- Ventana: Un marco de ventana de nivel superior que alberga otros widgets dentro de sí mismo.
- Botón: Un botón en el que se puede hacer clic y que tiene algún evento asociado con su clic.
- Etiqueta: Texto simple de solo lectura
- Caja : Cuadro que proporciona las opciones para activar o desactivar.
- Boton de radio: Cuadro que brinda las opciones de estar activado o desactivado, pero solo podemos elegir un botón de opción en un grupo.
- Cuadro desplegable/combinado : Abre un menú desplegable al hacer clic. Sólo se puede mostrar un elemento en el formulario no abierto.
- Caja de texto: Área de texto editable.
- Cuadro de lista: El cuadro con varios elementos y una barra de desplazamiento para revisarlos todos.
- Control deslizante: Un widget de navegación utilizado para moverse por la aplicación.
- Menú: El menú que se muestra en la parte superior ofrece diferentes opciones al usuario de la aplicación.
- Caja de diálogo: Un cuadro que se muestra en la parte superior de una ventana. A veces para mostrar la notificación.
- Red: Se utiliza para la gestión del diseño de la interfaz de usuario.
Gestión de diseño
Las aplicaciones GUI deben optimizarse para varias pantallas de diferentes tamaños, resoluciones, etc., lo que busca mantener una interfaz de usuario atractiva pero eficaz con los distintos widgets organizados en la pantalla.
Manejo de eventos
En la programación de GUI, eventos como hacer clic en botones o presionar teclas son críticos. Estos eventos son manejados por la aplicación para que pueda seguir las acciones del usuario. Hay diferentes eventos asociados con diferentes widgets. Por ejemplo, para un botón en el que se puede hacer clic, los eventos asociados son:
- Haga clic en evento
- Evento de movimiento del mouse
- Centrarse en el evento
- Evento de enfoque
Bibliotecas GUI populares para C++
C++ tiene muchas bibliotecas GUI independientes de la plataforma que se pueden usar para desarrollar una aplicación GUI. Algunos de los populares son:
- gtkmm
- cuarto
- wxWidgets
- Estimado ImuGui
Ejemplo de aplicación GUI de C++
Usaremos las siguientes herramientas para los siguientes programas:
- Biblioteca Qt : La biblioteca GUI de nuestro programa.
- Diseñador Qt: Un diseñador de plantillas GUI interactivas para Qt.
- Creador de Qt: IDE para aplicaciones Qt GUI
Ahora veremos casos reales de programación GUI con C++ y Qt. Vamos a desarrollar una aplicación básica de Hola Mundo con un botón y cuando se hace clic en el botón, aparecerá un cuadro de diálogo con el texto de Hola Mundo escrito en él. Lo implementaremos siguiendo estos pasos:
Paso 1: crear un proyecto Qt
Abriremos Qt Creator y crearemos un nuevo proyecto de tipo Qt Widget Application. Ingrese el nombre, seleccione la ubicación y listo. El creador de Qt creará el proyecto con todos los archivos necesarios.
Paso 2: Diseñar la ventana
Luego abriremos el archivo. ventana principal.ui . Este archivo contiene la interfaz de usuario de la aplicación. Agregaremos una etiqueta de texto usando el diseñador que acaba de abrir.
10 ml a onzas
Ahora nuestros archivos contendrán el siguiente código:
ventana principal.h
C++
#ifndef MAINWINDOW_H> #define MAINWINDOW_H> > #include> > QT_BEGIN_NAMESPACE> namespace> Ui {>class> MainWindow; }> QT_END_NAMESPACE> > class> MainWindow :>public> QMainWindow> {> >Q_OBJECT> > public>:> >MainWindow(QWidget *parent = nullptr);> >~MainWindow();> > private>:> >Ui::MainWindow *ui;> };> #endif // MAINWINDOW_H> |
>
>
principal.cpp
C++
#include 'mainwindow.h'> > #include> > int> main(>int> argc,>char> *argv[])> {> >QApplication a(argc, argv);> >MainWindow w;> >w.show();> >return> a.exec();> }> |
>
>
ventana principal.cpp
C++
#include 'mainwindow.h'> #include './ui_mainwindow.h'> > MainWindow::MainWindow(QWidget *parent)> >: QMainWindow(parent)> >, ui(>new> Ui::MainWindow)> {> >ui->configuraciónUi(>this>);> }> > MainWindow::~MainWindow()> {> >delete> ui;> }> |
>
>
ventana principal.ui
XML
xml version='1.0' encoding='UTF-8'?> |
>
>
Observe que mainWindow.ui está escrito en XML. Esto se debe a que Qt escribe sus archivos UI en XML.
Paso 4: construir y ejecutar
Podemos construir y ejecutar el proyecto Qt en Qt Creator con un solo clic.
Producción
Ventajas de las aplicaciones GUI
Las aplicaciones GUI ofrecen varias ventajas, lo que contribuye a una mejor experiencia de usuario y un desarrollo optimizado:
- Interfaz amigable: El uso de interfaces gráficas de usuario (GUI) proporciona un enfoque simple y fácil de usar para las aplicaciones de software en comparación con otros enfoques que llevarían más tiempo.
- Interactividad mejorada: Abarca funciones interactivas como botones, menús desplegables, casillas de verificación y controles deslizantes que brindan a los usuarios poder sobre sus experiencias.
- Compatibilidad multiplataforma: Los lenguajes como Qt permiten la creación de aplicaciones GUI para Windows, macOS, Linux con C++.
- Creación rápida de prototipos: La presencia de muchos creadores de GUI y herramientas de diseño en los marcos de GUI promueve la creación rápida de prototipos de interfaces, lo que agiliza todo el proceso de desarrollo.