Hướng dẫn và ví dụ JavaFX BorderPane Layout

Xem thêm các chuyên mục:

Các hướng dẫn lập trình JavaFX

BorderPane Layout
Ví dụ với BorderPane
Thiết kế BorderPanel với Scene Builder

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- BorderPane Layout

BorderPane là một bộ chứa (container), nó được phân chia thành 5 vùng riêng biệt, mỗi vùng có thể chứa được một thành phần con.

Vùng Top/Bottom: Có thể co/giãn theo chiều ngang và giữ nguyên chiều cao.
Vùng Left/Right: Có thể co/giãn theo chiều thẳng đứng và giữ nguyên độ dài.
Vùng Center: Có thể co/giãn theo cả 2 chiều.

Đặc điểm của các vùng được minh họa như hình dưới đây:

Nếu một vùng nào đó không chứa thành phần con, các vùng khác sẽ chiếm lấy không gian của nó.

Ví dụ: Vùng TOP không có thành phần con, không gian của nó sẽ bị các thành phần khác chiếm chỗ:

Ví dụ: Vùng TOP & RIGHT không có thành phần con, không gian của nó sẽ bị các vùng khác chiếm chỗ.

Chú ý: Trong JavaFX, Các thành phần con nằm trong một vùng nào đó của BorderPane có thể không chiếm đầy không gian của vùng đó, chẳng hạn nếu Button nằm trong một vùng của BorderPane mặc định nó sẽ không dãn đầy vùng này.

Nhưng nếu VBox hoặc HBox nằm trong một vùng của BorderPane, mặc định nó sẽ chiếm đầy vùng đó.

2- Ví dụ với 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 cho vùng top.
      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 cho vùng left.
      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);

        // Căn lề.
        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 cho vùng right.
      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);
      // Căn lề.
      BorderPane.setAlignment(btnBottom, Pos.TOP_RIGHT);


      // Set margin cho vùng bottom.
      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);
  }

}

Chạy ví dụ:

3- Thiết kế BorderPanel với Scene Builder

File/New/Other...

Thêm các thành phần con vào BorderPane:

Margin:

Với BorderPane bạn có thể sét đặt Margin cho từng thành phần con:

Căn lề (Alignment)

Xem thêm các chuyên mục:

Các hướng dẫn lập trình JavaFX