Cuando construimos una interfaz gráfica de usuario (GUI) en JavaFX, no solo colocamos botones y etiquetas al azar. Necesitamos una forma estructurada y flexible de organizar estos componentes para que la interfaz sea intuitiva, se vea bien y se adapte a diferentes tamaños de ventana. Aquí es donde entran en juego los Layout Panes (Contenedores de Diseño).

Los Layout Panes son clases especiales en JavaFX que actúan como contenedores para otros nodos (controles, imágenes, u otros layouts). Su principal función es gestionar la posición y el tamaño de sus nodos hijos según unas reglas predefinidas.

Vamos a explorar los Layout Panes más comunes y cómo usarlos:

VBox (Caja Vertical)

¿Qué es?
Un VBox organiza sus nodos hijos en una única columna vertical. Es ideal para apilar elementos uno debajo del otro.

Características Clave:

• Los hijos se añaden secuencialmente de arriba hacia abajo.
• Puedes definir un spacing (espaciado) entre los hijos.
• Puedes configurar la alignment (alineación) de los hijos dentro del VBox (ej. POS.CENTER_LEFT, POS.TOP_CENTER).

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>

<VBox alignment="CENTER" spacing="10.0" xmlns:fx="http://javafx.com/fxml/1">
    <padding>
        <Insets top="15" right="15" bottom="15" left="15"/>
    </padding>
    <children>
        <Button text="Opción 1"/>
        <Button text="Opción 2"/>
        <Button text="Opción 3"/>
    </children>
</VBox>

Caso de Uso Típico: Menús verticales, listas de acciones, secciones de un formulario.

 HBox (Caja Horizontal)

¿Qué es?
Un HBox organiza sus nodos hijos en una única fila horizontal. Perfecto para colocar elementos uno al lado del otro.

Características Clave:

• Los hijos se añaden secuencialmente de izquierda a derecha.
• También soporta spacing y alignment (ej. POS.CENTER, POS.BASELINE_LEFT).

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.geometry.Insets?>

<HBox alignment="CENTER_LEFT" spacing="5.0" xmlns:fx="http://javafx.com/fxml/1">
    <padding>
        <Insets top="10" right="10" bottom="10" left="10"/>
    </padding>
    <children>
        <Label text="Nombre:"/>
        <TextField fx:id="nombreTextField"/>
    </children>
</HBox>

Caso de Uso Típico: Barras de herramientas, campos de formulario con etiquetas al lado, grupos de botones horizontales.

BorderPane (Panel con Bordes)

¿Qué es?
Un BorderPane divide su área en cinco regiones: top (arriba), bottom (abajo), left (izquierda), right (derecha), y center (centro). Cada región puede contener un solo nodo (que podría ser otro layout).

Características Clave:

• Las regiones top y bottom ocupan todo el ancho y su altura preferida.
• Las regiones left y right ocupan la altura restante (después de top y bottom) y su ancho preferido.
• La región center ocupa todo el espacio restante.

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.MenuBar?>

<BorderPane xmlns:fx="http://javafx.com/fxml/1">
    <top>
        <MenuBar>
            <!-- Menús aquí -->
        </MenuBar>
    </top>
    <left>
        <ListView fx:id="navegacionListView"/>
    </left>
    <center>
        <Label text="Contenido Principal Aquí"/>
    </center>
    <bottom>
        <Label text="Barra de Estado"/>
    </bottom>
</BorderPane>

Caso de Uso Típico: Estructura general de una aplicación (barra de menú arriba, panel de navegación a la izquierda, contenido principal en el centro, barra de estado abajo).

GridPane (Panel de Rejilla)

¿Qué es?
Un GridPane organiza sus nodos hijos en una rejilla flexible de filas y columnas. Los hijos se colocan especificando su índice de fila y columna.

Características Clave:

• Puedes especificar el rowIndex y columnIndex para cada hijo.
• Los hijos pueden ocupar múltiples filas (rowSpan) o columnas (columnSpan).
• Puedes definir restricciones para las columnas (ColumnConstraints) y filas (RowConstraints) para controlar su tamaño y comportamiento de redimensionamiento.
• Soporta hgap (espaciado horizontal) y vgap (espaciado vertical) entre celdas.

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>

