Módulo 9: Menús, Toolbars y Barra de Estado

Crea interfaces de aplicación completas con menús profesionales

---

Objetivos de Aprendizaje

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

• Crear y configurar un Main Window con todas sus partes
• Diseñar menús completos con items, separadores y submenús
• Crear Actions y reutilizarlas en menús y toolbars
• Configurar atajos de teclado para acciones
• Crear toolbars con iconos
• Usar Dock Widgets para paneles acoplables
• Configurar la Status Bar con información contextual
• Diferenciar Main Window de Dialog

---

9.1 Main Window — La Ventana Principal

Hasta ahora hemos usado Dialogs. Ahora vamos a usar Main Window, que es el tipo de ventana para aplicaciones completas con menú, toolbar y barra de estado.

🎨 ANALOGÍA DEL DISEÑO

>

Si un Dialog es como un póster (una sola pantalla), un Main Window es como una revista completa: tiene portada (menú), herramientas (toolbar), contenido principal (área central) y pie de página (barra de estado).

Partes de un Main Window

┌──────────────────────────────────────────────────────────┐
│  [MenuBar]  Archivo   Edición   Ver   Proyecto   Ayuda   │  ← Menu Bar
├──────────────────────────────────────────────────────────┤
│  [Toolbar]  📁 📂 💾  ✂️ 📋  🔍  ▶️ ⏸️ ⏹️                 │  ← Toolbar
├──────────────┬───────────────────────────────────┬───────┤
│  [Dock]      │                                   │ [Dock]│
│  Explorador  │                                   │ Prop. │
│  de          │     Área Central                  │       │
│  Proyectos   │     (Tab Widget, etc.)            │       │
│              │                                   │       │
│              │                                   │       │
├──────────────┴───────────────────────────────────┴───────┤
│  [StatusBar]  Listo  |  Línea 1, Col 1  |  UTF-8         │  ← Status Bar
└──────────────────────────────────────────────────────────┘

Componentes del Main Window

---

9.2 Crear un Main Window

Paso 1: Crear el archivo

1. Abre Qt Designer
2. Selecciona "Main Window" en el diálogo "New Form"
3. Haz clic en "Create"

Paso 2: Explorar la estructura

Verás un Main Window con:

• Una Menu Bar vacía con "Type Here"
• Una Toolbar vacía
• Un Central Widget vacío
• Una Status Bar vacía

---

9.3 Crear Menús

Qt Designer tiene un editor de menús visual integrado en el Main Window.

Cómo crear un menú

1. Haz clic en el texto "Type Here" en la Menu Bar
2. Escribe el nombre del menú (ej: "Archivo")
3. Presiona Enter
4. Debajo del nombre del menú, haz clic en "Type Here" para agregar items
5. Escribe el texto del item (ej: "Nuevo")
6. Presiona Enter para crear el siguiente item

Estructura típica de un menú

Archivo
├── Nuevo
├── Abrir
├── Abrir reciente
│   ├── documento1.txt
│   ├── documento2.txt
│   └── documento3.txt
├── ───────────── (separador)
├── Guardar
├── Guardar como...
├── ───────────── (separador)
└── Salir

Cómo crear un separador

Escribe solo un guión - como texto del item. Qt Designer lo convertirá automáticamente en una línea separadora.

Cómo crear submenús

1. Selecciona un item del menú
2. Haz clic en el "Type Here" que aparece a la derecha del item
3. Escribe el nombre del subitem

Propiedades de los items de menú

Atajos de teclado con ampersand (&)

Usa & antes de una letra para crear un atajo de teclado Alt+letra:

Atajos de teclado estándar

---

9.4 Actions — Elementos Reutilizables

Las Actions son elementos reutilizables que puedes colocar en menús, toolbars y menús contextuales.

🎨 ANALOGÍA DEL DISEÑO

>

Las Actions son como los componentes en Figma: los defines una vez y los reutilizas en menús, toolbars y context menus. Si cambias la acción, se actualiza en todos los lugares donde se usa.

Cómo crear una Action

1. Ve a Editar > Edit Actions (o haz clic en el panel "Action Editor" en la parte inferior)
2. Haz clic en "New" (icono de +)
3. Configura las propiedades de la acción:

Cómo agregar una Action a un menú

1. Abre el Action Editor (parte inferior)
2. Arrastra la acción desde el Action Editor hasta el menú deseado
3. La acción aparecerá como un item del menú

Cómo agregar una Action a una Toolbar

1. Abre el Action Editor
2. Arrastra la acción desde el Action Editor hasta la Toolbar en el Main Window
3. La acción aparecerá como un botón con icono en la toolbar

Ventajas de usar Actions

---

9.5 Toolbars — Barras de Herramientas

