Ejercicio Tema 2: “Paneles y Layouts como profesionales”

0) Objetivo didáctico

• Diseñar una interfaz a partir de un wireframe y un árbol de contenedores.
  
  

• Elegir conscientemente cuántos JPanel usar y qué layout conviene en cada zona.
  
  

• Practicar BorderLayout, FlowLayout, GridLayout y GridBagLayout en una sola ventana + JDialog modal.
  
  

• Entregar capturas + esquema + breve explicación (RA1 y RA4).
  
  

1) Planificación en papel (10 min)

1. Haz un boceto de esta ventana “Gestor de usuarios”:
   
   

   • Header (arriba): título + icono.
     
     

   • Lateral (izquierda): 5 botones de navegación (Dashboard, Usuarios, Informes, Ajustes, Ayuda).
     
     

   • Centro (formulario): 2 columnas con etiquetas/campos (Nombre, Email, Rol (JComboBox), Activo (JCheckBox), Notas (JTextArea)).
     
     

   • Derecha (previsualización): JTabbedPane con “Resumen” y “Logs”.
     
     

   • Barra inferior (abajo): botones “Cancelar”, “Limpiar”, “Guardar” alineados a la derecha.
     
     

Dibuja el árbol de contenedores:

JFrame (BorderLayout)

 ├─ NORTH: headerPanel (FlowLayout)

 ├─ WEST: navPanel (GridLayout 5x1)

 ├─ CENTER: formPanel (GridBagLayout)

 ├─ EAST: previewPanel (BorderLayout) → dentro: JTabbedPane

 └─ SOUTH: buttonBar (FlowLayout RIGHT)

2. 
   

3. Lista de componentes y propiedades clave (fuentes, tooltips, gaps, insets).
   
   

⚠️ Solo cuando tengas este esquema aprobado, pasas a IntelliJ.

2) Construcción en IntelliJ GUI Designer

2.1 Crear formulario y raíz

1. New → GUI Form → GestorUsuarios.
   
   

2. Selecciona el root panel → Right click → Set Layout → BorderLayout.
   
   

2.2 Header (NORTH)

1. Añade JPanel → posición NORTH del BorderLayout.
   
   

2. Set Layout → FlowLayout.
   
   

3. Inserta JLabel (icono+título).
   
   

   • Propiedades: text = "Gestor de usuarios", font = Bold 18, icon (si tenéis).
     
     

4. (Opcional) Añade un JSeparator debajo (queda elegante).
   
   

2.3 Navegación (WEST)

1. JPanel → posición WEST.
   
   

2. Set Layout → GridLayout y pon rows=5, cols=1, ajusta vgap=5.
   
   

3. Añade 5 JButton: Dashboard, Usuarios, Informes, Ajustes, Ayuda.
   
   

4. Propiedades de botones: Same Size Horizontally = true (si usas GridLayoutManager de IntelliJ, marca “Same Size…” para uniformar).
   
   

2.4 Formulario (CENTER) – GridBagLayout (el reto)

1. JPanel → posición CENTER.
   
   

2. Set Layout → GridBagLayout.
   
   

3. Inserta por filas (usa insets 5, anchor WEST, fill HORIZONTAL):
   
   

   • Fila 0: JLabel "Nombre" (gridx=0), JTextField (gridx=1, weightx=1, fill=HORIZONTAL).
     
     

   • Fila 1: JLabel "Email", JTextField (igual que arriba).
     
     

   • Fila 2: JLabel "Rol", JComboBox (modelo: Admin, Editor, Invitado).
     
     

   • Fila 3: JLabel "Activo", JCheckBox.
     
     

   • Fila 4: JLabel "Notas", JScrollPane con JTextArea (gridwidth=1, weighty=1, fill=BOTH) para que crezca verticalmente.
     
     

4. Revisa en cada campo:
   
   

   • weightx=1 en la columna de entradas para que se estiren al redimensionar.
     
     

   • insets = 5,5,5,5 (márgenes).
     
     

   • anchor = WEST en etiquetas.
     
     

   • fill = HORIZONTAL/BOTH en campos para que no “floten”.
     
     

2.5 Previsualización (EAST)

