JavaFX Scene Builder, editor para crear archivos FXML

Escrito por el , actualizado el .
java planeta-codigo programacion
Enlace permanente Comentarios

Con la aplicación JavaFX Scene Builder podemos construir la interfaz gráfica de una aplicación de escritorio Java de forma más sencilla. JavaFX Scene Builder genera archivos descriptores FXML que podemos cargar en la aplicación evitando la tediosa y no sencilla tarea de construir la interfaz gráfica mediante código. En el artículo comento la aplicación JavaFX Scene Builder, como usar los archivos FXML en una aplicación de escritorio, como asociar manejadores de eventos y como cambiar las propiedades de los controles.

Java

Por lo poco que he visto JavaFX es una gran evolución sobre AWT y Swing para desarrollar aplicaciones de escritorio en Java aportando varias mejoras. En el artículo Introducción a JavaFX comentaba que una de las cosas que me parecía más complicada usando tanto AWT y más tarde usando Swing era la construcción de los elementos visuales mediante código. El código para construir las ventanas, paneles, rejillas, botones, etiquetas, etc era extenso y difícil de comprender la composición leyéndolo. Con JavaFX se ha introducido una nueva herramienta visual llamada JavaFX Scene Builder que permite generar un archivo en formato FXML (declarativo en XML) que contiene la descripción de las ventanas o como llama JavaFX escenas. Este descriptor es similar a la forma de construir interfaces gráficas en la plataforma de Microsoft con los archivos XAML.

Con los archivos FXML que genera la aplicación JavaFX Scene Builder crear aplicaciones gráficas es mucho más sencillo y más fácilmente mantenible. Proporciona un editor que sigue el principio lo que ves es lo que obtienes (WYSIWYG) y que permite generar los archivos FXML que posteriormente se pueden utilizar en la aplicación Java de escritorio para crear la interfaz visual. Podemos descargar la aplicación JavaFX Scene Builder desde su página de descargas. En la siguiente imagen se puede ver la interfaz con el ejemplo Hola Mundo.

JavaFX Scene Builder con la aplicación ¡Hola Mundo!

JavaFX Scene Builder con la aplicación ¡Hola Mundo!

Y el FXML que genera del mismo ejemplo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.effect.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="io.github.picodotdev.javafx.HelloWorldFXMLController">
   <children>
      <Button fx:id="button" mnemonicParsing="false" text="Hola mundo" />
      <Button fx:id="controllerButton" mnemonicParsing="false" onAction="#onAction" text="Controlador" />
   </children>
</HBox>
HelloWorld.fxml

Que podemos usar en una aplicación con el siguiente código. Comparándolo con el código del ejemplo sin FXML vemos que el número de líneas necesarias son unas cuantas menos que se notará más cuanto más compleja sea la interfaz gráfica.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package io.github.picodotdev.javafx;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class HelloWorldFXML extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) {
        try {
            HBox layout = (HBox) FXMLLoader.load(getClass().getResource("HelloWorld.fxml"));

            stage.setTitle("¡Hola JavaFX!");
            stage.setScene(new Scene(layout, 300, 250));
            stage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
HelloWorldFXML.java

En la aplicación JavaFX Scene Builder disponemos de una amplia paleta de controles que podemos usar arrastrando y soltando para construir la interfaz, botones, checkbox, radio buttons, paneles, rejillas, menús, contenedores, miscelánea, formas, 3D, …

Controles de JavaFX

Controles de JavaFX

Si con los archivos FXML construimos la interfaz queda como enlazar los elementos visuales con su comportamiento mediante eventos. Una forma es inyectar en propiedades con una anotación los elementos visuales y añadirles el código de comportamiento, otra es indicar en el propio archivo FXML la clase controlador que se encargará del manejo de los eventos del evento visual y otra es incluir el código manejador de evento en el propio archivo FXML.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package io.github.picodotdev.javafx;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class HelloWorldFXMLController implements Initializable {

    @FXML
    private Button button;

    @FXML
    private Button controllerButton;

    @FXML
    void onAction(ActionEvent event) {
        System.out.println("Hello World! (controllerButton)");
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World! (button)");
            }
        });
    }
}
HelloWorldFXMLController.java

La clase manejador de eventos se indica en el panel Controller y es una clase con métodos que posteriormente se indican en el editor con una almohadilla (#) delante en el panel Code. Por ejemplo, si el manejador de un botón se llama onClick en la clase controlador HelloWorldFXMLController deberemos tener ese método con el parámetro adecuado en este caso un ActionEvent.

Añadiendo comportamiento a aplicación JavaFX

Añadiendo comportamiento a aplicación JavaFX

Además de poder enlazar los componente visuales con el código para añadirles funcionalidad se pueden modificar las propiedades visuales como el texto, fuente y tamaño, alineación, opacidad, visibilidad, altura, anchura, margen, margen interior, rotación, escalado, … . Algunas propiedades son aplicables a varios componentes otras son específicas según el componente.

Propiedades de los controles JavaFX

Propiedades de los controles JavaFX, en este caso de un botón

Entre las demostraciones y ejemplos de Java 8 está la aplicación Modena con la que podemos ver el aspecto visual de los componentes, en la aplicación Ensemble hay más ejemplos junto con código de muchos controles.

Aplicación Modena

Aplicación Modena

Aplicación Ensemble

Aplicación Ensemble

En la propia página web de JavaFX, en el libro JavaFX For Dummies y otra documentación se puede encontrar explicado de forma más detallada JavaFX.

En definitiva con la aplicación JavaFX Scene Builder y los archivos FXML construir la interfaces gráficas de una aplicación de escritorio Java es bastante más simple que lo era antiguamente. JavaFX además ofrece posibilidades que antes no eran posibles en Swing y AWT como rotar componentes, un componente visualizador de HTML, soporte para aceleración gráfica por hardware y más cosas. Después de haber conocido en algo más detalle JavaFX me quedo con una buena sensación. Como muestra de la flexibilidad de cambio de los estilos de los controles el proyecto JFoenix les aplica el Material Desing de las aplicaciones Android de Google.


Comparte el artículo: