3.2.2 – TilePane

Le TilePane est un conteneur qui organise ses éléments enfants en tuiles (tiles) de taille uniforme. Contrairement au FlowPane qui adapte la taille des éléments, le TilePane crée une grille régulière où chaque élément occupe la même taille. C'est le layout idéal pour créer des grilles de boutons, des tableaux de bord avec widgets uniformes, ou des galeries avec des images de même taille.

🎯 Qu'est-ce qu'un TilePane ?

Le TilePane est un conteneur qui :

• Organise en tuiles : Place les éléments dans une grille de tuiles de taille uniforme
• Taille fixe des tuiles : Tous les éléments occupent la même taille (largeur et hauteur)
• Gère l'espacement : Permet de définir un espacement uniforme entre les tuiles
• Passe à la ligne automatiquement : Crée de nouvelles lignes/colonnes quand nécessaire

📐 Cas d'utilisation du TilePane

Le TilePane est particulièrement utile pour :

• Grilles de boutons : Créer des grilles de boutons uniformes (calculatrice, clavier virtuel)
• Tableaux de bord : Afficher des widgets de même taille en grille
• Galeries uniformes : Afficher des images ou cartes de même taille
• Interfaces de sélection : Créer des grilles de sélection avec éléments uniformes
• Organisation régulière : Quand vous voulez une apparence très structurée et uniforme

🛠️ Créer un TilePane dans Scene Builder

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

Étape 1 : Ajouter un TilePane

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

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

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

• Orientation : HORIZONTAL (tuiles de gauche à droite) ou VERTICAL (tuiles de haut en bas)
• Pref Tile Width : Largeur préférée de chaque tuile (en pixels)
• Pref Tile Height : Hauteur préférée de chaque tuile (en pixels)
• Hgap : Espacement horizontal entre les tuiles (en pixels)
• Vgap : Espacement vertical entre les tuiles (en pixels)
• Tile Alignment : Alignement des éléments dans chaque tuile

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

Pour ajouter des composants dans le TilePane :

1. Glissez-déposez des composants (Button, Label, etc.) depuis la Library dans le TilePane
2. Chaque élément occupe automatiquement la taille définie (Pref Tile Width × Pref Tile Height)
3. Les éléments s'organisent en grille régulière

📝 Exemple pratique : Grille de boutons avec TilePane

