Tutorial: Interfaz gráfica con wxWidgets, Code Blocks y wxSmith [C++]

By | 14 febrero, 2019

wxWidgets

¡Saludos! En este curso/tutorial en español aprenderás a crear una interfaz gráfica de usuario (GUI) en C++ por medio de la biblioteca de programación wxWidgets. Para diseñar la interfaz y manejar el código, vamos a utilizar Code Blocks, que es un entorno de desarrollo compatible con varios lenguajes de programación, entre ellos el C++.

Tanto Code Blocks como wxWidgets son herramientas completamente gratuitas y open-source (de código abierto) que se pueden conseguir fácilmente en la web, pero aquí explicaré también cómo descargarlas e instalarlas.

¿Qué es wxWidgets?

Es una librería de programación que nos permite crear interfaces gráficas por medio de C++ y otros lenguajes.

Una interfaz gráfica es un programa informático que se compone de una ventana con botones, imágenes y textos. A diferencia de los programas que funcionan por medio de líneas de comandos (command line, en inglés), las interfaces gráficas proveen un entorno visual que se pueden manejar por medio del mouse, en la computadora.

Algunos ejemplos de programas creados con esta librería son: Audacity, GDevelop, y el conocido emulador de GameCube y Wii: Dolphin (hasta la versión 5.0-8279).

¿Qué es wxSmith?

Es una herramienta tipo RAD (Rapid-Application Development) que se incluye adentro del programa Code Blocks, el cual nos va a permitir diseñar la interfaz para nuestro programa utilizando solamente el mouse.

Cuando agreguemos un componente a la interfaz, wxSmith modifica el código del programa automáticamente, sin la necesidad de escribirlo de forma manual. No obstante, para que la interfaz realice las acciones que queremos, tenemos que escribir el código nosotros mismos.

1. Instalación

Antes de comenzar con el tutorial, tenemos que descargar e instalar todo lo necesario. He hecho pasos para instalar las herramientas tanto en Windows como en Linux.

Windows

En Windows, primero descargamos el programa Code Blocks con el compilador MinGW incluido:

Descargar

Luego proseguimos con la descarga de las fuentes de wxWidgets:

Descargar

Cuando las descargas finalicen, abrimos el instalador de Code Blocks y dejamos que el programa se instale en nuestro sistema. Solo pulsamos “Next” hasta que termine la instalación.

Lo mismo haremos con el instalador de wxWidgets. Abrimos el programa y pulsamos “Next” hasta que termine de instalarse.

Cuando finalice, ahora vamos a ver cómo compilar las fuentes de wxWidgets para tenerlas listas y empezar a desarrollar una interfaz gráfica en Code Blocks. Mira el siguiente enlace para ver los pasos de cómo compilar wxWidgets en Windows:

Tutorial: Cómo compilar wxWidgets en Windows

No obstante, es probable que en un futuro ponga la descarga de wxWidgets sin la necesidad de compilarlo, pero por el momento vamos a requerir este paso.

Linux

En Linux, primero abrimos la terminal e introducimos una de las siguientes líneas de comando, de acuerdo a la distribución que uses.

Para Ubuntu y Debian:

sudo apt-get install g++ libwxgtk3.0-dev codeblocks codeblocks-contrib

Para Arch Linux:

sudo pacman -S gcc wxgtk2 codeblocks

Con esto tendremos todo lo necesario para empezar a programar con wxWidgets en Code Blocks.

2. Lecciones

Este tutorial está dividido en diferentes “lecciones”. Recomiendo seguir en orden cada una de estas partes para evitar confusiones.

  1. Primera interfaz: Aplicación de prueba
  2. Usar sizers para mejorar la portabilidad del programa
  3. Leer un archivo de texto

Más adelante se agregarán nuevas lecciones. Para cualquier sugerencia o tip, puedes enviar un mensaje en el artículo o contactarme.

2 thoughts on “Tutorial: Interfaz gráfica con wxWidgets, Code Blocks y wxSmith [C++]

  1. Pingback: Aplicación de prueba con wxWidgets, Code Blocks y wxSmith – EliasMaker

  2. Pingback: Tutorial: Compilar wxWidgets en Windows con MinGW – EliasMaker

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *