Mis à jour le 30/04/2018
  • 40 heures
  • Difficile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Java FX a du style !

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Comme je vous l'ai dis plus tôt, Java FX peux utiliser des feuilles de style CSS pour modifier son apparence (couleur, police, etc) à volonté. Le nombre de propriétés étant gigantesque et les possibilités l'étant encore plus, ce chapitre ne couvrira pas tout ce qu'il est possible de faire sur tous les composants : pour ça il y a la documentation officiel qui se trouve à cette adresse https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html.
Nous nous contenterons de créer une feuille et de la lier à votre code pour vous donner un exemple et pour que vous sachiez que cela existe.

Il y a donc un fichier CSS utilisé par défaut (modena.css) et, dans Java 9, il se trouve dans le module  javafx.controls.jmod  , à cet endroit :

Emplacement du fichier de style par défaut
Emplacement du fichier de style par défaut

Vous pouvez regarder son contenu si vous êtes curieux mais pour l'heure, nous allons voir comment faire sa propre feuille de style !

Attention : Je pars du principe que savez faire une feuille de style CSS. Si ce n'est pas le cas, il existe pléthore de cours sur internet, je vous le soin de chercher.

Avant de commencer

Le CSS appliqué à Java FX est suit exactement les mêmes règles que pour une interface Web classique, la seule chose qui change est le nom des propriétés qui sont disponible.

Java FX fonctionne avec une notion de hiérarchie de composants, ainsi, si une feuille de style est appliquée au composant le plus haut dans cette hiérarchie, cette feuille va s'appliquer à tous les composants qui se trouve en dessous (on parle de noeuds). Par contre, il est également possible de n'affecter une feuille de style qu'à un nœud bien particulier d'une scène Java FX, il est même possible d'affecter plusieurs feuille de style à un noeud.

Tout comme pour une interface Web, les propriétés CSS sont appliquées sur des sélecteurs qui peuvent être :

  • un id : donne un nom particulier à un nœud. Un nœud ne peut avoir qu'un et un seul ID. Nous avons déjà défini ce genre d'identifiant dans SceneBuilder avec la propriété fx:id mais il est également possible de définir un identifiant manuellement sur un composant en utilisant la méthode  setId("nom-de-mon-identifieur")  . Lors de leurs utilisation dans les feuilles de styles ces identifiants sont préfixés avec un dièse (#). Par exemple, #nomValeur dans notre volet affichant les propriétés d'une personne ;

  • une classe : identifiant prédéfini qui correspond à un composant, préfixé par un point. Par exemple il existe une classe .button qui représente les propriétés CSS de tous les objets  Button  . Il est aisé de retrouver les classes de chaque composant car il y a une convention de nommage : un point suivi du nom du composant en minuscule et, si le nom du composant est composé, nous ajoutons un tiret. Par exemple nous avons .label, .button, .check-box, .radio-button, etc;

  • une pseudo classe : c'est une indication qui permet de spécifier quand appliquer le style (au survol du bouton, lors du clic, lorsqu'on clic dessus, ...). Cette indication peut être utilisée aussi bien sur les classes que sur les identifiant. Elle est concaténée à une classe. Exemple : .button:focused, .button:hover, #nomValeur:hover.

Il existe donc des classes CSS qui définissent tout un tas de propriétés de forme, de trait de couleur de comportements sur vos composants Java FX. En grabde partie, ces propriétés sont les mêmes
que pour une interface Web mais préfixées avec « -fx- ». Nous pouvons donc avoir :

  • -fx-background-color

  • -fx-color

  • -fx-font-size

  • -fx-font-family

  • -fx-opacity

  • ...

En dehors de la référence officiel d'Oracle pour les propriétés CSS des composants Java FX, si vous cherchez quelles propriétés CSS sont disponibles, SceneBuilder peut vous être d'un grand secours. Il vous suffira de sélectionner le composant qui vous intéresse puis de regarder les propriétés Java FX CSS :

SceneBuilder liste les propriétés CSS des composants
SceneBuilder liste les propriétés CSS des composants

Votre première feuille de style CSS pour Java FX

Nous allons faire très simple : changer les propriétés CSS de nos boutons. Commencez par créer un fichier CSS dans votre package contenu les vues (fichiers FXML) et ajoutez-y ce code :

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

.button:hover{
  -fx-background-color: green;
  -fx-text-fill: red;
  -fx-background-radius: 15px;
}

Nous allons l'appliquer à un bouton au hazard dans notre interface via SceneBuilder en spécifiant quel fichier de style utiliser pour ce composant, j'ai choisi celui-ci :

Changer le style d'un bouton
Changer le style d'un bouton

Vous pouvez constater que cette modification n'est apportée que sur le composant que nous avons choisi, ceci car nous n'avons changer la propriété que sur un seul bouton, mais que se passerai-t-il si, au lieu de modifier celle-ci, nous modifions celle du conteneur principale ? Voyez plutôt :

Changer le style de tous les boutons d'une hiérarchie
Changer le style de tous les boutons d'une hiérarchie

Ici, les modification sont appliquées à tous les boutons présents dans l'interface.
Par contre, vous aurez remarqué que les boutons de la popup d'ajout/modification n'est pas impacté par ces changements. Pourquoi ? Tout simplement car elle a son propre conteneur et qu'il faut également lui spécifier la feuille de style. Pour changer, nous allons l'affecter directement en Java.
Alors, dans la classe principale et plus particulièrement dans la méthode qui affiche la popup, juste avant de l'afficher vous aller rajouter ces deux lignes de codes :

String css = getClass().getResource("view/bouton-custom.css").toExternalForm();
scene.getStylesheets().addAll(css);

Et le tour est joué ! Vous avez modifié le style de votre application en un tour de main !
Comme je vous le disais au tout début, nous n'allons passer en revue toutes les classes disponibles. Si vous souhaitez les connaître, vous pouvez jetez un œil au fichier de style par défaut car il y en a énormément. Par exemple, rien que pour les barres de scroll il y en a une six : .track, .decrement-arrow, .decrement-button, .thumb, .increment-arrow, .increment-button. Vous avez maintenant toutes les clés en mains pour customiser vos IHM.

En résumé

  • Il est facile de modifier l'apparence d'un composant à l'aide de fichier CSS.

  • Le nom des propriété CSS des composants Java FX sont les mêmes que pour une interface Web mais elles sont préfixées de  -fx-  .

  • Il est possible d'utiliser les pseudo- classes pour modifier le style d'un composant en fonction de certaine actions de l'utilisateur (clic, focus, ...).

Exemple de certificat de réussite
Exemple de certificat de réussite