FXML es un lenguaje de marcado usado en JavaFX para describir la interfaz gráfica de usuario. Permite definir la estructura y el aspecto visual de la interfaz sin necesidad de escribir código Java directamente.
Te pongo aquí el código de un archivo básico de este tipo para que vayas entendiendo la estructura:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Button?>
<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
fx:controller="com.example.proyectofx.HelloController">
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
</padding>
<Label fx:id="welcomeText"/>
<Button text="Hello!" onAction="#onHelloButtonClick"/>
</VBox>
¿Qué son las etiquetas?
Si has estudiado HTML o XML, sabrás que este tipo de archivos contienen una serie de etiquetas, con las que se va realizando la estructura de por ejemplo un sitio web.
En HTML tenemos una sección "técnica" que no ve el usuario llamada <head> y otra <body> que es la que ve el usuario.
Cada una de estas secciones, tiene diferentes etiquetas que definen elementos como botones, párrafos, títulos, imágenes, etc.
Al igual que en HTML, en FXML tenemos etiquetas de apertura: <etiqueta> y de cierre </etiqueta>. Cada uno de estos pares, es como una caja o contenedor que encierra dentro otras etiquetas o el propio contenido que se espera para la función de dichas etiquetas.
Por ejemplo, un párrafo se escribe así:
<p>Esto es un párrafo escrito en HTML.</p>
Sin embargo, hay etiquetas que llevan la apertura y el cierre todo en uno. No necesitan dos. Un ejemplo es la etiqueta <img> (que sirve para cargar una imagen), la cual podemos crear así:
<img src="imagenes/imagen.jpg" alt="Las inteligencias artificiales" class="content-image" />
El inicio de esta etiqueta empieza con "<img" y su cierre está al final con "/>".
En esta etiqueta, a diferencia de <p>, tenemos una serie de opciones llamadas atributos. Estos atributos permiten hacer más cosas con las etiquetas. Por ejemplo, src indica la ruta a la imagen. El atributo alt ofrece una descripción de la imagen y class sirve para enlazar a un estilo CSS que le dará cierta apariencia a la imagen.
Las etiquetas pueden parecer simples, pero en realidad, son fundamentales para formar la estructura de un sitio web.
Las etiquetas de FXML funcionan básicamente de esta forma. Eso sí, son muy diferentes de las de HTML.
Entonces, dejemos HTML y empecemos ya con FXML.
Estructura básica de un archivo FXML
La estructura básica de un documento FXML está formada por las siguientes partes principales:
Etiqueta raíz
Cada archivo FXML tiene una etiqueta raíz (etiqueta principal) que envuelve todos los elementos de la interfaz. Por lo general, esta etiqueta se llama AnchorPane o VBox y se utiliza como un contenedor para organizar otros elementos.
Esta etiqueta (<VBox>), en el ejemplo, tiene su apertura en la línea 8 y su cierre en la 16.
En los atributos tenemos dos partes importantes. La declaración de atributos y la declaración del controlador.
Declaración de atributos VBox
Esta parte define las propiedades del contenedor VBox. En este caso, se establecen dos atributos:
- alignment: este atributo establece la alineación de los elementos dentro del VBox. En este ejemplo, los elementos se alinearán en el centro.
- spacing: Este atributo establece el espaciado entre los elementos dentro del VBox. En este caso, se establece en 20.0, lo que significa que habrá un espacio de 20 píxeles entre cada elemento.
Además, también se incluye el atributo xmlns:fx="http://javafx.com/fxml", que es una declaración de espacio de nombres XML para la anotación fx. Esta declaración permite el uso de las anotaciones @FXML y otros elementos de JavaFX en el archivo FXML.
Bueno, si todavía no entiendes muy bien esto último, no te preocupes, solo ponlo para que todo funcione como es debido.
Especificación del controlador
La parte fx:controller="com.example.proyectofx.HelloController" especifica qué clase se utilizará como controlador para este archivo FXML. En este caso, se indica que la clase HelloController en el paquete com.example.proyectofx es el controlador correspondiente. Básicamente, es la ruta que asocia este documento FXML con el controlador de la app.
Al asociar el controlador, esto permite que el archivo FXML se comunique con el código del controlador, lo que significa que podrás acceder y manipular los elementos de la interfaz gráfica desde el controlador.
Elementos de la interfaz
Dentro de la etiqueta raíz, se definen los elementos de la interfaz, como botones, etiquetas, campos de texto, etc. Cada elemento se define usando una etiqueta correspondiente, como puede ser <Label>, <Button>, entre muchas otras posibilidades.
<Label> sirve para especificar una etiqueta de texto y button para mostrar un botón.
En esta imagen tienes el resultado. "Welcome to JavaFX Application!" es la etiqueta y ese botón con un "Hello!" el producido con la etiqueta <Button>.
Atributos y propiedades
Como puedes ver, cada etiqueta cuenta con sus propios atributos que la personalizan. Por ejemplo, en el caso del botón, tenemos un atributo text que sirve para añadirle ese "Hello!" y un atributo onAction que crea un evento. Dicho evento, es una llamada a un método que hace algo en concreto. Esto ocurre al hacer clic sobre él.
Por el momento, esto es todo lo que necesitas saber para empezar a utilizar el lenguaje FXML. Seguimos con más cosas sobre esto en el siguiente capítulo, en el cual, empezaremos a definir nuestros propios elementos en las apps.
No te pierdas nada del curso Máster en Java.
