JavaFX - CSS

Cascading Style Sheets, également appelé CSS, est un langage de conception simple destiné à simplifier le processus de présentation des pages Web.

CSS gère l'aspect et la convivialité d'une page Web. En utilisant CSS, vous pouvez contrôler la couleur du texte, le style des polices, l'espacement entre les paragraphes, la taille des colonnes et la mise en page. En dehors de ceux-ci, vous pouvez également contrôler les images d'arrière-plan ou les couleurs utilisées, les conceptions de mise en page, les variations d'affichage pour différents appareils et tailles d'écran, ainsi que divers autres effets.

CSS dans JavaFX

JavaFX vous offre la possibilité d'utiliser CSS pour améliorer l'aspect et la convivialité de l'application. Le paquetjavafx.css contient les classes utilisées pour appliquer CSS pour les applications JavaFX.

Un CSS comprend des règles de style qui sont interprétées par le navigateur puis appliquées aux éléments correspondants dans votre document.

Une règle de style est composée de trois parties, qui sont -

  • Selector- Un sélecteur est une balise HTML à laquelle un style sera appliqué. Cela peut être n'importe quelle balise comme<h1> ou <table>, etc.

  • Property- Une propriété est un type d'attribut de la balise HTML. En termes plus simples, tous les attributs HTML sont convertis en propriétés CSS. Ils pourraient être de couleur,border, etc.

  • Value- Les valeurs sont attribuées aux propriétés. Par exemple, une propriété de couleur peut avoir une valeur soitred ou #F1F1F1, etc.

Vous pouvez mettre la syntaxe des règles de style CSS comme suit -

selector { property: value }

La feuille de style par défaut utilisée par JavaFX est modena.css. Il se trouve dans le fichier jar d'exécution JavaFX.

Ajouter votre propre feuille de style

Vous pouvez ajouter votre propre feuille de style à une scène dans JavaFX comme suit -

Scene scene = new Scene(new Group(), 500, 400); 
scene.getStylesheets().add("path/stylesheet.css");

Ajout de feuilles de style en ligne

Vous pouvez également ajouter des styles en ligne à l'aide du setStyle()méthode. Ces styles se composent uniquement de paires clé-valeur et sont applicables aux nœuds sur lesquels ils sont définis. Voici un exemple de code de définition d'une feuille de style en ligne sur un bouton.

.button { 
   -fx-background-color: red; 
   -fx-text-fill: white; 
}

Exemple

Supposons que nous ayons développé une application JavaFX qui affiche un formulaire avec un champ de texte, un champ de mot de passe, deux boutons. Par défaut, ce formulaire ressemble à celui illustré dans la capture d'écran suivante -

Le programme suivant est un exemple qui montre comment ajouter des styles à l'application ci-dessus dans JavaFX.

Enregistrez ce code dans un fichier avec le nom CssExample.java

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.PasswordField; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage;  

public class CssExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Email");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
       
      //Creating Text Filed for email        
      TextField textField1 = new TextField();       
      
      //Creating Text Filed for password        
      PasswordField textField2 = new PasswordField();  
       
      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(400, 200);
      
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2); 
       
      //Styling nodes  
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
       
      text1.setStyle("-fx-font: normal bold 20px 'serif' "); 
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");  
      gridPane.setStyle("-fx-background-color: BEIGE;"); 
       
      // Creating a scene object 
      Scene scene = new Scene(gridPane); 
       
      // Setting title to the Stage   
      stage.setTitle("CSS Example"); 
         
      // Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compilez et exécutez le fichier java enregistré à partir de l'invite de commande à l'aide des commandes suivantes.

javac CssExample.java 
java CssExample

Lors de l'exécution, le programme ci-dessus génère une fenêtre JavaFX comme indiqué ci-dessous.