Contenedores en JavaFX.

Los contenedores o paneles de diseño (layout) nos permiten añadir controles de la interfaz de usuario dentro de un gráfico de escena de una aplicación JavaFX sin tener que escribir el código necesario para gestionar el posicionamiento o el cambio de tamaño de esos controles. El Layout gestionará todo eso por nosotros.

StackPane

Los nodos se colocan uno encima de otro, de atrás hacia delante en el orden que se agregan los nodos, como en una pila. El nodo agregado primero se coloca en la parte inferior de la pila y el siguiente nodo se coloca encima. Está representado por la clase denominada StackPane del paquete javafx.scene.layout.

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class StackPaneApplication extends Application {
    @Override
    public void start(Stage primaryStage) {
        // Crea un StackPane
        StackPane pane = new StackPane();

        // Crea 3 cuadrados
        Rectangle rectBottom = new Rectangle(250, 250);
        rectBottom.setFill(Color.AQUA);

        Rectangle rectMiddle = new Rectangle(200, 200);
        rectMiddle.setFill(Color.CADETBLUE);

        Rectangle rectUpper = new Rectangle(150, 150);
        rectUpper.setFill(Color.CORAL);

        // Coloca los cuadrados uno encima del otro
        pane.getChildren().addAll(rectBottom, rectMiddle, rectUpper);

        // Crea una escena y la muestra en el stage
        Scene scene = new Scene(pane);
        primaryStage.setScene(scene);
        primaryStage.setTitle("StackPane Example");
        primaryStage.show();
    }

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

GridPane

Permite colocar nodos secundarios en una cuadrícula bidimensional de tamaño flexible. Los componentes pueden abarcar filas y / o columnas, pero el tamaño de la fila es coherente para todos los componentes de una fila determinada. De manera similar, el ancho de la columna es consistente para una columna determinada. Tiene métodos especializados que agregan nodos a una celda en particular designada por un número de columna y fila. Los argumentos opcionales le permiten especificar valores de intervalo de filas y columnas.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class GridPaneApplication extends Application {
    @Override
    public void start(Stage primaryStage) {
        // Crear un GridPane
        GridPane grid = new GridPane();
        grid.setVgap(10); // Espacio vertical entre las filas
        grid.setHgap(10); // Espacio horizontal entre las columnas

        // Agregar botones al GridPane
        grid.add(new Button("Posicion 0, 0"), 0, 0);
        grid.add(new Button("Posicion 1, 0"), 1, 0);
        grid.add(new Button("Posicion 0, 1"), 0, 1);
        grid.add(new Button("Posicion 1, 1"), 1, 1);
        grid.add(new Button("Posicion 0, 2"), 0, 2);
        grid.add(new Button("Posicion 1, 2"), 1, 2);

        // Crear la escena y asignarla al Stage
        Scene scene = new Scene(grid);
        primaryStage.setScene(scene);
        primaryStage.setTitle("GridPane Example");
        primaryStage.show();
    }

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

FlowPane

FlowPane administra a sus hijos en un flujo horizontal o vertical. La orientación predeterminada es horizontal.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class FlowPaneApplication extends Application {
    @Override
    public void start(Stage primaryStage) {
        // Crear un FlowPane (disposición de flujo horizontal)
        FlowPane tile = new FlowPane();

        // Configurar el número de columnas y filas
        tile.setPrefColumns(6); // Declaramos 6 columnas
        tile.setPrefRows(4);    // Y 4 filas

        // Agregar botones al FlowPane
        for (int i = 0; i < 20; i++) {
            tile.getChildren().add(new Button("Botón " + (i + 1)));
        }

        // Crear la escena y asignarla al Stage
        Scene scene = new Scene(tile);
        primaryStage.setScene(scene);
        primaryStage.setTitle("FlowPane Example");
        primaryStage.show();
    }

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

BorderPane

BorderPane es conveniente para aplicaciones de escritorio con secciones discretas, que incluyen una barra de herramientas superior (superior), una barra de estado inferior (inferior), un área de trabajo central (centro) y dos áreas laterales (derecha e izquierda). Cualquiera de las cinco secciones puede estar vacía. Los nodos se organizan por tanto en las posiciones Superior, Izquierda, Derecha, Inferior y Central.

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

public class BorderPaneApplication extends Application {
    @Override
    public void start(Stage primaryStage) {
        // Crear un BorderPane
        BorderPane raiz = new BorderPane();

        // Agregar botones en las diferentes regiones del BorderPane
        raiz.setTop(new Button("TOP"));
        raiz.setBottom(new Button("BOTTOM"));
        raiz.setLeft(new Button("LEFT"));
        raiz.setRight(new Button("RIGHT"));
        raiz.setCenter(new Button("CENTER"));

        // Crear la escena y asignarla al Stage
        Scene scene = new Scene(raiz);
        primaryStage.setScene(scene);
        primaryStage.setTitle("BorderPane Example");
        primaryStage.show();
    }

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

ScrollPane

Es un contenedor que tiene 2 barras de desplazamiento para mostrar componentes que son más grandes que el área visible del contenedor

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextArea;
import javafx.stage.Stage;

public class ScrollPaneApplication extends Application {
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("ScrollPane Application");

        // Crear un TextArea con texto de ejemplo
        TextArea textArea = new TextArea("Escribe aquí\nen múltiples\nlíneas\n"
                + "y líneas muy largas que superan el tamaño visible...\n"
                + "y otra línea\notra línea\notra línea\notra línea");

        // Agregar el TextArea a un ScrollPane
        ScrollPane scrollPane = new ScrollPane(textArea);

        // Crear la escena y asignarla al Stage
        Scene scene = new Scene(scrollPane, 200, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

TabPane

Es un contenedor que puede contener múltiples pestañas internamente, las cuales pueden visualizarse haciendo clic en ellas. Sólo puede visualizarse una pestaña a la vez.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.Label;
import javafx.stage.Stage;

public class TabPaneApplication extends Application {
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("TabPane Application");

        // Crear pestañas
        Tab tab1 = new Tab("Pestaña 1", new Label("Comprar"));
        Tab tab2 = new Tab("Pestaña 2", new Label("Vender"));

        // Crear TabPane y agregar las pestañas
        TabPane tabPane = new TabPane(tab1, tab2);

        // Crear la escena y asignarla al Stage
        Scene scene = new Scene(tabPane, 300, 200);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

JavaFX SplitPane

Es un contenedor que divide los controles que contiene.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class SplitPaneApplication extends Application {
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("SplitPane Application");

        // Crear un SplitPane
        SplitPane splitPane = new SplitPane();

        // Crear los controles para el lado izquierdo y derecho
        VBox leftControl = new VBox(new Label("Izquierda"));
        VBox rightControl = new VBox(new Label("Derecha"));

        // Agregar los controles al SplitPane
        splitPane.getItems().addAll(leftControl, rightControl);

        // Crear la escena y asignarla al Stage
        Scene scene = new Scene(splitPane, 300, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

HBox y VBox

Los controles de diseño de HBox y VBox proporcionan ubicaciones únicas horizontales o verticales para los nodos secundarios. Se puede anidar nodos HBox dentro de un VBox para obtener un efecto similar a una cuadrícula o anidar nodos VBox dentro de un componente HBox. Es conveniente utilizar un panel de tipo ButtonBar para colocar una fila de botones del mismo tamaño en un contenedor horizontal.

Si usamos HBox en el diseño de nuestra aplicación, todos los nodos se establecen en una sola fila horizontal. La clase denominada HBox del paquete javafx.scene.layout representa el panel HBox.

Si usamos VBox todos los nodos se establecen en una sola columna vertical. La clase denominada VBox del paquete javafx.scene.layout representa el panel VBox.

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

public class VBoxTest extends Application {
    private VBox cajaVertical;

    @Override
    public void start(Stage stage) {
        // Asignamos 10 píxeles de separación entre los nodos
        cajaVertical = new VBox(10);

        // Agregamos un relleno de 15 píxeles para separarlo del borde de la ventana
        cajaVertical.setPadding(new Insets(15));

        // Llamando al método addAll podemos agregar nodos en una sola línea
        cajaVertical.getChildren().addAll(
            new Button("Botón 1"),
            new Button("Botón 2"),
            new Button("Botón 3")
        );

        // Crear la escena y asignarla al Stage
        Scene scene = new Scene(cajaVertical);
        stage.setScene(scene);
        stage.setTitle("VBox Example");
        stage.show();
    }

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