Vamos a desarrollar una aplicación muy sencilla para conocer cómo funciona JavaFX utilizando fichero FXML.
Para comenzar el desarrollo de la aplicación, abrimos NetBeans el cual será el IDE con el que desarrollaremos parte de la aplicación, ya que la interfaz será realizada con JavaFX Scene Builder.
Para ello, abrimos el NetBeans y damos clic sobre el icono para crear un nuevo proyecto de Java.
Se nos mostrara una pantalla para la creación de un nuevo proyecto, en este caso, seleccionamos la categories JavaFX y posteriormente en projects seleccionamos JavaFX FXML Application, damos clic en “Next” para continuar.
Se nos mostrara una pantalla para continuar con la creación del proyecto, en este punto le he dado un nombre al proyecto el cual es “AplicacionSaludo”, un nombre al fichero FXML el cual será VentanaSaludo y para la clase que contendrá el método main, solo he añadido al fina (.Main) para darle nombre a la clase y damos clic en Finish para finalizar de crear el proyecto.
Ya podremos ver en el explorador de proyecto toda la estructura del proyecto que hemos creado, donde podemos visualizar el paquete que incluye los ficheros que se definieron en la ventana anterior.
Esta captura muestra el código que genera por defecto el proyecto para la clase Main.
Este es el código que se genera por defecto en el fichero FXML.
Y este es el código creado por defecto para la clase controller y que nos servirá para definir los métodos y acciones de la aplicación.
Una vez visto lo anterior, debemos comprobar que nuestro NetBeans tiene configurado el Scene Builder para editar el fichero FXML.
Para ello vamos al menú Tools y en el menú desplegable, seleccionamos “Options”.
En la ventana de opciones, damos clic en la opción “Java” y posteriormente seleccionamos la pestaña de “JavaFX”.
Allí debemos buscar el directorio de instalación del Scene Builder, este paso habitualmente el NetBeans lo reconoce de forma automática, sin embargo, es bueno saber dónde se realizar esta configuración por si no se llegara a abrir el fichero FXML con Scene Builder.
Una vez comprobado lo anterior, damos doble clic sobre el fichero VentanaSaludo.fxml para abrirlo con Scene Builder y comenzar con el diseño de la interfaz solicitada.
Después de hacer doble clic sobre el fichero FXML, se nos abrirá este fichero con Scene Builder como se puede visualizar en la siguiente captura, en ella también aparece una ventana que es la que se crea por defecto cuando se creó el proyecto.
Vamos a usar un GridPane como contenedor de los diferentes controles que se añadirán a la interfaz, en este caso seleccionamos “Containers” y en la lista de los diferentes contenedores, seleccionamos el GridPane.
Lo arrastramos al centro de formulario actual y lo soltamos sobre.
Una vez realizado esto, podemos ver en el lado izquierdo, en Document, las opciones de jerarquía, por lo que vemos que ya tenemos nuestros GridPane, para ello, procedemos a quitar el resto de los controles y el AnchorPane donde se encuentra anclados los mismos.
Seleccionamos el GridPane y damos clic derecho, se nos mostrara un menú desplegable donde seleccionaremos “Fit to Parent” para ampliar el GridPane al tamaño del formulario.
En esta captura ya podemos ver que el GridPane cuenta con el tamaño inicial que quiero para el diseño de la interfaz, ya solo queda quitar los controles que tenían por defecto el fichero FXML que genero NetBeans.
Para ello, hacemos en el menú “Edit” y seleccionamos “Trin Document to Selection”
Como se puede apreciar en la captura, ya tenemos nuestro GridPane como único contenedor, por lo que ahora comenzamos a incluir los diferentes elementos que tendrá la interfaz.
A continuación, añadimos una nueva fila a la GridPane, la cual será necesaria para para la interfaz, para ello seleccionamos una fina y damos clic derecho y en el menú desplegable seleccionamos “Add Row Above”
Ya tenemos el GridPane con la cantidad de filas y columnas que se requieren para el diseño de la interfaz.
Comenzamos añadiendo las etiquetas en el GridPane, para ellos escribimos “Label” en el buscador de panel izquierdo de JavaFX Scene Builder y se nos mostrara el control que queremos, esta es una forma rápida para ubicar el control sin necesidad de ver toda la lista de controles y comenzamos a añadir las etiquetas.
Una vez tenemos las etiquetas (Label), realizamos el mismo procedimiento anterior pero esta vez para buscar el campo de texto (TextField) que queremos añadir en el GridPane.
Ya localizado, los añadimos en el GridPane como se puede apreciar en la captura.
Realizamos el mismo procedimiento para ubicar el botón (Button).
Añadimos el botón en el GridPane
Ahora, modificamos la propiedad “Text” de cada etiqueta y el botón, para ellos podemos hacer dos cosas, seleccionamos el control y vamos a lado derecho del Scene Builder y en el Inspector, seleccionamos las propiedades (Properties) y cambiamos el valor de la propiedad “text” o simplemente hacemos doble clic sobre el control y cambiamos este valor, en mi caso he realizado lo según y el resultado es el mostrado a continuación.
Continuando con las propiedades, procedo a modificar la etiqueta que contiene el mensaje “¡ Hola, mundo ¡” modificando sus propiedades hasta obtener el aspecto deseado.
Seleccionamos la columna para modificar los márgenes y que estos controles tengan la alineación deseada.
Para ello, he modificado los valores de las propiedades de Layout en Hgap, Vgap y padding, dándoles los valores que se pueden visualizar en la captura.
Para conseguir un aspecto aun más parecido, procedo a ampliar el tamaño del GridPane, para ello les doy un ancho de 400 y un alto de 220 (Este último realmente lo deje como lo tenía inicialmente que era 220), para ellos se cambiaron los valores de Pref Width y Pref Height.
Ahora hemos terminado el diseño de la interfaz, quedan realizar otros pasos para darle funcionalidad, así como un identificador para los controles y evento para aquel que lo amerite, pero eso lo realizare después de realizar los cambios de condigo.
Damos clic en el menú Preview en la opción “Show Preview in Window” o simplemente la combinación de teclado “Ctrl + P”, con esto tendremos una visualización del resultado final de la interfaz.
Como se puede ver, aun tenemos el titulo con el nombre del fichero, pero este cambio se realizará en el código, así como la etiqueta que dice Hola, que también sufrirá un cambio a nivel de código.
Ahora, ya en el NetBeans, seleccionamos la clase controladora “VentanaSaludoController.java” y eliminamos el código que se genero por defecto, solo el seleccionado en rojo.
En el caso del método initialize, este es obligatorio tenerlo, aunque no se utilice, cosa que en mi caso si le dare uso y eso se debe a que estamos implementando la interfaz Initializable, y esto nos obliga a implementar todos sus métodos.
Instanciamos la etiqueta, campo de texto y botón que utilizaremos en el formulario, para ello, escribimos @FXML seguido del objeto a utilizar y el nombre que le queremos dar, una vez realizado, importamos la clase requerida al proyecto como se puede visualizar a continuación.
Luego, en la misma clase controladora, creo un ActionEvent al cual he llamado “eventoSaludo”, este evento cambia el valor de la etiqueta “lblSaludo” pasándole a su método “setText()” el valor concatenado de la palabra “Hola seguido de un espacio y a continuación el valor que obtengo del método getText() del campo de texto txtNombre.
Otro cambio en el código del control es que en el método initialize, he puesto que a la etiqueta lblSaludo en su método setText() no tenga ningún valor, con esto al momento de cargar el formulario, la etiqueta no tendrá el valor que he dejado en diseño.
Ahora, pasamos al método main, del fichero “Main.java”, este fichero no hay que realizar ningún cambio especial, básicamente le pasaremos un valor al método setTitle del stage (Ventana) para que esta tenga el titulo que queremos.
Se puede visualizar en la captura el código aplicado.
Una vez realizado los cambios en código, ahora queda enlazar con el formulario, para ello seleccionamos el control que realizara alguna acción en el formulario y el la opción “code” del inspector, seleccionamos el nombre de control que se creo en la clase controladora en la opción “fx:id”, en el caso de la etiqueta que mostrara el saludo es “lblSaludo” y con esto ya el control tendrá un identificador.
Realizamos el mismo procedimiento para el campo de texto asignándole al “fx:id” el valor de txtNombre.
Y lo mismo para el botón, que en este caso solo nos queda “btnHola”.
En el caso del botón, solo nos queda seleccionar el evento que se programó en la clase controladora, ya que lo que queremos es que a dar clic en el botón se realice lo que se solicita que haga el programa.
Salvamos todos los cambios realizados del fichero VentanaSaludos.fxml.
Aquí dejo una captura de como se visualiza en el lenguaje de marcado FXML el resultado de todo lo realizado de manera gráfica con la aplicación JavaFX Scene Builder.
Ahora solo queda ejecutar la aplicación y que esta realice lo que se ha programado, procedemos a su ejecución.
Aquí dejo una captura solo de la ventana de la aplicación para que se pueda apreciar mejor el resultado después de incluir mi nombre en el campo de texto y dar clic en el botón de la aplicación.
package aplicacionsaludo.AplicacionSaludo;
import javafx.application.Application;import javafx.fxml.FXMLLoader;import javafx.scene.Parent;import javafx.scene.Scene;import javafx.stage.Stage;/**
*
* @author Oscar Jaramillo
*/
public classMainextendsApplication{
@Override
public void start(Stage stage) throwsException {
Parent root = FXMLLoader.load(getClass().getResource("VentanaSaludo.fxml"));
Scene scene = newScene(root);
stage.setTitle("Aplicación Saludo 1.0");
stage.setScene(scene);
stage.show();
}
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
package aplicacionsaludo.AplicacionSaludo;
import java.net.URL;import java.util.ResourceBundle;import javafx.event.ActionEvent;import javafx.fxml.FXML;import javafx.fxml.Initializable;import javafx.scene.control.Button;import javafx.scene.control.Label;import javafx.scene.control.TextField;/**
*
* @author Oscar Jaramillo
*/
public class VentanaSaludoController implements Initializable {
@FXML
Label lblSaludo;
@FXML
TextField txtNombre;
@FXML
Button btnHola;
@FXML
private void eventoSaludar(ActionEvent event){
lblSaludo.setText("Hola " + txtNombre.getText());
}
@Override
public void initialize(URL url, ResourceBundle rb) {
lblSaludo.setText("");
}
}
xmlversion="1.0"encoding="UTF-8"?>
import javafx.geometry.*?>import javafx.scene.text.*?>import java.lang.*?>import java.util.*?>import javafx.scene.*?>import javafx.scene.control.*?>import javafx.scene.layout.*?>"6.0"prefHeight="220.0"prefWidth="450.0"vgap="6.0"xmlns="http://javafx.com/javafx/8"xmlns:fx="http://javafx.com/fxml/1"fx:controller="aplicacionsaludo.AplicacionSaludo.VentanaSaludoController">"SOMETIMES"maxWidth="250.0"minWidth="10.0"prefWidth="180.0" />
"SOMETIMES"maxWidth="135.0"minWidth="10.0"prefWidth="110.0" />
columnConstraints>
"10.0"prefHeight="30.0"vgrow="SOMETIMES" />
"10.0"prefHeight="30.0"vgrow="SOMETIMES" />
"10.0"prefHeight="30.0"vgrow="SOMETIMES" />
"10.0"prefHeight="30.0"vgrow="SOMETIMES" />
rowConstraints>
"¡ Hola, mundo !">
"24.0" />
font>
Label>
"¿Cómo te llamas?"GridPane.rowIndex="1"GridPane.valignment="BOTTOM">
GridPane.margin>
Label>
"lblSaludo"text="Hola"GridPane.rowIndex="3" />
"txtNombre"GridPane.rowIndex="2" />
"btnHola"mnemonicParsing="false"onAction="#eventoSaludar"text="Di, Hola"GridPane.columnIndex="1"GridPane.rowIndex="2" />
children>
"8.0"left="25.0"right="8.0"top="8.0" />
padding>
GridPane>
Muy interesante artículo para mostrar un ejemplo sencillo y rápido de usar Java Fx + CSS.