12-6 Hbox Layout

HBox Layout est une mise en page JavaFX qui place les composants sur une ligne horizontale. Les éléments sont ajoutés séquentiellement de gauche à droite, et HBox gère automatiquement leur positionnement. Cette disposition est idéale pour créer des barres d'outils, des rangées de boutons ou tout ensemble de contrôles qui doivent être alignés horizontalement.

HBox offre un contrôle précis de l'espacemen et l'alignement. Vous pouvez ajouter un espace (spacing) entre les composants, configurer l'alignement vertical (alignement en haut, au centre ou en bas), et utiliser des styles CSS pour personnaliser l'apparence. Par exemple, avec setStyle() vous pouvez ajouter une bordure colorée pour visualiser l'espace occupé par le HBox, ce qui est très utile pendant le développement.

Un avantage clé d'HBox est la gestion automatique de l'espace disponible. Les composants s'étendent ou se contractent selon la taille de la fenêtre, offrant une interface réactive. Si vous augmentez la largeur de la fenêtre, les éléments se réorganisent automatiquement, et si la fenêtre devient trop petite, certains composants peuvent être découpés (comportement contrôlable).

En résumé

La leçon couvre le conteneur HBox en JavaFX, qui arrange les composants sur une ligne horizontale de gauche à droite. On y apprend à aligner les éléments (top, center, bottom, right) et à les espacer avec la propriété gap. Le styling CSS des conteneurs HBox (bordure, couleur, largeur) est également démontré pour visualiser l'espace alloué aux composants enfants.

Points clés

  • HBox place automatiquement les composants en ligne horizontale, de gauche à droite
  • La propriété gap définit l'espacement régulier entre les composants
  • Les alignements possibles sont : top, center, bottom, right
  • HBox occupe toute la largeur et la hauteur de son conteneur parent
  • Ajouter une bordure CSS aide à visualiser l'espace réel alloué à la mise en page

Questions fréquentes

Qu'est-ce qu'une HBox et comment fonctionne-t-elle ?

Une HBox est un conteneur de mise en page qui place les composants enfants sur une seule ligne horizontale, de gauche à droite. Chaque nouveau composant est ajouté à la suite du précédent.

Comment espacer les éléments dans une HBox ?

On utilise la propriété gap, qui ajoute un espacement régulier et uniforme entre tous les composants placés dans la HBox.

Pourquoi ajouter une bordure CSS à une HBox ?

Ajouter une bordure CSS est un excellent moyen de visualiser l'espace réel alloué à la mise en page et à ses composants enfants.