Curso de JavaFX
Hacer una calculadora
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
- Abrir Scene Builder: Abre un archivo
.fxml
desde Eclipse con Scene Builder. - 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.
- 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.
- 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 ybtnSum
para el botón de suma). - 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;
- 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)); }
- 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
- Ejecutar el proyecto: Asegúrate de que los archivos
.fxml
y.java
estén correctamente vinculados y ejecuta la aplicación desde Eclipse. - 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!