Enunciado de la tarea: “Calculadora IMC”

Se desea desarrollar una aplicación de escritorio en JavaFX que funcione como una calculadora de IMC (Índice de Masa Corporal). La aplicación permitirá introducir la altura y el peso de una persona, modificar estos valores mediante botones de incremento/decremento, y calcular su IMC, mostrando el resultado en una ventana emergente junto con una interpretación visual por rangos de salud.

1. Objetivos funcionales

1.1 Ventana principal

• La aplicación mostrará una ventana principal titulada:
  “Calculadora IMC (interfaz)”.
• El contenido de la ventana está estructurado en:
  • Título principal.
  • Zona para indicar la “Altura” y zona para indicar el “Peso”.
  • Botón de “Calcular”.

1.2 Entrada de datos: Altura

• Se mostrará una sección para introducir la altura del usuario:
  • Etiqueta descriptiva “Altura”.
  • Un campo de texto donde se escribirá la altura en centímetros.
  • Una etiqueta que indique la unidad: “cm”.
  • Un pequeño panel con dos botones (flechas arriba y abajo) para incrementar o decrementar la altura en 1 unidad.
• El campo de texto de altura deberá:
  • Inicializarse en valor 0.
  • Aceptar solo caracteres numéricos. Si se intenta introducir otro tipo de carácter, no debe ser tenido en cuenta.
• Función de los botones de altura:
  • Flecha ▲: incrementa el valor numérico de la altura en 1 cm.
  • Flecha ▼: decrementa el valor numérico de la altura en 1 cm, sin permitir valores negativos.

1.3 Entrada de datos: Peso

• De forma análoga a la altura, se tendrá una sección para el peso:
  • Etiqueta descriptiva “Peso”.
  • Campo de texto para el peso en kilogramos.
  • Una etiqueta con la unidad: “kg”.
  • Panel con dos botones (flechas) para modificar el peso ±1.
• El campo de texto de peso:
  • Se inicializa en 0.
  • Solo admite caracteres numéricos.
• Función de los botones de peso:
  • Flecha ▲: suma 1 kg al valor actual.
  • Flecha ▼: resta 1 kg, siempre sin bajar de 0.

1.4 Botón de cálculo

• La interfaz incluirá un botón principal “Calcular”.
• Al pulsarlo:
  • Se leerán los valores de la altura (en cm) y del peso (en kg).
  • Si alguno de los valores es menor o igual a 0, se mostrará un diálogo de advertencia indicando que los datos no son válidos.
  • Si los datos son correctos, se calculará el IMC usando la fórmula:
    
    IMC = peso (kg) / (altura (m))²
    
    convirtiendo primero la altura de cm a metros.
  • El resultado del IMC se mostrará con dos decimales.

1.5 Ventana emergente de resultado

• El resultado del cálculo se presentará en una ventana emergente que bloquea la ventana principal mientras está abierta.
• Esta ventana mostrará:
  • Un texto introductorio: “Tu IMC es:”.
  • Un círculo de color cuyo tono variará en función del valor del IMC (de azul a verde, amarillo, naranja y rojo).
  • En el centro del círculo, el valor del IMC en texto grande y de color blanco.
  • Debajo, una lista de los rangos estándar de IMC:
    • Bajo peso: IMC < 18.5
    • Normopeso: 18.5 – 24.9
    • Sobrepeso: 25 – 29.9
    • Obesidad grado I: 30 – 34.9
    • Obesidad grado II: 35 – 39.9
    • Obesidad grado III: IMC ≥ 40
  • Cada rango estará coloreado desde tonos azules (situaciones menos preocupantes) hasta rojos (mayor riesgo), de modo que el alumnado pueda relacionar visualmente el valor obtenido con una categoría de salud.

1.6 Comportamiento general

• La interfaz debe adaptarse al tamaño de la ventana: las columnas de altura y peso deben repartirse el espacio horizontal disponible (50% y 50%), permitiendo la redistribución al redimensionar la ventana.
• Los campos de texto deben expandirse horizontalmente dentro de sus contenedores, ocupando todo el espacio posible entre la etiqueta de unidad y los botones de flecha.

