► CURSO PRÁCTICO JAVAFX: Tutorial │FLOWPANE 【Ejemplo Layouts - Layouts Example】

Hola amigos lectores y seguidores de Software Galaxia Blogs, el dia de hoy traemos el séptimo capítulo de esta serie de tutoriales relacionados a la tecnología de JAVAFX,  siguiendo con la temática de Layouts vamos estudiar todo lo relacionado al FlowPane, estaremos estudiando el concepto de este y elaborando un ejemplo práctico en el cual podamos apreciar como funciona este tipo de layout.

Quédate con nosotros y aprendamos más sobre esta gran tecnología, en una entrada anterior estuvimos estudiando otro tipo de Layout el cual es el HBOX, te invito a que vayas y leas esta entrada la cual te será de gran ayuda... ► CURSO PRÁCTICO JAVAFX: Como hacer un LOGIN │NetBeans IDE【HBOX - LAYOUT】

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 FlowPane.

Explicación por Foto-Tutorial:

Iniciamos explicando el concepto general del Layout FlowPane, seguido a esto elaboramos un ejemplo en el cual apreciamos el funcionamiento o la manera como este Layout distribuye los respectivos nodos a través de nuestra interfaz gráfica. 

1. Concepto FlowPane.

Es un componente de diseño(Layout) el cual permite distribuir sus componentes secundarios o nodos hijos vertical u horizontalmente, este puede ajustar los componentes en la siguiente fila o columna si no hay suficiente espacio en una fila; la clase FlowPane pertenece al paquete javafx.scene.layout; Fuente.

Para complementar podemos decir que el Layout FlowPane es una combinación entre el Layout HBOX y el Layout VBOX, ya que este puede distribuir sus componentes o nodos tanto horizontalmente como verticalmente.

Ejemplo FlowPane JAVAFX

Nota: Si deseas ampliar el concepto de Layout te invito a que visites la siguiente entrada... ► CURSO PRÁCTICO JAVAFX: Ejemplo de Layouts - Layouts Examples │【BORDERPANE - CLASS】 

2. Características Del FlowPane.

Una de las características principales al momento de trabajar con este tipo de Layout es que podemos distribuir los distintos componentes de manera dinámica tanto horizontal como verticalmente, las posiciones de los componentes de interfaz gráfica va a depender mucho de las dimensiones que posea nuestra ventana y esto se debe a que a medida que nuestra ventana sea redimensionada igualmente será redimensionado nuestro Layout Pane y automáticamente será reorganizado los componentes dentro de este Layout. 

A continuación tenemos una ventana con 15 Botones los cuales están agregados al nodo raíz el cual es de tipo FlowPane, notaremos que al momento de redimensionar la ventana los componentes se van a redistribuir. 

Redimensionar Panel FlowPane

Podemos notar que al momento de redimensionar la ventana algunos botones han cambiado de posición el encargado de asignar los componentes en una nueva ubicación es el FlowPane, todo esto lo vamos a estudiar en breve. 

Redimensionando Ventana JAVAFX

3. Comparación del FlowPane con otro tipo De Layouts.

En entradas anteriores( ► CURSO PRÁCTICO JAVAFX: Como hacer un LOGIN │NetBeans IDE【HBOX - LAYOUT】 ) mencionamos que el Layout HBOX podríamos compararlo con una matriz o arreglo bidimensional de 1 Fila por N columnas, debido a que los elementos o componentes de interfaz gráfica serian distribuidos de manera horizontal. 

Distribución HBOX

Por otra parte cuando trabajamos con el Layout VBOX( ► CURSO PRÁCTICO JAVAFX: Create Login Form │NetBeans IDE【VBOX - LAYOUT】 ) sucede lo contrario, los elementos de interfaz gráfica se distribuyen de manera vertical uno debajo del otro, esto podríamos compararlo con una matriz o arreglo bidimensional de N filas por 1 Columna. 

Distribución VBOX

Podemos concluir que el Layout FlowPane es una combinación de los anteriormente mencionados, por lo tanto podemos comparar este Layout con una matriz o arreglo bidimensional de N filas por M columnas ya que ambas pueden variar en relación a las dimensiones que vaya teniendo nuestra ventana o Panel.  

FlowPane Layout - JavaFX

4. Propiedades Clase FlowPane.

