1. Layouts

Al momento de crear interfaces gráficas 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.

//Creamos un campo de texto, un campo de contraseña
//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//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 también es posible aplicar a los demás contenedores

//Creamos un campo de texto, un campo de contraseña
//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//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

//Creamos un campo de texto, un campo de contraseña
//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//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 contraseña

//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//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);
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.

//Creamos un campo de texto, un campo de contraseña
//y un botón

TextField txtUser = new TextField();
PasswordField txtPass = new PasswordField();
Button btnLog = new Button("Iniciar sesión");

//Creamos un contenedor StackPane, a este le agregamos un relleno
//de 15px, al final agregamos los controles al contenedor

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 demás controles, entonces usamos el método 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 método setPrefColumns(X), donde "X" es el número de columnas, también podemos asignar el número de filas deseado con el método setPrefRows(X), y si deseamos podemos cambiar el orden en el que se agregan los controles al TilePane con el método setOrientation(Orientation.VERTICAL) y setOrientation(Orientation.HORIZONTAL), por defecto los controles se agregan en forma horizontal, de izquierda a derecha, pero también podemos hacer que los controles se agreguen en forma vertical de arriba hacia abajo, veamos los constructores de este layout(contenedor).

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 parámetros que recibe este
//constructor son del espaciamiento vertical(vgap) y horizontal(hgap).

TilePane tile = new TilePane(Orientation orientation)
//Este constructor  recibe como parámetro la orientación que tendrá el TilePane,
//pudiendo ser VERTICAL u HORIZONTAL, además este TilePane tendrá 5 columnas, con 
//espaciamiento vertical y horizontal de 0px.

TilePane(Orientation orientation, double hgap, double vgap)
//Este constructor tiene tres parámetros, el primero es la tipo de orientación que
//tendrá VERTICAL u HORIZONTAL, el segundo y tercer parámetro corresponde al
//espaciamiento horizontal(hgap) y vertical(vgap) que tendrá el TilePane.

Fig. 06: TilePane con orientación horizontal

Fig. 07: TilePane con orientación vertical

El código de la Fig. 06 y Fig. 07 es similar con la diferencia solo en la orientación.

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*/);

Ahorraríamos algunas lineas de código si hacemos uso de los constructores del TilePane:

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

TextField txtNom = new TextField();
PasswordField txtPass = new PasswordField();
PasswordField txtRepitePass = new PasswordField();
ComboBox cbPais = new ComboBox();
ComboBox cbGenero = new ComboBox();
TextField txtCorreo = new TextField();
Button btnReg = new Button("Regístrese");
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

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 navegación, en la parte derecha información adicional, y en la parte central va el área de trabajo.
Este layout posee solo un método constructor sin parámetros, para agregar un nodo(panel o control) a este contenedor usamos los siguientes métodos:

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. 

Button btnAcp = new Button("Aceptar");
Button btnCan = new Button("Cancelar");
        
Group group = new Group();
        
btnAcp.setLayoutX(50);
btnAcp.setLayoutY(50);
//colocamos el botón Aceptar en la coordenada (50,50)

btnCan.setLayoutX(50);
btnCan.setLayoutY(100);
//colocamos el botón Aceptar en la coordenada (50,100)

group.getChildren().addAll(btnAcp, btnCan);
//Agregamos los botones al contenedor.

Bueno, eso es todo por ahora, espero que sea de utilidad y desde este enlace pueden descargar un ejmplo: EjemploLayout

Conforme avancemos se hará uso de todos los layouts, hasta el próximo tutorial ;)