Módulo 10: Diálogos y Ventanas Emergentes

Crea ventanas modales para confirmaciones, configuración y flujos de trabajo

---

Objetivos de Aprendizaje

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

Diferenciar entre los tipos de diálogos disponibles
Crear diálogos de confirmación, información y error
Diseñar diálogos de configuración personalizados
Usar diálogos estándar de archivo, color y fuente
Implementar diálogos de entrada de datos
Crear diálogos modales y no modales
Diseñar diálogos de asistente paso a paso (wizards)

---

10.1 ¿Qué son los Diálogos?

Los diálogos son ventanas que aparecen sobre la ventana principal para pedir información o mostrar mensajes. Son como los popups y modales en una página web.

Tipos de diálogos

Tipo	Descripción	Modalidad	Ejemplo
------	-------------	-----------	---------
Modal	Bloquea la ventana principal hasta que se cierra	Debes responder antes de continuar	"¿Estás seguro de eliminar?"
No modal	Permite interactuar con la ventana principal	Puedes hacer otras cosas mientras	"Buscar y Reemplazar"
De aplicación	Bloquea toda la aplicación	Debes responder antes de hacer cualquier cosa	"Error crítico"

---

10.2 Tipos de Diálogos en Qt Designer

Dialog with Buttons Bottom

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

┌──────────────────────────────┐
│  Título del Diálogo          │
├──────────────────────────────┤
│                              │
│     [Tu contenido aquí]      │
│                              │
│              [OK] [Cancel]   │
└──────────────────────────────┘

Cuándo usarlo:

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

Dialog without Buttons

Una ventana de diálogo completamente en blanco.

┌──────────────────────────────┐
│  Título del Diálogo          │
├──────────────────────────────┤
│                              │
│     [Lienzo en blanco]       │
│                              │
│                              │
└──────────────────────────────┘

Cuándo usarlo:

Diseños completamente personalizados
Cuando necesitas control total de la disposición
Diálogos con botones en posiciones no estándar

Dialog with Buttons Right

Similar al primero pero con los botones a la derecha.

┌──────────────────────────────────────┐
│  Título del Diálogo                  │
├──────────────────────────┬───────────┤
│                          │  [OK]     │
│  [Tu contenido aquí]     │  [Cancel] │
│                          │  [Apply]  │
│                          │           │
└──────────────────────────┴───────────┘

Cuándo usarlo:

Asistentes paso a paso (wizards)
Formularios donde los botones no deben estar abajo
Diálogos con muchos botones de acción

---

10.3 Diálogos de Mensaje (MessageBox)

Los MessageBox son diálogos predefinidos para mostrar mensajes al usuario. Se configuran principalmente vía código, pero puedes pre-diseñarlos en Qt Designer.

Tipos de MessageBox

Tipo	Icono	Cuándo usarlo	Ejemplo
------	-------	---------------	---------
Information	ℹ️ (círculo azul con "i")	Información general	"Archivo guardado correctamente"
Warning	⚠️ (triángulo amarillo)	Advertencia	"El archivo no se ha guardado"
Critical	❌ (círculo rojo con "X")	Error crítico	"No se pudo conectar al servidor"
Question	❓ (círculo azul con "?")	Pregunta con opciones	"¿Estás seguro de eliminar?"

Botones disponibles

Botón	Rol	Cuándo usarlo
-------	-----	---------------
Ok	AcceptRole	Confirmar acción
Cancel	RejectRole	Cancelar acción
Yes	YesRole	Respuesta afirmativa
No	NoRole	Respuesta negativa
Abort	RejectRole	Abortar operación
Retry	AcceptRole	Reintentar
Ignore	AcceptRole	Ignorar el problema
Close	RejectRole	Cerrar
Save	AcceptRole	Guardar cambios
Discard	DestructiveRole	Descartar cambios
Help	HelpRole	Abrir ayuda
Apply	ApplyRole	Aplicar sin cerrar
Reset	ResetRole	Restaurar valores

🎨 ANALOGÍA DEL DISEÑO

Un MessageBox es como un alert() en JavaScript o un toast notification en una app móvil. Es la forma más directa de comunicar algo al usuario.

---

10.4 Diálogos de Archivo

El File Dialog permite al usuario seleccionar archivos o carpetas.

Propiedades principales

