FAQ JavaFXConsultez toutes les FAQ

Le guide de référence des CSS de JavaFX est disponible en ligne :

• Guide de références des CSS pour JavaFX 2.x
• Guide de références des CSS pour JavaFX 8
  

Il s'agit des apparences standard (Look and Feel) de JavaFX :

• Caspian est l'apparence de JavaFX 1.x et 2.x. Cette apparence reste disponible dans JavaFX 8 même si sa feuille de style est légèrement différente à cause de modifications sur les skins des contrôles.
  
  
• Modena est l'apparence par défaut de JavaFX 8.
  
  
  
  

Dans JavaFX 8, Modena est l'apparence par défaut. Il reste cependant possible d'activer Caspian en utilisant l'instruction suivante dans votre application :

setUserAgentStylesheet(STYLESHEET_CASPIAN);

setUserAgentStylesheet(STYLESHEET_MODENA);

Vous devez localiser le fichier jfxrt.jar dans votre installation de JRE ou du JDK (le chemin varie suivant les versions). Ouvrez-le ensuite avec votre gestionnaire d'archives favori (WinRAR, 7-zip, etc.). Les fichiers css sont situés aux emplacements suivants :

• Caspian : dans le package com.sun.javafx.scene.control.skin.caspian, cherchez le fichier caspian.css ;
• Modena : dans le package com.sun.javafx.scene.control.skin.modena, cherchez le fichier modena.css.
  

Les nœuds graphiques disposent d'une propriété style qui permet de passer une chaine de texte contenant des sélecteurs CSS : il s'agit du style inline.

Prenons un exemple qui affiche un unique bouton à l’écran :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class Main extends Application { 
  
    @Override 
    public void start(Stage primaryStage) { 
        final Button button = new Button("Salut le monde !"); 
        final StackPane root = new StackPane(button); 
        final Scene scene = new Scene(root, 350, 300); 
        primaryStage.setTitle("Style inline"); 
        primaryStage.setScene(scene); 
        primaryStage.show(); 
    } 
  
    public static void main(String[] args) { 
        launch(args); 
    } 
}

button.setStyle("-fx-font-size: 2.5em; -fx-font-weight: bold; -fx-padding: 50 20 50 20;");

Une feuille de style, stockée dans un fichier css, doit être référencée par son URL pour pouvoir être utilisée. Elle peut provenir de plusieurs sources :

• le fichier css peut être empaqueté dans une bibliothèque ou une application et récupéré via le mécanisme des ressources ou des ClassLoader ;
• le fichier css peut être sur un disque local et peut être référencé par les classes File, Path, URI ou URL ;
• le fichier css peut être hébergé sur un site web distant et on peut y accéder par une String ou une URL contenant son chemin d’accès.
  

Les fichiers bss contiennent des feuilles de style précompilées. Il s'agit de feuilles de style prêtes à l'emploi dont l'usage requiert moins de ressources puisqu'il n'y aura alors pas besoin de créer un parseur pour fichiers css.

Un fichier bss peut provenir des mêmes sources que les fichiers css et doit être chargé de la même manière… en prenant garde d'utiliser la bonne extension du fichier dans le nom de la feuille de style, naturellement.

Utiliser des fichiers bss au lieu de fichiers css est optionnel, rien ne vous force à les utiliser. Cependant, comme ils sont moins gourmands en ressources, ils forment un substitut intéressant lors du déploiement d'applications en production ou sur des plateformes aux capacités et ressources limitées.

Vous devez invoquer l’outil javapackager du JDK (javafxpackager dans les versions antérieures au JDK 8_u20) en passant comme arguments l'action -createbss suivie de l'argument -srcfiles, puis du nom du fichier css source suivi de l'argument -outdir et enfin le chemin du répertoire destination.

Par exemple la commande suivante :

javapackager -createbss -srcfiles MonCSS.css -outdir .

Pour ajouter une ou plusieurs feuilles de style à une scène, il nous faut ajouter leur URL dans la liste observable stylesheets de la scène. Les définitions des feuilles de style s'appliquent dans l'ordre dans lequel les URL sont ajoutées dans la liste.

