► CURSO PRÁCTICO JAVAFX: Ejemplo de Layouts - Layouts Examples │【BORDERPANE - CLASS】

Hola amigos lectores y seguidores de Software Galaxia Blogs, el dia de hoy traemos el cuarto capítulo de esta serie de tutoriales relacionados a la tecnología de JAVAFX, hoy estudiaremos un tema de suma importancia nos adentramos en el tema de interfaz gráfica, específicamente estudiaremos los layouts, estos componentes son los que nos permiten posicionar nuestros componentes o nodos en nuestra ventana por lo tanto es importante conocer cómo funcionan estos; estudiaremos un layout por capitulo, el dia de hoy estudiaremos la clase Borderpane.

Quédate con nosotros y aprendamos más sobre esta gran tecnología, en una entrada anterior estuvimos estudiando todo los relacionado al ciclo de vida de una aplicación desarrollada con JAVAFX, te invito a que vayas y leas esta entrada la cual te será de gran ayuda... ► CURSO PRÁCTICO JAVAFX: Ciclo de vida clase Application - Life cycle JAVAFX │【INIT - START - NODE】

Links de código fuente

Layouts - JAVAFX

Explicación por VideoTutorial:

Creamos un videotutorial especialmente para ti en el cual te brindamos información detallada acerca de los layouts específicamente el layout de tipo Borderpane.

Explicación por Foto-Tutorial:

Iniciamos explicando los conceptos claves a la hora de trabajar con los layouts igualmente realizaremos un ejercicio práctico para afianzar conocimientos. 

1. ¿Qué es un Layout?.

Para abordar un concepto mucho más general podríamos definir un Layout, como un esquema o forma en la cual serán distribuidos una serie de elementos o formas dentro de un diseño. Fuente

Un concepto mucho más personal y refiriéndonos a nuestro campo el cual es la programación específicamente trabajando con JAVAFX, lo podríamos definir como la manera en que serán distribuidos los distintos nodos a través de nuestra ventana o interfaz gráfica.

2. Layouts JAVA SWING vs Layouts JAVAFX.

Antes de seguir adelante se me hace necesario hacer esta comparativa entre los tipos de Layouts de estas dos tecnologías, tomamos como referencia JAVA SWING, debido a que en el mayor de los casos es la primera que aprendemos. 

Comparativa Layouts

Cuando trabajamos con JAVA SWING, se creaba un JPanel al cual debiamos asignarle un Layout de cualquier tipo(Flowlayout, Gridbaglayout, BorderLayout, etc...) de lo contrario se entendía que teníamos un Layout nulo(null) y posicionamos los elementos a través de coordenadas. 

Cuando trabajamos con JAVAFX, trabajamos de manera similar por lo menos en los tipo de Layouts existentes, pero no manejamos clases separadas como en Swing, la cual una clase pertenecía al contenedor y la otra al Layout, con JAVAFX se maneja una clase la cual sirve como contenedor y Layout y esto se debe a que dicha clase hereda de la clase Pane la cual es la clase padre de todos los contenedores de JAVAFX, les recomiendo revisen la documentación oficial para reforzar conocimientos, 

3. Tipos de Layout.

JAVAFX nos provee de varios Contenedores de tipo Layout, los cuales iremos definiendo uno a uno en cada entrada, por el momento enumeramos los tipos de Layouts existentes, el dia de hoy iniciaremos con el BorderPane:

• BorderPane
• HBox
• VBox
• StackPane
• TextFlow
• AnchorPane
• TitlePane
• GridPane
• FlowPane

4. BorderPane Layout.

Este tipo de Layout permite agregar o dividir nuestro contenedor en 5 regiones las cuales son, arriba(top), abajo(bottom), izquierda(left), derecha(right), centro(center).
Por lo tanto al momento de agregar Nodos hijos(botones, etiquetas, tablas) a este tipo de layout solo se podrá hacer en estas posiciones anteriormente mencionadas.

BorderPane JAVAFX

5. Ejercicio Práctico - Creamos nuestro Layout(BordePane).

Vamos a desarrollar un ejercicio bastante sencillo donde podremos apreciar el funcionamiento de este Layout, para esto simplemente vamos a posicionar 5 botones en las regiones permitidas por este Layout(arriba, abajo, izquierda, derecha, centro).

