3.1.2 – VBox

Le VBox (Vertical Box) est un conteneur qui organise ses éléments enfants verticalement, c'est-à-dire les uns en dessous des autres, de haut en bas. C'est le layout le plus couramment utilisé pour créer des formulaires, des listes d'éléments, ou des interfaces organisées en colonnes verticales.

🎯 Qu'est-ce qu'un VBox ?

Le VBox est un conteneur qui :

• Organise verticalement : Place les éléments enfants les uns en dessous des autres, de haut en bas
• Gère automatiquement l'espacement : Permet de définir un espacement uniforme entre les éléments
• Gère l'alignement : Permet d'aligner les éléments horizontalement (gauche, centre, droite)
• Redimensionne automatiquement : Les éléments peuvent s'étirer pour remplir l'espace disponible

📐 Cas d'utilisation du VBox

Le VBox est particulièrement utile pour :

• Formulaires : Organiser des champs de saisie verticalement (Label, TextField, Button)
• Listes d'éléments : Afficher une série d'éléments empilés
• Panneaux de configuration : Organiser des options de configuration
• Cartes de contenu : Créer des cartes avec titre, contenu et actions
• Structure principale : Organiser la structure générale d'une fenêtre

Exemple d'interface utilisant un VBox
Formulaire de connexion avec les éléments empilés verticalement : titre, champs de saisie et boutons organisés dans un VBox.

🛠️ Créer un VBox dans Scene Builder

Voici comment créer et configurer un VBox dans Scene Builder :

Étape 1 : Ajouter un VBox

1. Ouvrez Scene Builder
2. Dans le panneau Library, trouvez la catégorie Containers
3. Glissez-déposez un VBox dans la zone de conception
4. Le VBox apparaît comme un rectangle avec des bordures pointillées

Étape 2 : Configurer les propriétés du VBox

Sélectionnez le VBox et configurez ses propriétés dans l'inspecteur :

• Spacing : Espacement en pixels entre les éléments enfants (ex: 15)
• Alignment : Alignement horizontal des éléments (TOP_LEFT, CENTER, TOP_RIGHT, etc.)
• Padding : Marge intérieure autour du contenu (dans l'onglet Layout)
• Pref Width / Pref Height : Taille préférée du conteneur

Étape 3 : Ajouter des éléments dans le VBox

Pour ajouter des composants dans le VBox :

1. Glissez-déposez des composants (Label, TextField, Button, etc.) depuis la Library dans le VBox
2. Les composants s'alignent automatiquement verticalement
3. Vous pouvez réorganiser l'ordre en glissant les éléments dans la vue hiérarchique

📝 Exemple pratique : Formulaire de connexion avec VBox

Créons un formulaire de connexion simple avec des champs organisés verticalement :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un VBox comme racine
2. Sélectionnez le VBox et configurez :
   • Spacing : 15
   • Padding : 20 (dans l'onglet Layout)
   • Alignment : CENTER
   • Pref Width : 300
3. Ajoutez les composants suivants dans l'ordre :
   • Un Label : Text = "Connexion", style avec une grande police
   • Un Label : Text = "Nom d'utilisateur"
   • Un TextField : Pref Width = 250
   • Un Label : Text = "Mot de passe"
   • Un PasswordField : Pref Width = 250
   • Un HBox (pour aligner les boutons horizontalement) :
     • Spacing = 10
     • Contient deux Button : "Annuler" et "Connexion"

Exemple

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

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

<VBox spacing="15" alignment="CENTER" 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="Connexion" style="-fx-font-size: 24px; -fx-font-weight: bold;"/>
      <Label text="Nom d'utilisateur"/>
      <TextField prefWidth="250.0" promptText="Entrez votre nom d'utilisateur"/>
      <Label text="Mot de passe"/>
      <PasswordField prefWidth="250.0" promptText="Entrez votre mot de passe"/>
      <HBox spacing="10.0" alignment="CENTER">
         <children>
            <Button text="Annuler"/>
            <Button text="Connexion"/>
         </children>
      </HBox>
   </children>
</VBox>

⚙️ Propriétés importantes du VBox

Voici les propriétés les plus utilisées pour configurer un VBox dans Scene Builder :

Propriétés de base (onglet Properties)

• Spacing : Espacement vertical entre les éléments (en pixels)
• Pref Width : Largeur préférée du conteneur
• Pref Height : Hauteur préférée du conteneur

Propriétés de layout (onglet Layout)

• Alignment : Alignement horizontal des éléments (TOP_LEFT, TOP_CENTER, TOP_RIGHT, CENTER_LEFT, CENTER, CENTER_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT)
• Padding : Marge intérieure (Top, Right, Bottom, Left)

Propriétés des enfants dans le VBox

Quand vous sélectionnez un élément enfant du VBox, vous pouvez configurer :

• Vgrow : Permet à l'élément de s'étirer verticalement (NEVER, ALWAYS, SOMETIMES)
• Margin : Marge autour de l'élément spécifique

💡 Bonnes pratiques avec VBox

• Utilisez un spacing cohérent : Choisissez un espacement uniforme (ex: 10-15px) pour une apparence professionnelle
• Pensez au padding : Ajoutez du padding pour éviter que les éléments touchent les bords
• Centrez le contenu : Utilisez CENTER pour l'alignement pour un rendu équilibré
• Combinez avec HBox : Utilisez des HBox à l'intérieur d'un VBox pour créer des lignes horizontales dans une structure verticale
• Utilisez Vgrow pour les éléments flexibles : Si vous voulez qu'un élément prenne tout l'espace disponible, utilisez Vgrow = ALWAYS

🔄 VBox vs autres layouts

Comparons le VBox avec d'autres layouts similaires :

• VBox vs HBox : VBox organise verticalement, HBox organise horizontalement
• VBox vs FlowPane : VBox place les éléments en une seule colonne, FlowPane peut créer plusieurs colonnes si nécessaire
• VBox vs GridPane : VBox est linéaire, GridPane permet une organisation en grille bidimensionnelle

3.1.3 – BorderPane

Le BorderPane est un conteneur qui divise l'espace en cinq zones distinctes : top (haut), bottom (bas), left (gauche), right (droite) et center (centre). C'est le layout idéal pour créer des interfaces avec une barre de menu en haut, une barre de statut en bas, des panneaux latéraux, et une zone de contenu principale au centre.

🎯 Qu'est-ce qu'un BorderPane ?

Le BorderPane est un conteneur qui :

• Divise en cinq zones : Top, Bottom, Left, Right, et Center
• Organise automatiquement : Chaque zone a un rôle spécifique et une position fixe
• Gère le redimensionnement : La zone center prend tout l'espace disponible
• Permet des zones optionnelles : Vous n'êtes pas obligé de remplir toutes les zones

📐 Cas d'utilisation du BorderPane

Le BorderPane est particulièrement utile pour :

• Applications principales : Structure standard d'une application avec menu, contenu et statut
• Éditeurs : Zone d'édition centrale avec barres d'outils et panneaux latéraux
• Tableaux de bord : Contenu principal au centre avec navigation sur les côtés
• Interfaces complexes : Quand vous avez besoin de plusieurs zones distinctes
• Applications de bureau : Structure classique des applications de bureau

Exemple d'interface utilisant un BorderPane
Application avec barre de menu en haut, panneau de navigation à gauche, zone de contenu principale au centre, et barre de statut en bas.

🛠️ Créer un BorderPane dans Scene Builder

Voici comment créer et configurer un BorderPane dans Scene Builder :

Étape 1 : Ajouter un BorderPane

1. Ouvrez Scene Builder
2. Dans le panneau Library, trouvez la catégorie Containers
3. Glissez-déposez un BorderPane dans la zone de conception
4. Le BorderPane apparaît avec cinq zones visibles : Top, Bottom, Left, Right, Center

Étape 2 : Remplir les zones du BorderPane

Pour ajouter du contenu dans chaque zone :

1. Zone Top : Glissez un composant (MenuBar, ToolBar, etc.) et déposez-le dans la zone "Top" du BorderPane
2. Zone Bottom : Glissez un composant (Label, HBox avec boutons, etc.) et déposez-le dans la zone "Bottom"
3. Zone Left : Glissez un composant (VBox avec navigation, ListView, etc.) et déposez-le dans la zone "Left"
4. Zone Right : Glissez un composant (panneau d'outils, etc.) et déposez-le dans la zone "Right"
5. Zone Center : Glissez votre contenu principal (VBox, GridPane, TableView, etc.) et déposez-le dans la zone "Center"

📝 Exemple pratique : Application avec BorderPane

Créons une application simple avec une structure BorderPane complète :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un BorderPane comme racine
2. Zone Top : Ajoutez un MenuBar avec quelques menus (Fichier, Édition, Aide)
3. Zone Left : Ajoutez un VBox avec :
   • Spacing = 5
   • Padding = 10
   • Contient trois Button : "Accueil", "Profil", "Paramètres"
4. Zone Center : Ajoutez un VBox avec :
   • Padding = 20
   • Contient un Label : "Zone de contenu principal"
   • Contient un TextArea pour le contenu
5. Zone Bottom : Ajoutez un HBox avec :
   • Padding = 5
   • Alignment = CENTER_LEFT
   • Contient un Label : "Prêt" (barre de statut)
6. Zone Right : Laissez vide pour cet exemple (optionnel)

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>
      <MenuBar>
         <menus>
            <Menu mnemonicParsing="false" text="Fichier">
               <items>
                  <MenuItem mnemonicParsing="false" text="Nouveau"/>
                  <MenuItem mnemonicParsing="false" text="Ouvrir"/>
                  <SeparatorMenuItem mnemonicParsing="false"/>
                  <MenuItem mnemonicParsing="false" text="Quitter"/>
               </items>
            </Menu>
            <Menu mnemonicParsing="false" text="Édition">
               <items>
                  <MenuItem mnemonicParsing="false" text="Copier"/>
                  <MenuItem mnemonicParsing="false" text="Coller"/>
               </items>
            </Menu>
            <Menu mnemonicParsing="false" text="Aide">
               <items>
                  <MenuItem mnemonicParsing="false" text="À propos"/>
               </items>
            </Menu>
         </menus>
      </MenuBar>
   </top>
   <left>
      <VBox spacing="5.0">
         <padding>
            <Insets top="10.0" right="10.0" bottom="10.0" left="10.0"/>
         </padding>
         <children>
            <Button text="Accueil"/>
            <Button text="Profil"/>
            <Button text="Paramètres"/>
         </children>
      </VBox>
   </left>
   <center>
      <VBox spacing="10.0">
         <padding>
            <Insets top="20.0" right="20.0" bottom="20.0" left="20.0"/>
         </padding>
         <children>
            <Label text="Zone de contenu principal"/>
            <TextArea prefHeight="200.0" prefWidth="200.0" wrapText="true"/>
         </children>
      </VBox>
   </center>
   <bottom>
      <HBox alignment="CENTER_LEFT">
         <padding>
            <Insets top="5.0" right="5.0" bottom="5.0" left="5.0"/>
         </padding>
         <children>
            <Label text="Prêt"/>
         </children>
      </HBox>
   </bottom>
</BorderPane>

⚙️ Propriétés importantes du BorderPane

Voici les propriétés les plus utilisées pour configurer un BorderPane dans Scene Builder :

Propriétés de base (onglet Properties)

• Pref Width : Largeur préférée du conteneur
• Pref Height : Hauteur préférée du conteneur

Zones du BorderPane

Dans la vue hiérarchique, vous verrez les cinq zones :

• top : Zone en haut (barre de menu, barre d'outils)
• bottom : Zone en bas (barre de statut, informations)
• left : Zone à gauche (navigation, panneaux latéraux)
• right : Zone à droite (panneaux d'outils, informations)
• center : Zone centrale (contenu principal)

Comportement du redimensionnement

Le BorderPane gère automatiquement le redimensionnement :

• Top et Bottom : S'étirent horizontalement, gardent leur hauteur
• Left et Right : S'étirent verticalement, gardent leur largeur
• Center : Prend tout l'espace disponible restant

💡 Bonnes pratiques avec BorderPane

• Utilisez des conteneurs dans les zones : Si vous voulez plusieurs éléments dans une zone, utilisez un VBox ou HBox comme conteneur intermédiaire
• La zone Center est essentielle : C'est généralement la zone la plus importante, remplissez-la avec votre contenu principal
• Les zones sont optionnelles : Vous n'êtes pas obligé de remplir toutes les zones, laissez celles que vous n'utilisez pas vides
• Pensez à la hiérarchie : Utilisez la vue hiérarchique pour voir clairement quelle zone contient quoi
• Combinez avec d'autres layouts : Chaque zone peut contenir n'importe quel autre layout (VBox, HBox, GridPane, etc.)

🔄 BorderPane vs autres layouts

Comparons le BorderPane avec d'autres layouts similaires :

• BorderPane vs VBox/HBox : BorderPane offre une structure en cinq zones, VBox/HBox sont linéaires
• BorderPane vs GridPane : BorderPane a des zones fixes, GridPane permet une grille flexible
• BorderPane vs AnchorPane : BorderPane organise automatiquement, AnchorPane permet un positionnement libre

3.1.4 – GridPane

Le GridPane est un conteneur qui organise ses éléments enfants dans une grille bidimensionnelle, avec des lignes et des colonnes. C'est le layout idéal pour créer des formulaires avec des labels et des champs alignés, des tableaux de données, ou toute interface nécessitant une organisation en grille.

🎯 Qu'est-ce qu'un GridPane ?

Le GridPane est un conteneur qui :

• Organise en grille : Place les éléments dans des cellules définies par des lignes et colonnes
• Gère l'alignement : Permet d'aligner les éléments dans chaque cellule
• Gère les espacements : Permet de définir des espacements entre les lignes (vgap) et colonnes (hgap)
• Gère le redimensionnement : Les colonnes et lignes peuvent s'étirer pour remplir l'espace

📐 Cas d'utilisation du GridPane

Le GridPane est particulièrement utile pour :

• Formulaires structurés : Labels et champs alignés en colonnes
• Tableaux de données : Afficher des données en grille
• Interfaces de configuration : Organiser des options en grille
• Grilles de boutons : Créer des grilles de boutons (calculatrice, clavier virtuel)
• Tableaux de bord : Organiser des widgets en grille

Exemple d'interface utilisant un GridPane
Formulaire d'inscription avec les labels dans la première colonne et les champs de saisie dans la deuxième colonne, tous alignés en grille.

🛠️ Créer un GridPane dans Scene Builder

Voici comment créer et configurer un GridPane dans Scene Builder :

Étape 1 : Ajouter un GridPane

1. Ouvrez Scene Builder
2. Dans le panneau Library, trouvez la catégorie Containers
3. Glissez-déposez un GridPane dans la zone de conception
4. Le GridPane apparaît avec une grille visible (lignes et colonnes)

Étape 2 : Configurer les propriétés du GridPane

Sélectionnez le GridPane et configurez ses propriétés dans l'inspecteur :

• Hgap : Espacement horizontal entre les colonnes (en pixels, ex: 10)
• Vgap : Espacement vertical entre les lignes (en pixels, ex: 10)
• Padding : Marge intérieure autour du contenu (dans l'onglet Layout)
• Grid Lines Visible : Affiche les lignes de la grille (utile pour le design, désactivé en production)

Étape 3 : Ajouter des éléments dans le GridPane

Pour ajouter des composants dans le GridPane :

1. Glissez-déposez un composant dans le GridPane
2. Le composant se place automatiquement dans une cellule
3. Sélectionnez le composant et, dans l'onglet Layout, configurez :
   • Column Index : Numéro de la colonne (commence à 0)
   • Row Index : Numéro de la ligne (commence à 0)
   • Column Span : Nombre de colonnes que l'élément occupe
   • Row Span : Nombre de lignes que l'élément occupe

📝 Exemple pratique : Formulaire avec GridPane

Créons un formulaire d'inscription avec des labels et des champs alignés :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un VBox comme racine
2. Ajoutez un Label : "Formulaire d'inscription" (titre)
3. Ajoutez un GridPane dans le VBox et configurez :
   • Hgap = 15
   • Vgap = 10
   • Padding = 20
4. Dans le GridPane, ajoutez les éléments suivants :
   • Ligne 0, Colonne 0 : Label "Nom :"
   • Ligne 0, Colonne 1 : TextField (Pref Width = 200)
   • Ligne 1, Colonne 0 : Label "Prénom :"
   • Ligne 1, Colonne 1 : TextField (Pref Width = 200)
   • Ligne 2, Colonne 0 : Label "Email :"
   • Ligne 2, Colonne 1 : TextField (Pref Width = 200)
   • Ligne 3, Colonne 0 : Label "Téléphone :"
   • Ligne 3, Colonne 1 : TextField (Pref Width = 200)
   • Ligne 4, Colonne 0, Column Span = 2 : HBox avec deux Button "Annuler" et "Valider"

Exemple

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

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

<VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label text="Formulaire d'inscription" style="-fx-font-size: 18px; -fx-font-weight: bold;"/>
      <GridPane hgap="15.0" vgap="10.0">
         <padding>
            <Insets top="20.0" right="20.0" bottom="20.0" left="20.0"/>
         </padding>
         <children>
            <Label text="Nom :" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
            <TextField prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
            
            <Label text="Prénom :" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
            <TextField prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
            
            <Label text="Email :" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
            <TextField prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
            
            <Label text="Téléphone :" GridPane.columnIndex="0" GridPane.rowIndex="3"/>
            <TextField prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
            
            <HBox spacing="10.0" alignment="CENTER" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="4">
               <children>
                  <Button text="Annuler"/>
                  <Button text="Valider"/>
               </children>
            </HBox>
         </children>
      </GridPane>
   </children>
</VBox>

⚙️ Propriétés importantes du GridPane

Voici les propriétés les plus utilisées pour configurer un GridPane dans Scene Builder :

Propriétés du GridPane (onglet Properties)

• Hgap : Espacement horizontal entre les colonnes (en pixels)
• Vgap : Espacement vertical entre les lignes (en pixels)
• Grid Lines Visible : Affiche les lignes de la grille (utile pour le design)

Propriétés des enfants dans le GridPane (onglet Layout)

Quand vous sélectionnez un élément dans le GridPane, vous pouvez configurer :

• Column Index : Numéro de la colonne (0, 1, 2, ...)
• Row Index : Numéro de la ligne (0, 1, 2, ...)
• Column Span : Nombre de colonnes occupées (1 par défaut)
• Row Span : Nombre de lignes occupées (1 par défaut)
• Halignment : Alignement horizontal dans la cellule (LEFT, CENTER, RIGHT)
• Valignment : Alignement vertical dans la cellule (TOP, CENTER, BOTTOM)
• Hgrow : Permet à la colonne de s'étirer (NEVER, ALWAYS, SOMETIMES)
• Vgrow : Permet à la ligne de s'étirer (NEVER, ALWAYS, SOMETIMES)
• Margin : Marge autour de l'élément

💡 Bonnes pratiques avec GridPane

• Utilisez des espacements cohérents : Choisissez des valeurs uniformes pour Hgap et Vgap (ex: 10px)
• Alignez les labels : Utilisez Halignment = RIGHT pour les labels dans la première colonne pour un alignement professionnel
• Activez Grid Lines Visible pendant le design : Cela vous aide à voir la structure, désactivez-le pour la production
• Utilisez Column Span pour les boutons : Les boutons d'action en bas d'un formulaire peuvent s'étendre sur plusieurs colonnes
• Pensez au redimensionnement : Configurez Hgrow et Vgrow pour que les colonnes/lignes s'adaptent à la taille de la fenêtre
• Organisez logiquement : Placez les éléments liés sur la même ligne ou colonne

🔄 GridPane vs autres layouts

Comparons le GridPane avec d'autres layouts similaires :

• GridPane vs VBox/HBox : GridPane permet une organisation bidimensionnelle, VBox/HBox sont linéaires
• GridPane vs BorderPane : GridPane offre une grille flexible, BorderPane a des zones fixes
• GridPane vs FlowPane : GridPane a des cellules fixes, FlowPane organise automatiquement en flux

3.1.5 – AnchorPane

Le AnchorPane est un conteneur qui permet de positionner ses éléments enfants en utilisant des ancres (anchors) par rapport aux bords du conteneur. C'est le layout idéal pour créer des interfaces avec un positionnement précis, des éléments ancrés aux bords, ou des interfaces qui nécessitent un contrôle total sur la position des éléments.

🎯 Qu'est-ce qu'un AnchorPane ?

Le AnchorPane est un conteneur qui :

• Permet le positionnement libre : Vous pouvez placer les éléments n'importe où dans le conteneur
• Utilise des ancres : Permet d'ancrer les éléments aux bords (top, bottom, left, right)
• Gère le redimensionnement : Les éléments peuvent rester ancrés aux bords lors du redimensionnement
• Offre un contrôle précis : Permet un positionnement exact avec des coordonnées

📐 Cas d'utilisation du AnchorPane

Le AnchorPane est particulièrement utile pour :

• Interfaces avec positionnement précis : Quand vous avez besoin d'un contrôle total sur la position
• Éléments ancrés aux bords : Boutons ou panneaux qui doivent rester aux bords
• Overlays et popups : Éléments superposés avec positionnement précis
• Interfaces de jeu : Éléments de jeu avec positions fixes
• Designs complexes : Quand les autres layouts ne suffisent pas

Exemple d'interface utilisant un AnchorPane
Interface avec un titre ancré en haut, une zone de texte qui s'étire pour remplir l'espace disponible (ancrée aux quatre bords), et des boutons ancrés en bas.

🛠️ Créer un AnchorPane dans Scene Builder

Voici comment créer et configurer un AnchorPane dans Scene Builder :

Étape 1 : Ajouter un AnchorPane

1. Ouvrez Scene Builder
2. Dans le panneau Library, trouvez la catégorie Containers
3. Glissez-déposez un AnchorPane dans la zone de conception
4. Le AnchorPane apparaît comme un rectangle avec des bordures pointillées

Étape 2 : Ajouter des éléments dans l'AnchorPane

Pour ajouter des composants dans l'AnchorPane :

1. Glissez-déposez un composant dans l'AnchorPane
2. Le composant peut être placé n'importe où en le glissant
3. Sélectionnez le composant et, dans l'onglet Layout, configurez les ancres

Étape 3 : Configurer les ancres

Pour chaque élément dans l'AnchorPane, vous pouvez configurer des ancres :

• Top Anchor : Distance depuis le haut du conteneur (en pixels)
• Bottom Anchor : Distance depuis le bas du conteneur (en pixels)
• Left Anchor : Distance depuis la gauche du conteneur (en pixels)
• Right Anchor : Distance depuis la droite du conteneur (en pixels)

📝 Exemple pratique : Interface avec AnchorPane

Créons une interface avec des éléments ancrés aux différents bords :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un AnchorPane comme racine
2. Configurez le AnchorPane :
   • Pref Width = 600
   • Pref Height = 400
3. Ajoutez les éléments suivants :
   • Label "Titre" :
     • Top Anchor = 20
     • Left Anchor = 20
     • Right Anchor = 20
   • TextArea (zone de contenu) :
     • Top Anchor = 60
     • Left Anchor = 20
     • Right Anchor = 20
     • Bottom Anchor = 60
   • HBox avec deux Button (en bas) :
     • Bottom Anchor = 20
     • Left Anchor = 20
     • Right Anchor = 20
     • Contient deux Button : "Annuler" et "Valider"

Exemple

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

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

<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label text="Titre" style="-fx-font-size: 18px; -fx-font-weight: bold;" 
             AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="20.0"/>
      
      <TextArea wrapText="true" 
                AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" 
                AnchorPane.topAnchor="60.0" AnchorPane.bottomAnchor="60.0"/>
      
      <HBox spacing="10.0" alignment="CENTER" 
            AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.bottomAnchor="20.0">
         <children>
            <Button text="Annuler"/>
            <Button text="Valider"/>
         </children>
      </HBox>
   </children>
</AnchorPane>

⚙️ Propriétés importantes de l'AnchorPane

Voici les propriétés les plus utilisées pour configurer un AnchorPane dans Scene Builder :

Propriétés de base (onglet Properties)

• Pref Width : Largeur préférée du conteneur
• Pref Height : Hauteur préférée du conteneur

Propriétés des enfants dans l'AnchorPane (onglet Layout)

Quand vous sélectionnez un élément dans l'AnchorPane, vous pouvez configurer :

• Top Anchor : Distance depuis le haut (en pixels)
• Bottom Anchor : Distance depuis le bas (en pixels)
• Left Anchor : Distance depuis la gauche (en pixels)
• Right Anchor : Distance depuis la droite (en pixels)
• Layout X : Position X absolue (alternative aux ancres)
• Layout Y : Position Y absolue (alternative aux ancres)

💡 Bonnes pratiques avec AnchorPane

• Utilisez les ancres pour l'adaptabilité : Les ancres permettent aux éléments de s'adapter au redimensionnement
• Combinez Top/Bottom ou Left/Right : Pour qu'un élément s'étire, définissez les ancres opposées (ex: Top = 10 et Bottom = 10)
• Évitez le positionnement absolu si possible : Préférez les ancres pour une meilleure adaptabilité
• Utilisez pour des cas spécifiques : AnchorPane est puissant mais peut être complexe, utilisez-le quand les autres layouts ne suffisent pas
• Pensez au redimensionnement : Testez toujours votre interface avec différentes tailles de fenêtre

🔄 AnchorPane vs autres layouts

Comparons l'AnchorPane avec d'autres layouts similaires :

• AnchorPane vs VBox/HBox : AnchorPane permet un positionnement libre, VBox/HBox organisent automatiquement
• AnchorPane vs GridPane : AnchorPane offre un positionnement libre, GridPane organise en grille
• AnchorPane vs Pane : AnchorPane ajoute les ancres, Pane est un positionnement absolu pur