2.3.2 – Styliser : couleur, police, taille

Cette section vous présente les propriétés CSS JavaFX les plus courantes pour styliser vos composants : couleurs, polices et tailles. Ces propriétés sont essentielles pour créer des interfaces attrayantes et professionnelles.

🎨 Propriétés de couleur

JavaFX offre plusieurs propriétés pour gérer les couleurs :

1. Couleur de fond : -fx-background-color

/* Couleur nommée */
-fx-background-color: red;

/* Code hexadécimal */
-fx-background-color: #3498db;

/* RGB */
-fx-background-color: rgb(52, 152, 219);

/* Couleur avec transparence (RGBA) */
-fx-background-color: rgba(52, 152, 219, 0.5);

2. Couleur du texte : -fx-text-fill

/* Texte blanc */
-fx-text-fill: white;

/* Texte bleu */
-fx-text-fill: #3498db;

/* Texte noir */
-fx-text-fill: black;

3. Couleur de bordure : -fx-border-color

/* Bordure bleue */
-fx-border-color: #3498db;

/* Bordure avec largeur */
-fx-border-color: #3498db;
-fx-border-width: 2px;

📝 Propriétés de police

Pour personnaliser la police de vos composants :

1. Taille de police : -fx-font-size

/* Taille en pixels */
-fx-font-size: 16px;

/* Taille en points */
-fx-font-size: 12pt;

/* Taille relative */
-fx-font-size: 1.2em;

2. Famille de police : -fx-font-family

/* Police simple */
-fx-font-family: Arial;

/* Plusieurs polices (fallback) */
-fx-font-family: "Arial", "Helvetica", sans-serif;

/* Police avec guillemets si elle contient des espaces */
-fx-font-family: "Times New Roman";

3. Style de police : -fx-font-weight et -fx-font-style

/* Gras */
-fx-font-weight: bold;

/* Normal */
-fx-font-weight: normal;

/* Italique */
-fx-font-style: italic;

/* Normal */
-fx-font-style: normal;

4. Propriété raccourcie : -fx-font

/* Syntaxe : style weight size family */
-fx-font: italic bold 16px Arial;

📏 Propriétés de taille

Pour contrôler les dimensions de vos composants :

1. Largeur et hauteur préférées

/* Largeur préférée */
-fx-pref-width: 200px;

/* Hauteur préférée */
-fx-pref-height: 50px;

/* Les deux */
-fx-pref-width: 200px;
-fx-pref-height: 50px;

2. Largeur et hauteur minimales

-fx-min-width: 100px;
-fx-min-height: 30px;

3. Largeur et hauteur maximales

-fx-max-width: 500px;
-fx-max-height: 200px;

🎯 Pseudo-classes de base

Les pseudo-classes permettent d'appliquer des styles selon l'état du composant :

1. :hover (au survol)

.button {
    -fx-background-color: #3498db;
}

.button:hover {
    -fx-background-color: #2980b9;
}

2. :pressed (quand on appuie)

.button {
    -fx-background-color: #3498db;
}

.button:pressed {
    -fx-background-color: #21618c;
}

3. :focused (quand le composant a le focus)

.text-field {
    -fx-border-color: #95a5a6;
}

.text-field:focused {
    -fx-border-color: #3498db;
}

4. :disabled (quand le composant est désactivé)

.button {
    -fx-background-color: #3498db;
}

.button:disabled {
    -fx-background-color: #bdc3c7;
    -fx-text-fill: #7f8c8d;
}

📋 Exemple pratique : Formulaire stylisé

Voici un exemple complet de styles pour un formulaire :

Styles pour les Labels

.label {
    -fx-font-size: 14px;
    -fx-font-family: Arial;
    -fx-text-fill: #2c3e50;
}

Styles pour les TextField

.text-field {
    -fx-background-color: white;
    -fx-border-color: #bdc3c7;
    -fx-border-width: 1px;
    -fx-border-radius: 5px;
    -fx-padding: 8px;
    -fx-font-size: 14px;
}

.text-field:focused {
    -fx-border-color: #3498db;
    -fx-border-width: 2px;
}

Styles pour les Buttons

.button {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-padding: 10px 20px;
    -fx-border-radius: 5px;
    -fx-cursor: hand;
}

.button:hover {
    -fx-background-color: #2980b9;
}

.button:pressed {
    -fx-background-color: #21618c;
}

