Comment customiser un composant TabPane en JavaFX ?

Le CSS associé avec JavaFX permet de customiser les composants UI.

Intéressons - nous au composant TabPane qui permet la gestion des onglets.

Exemple

.tab-pane *.tab-header-background {
    -fx-background-color: -fx-outer-border, -fx-inner-border, derive(-fx-color, 40.0%);
    -fx-effect: innershadow(two-pass-box , rgba(0.0,0.0,0.0,0.6) , 4.0, 0.0 , 0.0 , 0.0);
}

Dans cet exemple, la couleur de fond du composant TabPane (containeur des onglets) est "déduite" d'un effet qui va être appliqué.


Le label de chaque onglet peut être aussi customisé.

Exemple

.tab-label {
-fx-font-size: 9.0pt;
}

Dans cet exemple la taille de la police est fixée à 9 points.

Nous pouvons customiser le style d'un onglet lors de sa sélection.

Exemple

.tab:selected {
-fx-text-fill: #0026FF;
}

Dans cet exemple nous "ajoutons" une couleur au texte de l'onglet sélectionné.

Customiser une TableView en JavaFX

Comment customiser une TableView en JavaFX ?

Il est possible de customiser le style d'un composant UI avec l'aide des propriétés de CSS.

Pour rappel, le CSS pour JavaFX diffère quelque peu du CSS pour le HTML.

Outre le préfixe "-fx-", certaines propriétés CSS du HTML ne sont pas supportées par le CSS de JavaFX.

Commençons par quelques propriétés générales.

Exemple

