GUI avec JavaFX

Mise en forme avec le fichier CSS

L'application a pour l'instant un aspect défini par le style "modena" de JavaFX. L'utilisation de CSS (Cascading Style Sheet, feuille de style en cascade) permet de redéfinir complètement cet aspect.

Voici par exemple ce que donne l'aspect de l'application, avec la feuille de style qui suit.

.root{ /* fond de la scene */
	-fx-background-color:darkkhaki;/* couleur de fond, un peu visible dans les coins sous la VBox et la ButtonBar. darkkhaki est une des nombreuses couleurs prédéfinies  */ 
}

ButtonBar{
  -fx-background-image:url("fond.png");/*le fond est une image */ 
  -fx-border-color:brown;
  -fx-border-width:4 2 1 6; /* épaisseur de la bordure, dans l'ordre haut droite bas gauche */
  -fx-border-radius:10 10 0 0; /* arrondi des coins de la bordure dans l'ordre haut-gauche, haut-droit, bas-droit, bas-gauche  */
  -fx-background-radius:10 10 0 0;   /* arrondi des coins dans l'ordre haut-gauche, haut-droit, bas-droit, bas-gauche */                    
	       }

VBox{
	-fx-background-color:navajowhite;
	-fx-border-color:brown;
	-fx-border-radius:0 0 10 10; 
	-fx-border-width:1 2 4 6;
	-fx-background-radius:0 0 10 10;
}

Button{
	-fx-background-color:rgb(130,30,0);/*couleur désignée par ses composantes rouge, vert, bleu */
	-fx-text-fill:yellow;/*couleur du texte 
	-fx-rotate:-30;/* inclinaison en degrés, compté à partir de l'horizontale dans le sens des aiguilles d'une montre */
	-fx-font-style:italic;
	-fx-font-weight:bold;
	
}

Button:hover{ /*pseudo-classe désignant un bouton sur lequel passe la souris */
	-fx-effect:dropshadow(gaussian,brown,10,0,0,0)/* effet d'ombre */
}


:focused{ /* pseudo-classe s'appliquant à tous les contrôles quand ils ont le focus */  
	-fx-scale-x:1.1; /* agrandit le contrôle horizontalement d'un facteur 1,1 */
	-fx-scale-y:1.1;/* idem verticalement */
}

TextField{
	-fx-alignment:center;
	-fx-cursor:crosshair;/* change la forme du curseur de la souris  */
	-fx-background-radius:25 25 25 25;
	-fx-border-radius:25 25 25 25;
	-fx-border-color:darkkhaki;
	-fx-highlight-fill:darkseagreen;/* couleur de fond du texte sélectionné  */
	-fx-highlight-text-fill:yellow;/* couleur du texte sélectionné*/
}

TextField:focused{ /* pseudo-classe contenant le TextField ayant le focus. Se rajoute à l'effet de grandissement créé précédemment */
	-fx-effect:innershadow(three-pass-box,darkkhaki,15,0,0,0);/* ombrage intérieur */
	
}

TextField.special{/* classe contenant les TextFields dont le nom de StyleClass est "special" dans le fichier fxml . */
	-fx-background-color:gainsboro ;
}

Pour obtenir exactement le résultat illustré, deux petites modifications doivent être apportées au FXML : la propriété prefHeight de la ButtonBar a été fixée à 70 , pour que les boutons n'en dépassent pas après rotation, et la propriété StyleClass de la deuxième et de la troisième ligne de saisie a été fixée à "special" pour rassembler ces deux lignes dans un ensemble à part de la première. L'image "fond.png" utilisée dans la feuille de style et visible en fond de la ButtonBar doit être placée dans le même dossier "bin" que la feuille de style Echantillon.css.

Le principe des feuilles de style est le suivant :

• Les éléments sont regroupés par ensembles, appelés classes (de style, différentes en principe des classes Java ) et les mêmes propriétés de style s'appliquent à tous les élément de la classe.
• Tous les éléments appartenant à une même classe Java appartiennent à une même classe CSS, portant le même nom (exemple : Button)
• Les éléments peuvent appartenir temporairement à certaines "pseudo-classes" en fonction de leur état dans l'application. Par exemple un élément sur lequel passe la souris appartient temporairement à la pseudo-classe ":hover".
• Les éléments peuvent être rangés dans une classe en attribuant une valeur à leur propriété "styleClasse" dans le fichier FXML. Cette valeur est une chaîne de caractère choisie par le programmeur. Dans le fichier CSS on désigne une telle classe en faisant précéder cette chaîne de caractères d'un point.
• Dans la feuille de style, les propriétés d'une classe sont écrites, après son identifiant, entre accolades. Les différentes propriétés sont séparées par des points-virgule.
• Pour retrouver toutes les propriétés CSS et leurs valeurs possibles, ce site est très pratique (en anglais)