.button:disabled {
    -fx-background-color: #bdc3c7;
    -fx-text-fill: #7f8c8d;
    -fx-cursor: default;
}

🎨 Couleurs prédéfinies JavaFX

JavaFX offre des couleurs prédéfinies que vous pouvez utiliser directement :

• ALICEBLUE, ANTIQUEWHITE, AQUA
• BLACK, BLUE, BROWN
• GREEN, RED, YELLOW
• WHITE, GRAY, DARKGRAY
• Et bien d'autres...

2.3.3 – Introduction aux fichiers .css externes

Pour une meilleure organisation et maintenabilité, il est recommandé d'utiliser des fichiers CSS externes plutôt que des styles inline. Cette section vous montre comment créer, organiser et lier des fichiers CSS à vos interfaces FXML.

📁 Pourquoi utiliser des fichiers CSS externes ?

Les fichiers CSS externes offrent plusieurs avantages :

• Organisation : Tous vos styles sont centralisés dans un ou plusieurs fichiers
• Réutilisabilité : Un même style peut être appliqué à plusieurs composants
• Maintenabilité : Modifiez un style une fois, il s'applique partout
• Séparation des responsabilités : Le CSS est séparé du FXML et du code Java
• Thèmes : Facile de créer plusieurs thèmes (clair/sombre) en changeant de fichier CSS

📝 Créer un fichier CSS

Pour créer un fichier CSS dans votre projet Eclipse :