Lo primero que vamos hacer, es declarar un objeto de la clase BorderPane el cual actuará como nuestro nodo raíz recordemos que este nodo es el que debemos agregar dentro de los parámetros del objeto de tipo Scene.

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class LayoutsBorderPaneextends Application { @Override public void start(Stage primaryStage){ BorderPane root = new BorderPane(); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Layout - BorderPane"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

6. Ejemplo Práctico - Creamos los Nodos(Botones).

Creamos los respectivos Nodos los cuales son los botones que deseamos agregar a nuestro nodo raíz, para esto hacemos uso de la clase Button perteneciente al paquete javafx.scene.control, en total creamos 5 Botones. 

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class LayoutsBorderPaneextends Application { @Override public void start(Stage primaryStage){ BorderPane root = new BorderPane(); Button btn1 = new Button("BOTON 1"); Button btn2 = new Button("BOTON 2"); Button btn3 = new Button("BOTON 3"); Button btn4 = new Button("BOTON 4"); Button btn5 = new Button("BOTON 5"); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Layout - BorderPane"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

7. Ejemplo Práctico - Agregamos los Nodos(Botones) al contenedor(BorderPane).

Agregamos los respectivos Nodos(Botones) a las posiciones del contenedor o Nodo raíz; para posicionar un Nodo en el centro hacemos uso del método setCenter(), para posicionar un Nodo arriba utilizamos el método setTop(), lo mismo aplica para los métodos setLeft(), setRight(), setBottom().

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class LayoutsBorderPaneextends Application { @Override public void start(Stage primaryStage){ BorderPane root = new BorderPane(); Button btn1 = new Button("BOTON 1"); Button btn2 = new Button("BOTON 2"); Button btn3 = new Button("BOTON 3"); Button btn4 = new Button("BOTON 4"); Button btn5 = new Button("BOTON 5"); root.setCenter(btn1); root.setTop(btn2); root.setBottom(btn3); root.setLeft(btn4); root.setRight(btn5); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Layout - BorderPane"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

8. Ejemplo Práctico - Redimensionar los Nodos.

Lo siguiente que haremos será redimensionar los Nodos(Botones), de esta manera ocuparan todas las dimensiones del contenedor respectivamente, para esto utilizamos los métodos setMaxWidth() pasandole como parámetro Double.MAX_VALUE, de esta manera el nodo se expande horizontalmente al 100%, repetimos el mismo proceso con el método setMaxHeight().

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class LayoutsBorderPaneextends Application { @Override public void start(Stage primaryStage){ BorderPane root = new BorderPane(); Button btn1 = new Button("BOTON 1"); Button btn2 = new Button("BOTON 2"); Button btn3 = new Button("BOTON 3"); Button btn4 = new Button("BOTON 4"); Button btn5 = new Button("BOTON 5"); root.setCenter(btn1); root.setTop(btn2); root.setBottom(btn3); root.setLeft(btn4); root.setRight(btn5); btn1.setMaxWidth(Double.MAX_VALUE); btn1.setMaxHeight(Double.MAX_VALUE); btn2.setMaxWidth(Double.MAX_VALUE); btn2.setMaxHeight(Double.MAX_VALUE); btn3.setMaxWidth(Double.MAX_VALUE); btn3.setMaxHeight(Double.MAX_VALUE); btn4.setMaxWidth(Double.MAX_VALUE); btn4.setMaxHeight(Double.MAX_VALUE); btn5.setMaxWidth(Double.MAX_VALUE); btn5.setMaxHeight(Double.MAX_VALUE); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Layout - BorderPane"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

9. Ejemplo Práctico - Agregamos márgenes a los Nodos.

Para finalizar vamos aplicar unos márgenes a los botones del centro, izquierda y derecha; esto con el fin de separar los nodos y organizar un poco nuestra interfaz gráfica.

Para esto utilizamos el método setMargin() el cual le pasamos dos parámetros uno será nuestro Nodo en este caso será nuestros botones y pasamos como parámetro un objeto de tipo insets el cual llevará 4 parámetros los cuales hacen referencia a la longitud o dimensiones que tendrán los respectivos márgenes.

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class LayoutsBorderPaneextends Application { @Override public void start(Stage primaryStage){ BorderPane root = new BorderPane(); Button btn1 = new Button("BOTON 1"); Button btn2 = new Button("BOTON 2"); Button btn3 = new Button("BOTON 3"); Button btn4 = new Button("BOTON 4"); Button btn5 = new Button("BOTON 5"); root.setCenter(btn1); root.setTop(btn2); root.setBottom(btn3); root.setLeft(btn4); root.setRight(btn5); btn1.setMaxWidth(Double.MAX_VALUE); btn1.setMaxHeight(Double.MAX_VALUE); btn2.setMaxWidth(Double.MAX_VALUE); btn2.setMaxHeight(Double.MAX_VALUE); btn3.setMaxWidth(Double.MAX_VALUE); btn3.setMaxHeight(Double.MAX_VALUE); btn4.setMaxWidth(Double.MAX_VALUE); btn4.setMaxHeight(Double.MAX_VALUE); btn5.setMaxWidth(Double.MAX_VALUE); btn5.setMaxHeight(Double.MAX_VALUE); BorderPane.setMargin(btn1, new Insets(5, 5, 5, 5)); BorderPane.setMargin(btn4, new Insets(5, 0, 5, 0)); BorderPane.setMargin(btn5, new Insets(5, 0, 5, 0)); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Layout - BorderPane"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

9. Salida, nuestro ejemplo quedaría de la siguiente manera.

BorderPane - Layout

Con esto hemos concluido con el desarrollo del capítulo de hoy, la finalidad de esta entrada era conocer un poco acerca de los Layouts específicamente el BorderPane, en próximas entradas estaremos abordado otro tipo de Layouts, Si deseas reforzar las temáticas expuestas en esta entrada te invito a que leas la documentación oficial.

Suscribete 

si deseas aprender más sobre esta tecnología y Java en general oprime el botón de suscripción para estar atento a todo nuestro contenido.

¡Suscribete!

Si tienes alguna  otra forma de implementar esta ejemplo no dudes en compartirla, y así poder compartir opiniones sobre el tema.

¿Quieres aprender a realizar aún más cosas y personalizar tus programas hechos en el lenguaje de programación JAVA?, si tu respuesta es "Sí", puedes acceder a todos los tips de JAVA que hemos estado publicando en este blog, dando clic aquí.
  

Suscríbete a nuestro blog, vía Email o RSS; además puedes seguirnos a través de nuestras redes sociales como: Facebook, Twitter, YouTube y Google+. 

Si te fue de gran ayuda este material, no olvides compartirlo con tus amigos. 
Si tienes dudas o sugerencias al respecto; puedes dejarnos tus comentarios.

Bendiciones...