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