Agregar una imagen de fondo en JavaFX

1. Agregar una imagen de fondo de JavaFX usando CSS
2. Agregar una imagen de fondo JavaFX usando BackgroundImage en Java
3. Resumen

Este tutorial presenta cómo agregar imágenes de fondo en la aplicación JavaFX. También puede seguir los códigos de ejemplo que incluimos para ayudarlo a comprender el tema.

La aplicación JavaFX básica contiene una etapa primaria, una escena y nodos individuales. La escena organiza las raíces en formato de árbol, y la raíz de este árbol se denomina nodo raíz.

Nuestra clase debe extender la clase Application de javafx.application para crear una aplicación JavaFX. Entonces, necesitamos anular el método start().

Aquí, le mostraremos cómo agregar una imagen al fondo de una aplicación JavaFX. Hay dos formas de hacer este proceso: usando CSS y usando la clase BackgroundImage.

Agregar una imagen de fondo de JavaFX usando CSS

CSS es una abreviatura de Cascading Style Sheets y se utiliza para diseñar páginas web. Además, CSS también se puede utilizar para diseñar aplicaciones JavaFX. Usaremos las siguientes reglas CSS para configurar y diseñar la imagen de fondo. Puede agregar más reglas según sus necesidades.

-fx-background-image: url('image-url');
-fx-background-repeat: no-repeat; 
-fx-background-size: 500 500; 
-fx-background-position: center center;

Podemos usar reglas CSS en línea con la ayuda del método setStyle() en el nodo raíz. CSS en línea es excelente si solo queremos agregar algunas reglas. El código JavaFX completo se muestra a continuación.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Main extends Application {
  @Override
  public void start(Stage primaryStage) {
    StackPane root = new StackPane();
    Scene scene = new Scene(root, 650, 650);
    root.setStyle(
        "-fx-background-image:                                                url('https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/ed5569e8-c0dd-458c-8450-cde6300093bd/File/a5023b0f0fb67f59176a0499af9021ed/java_horz_clr.png'); -fx-background-repeat: no-repeat; -fx-background-size: 500 500; -fx-background-position: center center;");
    primaryStage.setScene(scene);
    primaryStage.show();
  }
  public static void main(String[] args) {
    launch(args);
  }
}

CSS en línea puede volverse un poco engorroso y difícil de entender si tenemos muchas reglas. En su lugar, podemos crear un archivo CSS separado y agregar estas reglas a ese archivo. El contenido del archivo CSS se muestra a continuación.

#stack-pane{
    -fx-background-image: url("https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/ed5569e8-c0dd-458c-8450-cde6300093bd/File/a5023b0f0fb67f59176a0499af9021ed/java_horz_clr.png");
    -fx-background-repeat: no-repeat;
    -fx-background-size: 500 500;
    -fx-background-position: center center;
}

Hemos utilizado un selector de ID en el archivo CSS, por lo que debemos establecer el mismo ID para la raíz de nuestra aplicación JavaFX. Este proceso se puede realizar utilizando la propiedad setId().

Simplemente podemos agregar una referencia a este archivo CSS y las reglas se aplicarán a nuestra aplicación. Usaremos los métodos getStylesheets() y add() en la escena de la aplicación para usar el archivo CSS. El código completo para esto se muestra a continuación.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Main extends Application {
  @Override
  public void start(Stage primaryStage) {
    StackPane root = new StackPane();
    root.setId("stack-pane");
    Scene scene = new Scene(root, 650, 650);
    scene.getStylesheets().add(String.valueOf(this.getClass().getResource("sample.css")));
    primaryStage.setScene(scene);
    primaryStage.show();
  }
  public static void main(String[] args) {
    launch(args);
  }
}

Agregar una imagen de fondo JavaFX usando BackgroundImage en Java

JavaFX proporciona una clase BackgroundImage, una opción conveniente para usar si no queremos agregar CSS. El constructor de esta clase toma un objeto de clase Image y otras propiedades de la imagen de fondo. La firma del constructor de esta clase se muestra a continuación.

BackgroundImage(Image img, BackgroundRepeat repeatXAxis, BackgroundRepeat repeatYAxis,
    BackgroundPosition pos, BackgroundSize size)

Usaremos la posición y el tamaño predeterminados, y la imagen no debe repetirse. Necesitamos usar el objeto BackgroundImage para crear una instancia de clase Background. Finalmente, podemos usar setBackground() en el nodo raíz para establecer la imagen en el fondo. El código completo para esto se muestra a continuación.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Main extends Application {
  @Override
  public void start(Stage primaryStage) {
    StackPane root = new StackPane();
    Scene scene = new Scene(root, 650, 650);
    Image img = new Image(
        "https://cdn.app.compendium.com/uploads/user/e7c690e8-6ff9-102a-ac6d-e4aebca50425/ed5569e8-c0dd-458c-8450-cde6300093bd/File/a5023b0f0fb67f59176a0499af9021ed/java_horz_clr.png");
    BackgroundImage bImg = new BackgroundImage(img, BackgroundRepeat.NO_REPEAT,
        BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT);
    Background bGround = new Background(bImg);
    root.setBackground(bGround);
    primaryStage.setScene(scene);
    primaryStage.show();
  }
  public static void main(String[] args) {
    launch(args);
  }
}

Resumen

JavaFX puede estar desactualizado y reemplazado por otras tecnologías más nuevas, pero aún puede usarse para varios propósitos. Podemos configurar la imagen de fondo en una aplicación JavaFX usando reglas CSS. También podemos aplicar CSS directamente a los nodos usando el método setStyle().

Si tenemos más reglas, también podemos usar un archivo CSS externo. JavaFX también proporciona una clase BackgroundImage para establecer el fondo utilizando simplemente Java simple y sencillo.