Las toolbars son barras con iconos de acceso rápido. Piensa en la barra de herramientas de Photoshop.

Cómo configurar una Toolbar

1. Haz clic derecho en la Toolbar vacía
2. Selecciona la toolbar que quieres configurar (por defecto hay una llamada "toolBar")
3. Arrastra Actions desde el Action Editor hasta la Toolbar

Propiedades de la Toolbar

Múltiples Toolbars

Puedes tener varias toolbars:

1. Haz clic derecho en una toolbar existente
2. Selecciona "Add Toolbar"
3. Arrastra Actions a la nueva toolbar

Ejemplo de organización:

• Toolbar "Archivo": Nuevo, Abrir, Guardar
• Toolbar "Edición": Deshacer, Rehacer, Cortar, Copiar, Pegar
• Toolbar "Vista": Zoom in, Zoom out, Ajustar

---

9.6 Status Bar — Barra de Estado

La barra de estado en la parte inferior muestra información contextual.

Cómo agregar elementos a la Status Bar

1. Selecciona la Status Bar en el Main Window
2. Arrastra un Label desde el Widget Box hasta la Status Bar
3. Configura el texto del Label

Usos típicos de la Status Bar

---

9.7 Dock Widgets — Paneles Acoplables

Los Dock Widgets son paneles que el usuario puede mover, acoplar y hacer flotantes. Son exactamente como los paneles de Photoshop (Capas, Color, Propiedades).

Cómo agregar un Dock Widget

1. Arrastra un Dock Widget desde el Widget Box al Main Window
2. Qt Designer te mostrará dónde se puede acoplar (izquierda, derecha, arriba, abajo)
3. Coloca widgets dentro del Dock Widget

Propiedades del Dock Widget

Ejemplo: Panel de Capas

┌─ Dock Widget: "Capas" ──────────────┐
│  [X]                                │  ← Botón de cerrar
├─────────────────────────────────────┤
│  [List Widget]                      │
│  ┌─────────────────────────────────┐│
│  │ 📁 Grupo 1                      ││
│  │   📄 Capa 1                     ││
│  │   📄 Capa 2                     ││
│  │   📄 Capa 3                     ││
│  │ 📁 Grupo 2                      ││
│  │   📄 Capa 4                     ││
│  └─────────────────────────────────┘│
│                                     │
│  [Botón +]  [Botón -]  [Botón 👁]   │
└─────────────────────────────────────┘

Ejemplo: Panel de Propiedades

┌─ Dock Widget: "Propiedades" ────────┐
│  [X]                                │
├─────────────────────────────────────┤
│  [Form Layout]                      │
│  Posición X:  [120]                 │
│  Posición Y:  [85]                  │
│  Ancho:       [200]                 │
│  Alto:        [150]                 │
│  Rotación:    [0°]                  │
│  Opacidad:    [100%] ━━━●━━━       │
│                                     │
│  Color:       [■] #41CD52           │
│  Borde:       [2px sólido]          │
│  Sombra:      [☑] Activada          │
└─────────────────────────────────────┘

---

9.8 Central Widget — El Área Principal

El Central Widget es el área principal de contenido del Main Window. Es obligatorio tener uno.

Qué colocar en el Central Widget

Cómo configurar el Central Widget

1. Selecciona el centralwidget en el Object Inspector
2. Aplica un layout (clic derecho > Lay Out > Lay Out Vertically)
3. Arrastra widgets dentro del centralwidget

---

9.9 Menú Contextual (Context Menu)

Los menús contextuales aparecen al hacer clic derecho. En Qt Designer, los configuras a través de Actions.

Cómo configurar un menú contextual

1. Crea las Actions que quieres en el menú contextual
2. En el código Python, conecta el signal customContextMenuRequested del widget a una función que muestre el menú

💡 CONSEJO: Los menús contextuales se configuran principalmente en código Python, pero las Actions que usas en ellos se crean en Qt Designer.

---

9.10 Estructura Completa de un Main Window

MainWindow
├── menuBar
│   ├── menuArchivo
│   │   ├── accionNuevo (Ctrl+N)
│   │   ├── accionAbrir (Ctrl+O)
│   │   ├── accionAbrirReciente
│   │   │   ├── accionDoc1
│   │   │   └── accionDoc2
│   │   ├── Separador
│   │   ├── accionGuardar (Ctrl+S)
│   │   ├── accionGuardarComo (Ctrl+Shift+S)
│   │   ├── Separador
│   │   └── accionSalir (Ctrl+Q)
│   ├── menuEdicion
│   │   ├── accionDeshacer (Ctrl+Z)
│   │   ├── accionRehacer (Ctrl+Y)
│   │   ├── Separador
│   │   ├── accionCortar (Ctrl+X)
│   │   ├── accionCopiar (Ctrl+C)
│   │   ├── accionPegar (Ctrl+V)
│   │   ├── Separador
│   │   └── accionSeleccionarTodo (Ctrl+A)
│   ├── menuVer
│   │   ├── accionZoomIn (Ctrl++)
│   │   ├── accionZoomOut (Ctrl+-)
│   │   ├── accionAjustar (Ctrl+0)
│   │   ├── Separador
│   │   └── accionPantallaCompleta (F11)
│   └── menuAyuda
│       ├── accionDocumentacion (F1)
│       ├── Separador
│       └── accionAcercaDe
├── toolBar
│   ├── accionNuevo
│   ├── accionAbrir
│   ├── accionGuardar
│   ├── Separador
│   ├── accionDeshacer
│   ├── accionRehacer
│   ├── Separador
│   └── accionZoomIn
├── dockWidgetIzquierdo ("Explorador")
│   └── Tree Widget
├── dockWidgetDerecho ("Propiedades")
│   └── Form Layout con campos
├── centralwidget
│   └── Tab Widget
│       ├── Pestaña "Diseño"
│       ├── Pestaña "Recursos"
│       └── Pestaña "Calendario"
└── statusBar
    ├── Label "Listo"
    ├── Label "UTF-8"
    └── Label "100%"

---

Ejercicio Práctico del Módulo

🏋️ EJERCICIO 9: Interfaz de Aplicación de Diseño

>

Objetivo: Crear la interfaz principal completa de una aplicación de diseño.

>

Pasos:

1. Crea un Main Window

2. Cambia el windowTitle a "MiApp de Diseño"

3. Crea los siguientes menús:

- Archivo: Nuevo (Ctrl+N), Abrir (Ctrl+O), Guardar (Ctrl+S), Separador, Salir (Ctrl+Q)

- Edición: Deshacer (Ctrl+Z), Rehacer (Ctrl+Y), Separador, Cortar (Ctrl+X), Copiar (Ctrl+C), Pegar (Ctrl+V)

- Ver: Zoom In (Ctrl++), Zoom Out (Ctrl+-), Separador, Pantalla Completa (F11)

- Ayuda: Documentación (F1), Acerca de

4. Para cada item, configura:

- icon: Selecciona un icono apropiado (descarga iconos SVG gratuitos)

- toolTip: Descripción breve

- statusTip: Texto para la Status Bar

5. Crea Actions para cada item del menú

6. Agrega las Actions a la Toolbar (al menos: Nuevo, Abrir, Guardar, Deshacer, Rehacer)

7. Configura la Toolbar: iconSize 24, 24, toolButtonStyle IconOnly

8. Agrega un Dock Widget llamado "Explorador" a la izquierda:

- Dentro: un Tree Widget con carpetas y archivos de ejemplo

- allowedAreas: LeftDockWidgetArea

9. Agrega un Dock Widget llamado "Propiedades" a la derecha:

- Dentro: un Form Layout con campos de posición, tamaño, color

- allowedAreas: RightDockWidgetArea

10. Configura el Central Widget:

- Aplica un Layout Vertical

- Agrega un Tab Widget con 3 pestañas: "Diseño", "Recursos", "Calendario"

- En "Diseño": un Frame grande como área de trabajo

- En "Recursos": un List Widget en modo IconMode

- En "Calendario": un Calendar Widget

11. Configura la Status Bar con Labels:

- "Listo"

- "UTF-8"

- "100%"

12. Aplica un tema oscuro con Style Sheets al Main Window

13. Renombra todos los widgets y actions

14. Guarda como app_diseno.ui

15. Presiona Ctrl+R y explora la interfaz

>

Resultado esperado: Una aplicación completa con menús funcionales, toolbar con iconos, paneles laterales acoplables, área central con pestañas y barra de estado.

---

Recursos Adicionales

---

Evaluación de Comprensión

1. ¿Cuál es la diferencia principal entre un Dialog y un Main Window?
2. ¿Qué son las Actions y por qué son útiles?
3. ¿Cómo creas un separador en un menú?
4. ¿Qué atajo de teclado se usa comúnmente para "Guardar"?
5. ¿Cómo agregas un icono a un item de menú?
6. ¿Qué propiedad del Dock Widget controla si se puede cerrar?
7. ¿Qué widget es obligatorio en un Main Window?
8. ¿Cómo agregas información a la Status Bar?
9. ¿Qué significa el & en el texto de un menú (&Archivo)?
10. ¿Puedes tener múltiples toolbars en un Main Window?

---

Módulo anterior: ← [Módulo 8: Iconos y Recursos](07-iconos-recursos.md)

Siguiente módulo: → [Módulo 10: Diálogos](09-dialogos.md)