Curso de creación de GUIs con Qt. Capítulo 10: Introducción a Designer

En el mundo Qt tenemos una herramienta RAD (Rapid Application Development). Esta herramienta se llama Qt Designer y nos permite crear prototipos de nuestras aplicaciones de forma rápida y visual. En este capítulo voy a ver un poco lo que es Qt Designer y vamos a ver las diferentes partes de la herramienta.

Índice:

[Los materiales para este capítulo los podéis descargar de aquí]

[INSTALACIÓN] Si todavía no has pasado por el inicio del curso, donde explico cómo poner a punto todo, ahora es un buen momento para hacerlo y después podrás seguir con este nuevo capítulo.

¿Qué es Qt Designer?

Traduciendo de la documentación oficial:

Qt Designer es la herramienta Qt para diseñar y crear interfaces gráficas de usuario (graphical user interfaces, GUIs) con Widgets Qt. Puedes integrar y personalizar tus ventanas y diálogos usando la forma lo-que-ves-es-lo-que-obtienes (what-you-see-is-what-you-get, WYSIWYG) y, además, las puedes probar usando diferentes estilos y resoluciones.

La verdad que el manual oficial de Designer está muy bien. Lo único que va a aportar esto que estoy haciendo aquí es que lo vamos a hacer en español y de forma más visual.

Normalmente, Designer debería estar disponible en tu equipo si seguiste las instrucciones del capítulo 00 donde instalábamos las cosas. Para poder empezar a usarlo, lo siguiente debería ser suficiente. Primero escribimos (siempre desde una línea de comandos/cmd/shell/…):

Para activar el entorno virtual que venimos utilizando desde el principio del curso. Luego, desde la misma línea de comandos/cdm/shell/… escribimos:

Y se debería abrir una nueva ventana (ver ejemplo debajo).

Si no os ha funcionado lo anterior, por favor, usad los comentarios e intentaré resolver el problema.

La ventana que se os debe haber abierto, si habéis usado los dos comandos anteriores que os he indicado, es la interfaz de Qt Designer.

Pongo un vídeo en el que comento las diferentes partes o secciones que podemos ver en la pantalla. Tú puedes toquetear tu propia ventana de Qt Designer:

Transcripción del vídeo a continuación:

Cuando abrimos designer, el GUI se inicia con una ventanita o diálogo que nos permite seleccionar el tipo de ventana que queremos crear. Lo que tenemos aquí son plantillas y podemos elegir entre varias. Por ejemplo, tenemos un diálogo con botones en la parte inferior, un diálogo con botones en la parte derecha, un diálogo sin botones, un widget, que es la base de todos los widgets, y nos puede servir de base para crear nuestros propios widgets. Si extendéis el siguiente panel tenéis una serie de widgets que pueden servir de base para crear otras cosas. Podríamos elegir, por ejemplo, un Wizard, que nos podría servir de base para crear un asistente de instalación,…

Vamos a crear ahora un QMainWindow. Cuando usamos Designer es para diseñar cosas algo complejas y lo más complejo suele ser la ventana principal de una aplicación. Esta ventana principal suele tener barra de menús, barra de estado y una parte central donde pasa la acción. Hablé sobre los tipos de ventana en el capítulo 05.

Cuando hemos seleccionado la plantilla con la que vamos a trabajar accedemos a lo que es, propiamente, Designer.
-Dentro de Designer tenemos nuestra barra de menús,
-nuestra barra de estado,
-tenemos también una barra con herramientas o ToolBox. El creador de la aplicación suele poner aquí, normalmente, los comandos que considera más útiles para que tengamos un acceso más rápido a los mismos.
-A la izquierda de la ventana tenemos el WidgetBox o caja de Widgets donde podemos ver un montón de Widgets organizados por funcionalidad. En otro vídeo entraremos más en detalle sobre esto.
-A la derecha de la ventana se agrupan varias cosas, en la parte de arriba tenemos el inspector de objetos. Cada Widget que agregamos a la ventana aparece en un árbol donde podemos ver que hay cierta jerarquía con padres e hijos, es decir, si un Widget está dentro de otro. Ya sabéis, lo que he ido comentando a lo largo del curso, nuestras piezas de lego. Por ejemplo, si quito el MenuBar tendré un widget menos. Lo mismo puedo hacer con el Status Bar.
-Debajo tenemos las propiedades del Widget que hayamos seleccionado, dependiendo del Widget seleccionado se verán unas propiedades u otras ya que cada tipo de Widget sirve para unas cosas u otras.
-Más abajo, también a la derecha, podemos ver el navegador de recursos. Una ventana permite tener recursos asociados, por ejemplo, iconos usados en la ventana, ficheros de traducción del GUI,… Aquí es dónde los podríamos añadir y usar.
-También, abajo a la derecha tenemos el editor de acciones. Hablamos de las acciones cuando vimos el menú principal en el capítulo 07.
-Finalmente, también en la parte de abajo a la derecha, tenemos una tercera opción, el editor de señales y Slots. Hablé sobre ello en el capítulo 09.
-Y, por supuesto, tenemos la zona central que es donde está nuestro lienzo, nuestra plantilla, que es con la que vamos a trabajar en todo momento.

En este primer vídeo hemos visto las distintas partes de Designer. En el próximo capítulo entraremos más en detalle en cómo empezar a usar Designer y en como usar más en detalle cada una de las partes de Designer que hemos comentado en este capítulo.

Deja una respuesta

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

+ 78 = eighty six