Como práctica introductoria del Scene Builder de JavaFX, vamos a desarrollar la minicalculadora que implementamos con la librería Swing. Como ya hemos comentado, JavaFX permite separar los ficheros que contienen la lógica de negocio de las aplicaciones (llamados controladores) de los ficheros que contienen la interfaz de usuario (ficheros .fxml). Se puede decir que JavaFX implementa el tan conocido patrón MVC, ampliamente utilizada en el desarrollo web actual. Todo quedará mas claro a través del ejemplo.
Primera aplicación JavaFX con Scene Builder
El primer paso será crear un proyecto con soporte para JavaFX (nómbrale MiniCalculadoraFX) tal y como hicimos en el punto 4.2:
- Crearemos una aplicación java tradicional.
- Añadimos la librería de JavaFX.
- Parametrizamos la jvm para poder lanzar a ejecución la aplicación.
El siguiente paso será crear, tal y como hicimos en el proyecto anterior, una clase principal JavaFX. Una vez creada, eliminamos el código del método start.
Primera aplicación JavaFX con Scene Builder II
El siguiente paso consistirá en crear dos ficheros que darán soporte a la interfaz de usuario de nuestra aplicación:
- MiniCalcVentana.fxml: Fichero declarativo que contiene la definición de la interfaz de usuario: controles, posición, características, etc. Este fichero no se editará a mano sino a través del Scene Builder.
- MiniCalcVentanaControlador.java: Fichero java que contendrá el código asociado a la ventana, es decir, toda la lógica de negocio. Por ejemplo, los manejadores de eventos de la ventana MiniCalcVentana estarán implementados en este controlador.
Para ello, en el paquete por defecto, seleccionamos en Netbeans New - Empty FXML. Aparecerá la siguiente ventana:
Indicamos el nombre para nuestro fichero FXML: MiniCalcVentana. Pulsamos Next.
Primera aplicación JavaFX con Scene Builder III
En el siguiente paso, indicamos a Netbeans que genere automáticamente el controlador asociado a la vista.
Dejamos el nombre por defecto y pulsamos Next. En el siguiente paso podemos comprobar como incluso podemos asociar un fichero de estilos (CSS) a nuestra vista. Esto no es posible hacerlo en Swing pero si en JavaFX. En nuestro caso no lo hacemos. Pulsamos en finalizar y ya tenemos los dos ficheros creados en nuestro paquete.
Primera aplicación JavaFX con Scene Builder IV
Antes de diseñar nuestra interfaz, vamos a incluir el código java necesario en la clase principal de nuestra aplicación para que cuando lancemos a ejecutar, cargue la vista creada MiniCalcVentana. Observa el código del método start:
public void start(Stage primaryStage) throws IOException {
Parent root= FXMLLoader.load(getClass().getResource("MiniCalculadoraInterfaz.fxml"));
Scene scene= new Scene(root);
primaryStage.setTitle("Mini Calculadora JavaFX");
primaryStage.setScene(scene);
primaryStage.show();
}
Parte de este código ya nos es familiar, pues se crea la escena y se asocia al Stage. En la primera línea del código, a través del FXMLLoader, indicamos que cargue nuestro fichero fxml. En nuestra "primera aplicación JavaFX" creamos la interfaz a través de código Java y en este caso lo haremos a través de nuestro fichero fxml, que editamos con Scene Builder.
Primera aplicación JavaFX con Scene Builder V
Llega el momento de diseñar la interfaz. Para ello, pulsamos sobre el fichero fxml con el botón derecho y pulsamos Open: si la instalación del Scene Builder se realizó correctamente, se abrirá y cargará el fichero MiniCalcVentana.fxml, que estará vacío.
Primera aplicación JavaFX con Scene Builder VI
La interfaz de Scene Builder es parecida al editor de Swing de Netbeans.
- El panel superior izquierdo contiene todo tipo de controles y layouts.
- Justo debajo se encuentra el navegador, donde se irán colocando de forma jerárquica todos los elementos que añadamos a nuestra interfaz.
- En la parte central tendremos el editor: podemos añadir elementos arrastrando con el ratón.
- El panel de la parte derecha contiene las propiedades de un elemento seleccionado.
Utilizando tus conocimientos e intuición, trata de crear una interfaz parecida a la de la imagen, sin añadirle funcionalidad.
Primera aplicación JavaFX con Scene Builder VII
Una vez que tenemos creada nuestra interfaz, es hora de darle funcionalidad. Recuerda que todo el código Java asociado se incluirá en el controlador MiniCalcVentanaController.java. Observa el código que vamos a añadir a nuestro controlador.
public class MiniCalculadoraInterfazController implements Initializable {
@FXML
private TextField tfNumero1;
@FXML
private TextField tfNumero2;
@FXML
private TextField tfResultado;
@FXML
private void buttonSumarHandler (ActionEvent event){
//Variables para almacenar los operandos a sumar.
int num1, num2, resul;
num1= Integer.parseInt(tfNumero1.getText());
num2= Integer.parseInt(tfNumero2.getText());
//Ya hemos recogido el valor de los operados de los campos de texto de la interfaz. Realizamos la suma.
resul=num1+num2;
tfResultado.setText(String.valueOf(resul));
}
@FXML
private void buttonSalirHandler (ActionEvent event){
System.exit(0);
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
- Declaramos una referencia a cada uno de los elementos de las interfaz a los que tenemos que acceder desde el controlador. Para ello utilizamos la etiqueta @FXML (incluir el import si hay errores de compilación). Evidentemente, hemos de asignar un nombre a cada referencia. En nuestro caso, necesitamos acceder a los tres campos de texto: a dos de ellos para recuperar los valores de los números a sumar (tfNumero1 y tfNumero2) y el tercero para mostrar el resultado (tfResultado). Observa que esas referencia son del tipo de objeto que utilizamos al incluir el elemento en la interfaz, en nuestro caso, TextField. Líneas 3-10.
- A continuación, declaramos un método que va a actuar como manejador de eventos del botón Sumar. Se encargará de realizar la suma y mostrar el resultado en el campo de texto apropiado. El nombre del método lo decidimos nosotros.
- Creamos un tercer método que se encargará de manejar eventos producidos por el botón Salir.
Primera aplicación JavaFX con Scene Builder VIII
¿Cómo asociamos el controlador al fichero fxml? Esta asociación consiste en:
- Asociar el fichero MiniCalcVentanaController.java al fichero MiniCalcVentana.fxml.
- Asociar cada campo de texto en el controlador a su homólogo en el fichero fxml.
- Asociar el manejador creado a cada uno de los botones en el fichero fxml.
La asociación de ficheros ya está hecha, pues al generar el fichero fxml indicamos a Netbeans que generara su fichero controlador. De todas formas, se podría modificar esa asociación en Scene Builder.
Primera aplicación JavaFX con Scene Builder IX
Para asociar los campos de texto utilizamos el panel Code situado en la parte derecha. Observa como en la imagen, para el elemento seleccionado (campo de texto con el resultado), asociamos el id tfResultado que previamente hemos definido en el controlador: esta asociación permite que desde el controlador se pueda recuperar el valor de este campo de texto. Habría que lo mismo para los otros dos campos de texto.
Primera aplicación JavaFX con Scene Builder X
Solo nos queda asociar los manejadores de eventos a los botones. Utilizamos el mismo panel. Obsérvalo en la imagen:
Al evento OnAction del botón, que se lanzará cuando el botón sea pulsado, le asociamos el manejador buttonSumarHandler, que previamente hemos definido en el controlador.
Puedes asociar el manejador apropiado al botón Salir.
Primera aplicación JavaFX con Scene Builder XI
Momento de ejecutar nuestra aplicación. Si todo es correcto, éste debería ser el resultado.
Primera aplicación JavaFX con Scene Builder X
Todas las imágenes utilizadas son propiedad del Ministerio de Educación y FP bajo licencia CC BY-NC y se corresponden con capturas de pantalla de la aplicación Netbeans.
En el siguiente enlace puedes descarga el proyecto.
