Ajouter une image d'arrière-plan dans JavaFX

1. Ajouter une image d’arrière-plan JavaFX à l’aide de CSS
2. Ajouter une image d’arrière-plan JavaFX à l’aide de BackgroundImage en Java
3. Sommaire

Ce tutoriel présente comment ajouter des images d’arrière-plan dans l’application JavaFX. Vous pouvez également suivre les exemples de codes que nous avons inclus pour vous aider à comprendre le sujet.

L’application JavaFX de base contient une étape principale, une scène et des nœuds individuels. La scène organise les racines dans un format d’arbre, et la racine de cet arbre s’appelle le Root Node.

Notre classe doit étendre la classe Application de la javafx.application pour créer une application JavaFX. Ensuite, nous devons surcharger la méthode start().

Ici, nous allons vous montrer comment ajouter une image à l’arrière-plan d’une application JavaFX. Il y a deux façons de faire ce processus : en utilisant CSS et en utilisant la classe BackgroundImage.

Ajouter une image d’arrière-plan JavaFX à l’aide de CSS

CSS est l’abréviation de Cascading Style Sheets et est utilisé pour styliser les pages Web. De plus, CSS peut également être utilisé pour styliser les applications JavaFX. Nous utiliserons les règles CSS suivantes pour définir et styliser l’image d’arrière-plan. Vous pouvez ajouter plus de règles selon vos besoins.

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

Nous pouvons utiliser des règles CSS en ligne à l’aide de la méthode setStyle() sur le nœud racine. Le CSS en ligne est génial si nous voulons juste ajouter quelques règles. Le code JavaFX complet est présenté ci-dessous.

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);
  }
}

Le CSS en ligne peut devenir un peu lourd et difficile à comprendre si nous avons beaucoup de règles. Au lieu de cela, nous pouvons créer un fichier CSS séparé et ajouter ces règles à ce fichier. Le contenu du fichier CSS est indiqué ci-dessous.

#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;
}

Nous avons utilisé un sélecteur d’ID dans le fichier CSS, nous devons donc définir le même ID pour la racine de notre application JavaFX. Ce processus peut être effectué en utilisant la propriété setId().

Nous pouvons simplement ajouter une référence à ce fichier CSS, et les règles seront appliquées à notre application. Nous utiliserons les méthodes getStylesheets() et add() sur la scène de l’application pour utiliser le fichier CSS. Le code complet pour cela est indiqué ci-dessous.

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);
  }
}

Ajouter une image d’arrière-plan JavaFX à l’aide de BackgroundImage en Java

JavaFX fournit une classe BackgroundImage, une option pratique à utiliser si nous ne voulons pas ajouter de CSS. Le constructeur de cette classe prend un objet de classe Image et d’autres propriétés d’image d’arrière-plan. La signature du constructeur de cette classe est indiquée ci-dessous.

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

Nous utiliserons la position et la taille par défaut, et l’image ne doit pas être répétée. Nous devons utiliser l’objet BackgroundImage pour créer une instance de classe Background. Enfin, nous pouvons utiliser le setBackground() sur le nœud racine pour définir l’image sur l’arrière-plan. Le code complet pour cela est indiqué ci-dessous.

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);
  }
}

Sommaire

JavaFX peut être obsolète et remplacé par d’autres technologies plus récentes, mais il peut toujours être utilisé à diverses fins. Nous pouvons définir l’image d’arrière-plan dans une application JavaFX en utilisant des règles CSS. On peut aussi appliquer CSS directement sur les nœuds en utilisant la méthode setStyle().

Si nous avons plus de règles, nous pouvons également utiliser un fichier CSS externe. JavaFX fournit également une classe BackgroundImage pour définir facilement l’arrière-plan en utilisant simplement Java.