[JavaFX 8] Phần 2 : Layout Panes

Phần 2  : Layout Panes

Trong phần 1, chúng ta đã được giới thiệu sơ qua StackPane layout, trong phần này chúng ta sẽ tìm hiểu chi tiết về các Layout Pane khác.

I. BorderPane :

BorderPane layout cung cấp 5 vùng để đặt các Node khác nhau, 5 vùng đó là : top, bottom, left, right, và center.

Mỗi vùng của borderPane, có thể đặt bất kỳ các thành phần khác nhau, như: các layoutPane khác, hoặc các thành phần giao diện người dùng.  

1.  Lập trình với BorderPane :

Ví dụ : tạo 5 button đặt vào 5 vùng của BorderPane

2. Vị trí đặt các node  trong các vùng của BorderPane:

Theo mặc định, vùng:

-  top: vị trí đặt  node  là Pos.TOP_LEFT

-  bottom: vị trí đặt node  là Pos.BOTTOM_LEFT

-  left: vị trí đặt node là Pos.TOP_LEFT

-  right: vị trí đặt node là Pos.TOP_RIGHT

- center: vị trí đặt node  là Pos.CENTER

Để thay đổi vị trí đặt node trong các vùng, chúng ta sử dụng đối tượng Pos của class javafx.geometry.Pos, với phương thức setAlignment() của BorderPane.

Ví dụ : trong ví dụ trên, bạn muốn btnleft  vào vị trí giữa của vùng Left, code như sau:

BorderPane.setAlignment(btnleft, Pos.CENTER);

Các vị trí của Pos là :

BASELINE_CENTER,

BASELINE_LEFT,

BASELINE_RIGHT,

BOTTOM_CENTER,

BOTTOM_LEFT,

BOTTOM_RIGHT,

CENTER,

CENTER_LEFT,

CENTER_RIGHT,

TOP_CENTER,

TOP_LEFT,

TOP_RIGHT

3. Một số phương thức của BorderPane:

kiểu trả về	Phương thức	Miêu tả
static void	setAlignment(Node child, Pos values)	Canh chỉnh Node dựa trên giá trị Pos
void	setBottom(Node value)	Đưa 1 Node  vào vị trí Bottom
void	setCenter(Node value)	Đưa 1 Node  vào vị trí center
void	setLeft(Node value)	Đưa 1 Node  vào vị trí Left
void	setRight(Node value)	Đưa 1 Node  vào vị trí Right
static void	setMargin(Node child, Insets values)	Thiết lập biên của Node
void	setTop(Node value)	Đưa 1 Node  vào vị trí Top

Lưu ý: Phương thức có kiểu trả về là static void của BorderPane, khi sử dụng bạn không sử dụng tên đối tượng mà phải sử dụng tên class. Ví dụ:

II. HBOX layout :

Các thành phần được sắp xếp theo thứ tự chiều ngang

1. Lập trình với HBOX :

2. Một số phương thức của HBox:

kiểu trả về	Phương thức	Miêu tả
void	setAlignment(Pos values)	Canh chỉnh các node  dựa trên giá trị Pos
static void	setMargin(Node child, Insets values)	Thiết lập khoảng cách biên của 1 Node
void	setSpacing(double  value)	Thiết lập khoảng cách giữa các Node

III. VBOX layout :

Các thành phần được sắp xếp theo chiều dọc.

1. Lập trình với Vbox:

     

2. Một số phương thức của VBox:

kiểu trả về	Phương thức	Miêu tả
void	setAlignment(Pos values)	Canh chỉnh các node  dựa trên giá trị Pos
static void	setMargin(Node child, Insets values)	Thiết lập khoảng cách biên của Node
void	setSpacing(double  value)	Thiết lập khoảng cách giữa các Node

IV. StackPane layout:

Node  được thêm vào StackPane sẽ hiển thị chồng lên node trước đó trên màn hình (nếu 2 thành phần cùng giá trị Pos), tức là không loại bỏ node  trước đó trong StackPane chỉ là bị node mới hiển thị chồng lên mà thôi.

1. Lập trình với StackPane:

  

2. Một số phương thức của StackPane:

kiểu trả về	Phương thức	Miêu tả
void	setAlignment(Pos values)	Canh chỉnh các node  dựa trên giá trị Pos
static void	setMargin(Node child, Insets values)	Thiết lập khoảng cách biên của Node
static void	setAlignment(Node child, Pos values)	Canh chỉnh  1 node  dựa trên giá trị Pos

V.  GridPane layout:

GridPane layout cho phép bạn tạo ra 1 mạng lưới bao gồm các cột và các dòng tạo thành nhiều ô, các node được bổ sung vào trong các ô đó.

1. Lập trình với GridPane :

Ví dụ : tạo 1 gridpane gồm 25 ô (5 dòng và 5 cột) và đặt các button vào trong các ô đó.

2. Một số phương thức của GridPane:

kiểu trả về	Phương thức	Miêu tả
void	add(Node child, int columnIndex, int rowIndex)	Thêm node vào  GridPane
void	add(Node child, int columnIndex,        int rowIndex, int colspan, int rowspan)	Thêm node vào GridPane, và mở rộng ô này theo colspan và rowspan.
void	addColumn(int columnIndex, Node children)	Tạo 1 row mới cuối Grid và đặt node vào vị trí columnIndex.
void	addColumn(int rowIndex, Node children)	Tạo 1 cột mới cuối Grid và đặt node vào vị trí rowIndex.
void	setAlignment(Pos value)	Vị  trí đặt GridPane trên màn hình
static void	setColumnIndex(Node child, Integer value)	Thiết lập lại vị trí cột của node
static void	setRowIndex(Node child, Integer value)	Thiết lập lại vị trí dòng của node
static void	setColumnSpan(Node child, Integer value)	Thiết lập lại sự mở rộng cột của node
static void	setRowSpan(Node child, Integer value)	Thiết lập lại sự mở rộng dòng của node
static void	setConstraints(Node child, int columnIndex,                        int rowIndex)	Thiết lập lại vị trí của node.
static void	setConstraints(Node child, int columnIndex,                         int rowIndex, int columnspan,                         int rowspan)	Thiết lập lại vị trí và sự mở rộng của node.
static void	setConstraints(Node child, int columnIndex,                        int rowIndex, int columnspan,                        int rowspan,Hpos halignment,                       Vpos valignment)	Thiết lập lại vị trí, sự mở rộng và canh chỉnh (như canh giữa, canh trái,…) của node.
static void	setHalignment(Node child, HPos value)	Thiết lập canh chỉnh theo chiều ngang của 1 Node. Vd: GridPane.setHalignment(button , HPos.LEFT);
static void	setValignment(Node child, VPos value)	Thiết lập canh chỉnh theo chiều dọc của 1 Node. Vd: GridPane.setHalignment(button , Vpos.TOP);
void	setGridLinesVisible(boolean value)	Hiển thị hoặc ẩn đường kẻ bảng.
void	setHgap(double value)	Thiết lập độ rộng cho đường kẻ dọc.
void	setVgap(double value)	Thiệt lập độ rộng cho đường kẻ ngang.
void	setMargin(Node child, Insets value)	Thiết lập khoảng cách biên của 1 Node. Vd: grid.setMargin(buton,new  Insets(20));

VI. FlowPane :

Khác với các Layout trên, FlowPane thể hiện tính linh hoạt khi các node được bố trí vào nó. Các node sẽ tự động sắp xếp lại theo chiều ngang  khi bạn mở rộng chiều ngang của FlowPane, cũng như tự động sắp xếp theo chiều dọc khi bạn thu hẹp chiều ngang của FlowPane.

1. Lập trình với FlowPane :

Ví dụ : thêm 10 button vào FlowPane.

2. Sắp xếp các node:

FlowPane có 2 cách sắp xếp node:

- Theo chiều ngang (mặc định) : sắp xếp lần lượt các node theo chiều ngang cho đến khi đến biên phải thì đặt ở hàng tiếp theo.

FlowPane fp = new FlowPane(Orientation. HORIZONTAL);

- Theo chiều dọc : sắp xếp lần lượt các node theo chiều dọc cho đến khi đến biên bottom thì đặt ở cột tiếp theo.

FlowPane fp = new FlowPane(Orientation.VERTICAL);

3. Một số phương thức của FlowPane:

kiểu trả về	Phương thức	Miêu tả
void	setAlignment(Pos values)	Canh chỉnh các node  dựa trên giá trị Pos
static void	setMargin(Node child, Insets values)	Thiết lập khoảng cách biên của 1 Node
void	setHgap(double value)	Thiết lập khoảng cách trái phải giữa các node
void	setVgap(double value)	Thiết lập khoảng cách trên dưới giữa các node.

VII. TilePane :

 TilePane tương tự như FlowPane. TilePane đặt tất cả các thành phần  vào trong mỗi ô của 1 lưới, mỗi ô của lưới còn được gọi là tile và cùng kích thước. FlowPane khi thay đổi kích thước Pane, nó sẽ sắp xếp lại các thành phần, còn TilePane sắp xếp lại lưới (tức là các node của FlowPane có thể không thẳng hàng, thẳng cột nhưng các node của TilePane luôn thẳng hàng và thẳng cột).

1. Lập trình với TilePane :

2. Sắp xếp các node:

TilePane cũng có 2 cách sắp xếp node:

- Theo chiều ngang (mặc định) : sắp xếp lần lượt các node theo chiều ngang cho đến khi đến biên phải thì đặt ở hàng tiếp theo.

TilePane tp = new TilePane (Orientation. HORIZONTAL);

- Theo chiều dọc : sắp xếp lần lượt các node theo chiều dọc cho đến khi đến biên bottom thì đặt ở cột tiếp theo.

TilePane tp = new TilePane (Orientation.VERTICAL);

3. Một số phương thức của TilePane:

kiểu trả về	Phương thức	Miêu tả
static void	setAlignment(Node node, Pos values)	Canh chỉnh 1 node  dựa trên giá trị Pos
static void	setMargin(Node child, Insets values)	Thiết lập khoảng cách biên của 1 Node
void	setHgap(double value)	Thiết lập khoảng cách trái phải giữa các node
void	setVgap(double value)	Thiết lập khoảng cách trên dưới giữa các node.
Void	setTileAlignment(Pos values)	Canh chỉnh các node theo không gian  ô lưới
Void	setAlignment(Pos values)	Canh chỉnh các node  theo cột hoặc dòng.

VIII. AnchorPane :

AnchorPane cho phép bạn thiết lập vị trí các node theo ý muốn của bạn. Khi thay đổi kích thích, các node  không thay đổi vị trí.

 1. Lập trình với AnchorPane:

IX.  CSS dành cho layout :

1. Một số CSS thường dùng cho tất cả Pane:

CSS	Miêu tả	Ví dụ
-fx-background-color : #rrbbgg ; Hoặc -fx-background-color : rgb(r,b,g) ;	Màu nền của Pane	BorderPane bp = new BorderPane(); bp.setStyle("-fx-background-color: #4034AC;"); // Red = 40 , blue = 34, green = AC. Các giá trị này là giá trị thập lục phân. Hoặc bp.setStyle("-fx-background-color: rgb(64,52,172);");
-fx-background-image : url(‘…’);	Hình nền Pane	bp.setStyle("-fx-background-image:url('chart_1.png');");
-fx-border-color: #rrbbgg ;	Màu border của Pane	bp.setStyle("-fx-border-color : #4034AC;");
-fx-border-insets: <size> Hoặc -fx-border-insets: <size> <size> <size>  <size>	Khoảng cách từ đường viền chính đến Pane	bp.setStyle("-fx-border-insets :20px;");
-fx-border-width: <size>	Kích thước của border	bp.setStyle("-fx-border-width :20px;");
-fx-padding: <size> Hoặc -fx-padding: <size> <size> <size> <size>	Khoảng cách giữa border với các node	bp.setStyle(“-fx-padding:10px");

Lưu ý : 1 đối tượng không thể sử dụng 2 lần phương thức setStyle(),

ví dụ:

Bạn không thể sử dụng như sau:

bp.setStyle("-fx-background-color: #4034AC;");

bp.setStyle("-fx-border-width :20px;");

Bạn phải sử dụng như sau:

bp.setStyle("-fx-background-color: #4034AC;- fx-border-width :20px ;");

2 . Một số CSS dành riêng cho GridPane:

CSS	Miêu tả	Ví dụ
-fx-hgap: <size>	Khoảng cách trái phải giữa các node	gp.setStyle(“-fx-hgap:10px");
-fx-vgap: <size>	Khoảng cách trên dưới  giữa các node	gp.setStyle(“-fx-vgap:10px");
-fx-alignment : top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right	Canh chỉnh các node	gp.setStyle(“-fx-alignment: top-center;");
-fx-grid-lines-visible: true | false	Hiển thị hoặc ẩn đường kẻ của grid	gp.setStyle(“-fx-grid-lines-visible: true;");

3. Một số CSS dành riêng cho FlowPane:

CSS	Miêu tả	Ví dụ
-fx-hgap: <size>	Khoảng cách trái phải giữa các node	fp.setStyle(“-fx-hgap:10px");
-fx-vgap: <size>	Khoảng cách trên dưới  giữa các node	fp.setStyle(“-fx-vgap:10px");
-fx-alignment : top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right	Canh chỉnh các node	fp.setStyle(“-fx-alignment: top-center;");
-fx-orientation: horizontal | vertical	Sắp xếp các node theo chiều ngang hoặc dọc.	fp.setStyle(“-fx-orientation: vertical;");

4. Một số CSS dành riêng cho HBox:

CSS	Miêu tả	Ví dụ
-fx-spacing: <size>	Khoảng cách giữa các node	hb.setStyle(“-fx-spacing: 10px;");
-fx-alignment : top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right	Canh chỉnh các node	hb.setStyle(“-fx-alignment: top-center;");

5. Một số CSS dành riêng cho StackPane:

CSS	Miêu tả	Ví dụ
-fx-alignment : top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right	Canh chỉnh các node	sp.setStyle(“-fx-alignment: top-center;");

6. Một số CSS dành riêng cho TilePane:

CSS	Miêu tả	Ví dụ
-fx-orientation: horizontal | vertical	Sắp xếp các node theo chiều ngang hoặc dọc.	tp.setStyle(“-fx-orientation: vertical;");
-fx-hgap: <size>	Khoảng cách trái phải giữa các node	tp.setStyle(“-fx-hgap:10px");
-fx-vgap: <size>	Khoảng cách trên dưới  giữa các node	tp.setStyle(“-fx-vgap:10px");
-fx-alignment : top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right	Canh chỉnh các node theo dòng hoặc cột	tp.setStyle(“-fx-alignment: top-center;");
-fx-tile-alignment: top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right	Canh chỉnh các node theo không gian  ô lưới	tp.setStyle(“-fx-tile-alignment: top-center;");

7. Một số CSS dành riêng cho VBox:

CSS	Miêu tả	Ví dụ
-fx-spacing: <size>	Khoảng cách giữa các node	vb.setStyle(“-fx-spacing: 10px;");
-fx-alignment : top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right	Canh chỉnh các node	vb.setStyle(“-fx-alignment: top-center;");