Propiedad	Descripción	Ejemplo
-----------	-------------	---------
acceptMode	`AcceptOpen` (abrir) o `AcceptSave` (guardar)	`AcceptOpen` para "Abrir archivo"
fileMode	`AnyFile`, `ExistingFile`, `Directory`, `ExistingFiles`	`ExistingFile` para seleccionar un archivo existente
nameFilters	Filtros de tipo de archivo	`Imágenes (.png .jpg *.gif)`
defaultSuffix	Extensión por defecto al guardar	`txt`
options	Opciones adicionales	`DontUseNativeDialog`, `ReadOnly`

Filtros de archivo comunes

Filtro	Descripción
--------	-------------
`Imágenes (.png .jpg .jpeg .gif *.svg)`	Archivos de imagen
`Documentos (.pdf .doc .docx .txt)`	Documentos de texto
`Todos los archivos (*)`	Sin filtro
`Archivos de texto (*.txt)`	Solo archivos de texto
`Archivos UI (*.ui)`	Archivos de Qt Designer

---

10.5 Diálogo de Color

El Color Dialog permite al usuario seleccionar un color.

Características

Selector de color visual
Paleta de colores predefinidos
Selector de color personalizado (RGB, HSV)
Colores recientes

Propiedades

Propiedad	Descripción
-----------	-------------
options	`NoButtons`, `DontUseNativeDialog`, `ShowAlphaChannel`

🎨 ANALOGÍA DEL DISEÑO

El Color Dialog es como el selector de color de Photoshop: puedes elegir de una paleta, ingresar valores RGB/HSV, o seleccionar de colores recientes.

---

10.6 Diálogo de Fuente

El Font Dialog permite al usuario seleccionar una fuente, tamaño y estilo.

Características

Lista de fuentes disponibles
Selector de tamaño
Estilos: Negrita, Cursiva, Subrayado
Vista previa en tiempo real
Selector de color de fuente

Propiedades

Propiedad	Descripción
-----------	-------------
options	`NoButtons`, `DontUseNativeDialog`, `ScalableFonts`, `NonScalableFonts`, `MonospacedFonts`, `ProportionalFonts`

---

10.7 Diálogo de Entrada (Input Dialog)

El Input Dialog pide un dato simple al usuario.

Tipos de Input Dialog

Tipo	Descripción	Ejemplo
------	-------------	---------
Texto	Pide una cadena de texto	"Ingresa tu nombre"
Entero	Pide un número entero	"Ingresa tu edad"
Decimal	Pide un número decimal	"Ingresa tu peso"
Item	Pide seleccionar de una lista	"Selecciona tu país"

Propiedades

Propiedad	Descripción	Ejemplo
-----------	-------------	---------
labelText	Texto de la etiqueta	"Nombre:"
textValue	Valor de texto por defecto	""
intValue	Valor entero por defecto	`0`
doubleValue	Valor decimal por defecto	`0.0`
textItems	Lista de items para selección	`["España", "México", "Argentina"]`

---

10.8 Diálogo de Progreso

El Progress Dialog muestra el progreso de una operación larga.

Propiedades

Propiedad	Descripción	Ejemplo
-----------	-------------	---------
labelText	Texto descriptivo	"Procesando archivos..."
minimum / maximum	Rango de progreso	`0` y `100`
value	Valor actual	`0`
minimumDuration	Milisegundos antes de mostrar el diálogo	`4000` (4 segundos)
wasCanceled	Si el usuario canceló	`false`

Características

Barra de progreso integrada
Botón de cancelar
Texto descriptivo
Estimación de tiempo restante

---

10.9 Diálogo de Error

El Error Message muestra errores con detalles expandibles.

Características

Icono de error
Mensaje principal
Texto detallado (expandible)
Botones de acción (Reintentar, Ignorar, Cancelar)

---

10.10 Diálogos Modales vs. No Modales

Diálogo Modal

Bloquea la ventana principal hasta que el usuario responde.

┌─────────────────────────────────┐
│  MainWindow (bloqueada, gris)   │
│  ┌───────────────────────────┐  │
│  │  Diálogo Modal            │  │
│  │  ¿Estás seguro?           │  │
│  │  [Sí]  [No]               │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Cuándo usar:

Confirmaciones importantes (eliminar, salir sin guardar)
Formularios que deben completarse antes de continuar
Mensajes de error críticos

Diálogo No Modal

Permite interactuar con la ventana principal mientras está abierto.