1. JPanel → posición EAST → Set Layout → BorderLayout.
   
   

2. Dentro, añade un JTabbedPane (CENTER).
   
   

   • Pestaña 1: “Resumen” → JTextArea readOnly dentro de JScrollPane.
     
     

   • Pestaña 2: “Logs” → JList o JTextArea.
     
     

3. Fija un Preferred Size (p.ej. 260 px de ancho) para que no coma todo el espacio.
   
   

2.6 Botonera (SOUTH)

1. JPanel → posición SOUTH.
   
   

2. Set Layout → FlowLayout y en propiedades alignment = RIGHT.
   
   

3. Añade JButton “Cancelar”, “Limpiar”, “Guardar”.
   
   

   • Marca Same Size Horizontally para uniformar.
     
     

   • (Opcional) Define Default Button = Guardar (en el JFrame).
     
     

3) Diálogo modal de confirmación (JDialog)

1. New → GUI Form → DialogConfirmacion (JDialog).
   
   

2. Añade JLabel (“¿Guardar cambios?”), JButton “Aceptar”, JButton “Cancelar”.
   
   

3. En la ventana principal, al pulsar Guardar:
   
   

   • dialog.setModal(true); dialog.pack(); dialog.setVisible(true);
     
     

4. (Sin lógica aún; esto es Tema 2: estructura y eventos mínimos).
   
   

4) Ajustes de comportamiento (que suelen fallar)

• Si algo queda demasiado separado al maximizar, es porque su contenedor usa GridLayoutManager con Size Policy = “Can grow” y sin pesos.
  
  

  • En GridBagLayout, controla weightx/weighty y fill.
    
    

  • En FlowLayout, manda el tamaño preferido de los componentes (no crece a pantalla completa).
    
    

  • En BorderLayout, el CENTER crece; EAST/WEST conservan su preferred width.
    
    

• Si no puedes meter un componente dentro de un panel:
  
  

  • Cortar (Ctrl+X) → seleccionar el panel → Pegar (Ctrl+V).
    
    

  • O Right click panel → Add → [componente].
    
    

5) Entrega del alumnado (README + capturas)

1. Wireframe dibujado (foto/escaneo).
   
   

2. Árbol de contenedores (como el del enunciado) indicando qué layout usa cada JPanel y por qué.
   
   

3. Capturas:
   
   

   • Vista general.
     
     

   • Redimensionada (para comprobar que el CENTER y Notas crecen bien).
     
     

   • Pestañas del JTabbedPane.
     
     

   • Diálogo modal abierto.
     
     

4. Mini tabla con las propiedades clave usadas (insets, weightx, fill, alignment…).
   
   

5. Enlace a GitHub con el .form, .java y el PDF con la planificación.
   
   

6) Criterios de evaluación (10 pts)

• Estructura / layouts elegidos (3 pts): usa Border + Flow + Grid + GridBag correctamente, con justificación.
  
  

• Uso de propiedades de distribución (3 pts): insets, hgap/vgap, anchor, fill, weightx/weighty, preferred size.
  
  

• Comportamiento al redimensionar (2 pts): CENTER y Notas crecen, EAST se mantiene estable, botonera alineada.
  
  

• Presentación/README (2 pts): wireframe, árbol de paneles, capturas y explicación.
  
  

7) Retos opcionales (para subir nota)

• Añade un JMenuBar arriba (Archivo/Editar/Ayuda).
  
  

• Convierte la botonera a GridLayout(1,3) y compárala con Flow RIGHT.
  
  

• Cambia el formulario a solo GridBag con gridwidth=2 para Notas (practicar spans).
  
  

8) Chuleta rápida para IntelliJ GUI Designer

• Cambiar layout del panel: Right click panel → Set Layout.
  
  

• Mover a otro panel: cortar (Ctrl+X) → seleccionar panel destino → pegar (Ctrl+V).
  
  

• Igualar tamaños: propiedades del contenedor → Same Size Horizontally/Vertically.
  
  

• Márgenes: insets (GridBag) o margins/border del panel.
  
  

• Espaciados: hgap, vgap (Flow/Grid).
  
  

• Que los campos crezcan: en GridBag → weightx=1, fill=HORIZONTAL/BOTH.