2. Listado de características de apariencia de cada elemento

A continuación se describen las características visuales (colores, fuentes, tamaños, disposición) de todos los elementos de la aplicación.

2.1 Stage principal

• Tamaño de la escena: 900 x 550 píxeles.

2.2 Contenedor principal

• Color de fondo: gris muy claro (#f5f5f5).
• Relleno interior (padding): 40 píxeles en todos los lados.
• Espaciado horizontal entre columnas: 10 píxeles.
• Espaciado vertical entre filas: 20 píxeles.

2.3 Título principal

• Texto: "Descubre tu IMC".
• Fuente: tipo System, negrita, tamaño 40 puntos.
• Color del texto: #002B5C.

2.4 Sección de Altura

2.4.1 Etiqueta “Altura”

• Texto: "Altura".
• Fuente: System, negrita, tamaño 20 puntos.
• Color del texto: #002B5C.

2.4.2 Campo de texto de altura

• Texto inicial: "0".
• Color de fondo: blanco.
• Borde:
  • Color del borde: transparente (sin borde visible).
• Tamaño de fuente: 14 puntos.
• Comportamiento de tamaño:
  • Ancho máximo configurado a Double.MAX_VALUE.
  • El campo se expande dentro del contenedor de altura.
• Restricción de entrada:
  • Solo admite caracteres numéricos.
  • Cualquier carácter no numérico que se intente introducir es descartado automáticamente mediante un listener.

2.4.3 Etiqueta de unidad “cm”

• Texto: "cm".
• Fuente: System, tamaño 12 puntos.
• Color del texto: #002B5C.
• Se muestra a la derecha del campo de texto.

2.4.4 Botones de flechas para altura

• Textos:
  • Botón superior: "▲".
  • Botón inferior: "▼".
• Estilo común aplicado:
  • Color de fondo: transparente.
  • Color del borde: transparente (sin borde visible).
  • Sin relleno adicional (padding: 0).
  • Cursor: mano (hand) al pasar por encima.
• Disposición:
  • Ambos botones se colocan uno encima del otro.
  • Estos botones se ubican a la derecha de la etiqueta "cm".

2.4.5 Contenedor de entrada de altura

• Alineación: Pos.CENTER_LEFT (contenido alineado al centro vertical y a la izquierda).
• Estilo visual:
  • Color de fondo: blanco.
  • Bordes redondeados:
    • background-radius: 50.
    • border-radius: 50.
  • Color del borde: transparente (no se ve borde).
  • Relleno interior (padding): 10px arriba/abajo, 20px derecha/izquierda.
• Separación entre elementos internos: 10 píxeles.

2.4.6 Contenedor de sección altura

• Separación vertical entre elementos: 5 píxeles.
• Alineación: Pos.CENTER_LEFT (alineado a la izquierda).

2.5 Sección de Peso

La sección de Peso reproduce la misma estructura que la de Altura, con cambios en los textos y unidades.

2.5.1 Etiqueta “Peso”

• Texto: "Peso".
• Fuente: System, negrita, tamaño 20 puntos.
• Color del texto: #002B5C.

2.5.2 Campo de texto de peso

• Texto inicial: "0".
• Color de fondo: blanco.
• Borde: color transparente (sin borde visible).
• Tamaño de fuente: 14 puntos.
• Comportamiento de tamaño:
  • Ancho máximo configurado a Double.MAX_VALUE.
  • El campo se expande dentro del contenedor de altura.
• Restricción de entrada:
  • Solo números, caracteres no numéricos eliminados automáticamente.

2.5.3 Etiqueta de unidad “kg”

• Texto: "kg".
• Fuente: System, tamaño 12 puntos.
• Color del texto: #002B5C.

2.5.4 Botones de flechas para peso

• Mismos estilos y disposición que los botones de altura:
  • Texto "▲" y "▼".
  • Fondo transparente, sin bordes, sin padding, cursor de mano.
  • Colocados verticalmente.

2.5.5 Contenedor de entrada de peso

• Contenido: txtPeso, lblKg y btnPeso.
• Alineación: centro-izquierda.
• Estilo:
  • Color de fondo: blanco.
  • Bordes y fondo redondeados con radio 50.
  • Borde transparente.
  • Relleno: 10 20 10 20.
  • Se comporta visualmente igual que el contenedor de entrada de altura.

2.5.6 Contenedor de sección de peso

• Separación vertical: 5 píxeles.
• Alineación a la izquierda.

2.6 Botón “Calcular”

• Texto: "Calcular".
• Ancho mínimo: 140 píxeles.
• Alineación: Pos.CENTER_RIGHT (botón alineado a la derecha).
• Estilo normal:
  • Fondo: degradado lineal hacia la derecha de #ff7f50 a #fff2ee.
  • Color del texto: blanco.
  • Peso de la fuente: negrita.
  • Bordes redondeados con radio 25.
  • Relleno interior (padding): 8 24 8 24.
  • Cursor: mano al pasar por encima.
  • Borde: transparente.
  • Tamaño de fuente: 14 puntos.
• Estilo hover:
  • Degradado invertido hacia la derecha: de #fff2ee a #ff7f50.
  • El resto de propiedades (texto blanco, negrita, bordes redondeados, etc.) se mantienen.
• Cambio de estilo dinámico:
  • Al entrar el ratón en el botón: se aplica estiloHover.
  • Al salir el ratón: se vuelve a estiloNormal.

2.7 Ventana emergente de resultado (diálogo IMC)

Cuando se pulsa el botón “Calcular” con datos válidos, se abre un Stage secundario (dialogo) de tipo modal.

2.7.1 Stage del diálogo

• Título: "Resultado IMC".
• Modalidad: APPLICATION_MODAL (bloquea la ventana principal).
• Propietario: la ventana principal (stage).

2.7.2 Círculo con el valor del IMC

• Círculo:
  • Radio: 80 píxeles.
  • Color de relleno: depende del rango del IMC:
    • < 18.5: azul (#1E88E5).
    • 18.5 – 24.9: verde (#43A047).
    • 25 – 29.9: amarillo (#FDD835).
    • 30 – 34.9: naranja (#FB8C00).
    • 35 – 39.9: rojo anaranjado (#E53935).
    • ≥ 40: rojo oscuro (#B71C1C).
• Texto del IMC:
  • Formato: número con 2 decimales (ej. “23.45”).
  • Color del texto: blanco.
  • Fuente: System, negrita, tamaño 40 puntos.
• Composición:
  • Se usa un layout que contenga el círculo y el texto encima, centrados.

2.7.3 Texto descriptivo de rangos

• Los rangos se muestran en un layout con alineación centrada.
• Cada rango tiene un color asociado:
  • "Bajo peso: IMC < 18.5" → color azul (#1E88E5).
  • "Normopeso: 18.5 – 24.9" → verde (#43A047).
  • "Sobrepeso: 25 – 29.9" → amarillo (#FDD835).
  • "Obesidad grado I: 30 – 34.9" → naranja (#FB8C00).
  • "Obesidad grado II: 35 – 39.9" → rojo anaranjado (#E53935).
  • "Obesidad grado III: IMC ≥ 40" → rojo oscuro (#B71C1C).
• Separación vertical entre etiquetas de rango: 4 píxeles.

2.7.4 Texto “Tu IMC es”

• Texto: "Tu IMC es:".
• Fuente: System, tamaño 14 puntos, peso normal.
• Color del texto: azul oscuro (#002B5C).

2.7.5 Contenedor general del diálogo

• Contenido:
  • Etiqueta de texto.
  • Círculo + valor IMC.
  • Lista de rangos de IMC.
• Separación vertical entre elementos: 15 píxeles.
• Alineación: Pos.TOP_CENTER.
• Relleno interior (padding): 20 píxeles.
• Tamaño de la escena del diálogo: 420 x 420 píxeles.