Módulo 2: Tu Primera Interfaz

Conociendo la interfaz de Qt Designer y creando tu primer diseño completo

---

Objetivos de Aprendizaje

Al finalizar este módulo serás capaz de:

Identificar y usar cada panel de Qt Designer con confianza
Elegir el tipo de ventana correcto para cada proyecto
Navegar entre los diferentes modos de edición
Crear tu primera interfaz funcional con múltiples widgets
Guardar y abrir archivos .ui correctamente
Entender la jerarquía de objetos en el Object Inspector

---

2.1 Tour Completo por la Interfaz de Qt Designer

Cuando abres Qt Designer y creas un nuevo formulario, la ventana se divide en varias secciones. Cada una tiene una función específica, igual que los paneles de Photoshop o Illustrator.

Vista General de la Interfaz

┌─────────────────────────────────────────────────────────────────────┐
│  Menú Principal  │  Toolbar (barra de herramientas)                 │
├──────────────────┬──────────────────────────────────┬───────────────┤
│                  │                                  │  Object       │
│  WIDGET BOX      │                                  │  Inspector    │
│  (Caja de        │         ÁREA DE TRABAJO          ├───────────────┤
│   Widgets)       │         (Form/Canvas)            │  Property     │
│                  │                                  │  Editor       │
│  - Spacers       │     [Aquí arrastras y sueltas    │               │
│  - Buttons       │      los widgets para construir  │  (Propiedades │
│  - Display       │      tu interfaz)                │   del widget  │
│  - Input         │                                  │   seleccionado│
│  - Containers    │                                  │               │
│  - Item Widgets  │                                  │               │
├──────────────────┴──────────────────────────────────┴───────────────┤
│  Signals & Slots Editor │  Action Editor │  Resource Browser        │
└─────────────────────────────────────────────────────────────────────┘

📸 [PLACEHOLDER PARA IMAGEN]: Captura de pantalla completa de la interfaz de Qt Designer con anotaciones numeradas señalando cada panel.

---

2.2 Widget Box — Tu Caja de Herramientas

El Widget Box está en el panel izquierdo y contiene todos los elementos disponibles organizados en categorías.

Categorías del Widget Box

Spacers (Espaciadores)

Widgets invisibles que crean espacio flexible entre otros widgets.

Widget	Descripción	Analogía
--------	-------------	----------
Horizontal Spacer	Espacio flexible horizontal	El "aire" entre elementos en un layout horizontal
Vertical Spacer	Espacio flexible vertical	El "aire" entre elementos en un layout vertical

🎨 ANALOGÍA DEL DISEÑO

Los Spacers son como el espacio en blanco (white space) en diseño gráfico. No son elementos visibles, pero dan respiro y organización visual a tu composición.

Buttons (Botones)

Elementos clicables que el usuario usa para realizar acciones.

Widget	Descripción	Uso típico
--------	-------------	------------
Push Button	Botón clásico rectangular	"Guardar", "Enviar", "Cancelar"
Tool Button	Botón con icono (sin texto obligatorio)	Botones de iconos en toolbars
Radio Button	Selección única (círculo)	"Masculino / Femenino / Otro"
Check Box	Casilla de verificación (múltiple)	"Acepto los términos"
Command Link Button	Botón estilo Windows Vista con título + descripción	Asistentes y wizards
Dialog Button Box	Conjunto predefinido de botones (OK, Cancel, etc.)	Botones estándar de diálogos
Button Box	Grupo de botones con roles definidos	Botones de acción en formularios

Display Widgets (Visualización)

Elementos que muestran información al usuario.

Widget	Descripción	Uso típico
--------	-------------	------------
Label	Texto o imagen estática	Títulos, descripciones, logos
Text Browser	Texto con formato y links	Ayuda, documentación
Graphics View	Área de dibujo 2D interactiva	Diagramas, visualizaciones
Calendar Widget	Calendario interactivo	Selección de fechas
LCD Number	Display de números estilo digital	Contadores, timers
Progress Bar	Barra de progreso	Indicador de avance
Horizontal Line	Línea horizontal decorativa	Separador visual
Vertical Line	Línea vertical decorativa	Separador visual

Input Widgets (Entrada de datos)

Elementos donde el usuario introduce información.

Widget	Descripción	Uso típico
--------	-------------	------------
Combo Box	Lista desplegable	Seleccionar país, categoría
Font Combo Box	Combo box de fuentes	Seleccionar tipografía
Line Edit	Campo de texto de una línea	Nombre, email, contraseña
Text Edit	Editor de texto multilínea con formato	Descripción larga
Plain Text Edit	Editor de texto multilínea sin formato	Notas, código
Spin Box	Selector numérico entero	Cantidad, edad
Double Spin Box	Selector numérico decimal	Precio, peso
Time Edit	Selector de hora	Programar cita
Date Edit	Selector de fecha	Fecha de nacimiento
Date/Time Edit	Selector de fecha y hora	Programar evento
Dial	Control giratorio tipo perilla	Volumen, brillo
Horizontal Slider	Deslizador horizontal	Volumen, zoom
Vertical Slider	Deslizador vertical	Ecualizador
Key Sequence Edit	Captura de atajos de teclado	Configurar shortcuts

Containers (Contenedores)

Widgets que pueden contener otros widgets dentro.

Widget	Descripción	Uso típico
--------	-------------	------------
Group Box	Marco con título	Agrupar campos relacionados
Scroll Area	Área con barras de desplazamiento	Contenido que excede la ventana
Tool Box	Contenedor tipo acordeón	Paneles colapsables
Tab Widget	Contenedor con pestañas	Configuración por categorías
Stacked Widget	Páginas apiladas (una visible)	Wizards, navegación
Frame	Contenedor con borde decorativo	Tarjetas, secciones
Widget	Contenedor básico invisible	Agrupar elementos
MdiArea	Área de múltiples documentos	Múltiples ventanas internas
Dock Widget	Panel acoplable/flotante	Paneles laterales tipo Photoshop
QAxWidget	Control ActiveX (Windows)	Integración con COM
QWebEngineView	Navegador web embebido	Mostrar páginas web

Item Widgets (Listas y Tablas)

Widgets para mostrar colecciones de datos.

Widget	Descripción	Uso típico
--------	-------------	------------
List Widget	Lista de elementos	Lista de canciones, archivos
Tree Widget	Árbol jerárquico	Explorador de archivos
Table Widget	Tabla de filas y columnas	Hoja de cálculo, inventario

Cómo usar el Widget Box

Buscar: Usa la barra de búsqueda en la parte superior del Widget Box
Arrastrar: Haz clic en un widget y arrástralo al área de trabajo
Categorías: Haz clic en los nombres de categoría para expandir/colapsar

💡 CONSEJO: Si no encuentras un widget, usa la barra de búsqueda del Widget Box. Escribe el nombre o parte del nombre y se filtrarán los resultados.

---

2.3 Object Inspector — Tu Panel de Capas

El Object Inspector muestra la jerarquía de todos los widgets en tu diseño, similar al panel de Capas de Photoshop.

Estructura del Object Inspector

Dialog
  ├── groupBox_datos
  │     ├── label_nombre
  │     ├── lineEdit_nombre
  │     ├── label_email
  │     └── lineEdit_email
  ├── pushButton_guardar
  └── pushButton_cancelar

Qué puedes hacer en el Object Inspector

Acción	Cómo hacerlo
--------	-------------
Seleccionar un widget	Haz clic en su nombre
Renombrar un widget	Haz clic derecho > Rename
Ver la jerarquía	Los widgets hijos aparecen indentados debajo del padre
Eliminar un widget	Haz clic derecho > Delete
Reorganizar	Arrastra widgets dentro del árbol (con cuidado)

🎨 ANALOGÍA DEL DISEÑO

El Object Inspector es exactamente como el panel de Capas de Photoshop. Cada widget es una "capa" y la indentación muestra qué está dentro de qué. Si un widget está dentro de un Group Box, aparecerá indentado debajo de él, igual que una capa dentro de un grupo en Photoshop.

Importancia de nombrar bien los widgets

Desde el primer momento, acostúmbrate a renombrar tus widgets con nombres descriptivos:

Mal nombre	Buen nombre	Por qué
------------	-------------	---------
`label`	`titulo_label`	Se entiende qué muestra
`pushButton`	`guardar_btn`	Se entiende qué hace
`lineEdit`	`email_input`	Se entiende qué contiene
`groupBox`	`datos_personales_group`	Se entiende qué agrupa

💡 CONSEJO: Usa la convención: nombre_funcional_tipo. Ejemplo: nombre_input, guardar_btn, titulo_label, datos_group.

---

2.4 Property Editor — Tu Centro de Control

El Property Editor es el panel más importante. Muestra todas las propiedades del widget seleccionado, organizadas en secciones colapsables.

Secciones del Property Editor

QObject

Propiedad	Descripción	Ejemplo
-----------	-------------	---------
objectName	Nombre interno único del widget	`nombre_input`

QWidget

Propiedad	Descripción	Ejemplo
-----------	-------------	---------
enabled	Si el widget está activo o desactivado	`true` / `false`
geometry	Posición y tamaño (x, y, ancho, alto)	`0, 0, 400, 300`
sizePolicy	Cómo se comporta al redimensionar	`Preferred`, `Expanding`, `Fixed`
minimumSize	Tamaño mínimo absoluto	`100, 30`
maximumSize	Tamaño máximo absoluto	`16777215, 16777215` (sin límite)
font	Tipografía, tamaño, peso, estilo	`Segoe UI, 12pt, Bold`
cursor	Forma del cursor al pasar el mouse	`PointingHandCursor`
toolTip	Texto emergente al pasar el mouse	"Haz clic para guardar"
styleSheet	CSS personalizado para el widget	`background-color: #1a1a2e;`
windowTitle	Título de la ventana	"Mi Aplicación"
windowIcon	Icono de la ventana	`:/iconos/logo.png`

Propiedades Específicas del Widget

Cada tipo de widget tiene propiedades adicionales. Por ejemplo:

Para Label:

Propiedad	Descripción
-----------	-------------
text	El texto que muestra
pixmap	Imagen que muestra
scaledContents	Si la imagen se escala al tamaño del Label
alignment	Alineación del texto (izquierda, centro, derecha)
wordWrap	Si el texto se ajusta en varias líneas

Para Push Button:

Propiedad	Descripción
-----------	-------------
text	Texto del botón
icon	Icono del botón
iconSize	Tamaño del icono
default	Si es el botón por defecto (se activa con Enter)
flat	Si el botón aparece sin borde elevado

Para Line Edit:

Propiedad	Descripción
-----------	-------------
text	El contenido actual
placeholderText	Texto gris que aparece cuando está vacío
maxLength	Máximo número de caracteres
readOnly	Si solo se puede leer (no editar)
echoMode	Cómo se muestra el texto (Normal, Password, NoEcho)

💡 CONSEJO: Explora las propiedades de cada widget seleccionándolo y mirando el Property Editor. Es la mejor forma de aprender qué puede hacer cada elemento.

---

2.5 Tipos de Ventana (Templates) en Detalle

Al crear un nuevo archivo (Ctrl+N), Qt Designer te muestra el diálogo "New Form" con estas opciones:

Dialog with Buttons Bottom

Una ventana de diálogo con botones OK y Cancel ya colocados en la parte inferior.

Cuándo usarlo:

Formularios de configuración rápida
Diálogos de confirmación
Ventanas modales simples

Estructura predefinida:

┌──────────────────────────────┐
│                              │
│     [Tu contenido aquí]      │
│                              │
│              [OK] [Cancel]   │
└──────────────────────────────┘

Dialog without Buttons

Una ventana de diálogo completamente en blanco.

Cuándo usarlo:

Diseños personalizados desde cero
Cuando necesitas control total de la disposición
Recomendado para principiantes (menos distracciones)

Estructura:

┌──────────────────────────────┐
│                              │
│     [Lienzo en blanco]       │
│                              │
│                              │
└──────────────────────────────┘

Dialog with Buttons Right

Similar al primero pero con los botones a la derecha.

Cuándo usarlo:

Asistentes paso a paso (wizards)
Formularios donde los botones no deben estar abajo

Main Window

La ventana principal completa de una aplicación.

Cuándo usarlo:

Aplicaciones completas con menú, toolbar y barra de estado
Programas tipo editor de texto, gestor de archivos, etc.

Estructura:

┌─────────────────────────────────────────────────┐
│  [MenuBar] Archivo  Edición  Ver  Ayuda          │
├─────────────────────────────────────────────────┤
│  [Toolbar] 📁 📂 💾 ✏️ 📋 📎                     │
├─────────────────────────────────────────────────┤
│  [Dock]    │                                    │ [Dock]   │
│  Panel     │     Área Central                   │ Panel    │
│  Izquierdo │     (Tab Widget, etc.)             │ Derecho  │
│            │                                    │          │
├─────────────────────────────────────────────────┤
│  [StatusBar]  Listo                              │
└─────────────────────────────────────────────────┘

Widget

Un componente reutilizable sin ventana propia.

Cuándo usarlo:

Crear componentes que se insertarán dentro de otra ventana
Diseñar una sección específica de una interfaz más grande

---

2.6 Modos de Edición

Qt Designer tiene varios modos de edición que cambian cómo interactúas con los widgets.

Modo Edición de Widgets (F3) — Modo Normal

Es el modo por defecto. Puedes:

Seleccionar widgets haciendo clic
Arrastrar widgets desde el Widget Box
Mover widgets en el área de trabajo
Redimensionar widgets arrastrando sus bordes
Acceder al Property Editor

Modo Edición de Signals/Slots (F4)

Permite crear conexiones visuales entre widgets.

Haz clic en un widget y arrastra hacia otro
Aparece un diálogo para seleccionar signal y slot
Las conexiones se muestran como líneas rojas entre widgets

💡 CONSEJO: Presiona F3 para volver al modo normal y F4 para entrar al modo de Signals/Slots.

Modo Edición de Buddies

Permite asociar Labels con campos de entrada para accesibilidad.

Arrastra desde un Label hacia un campo de entrada
Cuando el usuario presione Alt + la letra subrayada del Label, el foco irá al campo asociado

---

2.7 Barra de Herramientas (Toolbar)

La toolbar en la parte superior tiene botones para las acciones más comunes:

Botón	Función	Atajo
-------	---------	-------
📄 New	Nuevo formulario	`Ctrl+N`
📂 Open	Abrir archivo	`Ctrl+O`
💾 Save	Guardar archivo	`Ctrl+S`
✏️ Edit Widgets	Modo edición normal	`F3`
🔗 Edit Signals/Slots	Modo signals/slots	`F4`
🤝 Edit Buddies	Modo buddies	—
📐 Edit Tab Order	Orden de tabulación	—
↕️ Lay Out Vertically	Layout vertical	`Ctrl+L`
↔️ Lay Out Horizontally	Layout horizontal	`Ctrl+H`
⊞ Lay Out in a Grid	Layout en grid	`Ctrl+J`
🔄 Lay Out Form Layout	Layout de formulario	—
⬜ Break Layout	Romper layout	—
↗️ Adjust Size	Ajustar al tamaño ideal	—

---

2.8 Menú Principal

Menú	Opciones principales
------	---------------------
Archivo	Nuevo, Abrir, Guardar, Guardar como, Cerrar, Salir
Editar	Deshacer, Rehacer, Cortar, Copiar, Pegar, Seleccionar todo
Formulario	Vista previa, Vista previa en..., Guardar vista previa
Editar	Edit Actions, Edit Resources, Edit Signals/Slots
Herramientas	Configuración de Qt Designer
Ayuda	Acerca de Qt Designer, Acerca de los plugins

---

2.9 Vista Previa

Una de las funciones más útiles de Qt Designer es la vista previa, que te permite ver cómo se verá tu interfaz como una ventana real.

Cómo ver la vista previa:

Ve a Formulario > Vista previa o presiona Ctrl+R
Se abrirá una ventana real con tu diseño
Puedes interactuar con los widgets (escribir en campos, hacer clic en botones, etc.)
Cierra la ventana de vista previa para volver a editar

💡 CONSEJO: Usa la vista previa frecuentemente mientras diseñas. Es la mejor forma de verificar que todo se ve como esperas.

---

Ejercicio Práctico del Módulo

🏋️ EJERCICIO 2: Mi Primera UI Completa

Objetivo: Crear tu primera interfaz funcional con múltiples widgets y estilos.

Pasos:

1. Abre Qt Designer y crea un Dialog without Buttons

2. Cambia el título de la ventana a "Mi Primera Interfaz" (propiedad windowTitle)

3. Cambia el tamaño de la ventana a 400x300 píxeles (propiedad geometry)

4. Agrega un Label con tu nombre como texto

5. Cambia la fuente del Label a 24pt, negrita

6. Cambia el color del texto del Label a verde (#41CD52) usando styleSheet

7. Agrega un Label debajo con el texto "Diseñador Gráfico" (fuente 14pt, color gris)

8. Agrega un Line Edit con placeholder "Escribe tu especialidad..."

9. Agrega un Combo Box con las opciones: "Branding", "Web", "Editorial", "Ilustración"

10. Agrega un Check Box con texto "Disponible para proyectos"

11. Agrega un Push Button con texto "Guardar Perfil"

12. Agrega un Push Button con texto "Cancelar"

13. Cambia el color de fondo del Dialog a oscuro (#1a1a2e) usando styleSheet

14. Renombra todos los widgets con nombres descriptivos

15. Guarda como mi_primera_ui_completa.ui

16. Presiona Ctrl+R para ver la vista previa

Resultado esperado: Una ventana oscura con tu nombre en grande, campos de entrada y botones estilizados.

---

Recursos Adicionales

Recurso	Descripción
---------	-------------
[Qt Designer Manual](https://doc.qt.io/qt-6/qtdesigner-manual.html)	Documentación oficial completa
[Qt Widgets Gallery](https://doc.qt.io/qt-6/gallery.html)	Galería visual de todos los widgets
[Qt Style Sheets Reference](https://doc.qt.io/qt-6/stylesheet-reference.html)	Referencia completa de QSS

---

Evaluación de Comprensión

¿Cuáles son los 5 paneles principales de Qt Designer y qué función tiene cada uno?
¿Qué tipo de ventana usarías para crear la ventana principal de una aplicación con menú y toolbar?
¿Cómo renombras un widget en Qt Designer?
¿Qué propiedad usarías para cambiar el texto que aparece como sugerencia en un campo vacío?
¿Qué atajo de teclado usas para ver la vista previa de tu diseño?
¿Cuál es la diferencia entre el modo F3 y el modo F4?
¿Qué convención de nombres se recomienda para los widgets?
¿Qué sección del Property Editor contiene la propiedad objectName?

---

Módulo anterior: ← [Módulo 1: Bienvenida](00-introduccion.md)

Siguiente módulo: → [Módulo 3: Widgets Básicos](02-widgets-basicos.md)

📝 Evaluación de Comprensión

Escribe tus respuestas y luego presiona el botón para comparar con las respuestas correctas.

1. ¿Cuáles son los 5 paneles principales de Qt Designer y qué función tiene cada uno?

✅ Respuesta Correcta

1) Widget Box: contiene todos los elementos disponibles organizados por categorías. 2) Object Inspector: muestra la jerarquía de widgets como el panel de Capas de Photoshop. 3) Property Editor: muestra todas las propiedades del widget seleccionado. 4) Resource Browser: gestiona imágenes, iconos y archivos. 5) Área de Trabajo (Form/Canvas): lienzo principal donde se arrastran y sueltan widgets.

2. ¿Qué tipo de ventana usarías para crear la ventana principal de una aplicación con menú y toolbar?

✅ Respuesta Correcta

Main Window, porque incluye Menu Bar, Toolbar, Central Widget, Dock Widgets y Status Bar.

3. ¿Cómo renombras un widget en Qt Designer?

✅ Respuesta Correcta

Haciendo clic derecho en el widget en el Object Inspector y seleccionando 'Rename', o seleccionando el widget y cambiando la propiedad 'objectName' en el Property Editor.

4. ¿Qué propiedad usarías para cambiar el texto que aparece como sugerencia en un campo vacío?

✅ Respuesta Correcta

La propiedad 'placeholderText' del Line Edit.

5. ¿Qué atajo de teclado usas para ver la vista previa de tu diseño?

✅ Respuesta Correcta

Ctrl+R

6. ¿Cuál es la diferencia entre el modo F3 y el modo F4?

✅ Respuesta Correcta

F3 es el modo de edición normal de widgets (seleccionar, mover, redimensionar). F4 es el modo de edición de Signals/Slots que permite crear conexiones visuales entre widgets arrastrando de uno a otro.

7. ¿Qué convención de nombres se recomienda para los widgets?

✅ Respuesta Correcta

nombre_funcional_tipo, por ejemplo: nombre_input, guardar_btn, titulo_label, datos_group.

8. ¿Qué sección del Property Editor contiene la propiedad objectName?

✅ Respuesta Correcta

La sección QObject.

Módulo 2: Tu Primera Interfaz

---

Objetivo

Crear tu primera interfaz funcional con múltiples widgets y estilos básicos.

---

Instrucciones

Abre Qt Designer: pyside6-designer
Selecciona "Dialog without Buttons" y haz clic en "Create"
Configura la ventana:

windowTitle: "Mi Primera Interfaz"
geometry: 400x300 píxeles

Cambia el fondo del Dialog:

Selecciona el Dialog en el Object Inspector
Property Editor > styleSheet: background-color: #1a1a2e;

Agrega un Label con tu nombre:

Arrastra un Label desde Display Widgets
text: Tu nombre
font: 24pt, Bold
styleSheet: color: #41CD52;
alignment: AlignCenter

Agrega un segundo Label:

text: "Diseñador Gráfico"
font: 14pt
styleSheet: color: #a0a0a0;
alignment: AlignCenter

Agrega un Line Edit:

placeholderText: "Escribe tu especialidad..."

Agrega un Combo Box:

Haz doble clic para editar items
Agrega: "Branding", "Web", "Editorial", "Ilustración"

Agrega un Check Box:

text: "Disponible para proyectos"

Agrega un Push Button "Guardar Perfil":

styleSheet: background-color: #41CD52; color: #1a1a2e; border: none; padding: 8px 16px; border-radius: 6px; font-weight: bold;

Agrega un Push Button "Cancelar":

styleSheet: background-color: #555; color: #ccc; border: none; padding: 8px 16px; border-radius: 6px;

Renombra TODOS los widgets con nombres descriptivos
Guarda como mi_primera_ui_completa.ui
Presiona Ctrl+R para ver la vista previa

---

Resultado Esperado

Una ventana oscura con tu nombre en verde grande, subtítulo gris, campo de especialidad, selector de categoría, checkbox de disponibilidad y dos botones estilizados.

---

Checklist

[ ] Dialog sin botones de 400x300
[ ] Fondo oscuro (#1a1a2e)
[ ] Label con nombre (24pt, verde, centrado)
[ ] Label con profesión (14pt, gris, centrado)
[ ] Line Edit con placeholder
[ ] Combo Box con 4 opciones
[ ] Check Box con texto
[ ] Botón "Guardar Perfil" estilizado en verde
[ ] Botón "Cancelar" estilizado en gris
[ ] Todos los widgets renombrados
[ ] Vista previa funciona correctamente

Anterior: Módulo 1 Siguiente: Módulo 3

Módulo 2: Tu Primera Interfaz

Objetivos de Aprendizaje

2.1 Tour Completo por la Interfaz de Qt Designer

Vista General de la Interfaz

2.2 Widget Box — Tu Caja de Herramientas

Categorías del Widget Box

Spacers (Espaciadores)

Buttons (Botones)

Display Widgets (Visualización)

Input Widgets (Entrada de datos)

Containers (Contenedores)

Item Widgets (Listas y Tablas)

Cómo usar el Widget Box

2.3 Object Inspector — Tu Panel de Capas

Estructura del Object Inspector

Qué puedes hacer en el Object Inspector

Importancia de nombrar bien los widgets

2.4 Property Editor — Tu Centro de Control

Secciones del Property Editor

QObject

QWidget

Propiedades Específicas del Widget

2.5 Tipos de Ventana (Templates) en Detalle

Dialog with Buttons Bottom

Dialog without Buttons

Dialog with Buttons Right

Main Window

Widget

2.6 Modos de Edición

Modo Edición de Widgets (F3) — Modo Normal

Modo Edición de Signals/Slots (F4)

Modo Edición de Buddies

2.7 Barra de Herramientas (Toolbar)

2.8 Menú Principal

2.9 Vista Previa

Cómo ver la vista previa:

Ejercicio Práctico del Módulo

Recursos Adicionales

Evaluación de Comprensión

Ejercicio 2: Mi Primera UI

Objetivo

Instrucciones

Resultado Esperado

Checklist