No es que sea un perfeccionista maniático ni nada de eso, pero cuando diseñé mi primera interfaz en JavaFX yo quería a toda costa que los elementos se alinearan perfectamente, uno debajo del otro, como una lista bien ordenada. Quedé feliz cuando supe que javafx.scene.layout.VBox hacía justamente eso que yo tanto quería. Así que voy a mostrarte cómo organizar tus nodos en una columna vertical, verás que no te toma mucho tiempo aprenderlo y te servirá en diferentes ocasiones.
¿Qué es javafx.scene.layout.VBox?
¿Has visto esas cajas u organizadores que uno compra para guardar objetos en la casa? Pues javax.scene.layout.VBox es igual. Resulta que es un contenedor vertical en JavaFX que te sirve para organizar los elementos de tu interfaz de usuario en una columna. En este caso tú vas a organizar botones, etiquetas o imágenes, uno debajo del otro.
A mí me ha servido bastante para crear formularios, menús o cualquier diseño donde necesito que los elementos se alineen de esta forma.
Características:
- Es un contenedor: Por eso es que puedes agregar otros elementos (nodos) dentro de él.
- Orientación vertical: Los elementos que añadas a un VBox se colocarán uno debajo del otro, formando una columna.
- Espaciado: Puedes definir el espacio entre cada elemento para controlar la separación entre ellos.
- Alineación: Puedes controlar la alineación de los elementos dentro del
VBox(por ejemplo, a la izquierda, al centro o a la derecha).
¿Cómo utilizar javafx.scene.layout.VBox? Ejemplos prácticos
Creación de un VBox
La creación de un VBox no es para nada complicada. Puedes usar el constructor básico o uno que acepta nodos como parámetros.
Ejemplo básico:
VBox vbox = new VBox(); // Crea un VBox vacío
Ejemplo con nodos iniciales:
Button button1 = new Button("Botón 1");
Button button2 = new Button("Botón 2");
VBox vbox = new VBox(10, button1, button2); // Espaciado de 10 píxeles entre nodos
Lo que hice aquí fue crear un VBox con dos botones y un espaciado de 10 píxeles entre ellos.
Añadiendo un VBox al gráfico de escena
Para que el VBox sea visible, debes añadirlo al gráfico de escena a través de un Scene y un Stage.
Ejemplo práctico:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class VBoxExample extends Application {
@Override
public void start(Stage primaryStage) {
Button btn1 = new Button("Inicio");
Button btn2 = new Button("Opciones");
Button btn3 = new Button("Salir");
VBox vbox = new VBox(15, btn1, btn2, btn3); // Espaciado entre nodos
Scene scene = new Scene(vbox, 300, 200); // Dimensiones de la escena
primaryStage.setScene(scene);
primaryStage.setTitle("Ejemplo de VBox");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Este código crea una ventana con tres botones dispuestos verticalmente y un espaciado de 15 píxeles entre ellos.
¿Cómo personalizar javafx.scene.layout.VBox?
Espaciado entre nodos
Mira cómo puedes ajustar el espaciado entre los nodos de dos formas:
- La primera es usando el constructor del VBox.
- La otra es llamando al método setSpacing().
vbox.setSpacing(20); // Espaciado de 20 píxeles
Alineación de los nodos
Debes configurar la alineación de los nodos dentro del VBox con el método setAlignment().
vbox.setAlignment(Pos.CENTER); // Alineación central
Te dejo por aquí las opciones comunes de alineación:
- Pos.TOP_LEFT: Arriba a la izquierda.
- Pos.CENTER: Centrado.
- Pos.BOTTOM_RIGHT: Abajo a la derecha.
Márgenes de los nodos
También puedes definir márgenes específicos para cada nodo con el método setMargin().
VBox.setMargin(button1, new Insets(10, 20, 10, 20)); // Márgenes: arriba, derecha, abajo, izquierda
Ajuste del ancho de los nodos
Para que un nodo dentro del VBox ocupe todo el ancho disponible, puedes usar el método setFillWidth().
vbox.setFillWidth(true); // Activa el relleno
button1.setMaxWidth(Double.MAX_VALUE); // El botón ocupa todo el ancho
Ejemplo avanzado: formulario vertical con javafx.scene.layout.VBox
En este ejemplo te muestro un formulario sencillo con etiquetas, campos de texto y un botón, todo perfectamente alineado en un VBox.
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class VBoxFormExample extends Application {
@Override
public void start(Stage primaryStage) {
Label nameLabel = new Label("Nombre:");
TextField nameField = new TextField();
Label emailLabel = new Label("Email:");
TextField emailField = new TextField();
Button submitButton = new Button("Enviar");
VBox vbox = new VBox(10, nameLabel, nameField, emailLabel, emailField, submitButton);
vbox.setPadding(new Insets(15));
vbox.setAlignment(Pos.CENTER);
Scene scene = new Scene(vbox, 400, 250);
primaryStage.setScene(scene);
primaryStage.setTitle("Formulario con VBox");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Estilizando VBox con CSS
Puedes aplicar estilos CSS directamente en tu código Java o desde un archivo externo.
vbox.setStyle("-fx-padding: 20; -fx-border-style: solid; -fx-border-width: 2; -fx-border-color: blue;");
Mira las propiedades comunes para VBox:
- -fx-padding: Espaciado interno del contenedor.
- -fx-border-style: Estilo del borde.
- -fx-border-width: Grosor del borde.
- -fx-border-color: Color del borde.
javafx.scene.layout.VBox es muy bueno para organizar elementos en una columna vertical en JavaFX. A mí me ha fascinado su capacidad de personalización y facilidad de uso para crear formularios, menús y más.
Apúntate al Bootcamp de Java Full Stack de KeepCoding y aprende a crear aplicaciones potentes desde cero. Descubre todo sobre Java, JavaFX y las tecnologías más demandadas del sector IT. ¡Da el salto hacia tu futuro en programación hoy mismo!
