Curso de JavaFX
Documentos FXML

En esta lección aprenderemos cómo trabajar con archivos FXML en JavaFX para definir nuestras interfaces gráficas de forma declarativa. Gracias a FXML, podemos separar la lógica de nuestra aplicación del diseño visual, facilitando así el desarrollo y mantenimiento del código. Vamos a explorar las siguientes secciones:

• Es posible crear las interfaces visuales con código Java o con FXML (similar a HTML).
• FXML soporta el estandar de CSS 2.1 y tiene algunas características de CSS3.
• Los estilos que alteran el posicionamiento de las capas, como position, o display, no funcionan con JavaFX.
• Cuenta con un Scene Builder para poder crear interfaces de manera más amigable.

Botón derecho sobre un paquete → new → New FXML Document

Configurar el Scene Builder en Eclipse

1. Para editar visualmente estos ficheros, podemos instalar el Scene Builder: https://www.oracle.com/java/technologies/javafxscenebuilder-1x-archive-downloads.html

2. Configurar el uso del Scene Builder en Eclipse: Window → Preferences → JavaFX → Scene Builder Executable → C:\Program Files (x86)\Oracle\JavaFX Scene Builder 2.0

3. Botón derecho sobre el fichero FXML que queremos editar → Open With Scene Builder

Cargar una escena definida con el scene Builder

Para cargar un archivo FXML desde nuestra aplicación Java, utilizaremos la clase FXMLLoader. El siguiente código muestra cómo hacerlo:

Parent root = FXMLLoader.load(getClass().getResource("/view/tresenraya.fxml"));

Esto cargará y mostrará el diseño definido en tresenraya.fxml. Es importante que la ruta del archivo sea correcta y que el fichero FXML esté incluido en el proyecto.

Llamar a un método definido en nuestro .java desde nuestro fichero FXML

1. Tendremos que vincular nuestro fichero fxml a su correspondiente controlador:

2. Debemos vincular el nombre del método que queremos ejecutar a su correspondiente botón.

3. Y en el controlador, definir el método que será llamado con su correspondiente anotación.

@FXML
public void calcular() {
 System.out.println("Llega al método");
}

Acceder a un elemento de nuestro fichero .fxml

Hay varias formas, aunque la más sencilla, sería ponerle un identificador en el fxml:

Y luego hacer referencia a ese identificador desde el controlador:

@FXML
private TextField n1;

Hacer que un elemento ocupe el 100% de la capa que lo envuelve:

Para que un elemento en JavaFX ocupe todo el espacio disponible dentro de su contenedor, existen varias opciones:

.btn {
 -fx-max-width: Infinity;
 max-width: Infinity;
 -fx-max-height: Infinity;
 max-height: Infinity;
}

<Node maxWidth="Infinity"/>

Desde el controlador Java:

node.setMaxWidth(Double.MAX_VALUE);

Con estos pasos, ahora puedes trabajar con documentos FXML en tus proyectos JavaFX, aprovechando las ventajas de una interfaz gráfica declarativa y herramientas como Scene Builder para facilitar tu trabajo. ¡A practicar!