.tableView {
-fx-font-size: 8.0pt;
-fx-background-color: linear-gradient(white, #EDEFFF); 
}

Dans cet exemple la taille de la police est fixée à 8 points et la couleur de fond est une couleur créée à partir d'un effet de type <gradient>.

Il est possible de "cacher" le scrolling (horizontal ou vertical) - pratique car sinon les éléments du scrolling apparaîssent en grisé.

Exemple

.table-view *.scroll-bar:horizontal *.increment-button,
.table-view *.scroll-bar:horizontal *.decrement-button {
    -fx-background-color: null;
    -fx-background-radius: 0.0;
    -fx-background-insets: 0.0;
    -fx-padding: 0.0;
}

.table-view *.scroll-bar:horizontal *.increment-arrow, 
.table-view *.scroll-bar:horizontal *.decrement-arrow {
    -fx-background-color: null;
    -fx-background-radius: 0.0;
    -fx-background-insets: 0.0;
    -fx-padding: 0.0;
    -fx-shape: null;
}

Nous pouvons customiser la sélection d'une ligne ou le passage sur une ligne de la TableView.

Exemple

.table-view:row-selection .table-row-cell:filled:hover {
    -fx-background-color: #FFE3C1;
    -fx-background-insets: 0.0, 0.0 0.0 0.0 0.0;
    -fx-text-fill: -fx-text-inner-color;
}

.table-view:focused .table-row-cell:filled:selected {
    -fx-background-color: #BCD4E5;
    -fx-background-insets: 0.0, 0.0 0.0 0.0 0.0;
    -fx-text-fill: -fx-selection-bar-text;
    -fx-table-cell-border-color: #E0F2FF;
}

Les titres des colonnes de notre TableView peuvent être aussi customisés.

Exemple

.table-view .column-header {
-fx-font-weight: bold;
  -fx-background-color: #FFF5EF;
}

.table-view .column-header .text {
  -fx-underline: true;
}

A noter dans cet exemple que le texte du titre de chaque colonne sera souligné.

Les colonnes peuvent être customisées.

Exemple

.table-cell {
    -fx-alignment: BASELINE_CENTER;
 }

Dans cet exemple le contenu de chaque colonne est centré.

CSS : trucs et astuces partie 2

Comment customiser par exemple les composants <Radio Bouton> et <Check Box> en CSS ?

Dans un premier temps, prenons 2 fichiers <image> : le premier (fich1.png) pour les composants qui ne sont pas <DISABLED> et le deuxième (fich2.png) pour les composants qui sont <DISABLED> :



Pour une meilleure "visibilité" IHM nous vous conseillons d'affecter à chaque composant la même largeur et la même hauteur (dans notre exemple 19px * 19px).

Considérons maintenant la partie CSS

input[type="radio"] {
display: none;
}

input[type="radio"]+label {
color: black;
font-family: Tahoma;
font-size: 10px;
}

input[type="radio"]+label span {
display: inline-block;
width: 19px;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
background: url(fich1.png) -38px top no-repeat;
cursor: pointer;
}

input[type="radio"]:checked+label span {
background: url(fich1.png) -57px top no-repeat;
}

input[type="radio"]:disabled:checked+label span {
background: url(fich2.png) -57px top no-repeat;
}

input[type="radio"]:disabled:not               (:checked               )
+label span {
background: url(fich2.png) -38px top no-repeat;
}

input[type="checkbox"] {
display: none;
}

input[type="checkbox"]+label {
color: black;
font-family: Tahoma;
font-size: 10px;
}

input[type="checkbox"]+label span {
display: inline-block;
width: 19px;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
background: url(fich1.png) 0px top no-repeat;
cursor: pointer;
}

input[type="checkbox"]:checked+label span {
background: url(fich1.png) -19px top no-repeat;
}

input[type="checkbox"]:disabled:checked+label span {
background: url(fich2.png) -19px top no-repeat;
}

input[type="checkbox"]:disabled:not  (:checked ) +label span {
background: url(fich2.png) 0px top no-repeat;
}

Vous noterez comment nous nous positionnons sur chaque <image> (nous partons de la gauche vers la droite en utilisant un offset négatif ou à zéro).

Nous utilisons une balise <Label> pour gérer "proprement" le texte du composant.

Comment utiliser ces composants customisés ?

<Radio Bouton> :

<input id='rd1' name='rd' value='1' type='radio' checked='checked'><label for='rd1'><span>text de mon radio button 1</span></label>

<input id='rd2' name='rd' value='2' type='radio'><label for='rd2'><span>text de mon radio button 2</span></label>

<Check Box> :

<input id='ck1' value='100' type='checkbox' checked='checked' onclick='ma_fonction();'><label for='ck1' title='mon titre'><span>mon texte</span></label>

CSS : trucs et astuces partie 1

Voici quelques trucs et astuces en CSS.

Exemple 1

Un "cadre" avec coins arrondis (support cross-navigateurs).

.mon_cadre {
border: solid 4px #C0C0C0;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #EAEAEA;
}

Exemple 2

Un texte (de type titre) avec un effet <shadow>.

.mon_titre {
font-family: Tahoma, sans-serif;
line-height: 1em;
color: brown;
font-weight: bold;
font-size: 20px;
text-shadow: 0px 0px 0 rgb(227, 227, 227), 1px 1px 0 rgb(209, 209, 209),
2px 2px 0 rgb(191, 191, 191), 3px 3px 0 rgb(173, 173, 173), 4px 4px 0
rgb(155, 155, 155), 5px 5px 0 rgb(137, 137, 137), 6px 6px 0
rgb(119, 119, 119), 7px 7px 0 rgb(101, 101, 101), 8px 8px 0
rgb(83, 83, 83), 9px 9px 8px rgba(0, 0, 0, 0.6), 9px 9px 1px
rgba(0, 0, 0, 0.5), 0px 0px 8px rgba(0, 0, 0, .2);
}

Pour générer la propriété <text-shadow>, vous pouvez utiliser cet utilitaire fort pratique.

Exemple 3

Un "cadre" avec scrolling vertical (qui apparaît automatiquement si nécessaire) et sans scrolling horizontal.

.mon_cadre {
height: 90%;
margin: 0px;
padding: 0px;
border: 0px;
overflow-x: no;
overflow-y: auto;
background-color: #EDEEFF;
}

Exemple 4

Centrer un <div> dans une page.

#mon_div {
margin: 0 auto;
width: 300px;
}

Le <div> fait dans notre exemple 300px de largeur.

Exemple 5

Customiser un bouton.

.button1 {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 11px/100% Arial, Helvetica, sans-serif;
font-weight: bold;
padding: .5em 1em .35em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
background-color: #667CFF;
color: white;
}

.button1:hover {
text-decoration: none;
}

.button1:active {
position: relative;
top: 1px;
}

Vous pouvez customiser par exemple la couleur de fond du bouton (<background-color>).