En esta lección aprenderemos a crear una calculadora sencilla en JavaFX utilizando FXML y Scene Builder. Este proyecto nos ayudará a consolidar lo aprendido sobre la vinculación de elementos entre el archivo .fxml y el controlador Java, además de la interacción entre componentes de la interfaz gráfica.

Diseñar la interfaz con Scene Builder

1. Abrir Scene Builder: Abre un archivo .fxml desde Eclipse con Scene Builder.
2. Crear los elementos de la calculadora:
   • Añade un TextField para mostrar y editar los números.
   • Incluye botones para las operaciones (suma, resta, multiplicación, etc.).
   • Añade un botón para calcular el resultado y otro para borrar.
   Por ejemplo:
   • Un botón con el símbolo + para sumar.
   • Un botón con C para borrar.
   • Un TextField con el identificador fx:id="input1" para el primer número.

---

Vincular los elementos con el controlador

Para que nuestra calculadora funcione, debemos asociar los componentes creados en Scene Builder con las variables y métodos en el controlador Java.

1. Asignar identificadores a los elementos: En Scene Builder, selecciona cada componente y asigna un identificador en el campo fx:id (por ejemplo, input1 para el primer campo de texto y btnSum para el botón de suma).
2. Declarar las variables en el controlador: En la clase controladora, usa la anotación @FXML para declarar las variables que corresponden a los componentes de la interfaz:javaCopyEdit@FXML private TextField input1; @FXML private TextField input2; @FXML private Button btnSum;
3. Definir métodos para los eventos: Agrega los métodos que serán llamados cuando el usuario interactúe con los botones. Por ejemplo:javaCopyEdit@FXML public void sumar() { double num1 = Double.parseDouble(input1.getText()); double num2 = Double.parseDouble(input2.getText()); double resultado = num1 + num2; input1.setText(String.valueOf(resultado)); }
4. Vincular eventos en Scene Builder: Selecciona un botón en Scene Builder y configura el atributo On Action con el nombre del método (por ejemplo, #sumar).

---

Código completo del controlador

Aquí tienes un ejemplo de cómo podría quedar el controlador de la calculadora:

javaCopyEditpackage com.example;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;

public class CalculadoraController {

    @FXML
    private TextField input1;

    @FXML
    private TextField input2;

    @FXML
    private Button btnSum;

    @FXML
    public void sumar() {
        double num1 = Double.parseDouble(input1.getText());
        double num2 = Double.parseDouble(input2.getText());
        double resultado = num1 + num2;
        input1.setText(String.valueOf(resultado));
    }

    @FXML
    public void limpiar() {
        input1.clear();
        input2.clear();
    }
}

---

Probar la aplicación

1. Ejecutar el proyecto: Asegúrate de que los archivos .fxml y .java estén correctamente vinculados y ejecuta la aplicación desde Eclipse.
2. Interacción:
   • Introduce números en los campos de texto.
   • Haz clic en el botón de suma para calcular el resultado.
   • Usa el botón de borrar para reiniciar.

---

¡Felicidades! Has creado tu primera calculadora en JavaFX utilizando FXML y Scene Builder. Este ejercicio demuestra cómo usar eventos, controladores y componentes visuales para construir aplicaciones funcionales. ¡Sigue practicando para añadir más funcionalidades!