Las etiquetas de JavaFX son uno de los elementos más básicos de JavaFX, son sencillos trozos de texto que van a aparecer en determinados lugares de las aplicaciones.
Continuamos con el proyecto creado y explicado en los capítulos anteriores:
Creación de etiquetas en JavaFX
Crear etiquetas en JavaFX es muy fácil.
En nuestro proyecto tenemos ya una etiqueta creada por defecto. Esa la vamos a ignorar. Quiero que aprendas los pasos para crear una etiqueta desde cero.
Archivo FXML
En el archivo FXML, vamos a crear una etiqueta (<Label>). Colócala dentro del VBox.
Fíjate en la línea 13:
<?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="primeraEtiqueta"/>
<Label fx:id="welcomeText"/>
<Button text="Hello!" onAction="#onHelloButtonClick"/>
</VBox>Con esto, tenemos la etiqueta con un id (identificador). Gracias a él, lo podremos asociar en el controlador.
Siempre que hagas cambios en los archivos del proyecto, acuérdate de guardarlos todos para que la app funcione como esperas.
Controlador
Lo siguiente que hay que hacer, es ir al controlador asociado al archivo FXML.
Vamos a eliminar en el controlador, dentro de la clase "HelloController" todo su contenido. Tiene que quedar así:
package com.example.proyectofx;
import javafx.fxml.FXML;
import javafx.scene.control.Label;
public class HelloController {
}Ahora, vas a crear tu propia etiqueta:
@FXML private Label primeraEtiqueta;
Veamos para qué sirve cada parte:
- @FXML: Es la anotación que marca el campo primeraEtiqueta para que sea reconocido y vinculado desde el archivo FXML. En el caso específico de "@FXML private Label primeraEtiqueta;", se utiliza para vincular la etiqueta definida en el archivo FXML con un campo en el controlador llamado "primeraEtiqueta" de tipo Label.
- private: Indica que el campo primeraEtiqueta tiene un nivel de acceso privado, lo cual es una buena práctica para encapsular y proteger los campos.
- Label: Es el tipo de dato del campo primeraEtiqueta. En este caso, Label se refiere a la clase de JavaFX que representa una etiqueta en la interfaz de usuario.
- Una vez que el campo está marcado con @FXML, JavaFX buscará un elemento en el archivo FXML con el mismo identificador (fx:id) que se le haya asignado al campo. Cuando se carga el archivo FXML y se vincula con el controlador, JavaFX establecerá automáticamente la referencia a la etiqueta definida en el archivo FXML en el campo primeraEtiqueta del controlador.
De esta manera, el controlador tiene acceso directo al elemento de la interfaz de usuario (en este caso, la etiqueta) y puede manipularlo, cambiar su contenido, establecer propiedades y responder a eventos.
Crear evento con la etiqueta de JavaFX
Para utilizar la etiqueta como evento, vamos a asociarla al evento onAction del botón que ya tiene nuestra app. Así, saldrá solo cuando pulsemos el botón.
Este evento se crea mediante un método, el cual, se va a llamar al pulsar el botón.
@FXML
protected void pulsarBoton() {
primeraEtiqueta.setText("Esta es la primera etiqueta creada con JavaFX");
}
}En el método, le establecemos un valor de texto a la etiqueta con "setText". Eso se hace al pulsar el botón.
La etiqueta está colocada en el archivo FXML, por lo que este texto aparecerá dentro de la VBox ¿Dónde? Encima del botón, ya que primero se ha definido la etiqueta y luego el botón.
Antes de ejecutar, debes cambiar el evento onAction del botón. También pueden modificar su valor de "text", para que se muestre otro texto dentro del botón.
Entonces, nos quedará así el archivo FXML:
<?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="primeraEtiqueta"/>
<Button text="Hello!" onAction="#pulsarBoton"/>
</VBox>El botón lo tienes en la línea 14.
Espero que este artículo te haya servido para entender un poco sobre como funcionan los eventos y las etiquetas en JavaFX.
No te pierdas nada del curso Máster en Java.