Créons une grille de boutons uniforme (comme une calculatrice) :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un VBox comme racine
2. Ajoutez un TextField en haut (pour l'affichage de la calculatrice)
3. Ajoutez un TilePane dans le VBox et configurez :
   • Orientation = HORIZONTAL
   • Pref Tile Width = 60
   • Pref Tile Height = 60
   • Hgap = 5
   • Vgap = 5
   • Padding = 10
4. Dans le TilePane, ajoutez plusieurs Button :
   • Chaque bouton occupe exactement 60×60 pixels
   • Les boutons s'organisent en grille régulière
   • Exemple : boutons "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "+", "-", etc.

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="10.0" right="10.0" bottom="10.0" left="10.0"/>
   </padding>
   <children>
      <TextField promptText="0" prefWidth="250.0"/>
      <TilePane hgap="5.0" vgap="5.0" prefTileWidth="60.0" prefTileHeight="60.0" orientation="HORIZONTAL">
         <padding>
            <Insets top="10.0" right="10.0" bottom="10.0" left="10.0"/>
         </padding>
         <children>
            <Button text="1" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="2" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="3" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="4" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="5" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="6" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="7" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="8" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="9" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="0" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="+" prefWidth="60.0" prefHeight="60.0"/>
            <Button text="-" prefWidth="60.0" prefHeight="60.0"/>
         </children>
      </TilePane>
   </children>
</VBox>

⚙️ Propriétés importantes du TilePane

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

Propriétés de base (onglet Properties)

• Orientation : HORIZONTAL (tuiles de gauche à droite) ou VERTICAL (tuiles de haut en bas)
• Pref Tile Width : Largeur de chaque tuile (en pixels)
• Pref Tile Height : Hauteur de chaque tuile (en pixels)
• Hgap : Espacement horizontal entre les tuiles (en pixels)
• Vgap : Espacement vertical entre les tuiles (en pixels)

Propriétés de layout (onglet Layout)

• Tile Alignment : Alignement des éléments dans chaque tuile (TOP_LEFT, CENTER, etc.)
• Alignment : Alignement général du TilePane dans son conteneur parent
• Padding : Marge intérieure autour du contenu

💡 Bonnes pratiques avec TilePane

• Utilisez pour des éléments uniformes : TilePane est parfait quand tous les éléments doivent avoir la même taille
• Définissez la taille des tuiles : Pensez à la taille optimale pour vos éléments
• Pensez à l'espacement : Utilisez des valeurs cohérentes pour hgap et vgap
• Testez avec différents nombres d'éléments : Vérifiez que la grille reste cohérente
• Combinez avec ScrollPane : Pour des grilles longues, enveloppez le TilePane dans un ScrollPane

🔄 TilePane vs autres layouts

Comparons le TilePane avec d'autres layouts similaires :

• TilePane vs FlowPane : TilePane utilise des tuiles de taille fixe, FlowPane adapte la taille
• TilePane vs GridPane : TilePane organise automatiquement, GridPane nécessite des indices de ligne/colonne
• TilePane vs HBox/VBox : TilePane crée une grille, HBox/VBox sont linéaires

3.2.3 – StackPane

Le StackPane est un conteneur qui superpose ses éléments enfants les uns par-dessus les autres, comme une pile de cartes. Tous les éléments sont positionnés au même endroit, et seul l'élément du dessus est visible. C'est le layout idéal pour créer des overlays, des éléments superposés, des indicateurs de statut, ou des interfaces avec des couches.

🎯 Qu'est-ce qu'un StackPane ?

Le StackPane est un conteneur qui :

• Superpose les éléments : Place tous les éléments enfants au même endroit, les uns par-dessus les autres
• Ordre de superposition : Le dernier élément ajouté est au-dessus (visible)
• Gère l'alignement : Permet d'aligner les éléments superposés
• Utile pour les overlays : Parfait pour créer des éléments qui se superposent à d'autres

📐 Cas d'utilisation du StackPane

Le StackPane est particulièrement utile pour :

• Overlays et popups : Superposer des éléments par-dessus d'autres
• Indicateurs de statut : Afficher des badges ou icônes sur des éléments
• Éléments de fond : Créer des arrière-plans avec des éléments par-dessus
• Interfaces en couches : Organiser des éléments en plusieurs couches visuelles
• Éléments centrés : Centrer facilement un élément sur un autre

🛠️ Créer un StackPane dans Scene Builder

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

Étape 1 : Ajouter un StackPane

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

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

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

• Alignment : Alignement des éléments superposés (CENTER, TOP_LEFT, etc.)
• Pref Width / Pref Height : Taille préférée du conteneur

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

Pour ajouter des composants dans le StackPane :

1. Glissez-déposez des composants depuis la Library dans le StackPane
2. Les éléments se superposent automatiquement
3. Le dernier élément ajouté est visible au-dessus
4. Vous pouvez réorganiser l'ordre dans la vue hiérarchique

📝 Exemple pratique : Image avec badge avec StackPane

Créons une image avec un badge de statut superposé :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un VBox comme racine
2. Ajoutez un StackPane dans le VBox et configurez :
   • Pref Width = 200
   • Pref Height = 200
   • Alignment = CENTER
3. Dans le StackPane, ajoutez les éléments suivants (dans l'ordre) :
   • Un Rectangle ou ImageView (fond/image principale)
   • Un Label avec texte "Nouveau" et style avec fond coloré (badge)
   • Positionnez le Label en haut à droite en utilisant l'alignement ou les marges

Exemple

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>
<?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>
      <StackPane prefWidth="200.0" prefHeight="200.0" alignment="CENTER">
         <children>
            <Rectangle width="200.0" height="200.0" fill="#e0e0e0" arcWidth="10.0" arcHeight="10.0"/>
            <Label text="Nouveau" style="-fx-background-color: red; -fx-text-fill: white; -fx-padding: 5px;" 
                   StackPane.alignment="TOP_RIGHT">
               <StackPane.margin>
                  <Insets top="10.0" right="10.0"/>
               </StackPane.margin>
            </Label>
         </children>
      </StackPane>
   </children>
</VBox>

⚙️ Propriétés importantes du StackPane

Voici les propriétés les plus utilisées pour configurer un StackPane 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 de layout (onglet Layout)

• Alignment : Alignement des éléments superposés (TOP_LEFT, TOP_CENTER, TOP_RIGHT, CENTER_LEFT, CENTER, CENTER_RIGHT, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT)

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

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

• Alignment : Alignement spécifique de cet élément dans le StackPane
• Margin : Marge autour de l'élément

💡 Bonnes pratiques avec StackPane

• Utilisez pour la superposition : StackPane est parfait quand vous voulez superposer des éléments
• Pensez à l'ordre : L'ordre dans la hiérarchie détermine quel élément est au-dessus
• Utilisez l'alignement : Alignez les éléments superposés selon vos besoins
• Combinez avec d'autres layouts : StackPane peut contenir d'autres layouts pour des structures complexes
• Attention à la visibilité : Seul l'élément du dessus est visible, assurez-vous que c'est celui que vous voulez

🔄 StackPane vs autres layouts

Comparons le StackPane avec d'autres layouts similaires :

• StackPane vs Pane : StackPane superpose automatiquement, Pane permet un positionnement libre
• StackPane vs Group : StackPane gère l'alignement, Group est un simple conteneur
• StackPane vs VBox/HBox : StackPane superpose, VBox/HBox organisent linéairement

3.2.4 – Pane (layout libre)

Le Pane est un conteneur qui permet un positionnement absolu et libre de ses éléments enfants. Contrairement aux autres layouts qui organisent automatiquement les éléments, le Pane vous donne un contrôle total sur la position de chaque élément en utilisant des coordonnées X et Y. C'est le layout idéal pour créer des interfaces avec positionnement précis, des dessins, ou des éléments qui doivent être placés à des positions exactes.

🎯 Qu'est-ce qu'un Pane ?

Le Pane est un conteneur qui :

• Permet le positionnement libre : Vous placez chaque élément à une position exacte (X, Y)
• N'organise pas automatiquement : Les éléments restent où vous les placez
• Utilise LayoutX et LayoutY : Coordonnées absolues pour positionner les éléments
• Offre un contrôle total : Parfait pour des interfaces avec positionnement précis

📐 Cas d'utilisation du Pane

Le Pane est particulièrement utile pour :

• Interfaces avec positionnement précis : Quand vous avez besoin d'un contrôle total sur la position
• Dessins et graphiques : Créer des formes et éléments positionnés précisément
• Interfaces de jeu : Positionner des éléments de jeu à des coordonnées exactes
• Diagrammes : Créer des diagrammes avec éléments positionnés
• Interfaces personnalisées : Quand les autres layouts ne suffisent pas

🛠️ Créer un Pane dans Scene Builder

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

Étape 1 : Ajouter un Pane

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

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

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

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

Étape 3 : Ajouter et positionner des éléments dans le Pane

Pour ajouter et positionner des composants dans le Pane :

1. Glissez-déposez des composants depuis la Library dans le Pane
2. Sélectionnez chaque élément et, dans l'onglet Layout, configurez :
   • Layout X : Position X (distance depuis la gauche, en pixels)
   • Layout Y : Position Y (distance depuis le haut, en pixels)
3. Vous pouvez aussi glisser les éléments directement dans la zone de conception pour les positionner visuellement

📝 Exemple pratique : Interface avec positionnement libre

Créons une interface simple avec des éléments positionnés précisément :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un Pane comme racine
2. Configurez le Pane :
   • Pref Width = 400
   • Pref Height = 300
3. Dans le Pane, ajoutez les éléments suivants avec leurs positions :
   • Label "Titre" : Layout X = 50, Layout Y = 20
   • Button "Bouton 1" : Layout X = 50, Layout Y = 100
   • Button "Bouton 2" : Layout X = 200, Layout Y = 100
   • TextField : Layout X = 50, Layout Y = 150, Pref Width = 300

Exemple

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

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

<Pane prefHeight="300.0" prefWidth="400.0" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label layoutX="50.0" layoutY="20.0" text="Titre" style="-fx-font-size: 18px; -fx-font-weight: bold;"/>
      <Button layoutX="50.0" layoutY="100.0" text="Bouton 1"/>
      <Button layoutX="200.0" layoutY="100.0" text="Bouton 2"/>
      <TextField layoutX="50.0" layoutY="150.0" prefWidth="300.0" promptText="Entrez du texte"/>
   </children>
</Pane>

⚙️ Propriétés importantes du Pane

Voici les propriétés les plus utilisées pour configurer un Pane 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 le Pane (onglet Layout)

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

• Layout X : Position X absolue (distance depuis la gauche, en pixels)
• Layout Y : Position Y absolue (distance depuis le haut, en pixels)

💡 Bonnes pratiques avec Pane

• Utilisez pour le positionnement précis : Pane est parfait quand vous avez besoin de positions exactes
• Évitez si possible : Les autres layouts sont généralement plus maintenables
• Pensez au redimensionnement : Les éléments ne s'adaptent pas automatiquement, testez avec différentes tailles
• Utilisez pour des cas spécifiques : Dessins, jeux, diagrammes où le positionnement précis est nécessaire
• Combinez avec d'autres layouts : Utilisez Pane pour des parties spécifiques, pas pour toute l'interface

🔄 Pane vs autres layouts

Comparons le Pane avec d'autres layouts similaires :

• Pane vs AnchorPane : Pane utilise des coordonnées absolues, AnchorPane utilise des ancres qui s'adaptent
• Pane vs GridPane : Pane permet un positionnement libre, GridPane organise en grille
• Pane vs VBox/HBox : Pane est libre, VBox/HBox organisent automatiquement

3.2.5 – ScrollPane

Le ScrollPane est un conteneur qui ajoute des barres de défilement (scrollbars) à son contenu. Quand le contenu est plus grand que l'espace disponible, le ScrollPane permet de faire défiler pour voir le reste du contenu. C'est le layout idéal pour afficher du contenu long, des listes, des images grandes, ou tout élément qui peut dépasser de l'espace disponible.

🎯 Qu'est-ce qu'un ScrollPane ?

Le ScrollPane est un conteneur qui :

• Ajoute le défilement : Permet de faire défiler le contenu avec des barres de défilement
• Gère le viewport : Affiche seulement la partie visible du contenu
• Barres de défilement automatiques : Les barres apparaissent automatiquement quand nécessaire
• Peut contenir n'importe quel Node : Accepte un seul élément enfant (souvent un layout)

📐 Cas d'utilisation du ScrollPane

Le ScrollPane est particulièrement utile pour :

• Contenu long : Afficher du texte, des listes ou des images qui dépassent
• Listes défilables : Créer des listes avec beaucoup d'éléments
• Images grandes : Afficher des images plus grandes que l'espace disponible
• Formulaires longs : Créer des formulaires avec beaucoup de champs
• Zones de texte : Ajouter le défilement à des TextArea ou autres composants

🛠️ Créer un ScrollPane dans Scene Builder

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

Étape 1 : Ajouter un ScrollPane

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

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

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

• Pref Viewport Width : Largeur de la zone visible (viewport)
• Pref Viewport Height : Hauteur de la zone visible (viewport)
• Hbar Policy : Politique de la barre de défilement horizontale (AS_NEEDED, ALWAYS, NEVER)
• Vbar Policy : Politique de la barre de défilement verticale (AS_NEEDED, ALWAYS, NEVER)
• Fit To Width : Ajuster le contenu à la largeur (pour les images)
• Fit To Height : Ajuster le contenu à la hauteur (pour les images)

Étape 3 : Ajouter du contenu dans le ScrollPane

Pour ajouter du contenu dans le ScrollPane :

1. Le ScrollPane ne peut contenir qu'un seul élément enfant
2. Glissez-déposez un layout (VBox, HBox, GridPane, etc.) ou un composant dans le ScrollPane
3. Ajoutez votre contenu dans ce layout
4. Si le contenu dépasse, les barres de défilement apparaissent automatiquement

📝 Exemple pratique : Liste défilable avec ScrollPane

Créons une liste d'éléments défilable :

Dans Scene Builder :

1. Créez un nouveau fichier FXML avec un VBox comme racine
2. Ajoutez un Label : "Liste d'éléments" (titre)
3. Ajoutez un ScrollPane dans le VBox et configurez :
   • Pref Viewport Width = 300
   • Pref Viewport Height = 200
   • Vbar Policy = AS_NEEDED
   • Hbar Policy = NEVER
4. Dans le ScrollPane, ajoutez un VBox et configurez :
   • Spacing = 5
   • Padding = 10
5. Dans ce VBox, ajoutez plusieurs Label ou Button :
   • Ajoutez suffisamment d'éléments pour que la liste dépasse la hauteur du ScrollPane
   • Exemple : "Élément 1", "Élément 2", "Élément 3", etc.

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="Liste d'éléments" style="-fx-font-size: 18px; -fx-font-weight: bold;"/>
      <ScrollPane prefViewportWidth="300.0" prefViewportHeight="200.0" 
                  vbarPolicy="AS_NEEDED" hbarPolicy="NEVER">
         <content>
            <VBox spacing="5.0">
               <padding>
                  <Insets top="10.0" right="10.0" bottom="10.0" left="10.0"/>
               </padding>
               <children>
                  <Label text="Élément 1"/>
                  <Label text="Élément 2"/>
                  <Label text="Élément 3"/>
                  <Label text="Élément 4"/>
                  <Label text="Élément 5"/>
                  <Label text="Élément 6"/>
                  <Label text="Élément 7"/>
                  <Label text="Élément 8"/>
                  <Label text="Élément 9"/>
                  <Label text="Élément 10"/>
               </children>
            </VBox>
         </content>
      </ScrollPane>
   </children>
</VBox>

⚙️ Propriétés importantes du ScrollPane

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

Propriétés de base (onglet Properties)

• Pref Viewport Width : Largeur de la zone visible (en pixels)
• Pref Viewport Height : Hauteur de la zone visible (en pixels)
• Hbar Policy : Politique de la barre horizontale (AS_NEEDED, ALWAYS, NEVER)
• Vbar Policy : Politique de la barre verticale (AS_NEEDED, ALWAYS, NEVER)
• Fit To Width : Ajuster le contenu à la largeur (utile pour les images)
• Fit To Height : Ajuster le contenu à la hauteur (utile pour les images)

Politiques des barres de défilement

• AS_NEEDED : La barre apparaît seulement si le contenu dépasse (recommandé)
• ALWAYS : La barre est toujours visible, même si pas nécessaire
• NEVER : La barre n'apparaît jamais, même si le contenu dépasse

💡 Bonnes pratiques avec ScrollPane

• Utilisez AS_NEEDED : C'est la politique la plus courante et la plus intuitive
• Contenu unique : Le ScrollPane ne peut contenir qu'un seul élément, utilisez un layout comme conteneur
• Définissez la taille du viewport : Spécifiez prefViewportWidth et prefViewportHeight
• Combinez avec d'autres layouts : Enveloppez VBox, HBox, GridPane, etc. dans un ScrollPane
• Testez avec beaucoup de contenu : Vérifiez que le défilement fonctionne correctement

🔄 ScrollPane vs autres layouts

Comparons le ScrollPane avec d'autres layouts similaires :

• ScrollPane vs autres layouts : ScrollPane ajoute le défilement, les autres layouts organisent le contenu
• ScrollPane est complémentaire : Il s'utilise avec d'autres layouts pour ajouter le défilement
• ScrollPane vs ListView : ScrollPane est générique, ListView est spécialisé pour les listes