1. Dans Eclipse, faites un clic droit sur le package application (ou sur un dossier resources si vous l'avez créé)
2. Sélectionnez New → File
3. Nommez le fichier (par exemple style.css)
4. Cliquez sur Finish

🔗 Lier le CSS au FXML

Pour appliquer un fichier CSS à votre interface FXML, vous devez le lier dans l'élément racine du FXML :

Méthode 1 : Dans Scene Builder

1. Ouvrez votre fichier FXML dans Scene Builder
2. Sélectionnez l'élément racine (VBox, BorderPane, etc.)
3. Dans l'onglet Properties, trouvez la section Stylesheets
4. Cliquez sur le bouton + à côté de "Stylesheets"
5. Sélectionnez votre fichier CSS (par exemple style.css)

Méthode 2 : Directement dans le FXML

Vous pouvez aussi ajouter l'attribut stylesheets directement dans le FXML :

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1" 
      stylesheets="style="".css">
   <!-- Contenu -->
</VBox>

📋 Exemple complet : Fichier CSS externe

Voici un exemple complet d'un fichier style.css :

/* ============================================
   Fichier : style.css
   Description : Styles pour l'application JavaFX
   ============================================ */

/* Styles généraux pour tous les Labels */
.label {
    -fx-font-size: 14px;
    -fx-font-family: Arial;
    -fx-text-fill: #2c3e50;
}

/* Styles pour les TextField */
.text-field {
    -fx-background-color: white;
    -fx-border-color: #bdc3c7;
    -fx-border-width: 1px;
    -fx-border-radius: 5px;
    -fx-padding: 8px;
    -fx-font-size: 14px;
}

.text-field:focused {
    -fx-border-color: #3498db;
    -fx-border-width: 2px;
}

/* Styles pour les Buttons */
.button {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-padding: 10px 20px;
    -fx-border-radius: 5px;
    -fx-cursor: hand;
}

.button:hover {
    -fx-background-color: #2980b9;
}

.button:pressed {
    -fx-background-color: #21618c;
}

.button:disabled {
    -fx-background-color: #bdc3c7;
    -fx-text-fill: #7f8c8d;
    -fx-cursor: default;
}

/* Style personnalisé pour un bouton primaire */
.btn-primary {
    -fx-background-color: #27ae60;
}

.btn-primary:hover {
    -fx-background-color: #229954;
}

/* Style personnalisé pour un bouton secondaire */
.btn-secondary {
    -fx-background-color: #95a5a6;
}

.btn-secondary:hover {
    -fx-background-color: #7f8c8d;
}

🎯 Utiliser des classes CSS personnalisées

Vous pouvez créer vos propres classes CSS pour styliser des composants spécifiques :

1. Définir la classe dans le CSS

.btn-primary {
    -fx-background-color: #27ae60;
    -fx-text-fill: white;
    -fx-font-weight: bold;
}

2. Appliquer la classe dans Scene Builder

1. Sélectionnez le composant (par exemple un Button)
2. Dans l'onglet Properties, trouvez la section Style Class
3. Cliquez sur le bouton + et entrez le nom de la classe (par exemple btn-primary)

3. Appliquer la classe directement dans le FXML

<Button text="Valider" styleClass="btn-primary" />

📁 Organisation des fichiers CSS

Pour une meilleure organisation, vous pouvez structurer vos fichiers CSS. Voici deux approches :

Option 1 : Dans le package application

src/
└── application/
    ├── Main.java
    ├── style.css              # Styles principaux
    ├── theme-light.css        # Thème clair
    ├── theme-dark.css         # Thème sombre
    └── styles/                # Dossier pour organiser
        ├── buttons.css        # Styles pour les boutons
        ├── forms.css          # Styles pour les formulaires
        └── layout.css         # Styles pour les layouts

Option 2 : Dans un dossier resources (organisation recommandée)

Pour une meilleure organisation, créez un dossier resources dans src et configurez-le comme Source Folder :

src/
├── application/
│   └── Main.java
└── resources/                # Dossier à créer manuellement (Source Folder)
    ├── style.css              # Styles principaux
    ├── theme-light.css        # Thème clair
    ├── theme-dark.css         # Thème sombre
    └── styles/                # Dossier pour organiser
        ├── buttons.css        # Styles pour les boutons
        ├── forms.css          # Styles pour les formulaires
        └── layout.css         # Styles pour les layouts

🔗 Lier plusieurs fichiers CSS

Vous pouvez lier plusieurs fichiers CSS à un même FXML :

<!-- Si les CSS sont dans le package application -->
<VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1" 
      stylesheets="style="".css, @styles/buttons.css, @styles/forms.css">
   <!-- Contenu -->
</VBox>

<!-- Si les CSS sont dans resources -->
<VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1" 
      stylesheets="@/style.css, @/components/buttons.css, @/components/forms.css">
   <!-- Contenu -->
</VBox>

🎨 Créer un thème clair/sombre

Vous pouvez créer plusieurs thèmes et les changer dynamiquement :

1. Créer theme-light.css

.root {
    -fx-background-color: #ffffff;
    -fx-text-fill: #000000;
}

.button {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
}

2. Créer theme-dark.css

.root {
    -fx-background-color: #2c3e50;
    -fx-text-fill: #ffffff;
}

.button {
    -fx-background-color: #34495e;
    -fx-text-fill: white;
}

3. Changer de thème dans le code Java

Si les CSS sont dans le package application :

// Charger le thème clair
scene.getStylesheets().add(getClass().getResource("theme-light.css").toExternalForm());

// Ou charger le thème sombre
scene.getStylesheets().add(getClass().getResource("theme-dark.css").toExternalForm());

Si les CSS sont dans resources :

// Charger le thème clair
scene.getStylesheets().add(getClass().getResource("/theme-light.css").toExternalForm());

// Ou charger le thème sombre
scene.getStylesheets().add(getClass().getResource("/theme-dark.css").toExternalForm());

📋 Exemple complet : Application avec CSS externe

Voici un exemple complet d'une application utilisant un fichier CSS externe :

1. Fichier style.css

.root {
    -fx-background-color: #f5f5f5;
}

.label {
    -fx-font-size: 18px;
    -fx-text-fill: #2c3e50;
}

.text-field {
    -fx-background-color: white;
    -fx-border-color: #bdc3c7;
    -fx-border-width: 1px;
    -fx-padding: 8px;
}

.button {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-padding: 10px 20px;
}

.button:hover {
    -fx-background-color: #2980b9;
}

2. Fichier main.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox spacing="20" alignment="CENTER" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1" 
      stylesheets="style="".css" fx:controller="application.MonController">
   <padding>
      <Insets top="20" right="20" bottom="20" left="20"/>
   </padding>
   <children>
      <Label text="Bienvenue !" />
      <TextField promptText="Entrez votre nom" />
      <Button text="Valider" onAction="#handleValider" />
   </children>
</VBox>

⚠️ Ordre de priorité des styles

JavaFX applique les styles dans un ordre de priorité :

1. Styles inline (dans la propriété style) : Priorité la plus haute
2. Classes CSS personnalisées (dans styleClass)
3. Fichiers CSS externes (dans stylesheets)
4. Styles par défaut de JavaFX : Priorité la plus basse