<GridPane hgap="10.0" vgap="10.0" xmlns:fx="http://javafx.com/fxml/1">
    <padding>
        <Insets top="20" right="20" bottom="20" left="20"/>
    </padding>
    <children>
        <Label text="Usuario:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
        <TextField fx:id="usuarioField" GridPane.columnIndex="1" GridPane.rowIndex="0"/>

        <Label text="Contraseña:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
        <TextField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="1"/>

        <Button text="Login" GridPane.columnIndex="1" GridPane.rowIndex="2" GridPane.halignment="RIGHT"/>
    </children>
</GridPane>

Caso de Uso Típico: Formularios de entrada de datos, calculadoras, cualquier interfaz que requiera una alineación precisa en filas y columnas.

StackPane (Panel Apilado)

¿Qué es?
Un StackPane apila sus nodos hijos uno encima del otro, en el orden en que se añaden. El último nodo añadido es el que queda más arriba.

Características Clave:

• Por defecto, los hijos se redimensionan para llenar el espacio del StackPane (si su tamaño máximo lo permite).
• Puedes alinear cada hijo dentro del StackPane usando la propiedad estática StackPane.setAlignment(Node, Pos).

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.shape.Rectangle?>
<?import javafx.scene.paint.Color?>

<StackPane xmlns:fx="http://javafx.com/fxml/1" prefHeight="200.0" prefWidth="300.0">
    <children>
        <Rectangle width="250" height="150">
            <fill>
                <Color red="0.2" green="0.5" blue="0.8"/>
            </fill>
        </Rectangle>
        <Label text="Texto Superpuesto" style="-fx-font-size: 20px; -fx-text-fill: white;"/>
    </children>
</StackPane>

Caso de Uso Típico: Superponer texto o iconos sobre imágenes, crear efectos de capas, mostrar un indicador de carga sobre otro contenido.

AnchorPane (Panel Anclado)

¿Qué es?
Un AnchorPane permite «anclar» los bordes de sus nodos hijos a los bordes del propio AnchorPane. Esto significa que puedes fijar la distancia de un nodo a los lados (top, bottom, left, right) del AnchorPane.

Características Clave:

• Si un nodo está anclado a lados opuestos (ej. left y right), se estirará o encogerá horizontalmente cuando el AnchorPane cambie de tamaño. Lo mismo aplica verticalmente.
• Si solo está anclado a un lado, mantendrá una distancia fija a ese lado.

Ejemplo FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.Button?>

<AnchorPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button text="Arriba-Izquierda" AnchorPane.leftAnchor="10.0" AnchorPane.topAnchor="10.0" />
      <Button text="Abajo-Derecha" AnchorPane.bottomAnchor="10.0" AnchorPane.rightAnchor="10.0" />
      <Button text="Centrado (Aprox)" AnchorPane.leftAnchor="100.0" AnchorPane.rightAnchor="100.0" AnchorPane.topAnchor="80.0" />
   </children>
</AnchorPane>

Caso de Uso Típico: Crear interfaces donde ciertos elementos deben permanecer fijos en las esquinas o bordes, o estirarse para llenar el espacio disponible, independientemente del redimensionamiento de la ventana.

Otros Layouts Notables:

• FlowPane: Similar a VBox o HBox, pero si no hay suficiente espacio en una fila/columna, «fluye» a la siguiente. Útil para galerías de imágenes o etiquetas.
• TilePane: Organiza los nodos en una rejilla de celdas de tamaño uniforme.

Combinando Layouts

La verdadera potencia de los Layout Panes se manifiesta cuando los combinas. Es muy común anidar unos layouts dentro de otros para conseguir diseños complejos. Por ejemplo, un BorderPane como estructura principal, con un HBox en la región top para una barra de herramientas, y un GridPane en la región center para un formulario.

Dominar los Layout Panes es esencial para crear interfaces de usuario robustas y bien estructuradas en JavaFX. ¡Experimenta con ellos y verás cómo tus diseños cobran vida!