Commençons par créer une petite application de test :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class Main extends Application { 
  
    @Override 
    public void start(Stage primaryStage) { 
        final Button button1 = new Button("Salut le monde !"); 
        final Button button2 = new Button("Comment allez-vous ?"); 
        final VBox root = new VBox(button1, button2); 
        final Scene scene = new Scene(root, 350, 300); 
        primaryStage.setTitle("Chargement CSS sur la scène"); 
        primaryStage.setScene(scene); 
        primaryStage.show(); 
    } 
  
    public static void main(String[] args) { 
        launch(args); 
    } 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.root { 
    -fx-background-color: lightskyblue; 
} 
VBox { 
    -fx-spacing: 10; 
    -fx-alignment: center; 
} 
.button { 
    -fx-base: green; 
    -fx-focus-color: limegreen; 
    -fx-font-size: 2.5em; 
} 
.button:focused { 
    -fx-background-insets: -5, 1, 2, -1.4, 2.6; 
}

1
2
final URL cssURL = getClass().getResource("CssScene.css"); 
scene.getStylesheets().add(cssURL.toExternalForm());

Pour ajouter une ou plusieurs feuilles de style à un nœud, il nous faut ajouter leur URL dans la liste observable stylesheets du nœud. Les définitions des feuilles de style s'appliquent dans l'ordre dans lequel les URL sont ajoutées dans la liste.

Nous allons maintenant charger un second fichier css contenant le style suivant :

1
2
3
4
.button { 
    -fx-base: orange; 
    -fx-focus-color: orangered; 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class Main extends Application { 
  
    @Override 
    public void start(Stage primaryStage) { 
        final Button button1 = new Button("Salut le monde !"); 
        final URL buttonCSSURL = getClass().getResource("CssButton.css"); 
        button1.getStylesheets().add(buttonCSSURL.toExternalForm()); 
        final Button button2 = new Button("Comment allez-vous ?"); 
        final VBox root = new VBox(button1, button2); 
        final Scene scene = new Scene(root, 350, 300); 
        primaryStage.setTitle("Chargement CSS sur un nœud"); 
        primaryStage.setScene(scene); 
        primaryStage.show(); 
    } 
  
    public static void main(String[] args) { 
        launch(args); 
    } 
}

1
2
final URL sceneCSSURL = getClass().getResource("CssScene.css"); 
scene.getStylesheets().add(sceneCSSURL.toExternalForm());

Les styles sont appliqués dans l'ordre suivant :

1. Le style défini dans les feuilles de style de JavaFX standard Caspian ou Modena et leurs dérivés contrastes élevés, plateformes tactiles, etc. ;
2. La ou les feuilles de style placées sur la scène ;
3. Les styles placés sur les nœuds parents de notre nœud par une ou des feuilles de style ou en inline ;
4. La ou les feuilles de style placées sur notre nœud ;
5. Le style écrit en inline sur notre nœud.
   

JavaFX utilise une feuille de style différente pour ses contrôles quand une application s’exécute sur une plateforme embarquée et tactile. Par exemple, la plupart des contrôles disposant de barre de défilement ne les affichent désormais que lorsque l'utilisateur fait défiler l'affichage. Le menu contextuel des champs de saisie apparait par pression prolongée sur la zone de texte avec une représentation différente, mieux adaptée aux petits écrans. Ces contrôles disposent également de curseurs de sélection du texte. Le sélecteur de pages répond aux évènements de balayage pour effectuer un changement de sélection vers la gauche ou la droite, etc.

Il est possible d'activer cette feuille de style sur ordinateur de bureau en utilisant le paramètre suivant de la JVM :

-Dcom.sun.javafx.touch=true

Il existe trois manières d'associer un sélecteur CSS à un nœud :

Identité
Il est possible de spécifier une identité sur un nœud en modifiant la valeur de sa propriété id.

Par exemple :

1
2
final Button button1 = new Button("Bouton 1"); 
button1.setId("button1");

1
2
3
#button1 { 
    -fx-base: red; 
}

1
2
final Button button2 = new Button("Bouton 2"); 
button2.getStyleClass().add("button2");

1
2
3
.button2 { 
    -fx-base: blue; 
}

1
2
3
4
5
6
protected static final PseudoClass FOO_PSEUDO_CLASS = PseudoClass.getPseudoClass("foo"); 
  
[...] 
  
final Button button3 = new Button("Bouton 3"); 
button3.pseudoClassStateChanged(FOO_PSEUDO_CLASS, true);

1
2
3
.button:foo { 
    -fx-base: green; 
}

Il est possible d'importer une feuille de style dans une autre feuille de style en utilisant la règle @import.

Par exemple :

@import "style2.css";

Il est possible d'empaqueter des polices avec l’application et de les utiliser depuis des feuilles de style en définissant de nouvelles familles de polices grâce à la règle @font-face. Cela permet d'utiliser des polices de caractères qui ne sont pas installées sur le système.

Par exemple :

1
2
3
4
5
6
7
8
@font-face { 
    font-family: "Alex Brush"; 
    src: url("AlexBrush-Regular.ttf"); 
} 
.button { 
    -fx-font-size: 32; 
    -fx-font-family: "Alex Brush"; 
}

Pour pouvoir spécifier une feuille de style par défaut pour un contrôle personnalisé, votre nouveau contrôle doit hériter de la classe Region ou d'une des sous-classes. Vous pouvez alors surcharger la méthode publique getUserAgentStylesheet() pour spécifier le nom d'une feuille de style qui servira de feuille de style par défaut pour votre contrôle. Cette méthode doit retourner une valeur de type String qui contient une URL ou un chemin relatif depuis la racine de l'application vers un fichier de feuille de style.

Par exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
public final class MonControl extends Region { 
  
    public MonControl() { 
        super(); 
        getStyleClass().add("mon-control"); 
    } 
  
    @Override 
    public String getUserAgentStylesheet() { 
        final URL cssURL = getClass().getResource("MonControl.css"); 
        return cssURL.toExternalForm(); 
    } 
}

1
2
3
4
.mon-control { 
    -fx-background-color: yellow; 
    -fx-background-radius: 25; 
}