Enunciado de la tarea: “Agenda telefónica”

Funcionamiento de una aplicación JavaFX que gestiona una pequeña agenda telefónica.

Utiliza una ventana principal dividida en dos paneles: uno para introducir datos de contactos y otro para visualizar la lista de contactos guardados.

Descripción funcional

Lado izquierdo de la ventana

• Un formulario de alta de contactos que contiene:
  • Un título (“Agenda Personal”).
  • Tres campos de entrada de texto: nombre, apellido y teléfono.
  • Cada campo va acompañado de su etiqueta correspondiente y muestra un texto de ayuda (placeholder) cuando está vacío (por ejemplo: “Introduce el nombre”, “Introduce el apellido”, etc.).
  • Bajo los campos aparecen dos botones:
    • Guardar: añade el contacto a una lista interna siempre que los tres campos estén cumplimentados; en caso contrario, se muestra un mensaje de aviso indicando que faltan datos por rellenar (se utiliza la clase Alert).
    • Limpiar: borra el contenido de los tres campos de texto sin hacer más acciones.

Lado derecho de la ventana

• Un botón: permite visualizar los datos de la agenda en dicha tabla. Al pulsarlo, la tabla se rellena con todos los contactos almacenados hasta el momento.
• Una tabla: muestra una fila por contacto y dispone de tres columnas (se utiliza la clase TableView):
  • Nombre
  • Apellido
  • Teléfono

Para poder realizar la tarea tendrás que investigar sobre las clases:

• TableView
• TableView (Tutorial Oracle)
• Alert

Características visuales y de disposición

1. Contenedor principal

• Espaciado entre paneles: 20 píxeles.
• Relleno (padding): 10 píxeles.
• Estilo:
  • Fondo de color: #f5f5f5.

2. Panel izquierdo

• Espaciado entre componentes: 10 píxeles.
• Relleno: 20 píxeles.
• Alineación: Pos.TOP_LEFT.
• Estilo:
  • Fondo de color: #f2f2f2.
  • Borde de color: #dddddd.
  • Esquinas del borde redondeadas (radio 8).
  • Esquinas del fondo redondeadas (radio 8).

3. Título ("Agenda Personal")

• Fuente: Arial, tamaño 24.
• Estilo:
  • Color de texto: #333333.
  • Texto en negrita.
  • Espaciado inferior (padding): 10 píxeles.

4. Etiquetas del formulario

• Estilo:
  • Texto en negrita.
  • Color de texto: #555555.

5. Campos de texto

• Placeholder:
  • "Introduce el nombre/apellido/teléfono".
• Estilo:
  • Esquinas del fondo redondeadas (radio 6).
  • Esquinas del borde redondeadas (radio 6).
  • Borde de color: #cccccc.
  • Padding: 4 6 4 6

6. Botón ("Guardar")

• Estilo:
  • Fondo de color verde: #4caf50.
  • Texto en color blanco.
  • Esquinas redondeadas (radio 8).
  • Padding 6 14 6 14.
  • Cursor en forma de mano al pasar por encima (cursor: hand).

7. Botón ("Limpiar")

• Estilo:
  • Fondo de color rojo: #f44336.
  • Texto en color blanco.
  • Esquinas redondeadas (radio 8).
  • Padding: 6 14 6 14.
  • Cursor en forma de mano al pasar por encima (cursor: hand).

8. Contenedor de botones

• Espaciado entre botones: 10 píxeles.
• Alineación: Pos.CENTER_LEFT.

9. Panel derecho

• Espaciado entre componentes: 10 píxeles.
• Relleno: 20 píxeles.
• Alineación: Pos.TOP_CENTER.
• Estilo:
  • Fondo de color blanco: #ffffff.
  • Borde de color: #dddddd.
  • Esquinas del borde redondeadas (radio 8).
  • Esquinas del fondo redondeadas (radio 8).

10. Botón ("Ver datos agenda")

• Estilo:
  • Fondo transparente.
  • Borde de color azul: #272EF5.
  • Texto en color azul: #272EF5.
  • Esquinas redondeadas (radio 8 ).
  • Padding 6 14 6 14.
  • Cursor en forma de mano al pasar por encima (cursor: hand).

11. Tabla (TableView<Contacto>)

• Anchura preferida: 400 píxeles.
• Estilo:
  • Borde de color: #dddddd.
  • Esquinas del borde redondeadas (radio 6).
  • Esquinas del fondo redondeadas (radio 6).