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();
}
}