Esta clase contiene 6 propiedades las cuales nos van a permitir distribuir los componentes de interfaz gráfica que agreguemos a este Layout Pane, Por ejemplo nos permitirá alinear en una dirección específica los respectivos componentes o crear espacios entre los respectivos nodos.

• alignment: esta propiedad representa la alineación que tendrá el del panel(componentes de interfaz gráfica). Puede establecer esta propiedad utilizando el método setter setAllignment ().
• columnHalignment: esta propiedad representa las alineaciones horizontales de los nodos, como por ejemplo alinear nodos a la izquierda, derecha o al centro.
• rowValignment: esta propiedad representa la alineación vertical de los nodos en un panel de flujo horizontal, como por ejemplo alinear o posicionar los elementos arriba o abajo.
• Hgap: Esta propiedad representa los espacios que habrán entre nodos de manera horizontal.
• Orientation: Esta propiedad representa la orientación en la cual serán distribuidos los Nodos o componentes de interfaz gráfica, pueden ser organizados de manera Horizontal y Vertical.
• Vgap: Esta propiedad representa los espacios que habrán entre nodos de manera vertical.

5. Ejercicio Práctico - FlowPane Layout con Orientación Horizontal.

Nuestro primer ejercicio es bastante sencillo, hemos creado un objeto de la clase FlowPane el cual actuará como nodo raíz en este Layout Pane agregaremos los respectivos componentes o nodos hijos(Botones), cuando utilizamos el constructor vacío (FlowPane root = new FlowPane() ), la orientación por defecto de los respectivos nodos que agreguemos será Horizontal.
Creamos los respectivos nodos hijos, los cuales serán 5 botones procedemos agregarlos al nodo raíz haciendo uso del método getChildren().addAll(). 

import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.FlowPane; import javafx.stage.Stage; public class LayoutsFlowPaneextends Application { @Override public void start(Stage primaryStage){ //Creamos 5 botones, los cuales agregaremos a nuestro nodo raiz 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"); //Creamos nuestro nodo raiz (FlowPane) FlowPane root = new FlowPane(); //Agregamos los nodos hijos(Botones) al nodo raiz(FlowPane Layout) root.getChildren().addAll(btn1, btn2, btn3, btn4, btn5); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Ejemplo - FlowPane"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

Salida ejercicio FlowPane con orientación Horizontal, podemos observar que al no tener más espacios para agregar el botón # 5 este se posiciona en una nueva fila.

Salida ejercicio FlowPane Layout

6. Ejercicio Práctico - FlowPane Layout con Orientación Vertical.

Vamos a aumentar el nivel de dificultad de nuestro ejercicio, por lo tanto vamos a cambiar la orientación de nuestro FlowPane esto quiere decir que ahora los respectivos componentes se van a distribuir de manera vertical; para esto hacemos uso del método setOrientation() le pasamos como parámetro una constante de la clase Orientation(Orientation.VERTICAL).
Seguido a esto los Nodos deben tener una separación de manera vertical y de manera horizontal respectivamente; para esto hacemos uso de los métodos setHgap() y setVgap().
Igualmente hemos creado un array de tipo Button de longitud 15, procedemos a inicializar y posteriormente a agregar dichos componentes al Nodo raíz(root), todo esto lo haremos dentro del Bucle For. 

import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.FlowPane; import javafx.stage.Stage; import javafx.geometry.Orientation; public class LayoutsFlowPaneextends Application { @Override public void start(Stage primaryStage){ //Creamos un array tipo Button de longitud 15 Button btn[] = new Button[15]; //Creamos nuestro nodo raiz (FlowPane) FlowPane root = new FlowPane(); //asignamos propiedades al Layout (Orientación y espacio horizontal y vertical) root.setOrientation(Orientation.VERTICAL); root.setHgap(10); root.setVgap(10); //inicializamos y agregamos al nodo raiz(FlowPane los respectivos Botones) for (int i = 0; i < btn.length; i++) { btn[i] = new Button( "BOTON # "+(i+1)); root.getChildren().add(btn[i]); } Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Ejemplo - FlowPane"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

Salida ejercicio FlowPane con orientación Vertical y aplicando espacios entre nodos tanto de manera vertical como horizontal, en si realiza la misma operación que el anterior ejercicio lo único distinto en este caso será la manera en que se distribuyen los componentes.

Salida FlowPane Layout orientación vertical

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 FlowPane, 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...