3.3.2 – Margins et paddings

Les marges (margins) et les paddings (marges intérieures) sont deux concepts essentiels pour créer des interfaces avec un espacement professionnel. Bien que similaires, ils ont des rôles différents : le padding crée de l'espace à l'intérieur d'un conteneur, tandis que les marges créent de l'espace autour d'un élément spécifique. Dans cette section, vous apprendrez à utiliser ces propriétés dans Scene Builder.

🎯 Qu'est-ce que le padding ?

Le padding (marge intérieure) est l'espace entre le contenu d'un conteneur et ses bords intérieurs. Il s'applique au conteneur lui-même et affecte tous les éléments enfants.

• Padding uniforme : Même espacement sur tous les côtés
• Padding individuel : Espacement différent pour chaque côté (top, right, bottom, left)
• Effet visuel : Crée de l'espace entre les bords du conteneur et son contenu

🎯 Qu'est-ce qu'une margin ?

La margin (marge) est l'espace autour d'un élément spécifique, à l'extérieur de ses bords. Elle s'applique à un élément individuel et crée de l'espace entre cet élément et les éléments voisins ou les bords du conteneur.

• Margin uniforme : Même espacement sur tous les côtés
• Margin individuelle : Espacement différent pour chaque côté
• Effet visuel : Crée de l'espace autour d'un élément spécifique

🛠️ Configurer le padding dans Scene Builder

Voici comment configurer le padding dans Scene Builder :

Étape 1 : Sélectionner le conteneur

1. Sélectionnez le conteneur (VBox, HBox, GridPane, etc.)
2. Ouvrez l'onglet Layout dans l'inspecteur

Étape 2 : Configurer le padding

Dans la section Padding, vous pouvez :

• Padding uniforme : Entrez une valeur unique qui s'applique aux quatre côtés
• Padding individuel : Configurez séparément :
  • Top : Espacement en haut
  • Right : Espacement à droite
  • Bottom : Espacement en bas
  • Left : Espacement à gauche

🛠️ Configurer les marges dans Scene Builder

Voici comment configurer les marges dans Scene Builder :

Étape 1 : Sélectionner l'élément enfant

1. Sélectionnez un élément enfant dans un conteneur (Button, Label, TextField, etc.)
2. Ouvrez l'onglet Layout dans l'inspecteur

Étape 2 : Configurer la margin

Dans la section Margin, vous pouvez :

• Margin uniforme : Entrez une valeur unique qui s'applique aux quatre côtés
• Margin individuelle : Configurez séparément :
  • Top : Marge en haut
  • Right : Marge à droite
  • Bottom : Marge en bas
  • Left : Marge à gauche

📝 Exemple pratique : Interface avec padding et marges

Créons une interface qui illustre l'utilisation du padding et des marges :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un VBox comme racine
2. Sélectionnez le VBox et configurez le padding :
   • Padding = 20 (uniforme sur tous les côtés)
   • Spacing = 10
3. Ajoutez un Label "Titre" avec :
   • Margin Bottom = 15 (marge en bas pour séparer du contenu suivant)
4. Ajoutez un HBox avec :
   • Padding = 10
   • Contient deux Button
5. Le premier Button a :
   • Margin Right = 10 (marge à droite pour séparer du deuxième bouton)

Exemple

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>

<VBox spacing="10.0" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <padding>
      <Insets top="20.0" right="20.0" bottom="20.0" left="20.0"/>
   </padding>
   <children>
      <Label text="Titre" style="-fx-font-size: 18px; -fx-font-weight: bold;">
         <VBox.margin>
            <Insets bottom="15.0"/>
         </VBox.margin>
      </Label>
      
      <Label text="Contenu principal"/>
      
      <HBox spacing="10.0">
         <padding>
            <Insets top="10.0" right="10.0" bottom="10.0" left="10.0"/>
         </padding>
         <children>
            <Button text="Bouton 1">
               <HBox.margin>
                  <Insets right="10.0"/>
               </HBox.margin>
            </Button>
            <Button text="Bouton 2"/>
         </children>
      </HBox>
   </children>
</VBox>

⚙️ Propriétés de padding et margin

Voici les propriétés disponibles dans Scene Builder :

Padding (pour les conteneurs)

• Top : Espacement en haut (en pixels)
• Right : Espacement à droite (en pixels)
• Bottom : Espacement en bas (en pixels)
• Left : Espacement à gauche (en pixels)
• Uniform : Valeur unique pour les quatre côtés

Margin (pour les éléments enfants)

• Top : Marge en haut (en pixels)
• Right : Marge à droite (en pixels)
• Bottom : Marge en bas (en pixels)
• Left : Marge à gauche (en pixels)
• Uniform : Valeur unique pour les quatre côtés

💡 Bonnes pratiques pour padding et margin

• Utilisez le padding pour le conteneur : Créez de l'espace autour de tout le contenu
• Utilisez les marges pour des éléments spécifiques : Créez de l'espace autour d'un élément particulier
• Valeurs cohérentes : Utilisez des valeurs cohérentes (multiples de 5 ou 10) pour un rendu professionnel
• Padding généralement plus grand : Le padding du conteneur est souvent plus grand que les marges individuelles
• Testez visuellement : Ajustez les valeurs dans Scene Builder pour voir l'effet immédiatement
• Évitez les valeurs trop grandes : Trop d'espace peut rendre l'interface vide et peu efficace

🔄 Padding vs Margin : Quand utiliser quoi ?

Voici des règles simples pour décider quand utiliser le padding ou les marges :

✅ Utilisez le padding quand :

• Vous voulez créer de l'espace autour de tout le contenu d'un conteneur
• Vous voulez que tous les éléments enfants aient le même espacement des bords
• Vous voulez créer une zone "intérieure" dans un conteneur

✅ Utilisez les marges quand :

• Vous voulez créer de l'espace autour d'un élément spécifique
• Vous voulez séparer un élément particulier des autres
• Vous voulez créer un espacement différent pour certains éléments

3.3.3 – Redimensionnement automatique

Le redimensionnement automatique permet aux éléments de s'adapter à la taille de leur conteneur ou de la fenêtre. En JavaFX, vous pouvez contrôler comment les éléments se redimensionnent grâce aux propriétés de croissance (grow) et aux contraintes de taille (min, pref, max). Dans cette section, vous apprendrez à configurer le redimensionnement automatique dans Scene Builder pour créer des interfaces adaptatives.

🎯 Qu'est-ce que le redimensionnement automatique ?

Le redimensionnement automatique permet aux éléments de :

• S'étirer : Prendre plus d'espace quand disponible
• Se rétrécir : Réduire leur taille quand l'espace est limité
• S'adapter : S'ajuster automatiquement aux changements de taille de la fenêtre
• Respecter les contraintes : Rester dans les limites min/max définies

📐 Propriétés de taille : Min, Pref, Max

Chaque élément JavaFX a trois propriétés de taille :

• Min Width / Min Height : Taille minimale que l'élément peut avoir
• Pref Width / Pref Height : Taille préférée (idéale) de l'élément
• Max Width / Max Height : Taille maximale que l'élément peut avoir

🛠️ Configurer les tailles dans Scene Builder

Voici comment configurer les tailles dans Scene Builder :

Étape 1 : Sélectionner l'élément

1. Sélectionnez l'élément (Button, Label, TextField, etc.)
2. Ouvrez l'onglet Properties dans l'inspecteur

Étape 2 : Configurer les tailles

Dans la section Size, configurez :

• Min Width / Min Height : Taille minimale (en pixels ou laissez vide pour auto)
• Pref Width / Pref Height : Taille préférée (en pixels)
• Max Width / Max Height : Taille maximale (en pixels ou USE_PREF_SIZE)

📏 Propriétés de croissance : Hgrow et Vgrow

Les propriétés Hgrow (croissance horizontale) et Vgrow (croissance verticale) contrôlent si un élément peut s'étirer pour remplir l'espace disponible.

Valeurs possibles :

• NEVER : L'élément garde toujours sa taille préférée, ne s'étire jamais
• ALWAYS : L'élément s'étire toujours pour remplir l'espace disponible
• SOMETIMES : L'élément s'étire seulement si nécessaire (comportement par défaut pour certains layouts)

🛠️ Configurer Hgrow et Vgrow dans Scene Builder

Voici comment configurer la croissance dans Scene Builder :

Pour les éléments dans HBox

1. Sélectionnez un élément enfant dans un HBox
2. Ouvrez l'onglet Layout dans l'inspecteur
3. Modifiez la propriété Hgrow :
   • NEVER : L'élément garde sa largeur
   • ALWAYS : L'élément s'étire horizontalement
   • SOMETIMES : S'étire si nécessaire

Pour les éléments dans VBox

1. Sélectionnez un élément enfant dans un VBox
2. Ouvrez l'onglet Layout dans l'inspecteur
3. Modifiez la propriété Vgrow :
   • NEVER : L'élément garde sa hauteur
   • ALWAYS : L'élément s'étire verticalement
   • SOMETIMES : S'étire si nécessaire

Pour les éléments dans GridPane

1. Sélectionnez un élément dans un GridPane
2. Ouvrez l'onglet Layout dans l'inspecteur
3. Configurez Hgrow pour la croissance horizontale de la colonne
4. Configurez Vgrow pour la croissance verticale de la ligne

📝 Exemple pratique : Interface adaptative

Créons une interface qui s'adapte au redimensionnement :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un BorderPane comme racine
2. Zone Center : Ajoutez un VBox et configurez :
   • Vgrow = ALWAYS (pour le VBox dans le BorderPane)
3. Dans ce VBox, ajoutez :
   • Un Label "Titre" (taille fixe, ne s'étire pas)
   • Un TextArea avec :
     • Vgrow = ALWAYS (s'étire verticalement)
     • Hgrow = ALWAYS (s'étire horizontalement)
   • Un HBox avec deux Button :
     • Le premier Button : Hgrow = ALWAYS (s'étire horizontalement)
     • Le deuxième Button : Hgrow = NEVER (taille fixe)

Exemple

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>

<BorderPane xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <center>
      <VBox spacing="10.0">
         <padding>
            <Insets top="20.0" right="20.0" bottom="20.0" left="20.0"/>
         </padding>
         <children>
            <Label text="Titre" style="-fx-font-size: 18px; -fx-font-weight: bold;"/>
            
            <TextArea wrapText="true" VBox.vgrow="ALWAYS"/>
            
            <HBox spacing="10.0">
               <children>
                  <Button text="Bouton qui s'étire" HBox.hgrow="ALWAYS"/>
                  <Button text="Bouton fixe" HBox.hgrow="NEVER"/>
               </children>
            </HBox>
         </children>
      </VBox>
   </center>
</BorderPane>

⚙️ Propriétés de redimensionnement

Voici un résumé des propriétés importantes pour le redimensionnement :

Propriétés de taille (onglet Properties)

• Min Width / Min Height : Taille minimale (en pixels)
• Pref Width / Pref Height : Taille préférée (en pixels)
• Max Width / Max Height : Taille maximale (en pixels ou USE_PREF_SIZE)

Propriétés de croissance (onglet Layout)

• Hgrow : Croissance horizontale (NEVER, ALWAYS, SOMETIMES)
• Vgrow : Croissance verticale (NEVER, ALWAYS, SOMETIMES)

💡 Bonnes pratiques pour le redimensionnement

• Utilisez ALWAYS pour les éléments principaux : Les zones de contenu principales doivent souvent s'étirer
• Utilisez NEVER pour les boutons et labels : Les éléments de contrôle gardent généralement une taille fixe
• Définissez des tailles min/max : Protégez vos éléments avec des limites raisonnables
• Testez le redimensionnement : Redimensionnez la fenêtre dans Scene Builder pour voir le comportement
• Pensez aux différentes tailles d'écran : Votre interface doit fonctionner sur différentes résolutions
• Combinez avec les contraintes : Utilisez min/max avec grow pour un contrôle précis

🔄 Stratégies de redimensionnement

Voici des stratégies courantes pour différents types d'éléments :

Éléments qui doivent s'étirer

• TextArea, TextField : Hgrow = ALWAYS, Vgrow = ALWAYS (pour TextArea)
• Zones de contenu principales : S'étirent pour remplir l'espace
• Tableaux et listes : S'étirent pour afficher plus de données

Éléments qui doivent garder leur taille

• Boutons : Hgrow = NEVER, Vgrow = NEVER (taille fixe)
• Labels : Taille basée sur le contenu
• Icônes : Taille fixe

Éléments conditionnels

• Certains conteneurs : Utilisent SOMETIMES pour s'adapter si nécessaire
• Éléments flexibles : S'étirent seulement s'il y a de l'espace disponible

📋 Exemple complet : Interface complètement adaptative

Créons une interface qui illustre tous les concepts de redimensionnement :

Exemple

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>

<BorderPane xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <Label text="Application Adaptative" style="-fx-font-size: 20px; -fx-font-weight: bold; -fx-padding: 10px;"/>
   </top>
   <center>
      <VBox spacing="10.0">
         <padding>
            <Insets top="10.0" right="10.0" bottom="10.0" left="10.0"/>
         </padding>
         <children>
            <Label text="Zone de contenu principale"/>
            <TextArea wrapText="true" prefHeight="200.0" VBox.vgrow="ALWAYS"/>
         </children>
      </VBox>
   </center>
   <bottom>
      <HBox spacing="10.0" alignment="CENTER_RIGHT">
         <padding>
            <Insets top="10.0" right="10.0" bottom="10.0" left="10.0"/>
         </padding>
         <children>
            <Button text="Annuler" HBox.hgrow="NEVER"/>
            <Button text="Valider" HBox.hgrow="NEVER"/>
         </children>
      </HBox>
   </bottom>
</BorderPane>

💡 Points clés à retenir

• Min/Pref/Max : Définissent les contraintes de taille d'un élément
• Hgrow/Vgrow : Contrôlent si un élément peut s'étirer (NEVER, ALWAYS, SOMETIMES)
• ALWAYS : Pour les éléments qui doivent remplir l'espace disponible
• NEVER : Pour les éléments qui doivent garder une taille fixe
• Testez toujours : Redimensionnez la fenêtre pour vérifier le comportement
• Combinez les propriétés : Utilisez min/max avec grow pour un contrôle précis