Le Tutoriel de JavaFX BorderPane Layout

View more categories:

1- BorderPane Layout

BorderPane est un conteneur (container), qui est divisé en 5 zones distinctes, chacune des zones peut contenir un sous-composant.
  • La zone Top/Bottom: Peut se rétrécir / s'agrandir horizontalement et maintenir la hauteur inchangée.
  • ​​​​​​​La zone Left/Right: Peut se rétrécir / s'agrandir verticalement et maintenir la longeur inchangée.
  • La zone Center: Peut se rétrécir / s'agrandir dans les deux directions
Les caractéristiques de ces zones ci-dessus sont illustrées ci-dessous:
Si une certaine zone ne contient pas de sous-composants, la zone sera occupée par d'autres zones.
Par exemple: La zone de TOP n'a pas de sous-composants, son espace sera occupé par d'autres composants:
Par exemple: La zone de TOP & RIGHT n'a pas de sous-composants, son espace sera occupé par d'autres composants:
Remarque : Pour JavaFX, les sous-composants situés dans une certaine zone sur BorderPane ne remplissent peut-être pas l'espace, par exemple si Button se trouve dans une zone de BorderPane, par défaut, il ne remplira pas la zone.
Mais si VBox ou Hbox se trouve dans une zone de BorderPane, par défaut, il remplira la zone.

2- Exemple avec BorderPane

BorderPaneDemo.java
package org.o7planning.javafx.borderpane;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class BorderPaneDemo extends Application {

  @Override
  public void start(Stage primaryStage) throws Exception {
      BorderPane root = new BorderPane();

      root.setPadding(new Insets(15, 20, 10, 10));

      // TOP
      Button btnTop = new Button("Top");
      btnTop.setPadding(new Insets(10, 10, 10, 10));
      root.setTop(btnTop);
      // Set margin for top area.
      BorderPane.setMargin(btnTop, new Insets(10, 10, 10, 10));
     

      // LEFT
      Button btnLeft = new Button("Left");
      btnLeft.setPadding(new Insets(5, 5, 5, 5));
      root.setLeft(btnLeft);
      // Set margin for left area.
      BorderPane.setMargin(btnLeft, new Insets(10, 10, 10, 10));

      // CENTER
      Button btnCenter = new Button("Center");
      btnCenter.setPadding(new Insets(5, 5, 5, 5));
      root.setCenter(btnCenter);
       // Alignment.
       BorderPane.setAlignment(btnCenter, Pos.BOTTOM_CENTER);

      // RIGHT
      Button btnRight = new Button("Right");
      btnRight.setPadding(new Insets(5, 5, 5, 5));
      root.setRight(btnRight);
      // Set margin for right area.
      BorderPane.setMargin(btnRight, new Insets(10, 10, 10, 10));

      // BOTTOM
      Button btnBottom = new Button("Bottom");
      btnBottom.setPadding(new Insets(5, 5, 5, 5));
      root.setBottom(btnBottom);
      // Alignment.
      BorderPane.setAlignment(btnBottom, Pos.TOP_RIGHT);

      // Set margin for bottom area.
      BorderPane.setMargin(btnBottom, new Insets(10, 10, 10, 10));

      Scene scene = new Scene(root, 550, 250);

      primaryStage.setTitle("BorderPane Layout Demo");
      primaryStage.setScene(scene);
      primaryStage.show();
  }

  public static void main(String[] args) {
      launch(args);
  }

}
L'exécution de l'exemple:

3- La conception de BorderPanel avec Scene Builder

  • File/New/Other...
Ajouter des composants à BorderPane:

Margin:

Avec BorderPane, vous pouvez configurer Margin pour les sous-composants

L'alignement (Alignment)

View more categories: