1.

Layouts
Al momento de crear interfaces grficas con JavaFX es necesario hacer uso de layouts, ya que estos permiten la forma en que colocaremos
los diferentes controles/componentes o nodos en una ventana, empecemos con los principales layouts con el que trabajaremos en este
tutorial.
1. VBox: Este layout ordena los componentes de manera vertical, uno debajo de otro, veamos unos ejemplos.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//Creamos un campo de texto, un campo de contrasea

//y un botn
TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesin");
//Creamos un contenedor VBox, le agregamos un
//espaciamiento y relleno de 10px, al final
//agregamos los controles al contenedor.
VBox vbox = new VBox();
vbox.setSpacing(10);
vbox.setPadding(new Insets(10));
vbox.getChildren().addAll(txtUser, txtPass, btnLog);

Fig. 01: VBox layout con relleno y espaciamiento de 10px.

Ahora veamos un ejemplo con relleno de distinta medida, esto tambin es posible aplicar a los dems contenedores

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//Creamos un campo de texto, un campo de contrasea

//y un botn
TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesin");
//Creamos un contenedor VBox, a este le agregamos
// un espaciamiento y relleno de 10px, al
//final agregamos los controles al contenedor.
VBox vbox = new VBox();
vbox.setSpacing(10);
vbox.setPadding(new Insets(10,15,20,25));
vbox.getChildren().addAll(txtUser, txtPass, btnLog);

Fig. 02: VBox layout con relleno variado y espaciamiento de 10px.

2. HBox: Ordena los componentes en forma horizontal, uno a la derecha de otro.

Fig. 03 HBox layout con relleno y espaciamiento de 10 unidades

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
?

//Creamos un campo de texto, un campo de contrasea

//y un botn
TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesin");
//Creamos un contenedor HBox, a este le agregamos un
//espaciamiento y relleno de 10 unidades, al
//final agregamos los controles al contenedor.
HBox hbox = new HBox();
hbox.setSpacing(10);
hbox.setPadding(new Insets(10,10,10,10));
hbox.getChildren().addAll(txtUser, txtPass, btnLog);

3. FlowPane: Este layout permite agregar los componentes en filas, uno a la derecha de otro, si en el ancho del contenedor no hay suficiente
espacio para agregar otro componente, el componente se agrega en la siguiente fila.

Fig. 04: FlowPane con relleno de 15px, espaciamiento vertical y horizontal de 10px.

//Creamos un campo de texto, un campo de contrasea

?

1
2
3
4
5
6
7
8
9
10
11

//y un botn
TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesin");
//Creamos un contenedor FlowPane, le agregamos un
//espaciamiento vertical y horizontal de 10px, y un relleno
//de 15px, al final agregamos los controles al contenedor
FlowPane flow = new FlowPane();
flow.setVgap(10);
flow.setHgap(10);

12
13
14
15

flow.setPadding(new Insets(15));
flow.getChildren().addAll(txtUser, txtPass, btnLog);

4. StackPane: Con este layout podemos agregar componentes uno encima de otro, el orden en que se agrega los componentes al contenedor
es importante, ya que el ultimo control en ser agregado es el que estar encima del resto.

Fig. 05: StackPane con relleno de 15px.

1
2
3
4
5
6
7
8

//Creamos un campo de texto, un campo de contrasea

//y un botn
TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesin");
//Creamos un contenedor StackPane, a este le agregamos un relleno
//de 15px, al final agregamos los controles al contenedor

9
10
11
12
13

StackPane stack = new StackPane();

stack.setPadding(new Insets(15));
stack.getChildren().addAll(txtUser, txtPass, btnLog);

Importante: Del ejemplo anterior, si deseamos que la caja de texto txtUser, este encima de los dems controles, entonces usamos el mtodo
toFront().
?

txtUser.toFront();

5. TilePane: Este layout acomoda los controles en una matriz, en filas y columnas, cuando creamos un TilePane este tendr 5 columnas por
defecto, pero eso se puede cambiar usando el mtodo setPrefColumns(X), donde "X" es el nmero de columnas, tambin podemos asignar el
nmero de filas deseado con el mtodo setPrefRows(X), y si deseamos podemos cambiar el orden en el que se agregan los controles al
TilePane con el mtodosetOrientation(Orientation.VERTICAL) y setOrientation(Orientation.HORIZONTAL), por defecto los controles se
agregan en forma horizontal, de izquierda a derecha, pero tambin podemos hacer que los controles se agreguen en forma vertical de arriba
hacia abajo, veamos los constructores de este layout(contenedor).
?

1
2
3
4
5
6
7
8
9
10
11

TilePane tile = new TilePane();

//Crea un TilePane horizontal con 5 columnas con espaciamiento vertical y
//horizontal de 0px.
TilePane tile = new TilePane(double vgap, double hgap)
//Crea un TilePane horizontal con 5 columnas, los parmetros que recibe este
//constructor son del espaciamiento vertical(vgap) y horizontal(hgap).
TilePane tile = new TilePane(Orientation orientation)
//Este constructor recibe como parmetro la orientacin que tendr el TilePane,
//pudiendo ser VERTICAL u HORIZONTAL, adems este TilePane tendr 5 columnas, con
//espaciamiento vertical y horizontal de 0px.

12
13
14
15
16
17

TilePane(Orientation orientation, double hgap, double vgap)

//Este constructor tiene tres parmetros, el primero es la tipo de orientacin que
//tendr VERTICAL u HORIZONTAL, el segundo y tercer parmetro corresponde al
//espaciamiento horizontal(hgap) y vertical(vgap) que tendr el TilePane.

Fig. 06: TilePane con orientacin horizontal

Fig. 07: TilePane con orientacin vertical

El cdigo de la Fig. 06 y Fig. 07 es similar con la diferencia solo en la orientacin.

?

1
2
3
4
5
6
7
8

TilePane tile = new TilePane();

tile.setOrientation(Orientation.VERTICAL);//pude ser HORIZONTAL
tile.setPrefColumns(2);
tile.setPrefRows(4);
tile.setPadding(new Insets(15));
tile.setVgap(10);
tile.setHgap(10);
tile.getChildren().addAll(/*aqui agregamos los controles separado por comas*/);

Ahorraramos algunas lineas de cdigo si hacemos uso de los constructores del TilePane:
?

1
2
3
4
5

TilePane tile = new TilePane(Orientation.VERTICAL,10,10);

tile.setPrefColumns(2);
tile.setPrefRows(4);
tile.setPadding(new Insets(15));
tile.getChildren().addAll(/*aqui agregamos los controles separado por comas*/);

6. GridPane: Este layout es similar al TilePane, pero con la diferencia de que los controles dentro del GridPane pueden ocupar mas de una
columna o fila.

Fig. 08: GridPane con relleno de 15px, espaciamiento vertical y horizontal de 10px

1
2
3
4
5

TextField txtNom = new TextField();

PasswordField txtPass = new PasswordField();
PasswordField txtRepitePass = new PasswordField();
ComboBox cbPais = new ComboBox();
ComboBox cbGenero = new ComboBox();
TextField txtCorreo = new TextField();

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Button btnReg = new Button("Regstrese");

Button btnLog = new Button("Login with Facebook");
GridPane grid = new GridPane();
grid.setPadding(new Insets(15));
grid.setVgap(10);
grid.setHgap(10);
grid.add(txtNom, 0, 0, 2, 1);
//Agrego el txtNom al GridPane, en la columna 0
//fila 0, que ocupe 2 columnas y 1 fila
grid.add(txtPass, 0, 1);
//Agrego el txtPass al GridPane, en la columna 0 fila 1
grid.add(txtRepitePass, 1, 1);
//Agrego el txtRepitePass al GridPane, en la columna 1
//fila 1
grid.add(cbPais, 0, 2);
//Agrego el cbPais al GridPane, en la columna 0 fila 2
grid.add(cbGenero, 1, 2);
//Agrego el cbPais al GridPane, en la columna 1 fila 2
grid.add(txtCorreo, 0, 3, 2, 1);
//Agrego el txtCorreo al GridPane, en la columna 0 fila 3
//que ocupe 2 columnas y 1 fila
grid.add(btnReg, 0, 4, 1, 2);
//Agrego el btnReg al GridPane, en la columna 0 fila 4
//que ocupe 1 columna y 2 filas
grid.add(btnLog, 1, 4);
//Agrego el btnLog al GridPane, en la columna 1 fila 4

36
37
38
39
40
41
7. BorderPane: Este panel brinda 5 regiones, TOP, RIGHT, BOTTOM, LEFT y CENTER, en el cual podemos agregar paneles o controles,
usualmente en la parte superior se ubica la barra de herramientas, en la parte inferior la barra de estado, en la parte izquierda el panel de
navegacin, en la parte derecha informacin adicional, y en la parte central va el rea de trabajo.
Este layout posee solo un mtodo constructor sin parmetros, para agregar un nodo(panel o control) a este contenedor usamos los siguientes
mtodos:
?

1
2
3
4
5
6
7

BorderPane border = new BorderPane();

border.setTop(nodo);// Agrega un nodo en la parte superior del BorderPane.
border.setRight(nodo);// Agrega un nodo en la parte derecha del BorderPane.
border.setBotton(nodo);// Agrega un nodo en la parte Inferior del BorderPane.
border.setLeft(nodo);// Agrega un nodo en la parte Izquierda del BorderPane.
border.setCenter(nodo);// Agrega un nodo en la parte central del BorderPane.

Fig. 09: BorderPane

Y por ltimo, si no deseamos usar layouts, entonces se puede usar coordenadas, para ello hacemos uso del panel o contenedor Group.
?

1
2
3
4
5
6

Button btnAcp = new Button("Aceptar");

Button btnCan = new Button("Cancelar");
Group group = new Group();
btnAcp.setLayoutX(50);
btnAcp.setLayoutY(50);

7
8
9
10
11
12
13
14
15

//colocamos el botn Aceptar en la coordenada (50,50)

btnCan.setLayoutX(50);
btnCan.setLayoutY(100);
//colocamos el botn Aceptar en la coordenada (50,100)
group.getChildren().addAll(btnAcp, btnCan);
//Agregamos los botones al contenedor.