Traduction du
tutoriel JavaFX: article sur les
mises en
page de base par Vojtech Ruzicka.
Comment organiser et héberger des composants GUI dans une application JavaFX.
Il s'agit du quatrième article de la série JavaFX. Dans un
article précédent, j'ai décrit comment utiliser FXML et SceneBuilder pour créer votre interface utilisateur. Maintenant, nous regardons les dispositions.
Tous les articles de la série JavaFX:
- Tutoriel JavaFX: Prise en main
- Tutoriel JavaFX: Bonjour tout le monde!
- Tutoriel JavaFX: FXML et SceneBuilder
- Tutoriel JavaFX: dispositions de base
- Tutoriel JavaFX: dispositions avancées
- Tutoriel JavaFX: style CSS
- JavaFX Weaver: intégration des applications JavaFX et Spring Boot
Disposition
La mise en page est un conteneur pour les composants. Les dispositions sont utiles dans la mesure où vous pouvez positionner ce conteneur dans son ensemble, quels que soient les composants à l'intérieur. De plus, chaque scène ne peut contenir qu'un seul composant, vous avez donc besoin d'une disposition en tant que composant racine de votre scène afin de pouvoir placer tous les composants nécessaires de la scène. Bien sûr, une mise en page n'est généralement pas suffisante, mais vous pouvez mettre une mise en page dans une autre.
En plus de cela, les présentations organisent et placent vos composants en eux-mêmes. Selon la disposition utilisée, les composants enfants peuvent être localisés:
- Un par un horizontalement
- Un par un verticalement
- Empilés les uns sur les autres
- Dans la grille
Il y a beaucoup plus d'options. L'important est que la disposition met automatiquement à jour la position de ses enfants lorsqu'elle est redimensionnée. Ainsi, vous pouvez avoir une disposition cohérente, même lorsque l'utilisateur redimensionne la fenêtre de l'application.
HBox
C'est l'une des maquettes les plus simples disponibles. Il place simplement tous les objets horizontalement dans une rangée, l'un après l'autre, de gauche à droite.
Dans FXML, vous pouvez utiliser HBox comme suit:
<HBox> <Button>1</Button> <Button>2</Button> <Button>3</Button> <Button>4</Button> </HBox>
En Java, vous pouvez utiliser ce code:
HBox hbox = new HBox(); Button btn1 = new Button("1"); Button btn2 = new Button("2"); Button btn3 = new Button("3"); Button btn4 = new Button("4"); hbox.getChildren().addAll(btn1, btn2, btn3, btn4);
Espacement
Nos éléments sont maintenant soigneusement rangés les uns après les autres:
Cependant, cette option n'est pas très bonne, car les éléments sont disposés les uns après les autres sans espaces. Heureusement, nous pouvons déterminer l'espacement entre les composants à l'aide de la propriété d'espacement HBacing:
<HBox spacing="10"> ... </HBox>
Ou en Java en utilisant
setSpacing () :
HBox hbox = new HBox(); hbox.setSpacing(10);
Rembourrage
Les éléments sont maintenant correctement positionnés, cependant, il n'y a toujours pas de retrait entre les éléments et HBox lui-même. Il peut être utile d'ajouter un rembourrage à notre HBox:
Vous pouvez spécifier chaque zone à remplir séparément - en haut, en bas, à gauche et à droite.
<HBox> <padding> <Insets top="10" bottom="10" left="10" right="10"/> </padding> ... </HBox>
La même chose peut être faite en Java:
HBox hbox = new HBox(); hbox.setPadding(new Insets(10, 10, 10, 10));
Vbox
VBox est très similaire à HBox, mais au lieu d'afficher les composants internes horizontalement les uns après les autres, il les affiche verticalement dans une colonne:
Vous pouvez toujours définir les propriétés d'espacement et de remplissage de la même manière que dans HBox.
Le code VBox est utilisé exactement de la même manière que HBox, seul le nom est différent:
<VBox spacing="10"> <padding> <Insets top="10" bottom="10" left="10" right="10"/> </padding> <Button>1</Button> <Button>2</Button> <Button>3</Button> <Button>4</Button> </VBox>
Et en Java:
VBox vbox = new VBox(); vbox.setPadding(new Insets(10, 10, 10, 10)); vbox.setSpacing(10); Button btn1 = new Button("1"); Button btn2 = new Button("2"); Button btn3 = new Button("3"); Button btn4 = new Button("4"); vbox.getChildren().addAll(btn1, btn2, btn3, btn4);
Stackpan
Cette disposition est utile pour placer ses composants les uns sur les autres. L'ordre d'insertion détermine l'ordre des éléments. Cela signifie que le premier élément est en bas, le suivant est en haut, etc.
Cela peut être utile, par exemple, pour afficher une image dans la mise en page et afficher du texte ou un bouton au-dessus.
L'exemple suivant utilise StackPane dans FXML:
<StackPane> <ImageView> <Image url="/image.jpg"/> </ImageView> <Button>Click Me!</Button> </StackPane>
Le même exemple en Java:
StackPane stackPane = new StackPane(); Image image = new Image(getClass().getResourceAsStream("/image.jpg")); ImageView imageView = new ImageView(image); Button btn = new Button("Click Me!"); stackPane.getChildren().addAll(imageView, btn);
Aligner les éléments
Vous pouvez définir l'alignement des éléments sur la pile pour mieux organiser leur disposition:
<StackPane alignment="BOTTOM_CENTER"> ... </StackPane>
Bien sûr, vous pouvez faire de même en Java:
StackPane stackPane = new StackPane(); stackPane.setAlignment(Pos.BOTTOM_CENTER);
Marge
Si vous souhaitez contrôler plus en détail l'agencement des éléments, vous pouvez définir des marges pour les éléments individuels de la pile:
<StackPane alignment="BOTTOM_CENTER"> <ImageView> <Image url="/image.jpg"/> </ImageView> <Button> <StackPane.margin> <Insets bottom="10"/> </StackPane.margin> Click Me! </Button> </StackPane>
Ou en Java:
StackPane stackPane = new StackPane(); Button btn = new Button("Click Me!"); stackPane.getChildren().add(btn); StackPane.setMargin(btn, new Insets(0,0,10,0));
Flowpan
Le panneau Flux peut fonctionner en deux modes: horizontal (par défaut) ou vertical.
En mode horizontal, les éléments sont affichés horizontalement, l'un après l'autre, comme dans HBox. La différence est que lorsqu'il n'y a plus d'espace horizontal, il est transféré à la ligne suivante sous la première et continue à nouveau. Ainsi, il peut y avoir plusieurs lignes, et pas une seule, comme dans HBox.
Le mode vertical est très similaire, mais (comme VBox) il affiche les éléments verticalement, de haut en bas. Lorsqu'il n'y a plus d'espace, il ajoute une autre colonne et continue.
La figure suivante illustre ces deux modes:
Notez que les éléments ne doivent pas nécessairement être de la même taille que dans l'image ci-dessus.
Notez comment la position des composants est recalculée si vous redimensionnez le conteneur:
Vous pouvez définir le remplissage interne de cette disposition de la même manière que pour HBox et VBox. Cependant, l'utilisation de la propriété d'espacement est légèrement différente. Au lieu d'une seule propriété d'espacement, vous devez avoir des propriétés d'espacement horizontales et verticales distinctes, car les éléments peuvent être affichés sur plusieurs lignes / colonnes. Utilisez
hgap pour la propriété d'espacement horizontal et
vgap pour la
propriété verticale.
FlowPane flowPane = new FlowPane(); flowPane.setOrientation(Orientation.VERTICAL); flowPane.setVgap(10); flowPane.setHgap(10); flowPane.getChildren().addAll(...);
Exemple FlowPane dans FXML:
<FlowPane hgap="10" vgap="10" orientation="VERTICAL"> ... </FlowPane>
Tilepan
Cette disposition est très similaire à FlowPane. Sa façon d'afficher les composants est presque identique. Vous pouvez toujours utiliser le mode horizontal ou vertical et définir
vgap et
hgap .
Une différence importante est la taille des cellules. FlowPane affecte uniquement l'espace nécessaire à chaque composant. TilePane, d'autre part, rend la taille de toutes les cellules la même en fonction du plus grand élément. Ainsi, tous les contrôles sont bien alignés en lignes / colonnes.
Dans l'image ci-dessus, les mêmes composants sont placés de la même manière, mais vous pouvez facilement remarquer la différence.
FlowPane place les contrôles les uns après les autres, sans intervalles supplémentaires
TilePane place des contrôles dans des cellules de même taille en fonction du plus grand élément.
La création de TilePane n'est pas différente de FlowPane, à l'exception du nom.
<TilePane vgap="10" hgap="10" orientation="VERTICAL" >
Même chose en Java:
TilePane tilePane = new TilePane(); tilePane.setVgap(10); tilePane.setHgap(10); tilePane.setOrientation(Orientation.VERTICAL);
Et ensuite
L'article a examiné l'utilisation de plusieurs dispositions de base pour placer des composants dans une application JavaFX. En fait, JavaFX propose une sélection beaucoup plus diversifiée de mises en page. Les options de mise en page avancées seront discutées dans le prochain article.