┌─────────────────────────────────┐
│  MainWindow (activa)            │
│  [Puedes hacer clic aquí]       │
│                                 │
│  ┌───────────────────────────┐  │
│  │  Diálogo No Modal         │  │
│  │  Buscar: [________]       │  │
│  │  [Buscar] [Reemplazar]    │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Cuándo usar:

Herramientas de búsqueda y reemplazo
Paletas de colores
Paneles de propiedades flotantes

---

10.11 Diálogo de Asistente (Wizard)

Un wizard es un diálogo que guía al usuario paso a paso por un proceso.

Estructura típica

┌─────────────────────────────────────────────────┐
│  ASISTENTE DE CONFIGURACIÓN                     │
├─────────────────────────────────────────────────┤
│                                                 │
│  ┌─ Paso 1 de 3 ─────────────────────────────┐  │
│  │                                            │  │
│  │  ¡Bienvenido al asistente de configuración!│  │
│  │                                            │  │
│  │  Este asistente te ayudará a configurar    │  │
│  │  tu aplicación en 3 simples pasos.         │  │
│  │                                            │  │
│  │  Haz clic en "Siguiente" para comenzar.    │  │
│  │                                            │  │
│  └────────────────────────────────────────────┘  │
│                                                 │
│                    [< Anterior] [Siguiente >]    │
└─────────────────────────────────────────────────┘

Cómo crear un Wizard en Qt Designer

Crea un Dialog with Buttons Right
Agrega un Stacked Widget como contenido principal
Crea una página por paso del wizard
Agrega botones "Anterior" y "Siguiente"
Conecta los botones al Stacked Widget para cambiar de página

Páginas típicas de un wizard

Página	Contenido	Botones
--------	-----------	---------
Bienvenida	Introducción al proceso	[Siguiente >]
Datos	Formulario con campos	[< Anterior] [Siguiente >]
Confirmación	Resumen de datos	[< Anterior] [Finalizar]
Completado	Mensaje de éxito	[Cerrar]

---

10.12 Checklist de Diseño de Diálogos

[ ] El título del diálogo describe claramente su propósito
[ ] Los botones estándar (OK, Cancel) están en la posición correcta
[ ] El diálogo tiene un tamaño apropiado (no demasiado grande ni pequeño)
[ ] Los campos obligatorios están claramente marcados
[ ] El foco inicial está en el campo más relevante
[ ] El botón por defecto (Enter) es la acción principal
[ ] El diálogo se puede cerrar con Escape (botón Cancel)
[ ] Los mensajes de error son claros y constructivos
[ ] El diálogo es modal cuando debe serlo

---

Ejercicio Práctico del Módulo

🏋️ EJERCICIO 10: Diálogo de Preferencias Completo

Objetivo: Crear un diálogo de preferencias profesional con múltiples pestañas.

Pasos:

1. Crea un Dialog with Buttons Bottom de 500x400 píxeles

2. Cambia el windowTitle a "Preferencias"

3. Cambia el fondo: styleSheet: background-color: #1a1a2e;

4. Agrega un Tab Widget que ocupe la mayor parte del diálogo

5. Crea 3 pestañas: "General", "Apariencia", "Atajos"

6. En la pestaña "General":

- Agrega un Group Box titulado "Usuario"

- Dentro del Group Box, un Form Layout con:

- Label "Nombre de usuario:" + Line Edit

- Label "Idioma:" + Combo Box (Español, Inglés, Francés, Portugués)

- Agrega un Check Box: "Iniciar automáticamente con el sistema"

- Agrega un Check Box: "Guardar sesión al salir"

7. En la pestaña "Apariencia":

- Agrega un Group Box titulado "Tema"

- Dentro: Label "Tema:" + Combo Box (Oscuro, Claro, Automático)

- Agrega un Group Box titulado "Tipografía"

- Dentro: Label "Fuente:" + Font Combo Box

- Label "Tamaño:" + Spin Box (min: 10, max: 20, value: 13)

- Agrega un Frame como vista previa:

- styleSheet: background-color: #2d2d3d; border-radius: 8px;

- Dentro un Label: "Vista previa del texto con la fuente seleccionada"

8. En la pestaña "Atajos":

- Agrega un Table Widget con 2 columnas

- Configura horizontalHeaderLabels: "Acción", "Atajo"

- Configura rowCount: 6

- Agrega datos de ejemplo:

- "Nuevo" | "Ctrl+N"

- "Abrir" | "Ctrl+O"

- "Guardar" | "Ctrl+S"

- "Deshacer" | "Ctrl+Z"

- "Buscar" | "Ctrl+F"

- "Pantalla completa" | "F11"

9. Los botones OK/Cancel/Apply ya están incluidos automáticamente

10. Aplica un tema oscuro coherente con Style Sheets

11. Renombra todos los widgets

12. Guarda como preferencias.ui

13. Presiona Ctrl+R y verifica que todo funcione

Resultado esperado: Un diálogo de preferencias profesional con 3 pestañas, campos de configuración, vista previa de tipografía y tabla de atajos de teclado.

---

Recursos Adicionales

Recurso	Descripción
---------	-------------
[QDialog Documentation](https://doc.qt.io/qt-6/qdialog.html)	Documentación oficial de QDialog
[QMessageBox Documentation](https://doc.qt.io/qt-6/qmessagebox.html)	Documentación de MessageBox
[QFileDialog Documentation](https://doc.qt.io/qt-6/qfiledialog.html)	Documentación de File Dialog
[QColorDialog Documentation](https://doc.qt.io/qt-6/qcolordialog.html)	Documentación de Color Dialog
[QFontDialog Documentation](https://doc.qt.io/qt-6/qfontdialog.html)	Documentación de Font Dialog
[QInputDialog Documentation](https://doc.qt.io/qt-6/qinputdialog.html)	Documentación de Input Dialog

---

Evaluación de Comprensión

¿Cuál es la diferencia entre un diálogo modal y uno no modal?
¿Qué tipo de diálogo usarías para pedir confirmación antes de eliminar un archivo?
¿Qué tipo de diálogo usarías para una herramienta de "Buscar y Reemplazar"?
¿Qué botones incluye automáticamente un "Dialog with Buttons Bottom"?
¿Cómo filtras los tipos de archivo en un File Dialog?
¿Qué widget usarías para crear un asistente paso a paso?
¿Cuántos tipos de MessageBox existen y cuáles son?
¿Qué propiedad del File Dialog controla si es para abrir o guardar?
¿Cómo harías que un diálogo tenga un botón "Apply" además de OK y Cancel?
¿Qué es un wizard y cuándo deberías usarlo?

---

Módulo anterior: ← [Módulo 9: Menús y Toolbars](08-menu-toolbars.md)

Siguiente módulo: → [Módulo 11: Formularios Completos](10-formularios.md)

📝 Evaluación de Comprensión

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

1. ¿Cuál es la diferencia entre un diálogo modal y uno no modal?

✅ Respuesta Correcta

Un diálogo modal bloquea la ventana principal hasta que el usuario responde (debes responder antes de continuar). Un diálogo no modal permite interactuar con la ventana principal mientras está abierto (puedes hacer otras cosas).

2. ¿Qué tipo de diálogo usarías para pedir confirmación antes de eliminar un archivo?

✅ Respuesta Correcta

Un MessageBox de tipo Question con botones Yes/No, o un diálogo modal con botones de confirmación.

3. ¿Qué tipo de diálogo usarías para una herramienta de 'Buscar y Reemplazar'?

✅ Respuesta Correcta

Un diálogo no modal, porque el usuario necesita interactuar con el documento mientras busca y reemplaza.

4. ¿Qué botones incluye automáticamente un 'Dialog with Buttons Bottom'?

✅ Respuesta Correcta

OK y Cancel.

5. ¿Cómo filtras los tipos de archivo en un File Dialog?

✅ Respuesta Correcta

Usando la propiedad 'nameFilters', por ejemplo: 'Imágenes (*.png *.jpg *.gif)'.

6. ¿Qué widget usarías para crear un asistente paso a paso?

✅ Respuesta Correcta

Stacked Widget dentro de un Dialog with Buttons Right, con botones 'Anterior' y 'Siguiente' para navegar entre páginas.

7. ¿Cuántos tipos de MessageBox existen y cuáles son?

✅ Respuesta Correcta

4 tipos: Information (información general), Warning (advertencia), Critical (error crítico), Question (pregunta con opciones).

8. ¿Qué propiedad del File Dialog controla si es para abrir o guardar?

✅ Respuesta Correcta

acceptMode (AcceptOpen para abrir, AcceptSave para guardar).

9. ¿Cómo harías que un diálogo tenga un botón 'Apply' además de OK y Cancel?

✅ Respuesta Correcta

Usando un Dialog Button Box y configurando los botones estándar para incluir Apply, o usando un Dialog with Buttons Bottom y agregando manualmente un botón Apply.

10. ¿Qué es un wizard y cuándo deberías usarlo?

✅ Respuesta Correcta

Un wizard es un diálogo que guía al usuario paso a paso por un proceso complejo. Se usa para instalaciones, configuraciones iniciales o cualquier proceso que beneficie de ser dividido en pasos secuenciales.

Módulo 10: Diálogos

---

Objetivo

Crear un diálogo de preferencias profesional con múltiples pestañas.

---

Instrucciones

Crea un Dialog with Buttons Bottom de 500x400 píxeles
windowTitle: "Preferencias"
Fondo: styleSheet: background-color: #1a1a2e;
Agrega un Tab Widget que ocupe la mayor parte del diálogo
Crea 3 pestañas: "General", "Apariencia", "Atajos"

Pestaña "General":

Group Box "Usuario":
Label "Nombre de usuario:" + Line Edit
Label "Idioma:" + Combo Box (Español, Inglés, Francés, Portugués)
Check Box: "Iniciar automáticamente con el sistema"
Check Box: "Guardar sesión al salir"

Pestaña "Apariencia":

Group Box "Tema":
Label "Tema:" + Combo Box (Oscuro, Claro, Automático)
Group Box "Tipografía":
Label "Fuente:" + Font Combo Box
Label "Tamaño:" + Spin Box (min: 10, max: 20, value: 13)
Frame como vista previa:
styleSheet: background-color: #2d2d3d; border-radius: 8px;
Label: "Vista previa del texto con la fuente seleccionada"

Pestaña "Atajos":

Table Widget con 2 columnas
horizontalHeaderLabels: "Acción", "Atajo"
rowCount: 6
Datos de ejemplo:
"Nuevo" | "Ctrl+N"
"Abrir" | "Ctrl+O"
"Guardar" | "Ctrl+S"
"Deshacer" | "Ctrl+Z"
"Buscar" | "Ctrl+F"
"Pantalla completa" | "F11"

Aplica un tema oscuro coherente
Renombra todos los widgets
Guarda como preferencias.ui
Presiona Ctrl+R y verifica

---

Resultado Esperado

Un diálogo de preferencias profesional con 3 pestañas, campos de configuración, vista previa de tipografía y tabla de atajos de teclado.

---

Checklist

[ ] Dialog with Buttons Bottom de 500x400
[ ] Tab Widget con 3 pestañas
[ ] Pestaña General con Group Box y Check Boxes
[ ] Pestaña Apariencia con Font Combo Box y Frame de vista previa
[ ] Pestaña Atajos con Table Widget de 6 filas
[ ] Botones OK/Cancel/Apply incluidos
[ ] Tema oscuro coherente
[ ] Todos los widgets renombrados

Anterior: Módulo 9 Siguiente: Módulo 11

Módulo 10: Diálogos y Ventanas Emergentes

Objetivos de Aprendizaje

10.1 ¿Qué son los Diálogos?

Tipos de diálogos

10.2 Tipos de Diálogos en Qt Designer

Dialog with Buttons Bottom

Dialog without Buttons

Dialog with Buttons Right

10.3 Diálogos de Mensaje (MessageBox)

Tipos de MessageBox

Botones disponibles

10.4 Diálogos de Archivo

Propiedades principales

Filtros de archivo comunes

10.5 Diálogo de Color

Características

Propiedades

10.6 Diálogo de Fuente

Características

Propiedades

10.7 Diálogo de Entrada (Input Dialog)

Tipos de Input Dialog

Propiedades

10.8 Diálogo de Progreso

Propiedades

Características

10.9 Diálogo de Error

Características

10.10 Diálogos Modales vs. No Modales

Diálogo Modal

Diálogo No Modal

10.11 Diálogo de Asistente (Wizard)

Estructura típica

Cómo crear un Wizard en Qt Designer

Páginas típicas de un wizard

10.12 Checklist de Diseño de Diálogos

Ejercicio Práctico del Módulo

Recursos Adicionales

Evaluación de Comprensión

Ejercicio 10: Diálogo de Preferencias Completo

Objetivo

Instrucciones

Pestaña "General":

Pestaña "Apariencia":

Pestaña "Atajos":

Resultado Esperado

Checklist