Entradas de texto de JavaFX

Entradas de texto de JavaFX

En este capítulo os voy a enseñar a utilizar las entradas de texto de JavaFX. Estas entradas van a ser muy útiles a la hora de pasarle datos al programa, por parte de un usuario.


Una entrada de texto, es una pequeña caja de texto, que permite escribir en ella. Lo que se escribe, casi siempre se le pasa al programa y se procesa, haciendo algo con la entrada del usuario.

Empezamos con los archivos del proyecto vacíos.

Archivo FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.VBox?>


<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
      fx:controller="com.example.tests.HelloController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
    </padding>

</VBox>

Archivo controlador

package com.example.tests;

import javafx.fxml.FXML;

public class HelloController {

}

Archivo de aplicación


package com.example.tests;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.io.IOException;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 320, 240);
        stage.setTitle("Mi primer programa");
        stage.setScene(scene);
        stage.show();
    }

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

Creación de entradas de texto de JavaFX

En el archivo FXML, vamos a agregar un campo de entrada de texto utilizando el siguiente código (línea 14):

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<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>

    <TextField fx:id="entradaNombre" promptText="Introduce tu nombre"/>
    
</VBox>

Te saldrá en la línea 14 este error: Cannot resolve symbol 'TextField'.

Es porque nos falta importar el elemento. Ponlo en la zona de importaciones:

<?import javafx.scene.control.TextField?>

Obtención y modificación de datos de la entrada de JavaFX

En el archivo controlador, vamos a añadir un método para obtener el texto introducido en el campo de entrada y mostrarlo en una etiqueta. Añade el siguiente código dentro de la clase "HelloController":

package com.example.proyectofx;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class HelloController {
    @FXML
    private TextField entradaNombre; // Referencia al campo de entrada de texto

    @FXML
    private Label etiquetaNombre; // Etiqueta para mostrar el nombre

    @FXML
    private void onButtonClicked() {
        String name = entradaNombre.getText(); // Obtiene el texto introducido en el campo
        etiquetaNombre.setText("¡Hola, " + name + "!"); // Muestra el nombre en la etiqueta
    }

}

Con "private TextField entradaNombre;" estamos declarando la definición de un atributo llamado entradaNombre que representa el campo de texto (TextField) en la interfaz gráfica.

Con "private Label etiquetaNombre;" estamos declarando la definición de un atributo llamado etiquetaNombre, que representa una etiqueta (Label) en la interfaz gráfica.

Verás que te aparece en la línea 8 un error. Eso es porque nos falta importar el elemento 'textField':

import javafx.scene.control.TextField;

Con esto, nos falta añadir la etiqueta al archivo FXML, la de la línea 11.

La he colocado entre el TextField y el Button, para que salga entre estos dos.

<TextField fx:id="entradaNombre" promptText="Introduce tu nombre"/>
<Label fx:id="etiquetaNombre"/>
<Button text="Saludar" onAction="#enviarSaludo"/>

Prueba del programa JavaFX

El último paso será comprobar si todo funciona correctamente.

Le pongo mi nombre y al pulsar el botón, se genera la frase personalizada.

elemento entrada texto javafx

Ya puedes ver la sencillez con la que trabaja JavaFX. Una vez conoces sus fundamentos, implementar sus elementos es una tarea bastante sencilla.

Si te quedan dudas, déjame un comentario. Si tienes algún tema que quieras sugerir, también. Estoy encantado de leer peticiones.

No te pierdas nada del curso Máster en Java, Kotlin y Android Studio.


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

curso django Entrada anterior [DJANGO] Añadir código JavaScript
curso sql Entrada siguiente Los patrones de búsqueda con IN en SQL