► CURSO PRÁCTICO JAVAFX: Ejemplo de Layouts - Layouts Examples │【GRIDPANE - CLASS】 Parte 1/2

Hola amigos lectores y seguidores de Software Galaxia Blogs, el dia de hoy traemos el octavo 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 GridPane, al ser este un Layout bastante complejo de entender al inicio vamos a dividir esta explicación en dos partes; El día de hoy iniciamos con lo básico lo cual es el concepto, las restricciones y propiedades que tenemos al momento de trabajar con este Layout en una próxima entrada profundizaremos un poco más y lo complementaremos con un ejercicio práctico.

Quédate con nosotros y aprende más sobre esta gran tecnología, en una entrada anterior estuvimos estudiando otro tipo de Layout el cual es el FLOWPANE, te invito a que vayas y leas esta entrada la cual te será de gran ayuda... ► CURSO PRÁCTICO JAVAFX: Tutorial │FLOWPANE 【Ejemplo Layouts - Layouts Example】

Links de código fuente

GRIDPANE LAYOUT 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 GridPane.

Explicación por Foto-Tutorial:

Iniciamos explicando el concepto general del Layout GridPane, seguido a esto ilustraremos los componentes más relevantes al momento de trabajar con este Layout, estaremos apreciando cómo se distribuyen los Nodos o componentes de interfaz grafica a traves de nuestro Panel. 

1. Concepto GridPane.

Es un componente de diseño(Layout) que presenta sus componentes secundarios(Nodos hijos) en una cuadrícula. El tamaño de las celdas en la cuadrícula depende de los componentes que se muestran en el GridPane, pero hay algunas reglas. Todas las celdas de la misma fila tendrán la misma altura y todas las celdas de la misma columna tendrán el mismo ancho. Diferentes filas pueden tener diferentes alturas y diferentes columnas pueden tener diferentes anchos Fuente.

El concepto anteriormente expuesto es bastante claro, si no aplicamos ninguna restricción a las filas y columnas que utilicemos en el GridPane, estas van a tomar la dimensión de los componentes que agreguemos a dicho panel, Por Ejemplo:

Tenemos una cuadrícula de 4 Filas por 5 columnas (4x5), podemos apreciar que la altura y el ancho de algunas filas y columnas pueden variar en relación a los nodos que agreguemos a las celdas como lo vemos en la imagen.

Distribución Nodos GridPane

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. Restricciones GridPane.

Cuando trabajos con el GridPane Layout debemos tener en cuenta ciertas reglas o restricciones con las cuales se van a distribuir los nodos que agreguemos a nuestro panel.
Para posicionar dichos nodos lo hacemos a través de filas y columnas esto con el fin de identificar la posición en la cual se van a mostrar nuestros componentes de interfaz gráfica, se puede dar el caso que un componente ocupe múltiples filas o múltiples columnas.

Hemos tomado una tabla en la cual tenemos las propiedades que utilizamos para ubicar nuestro nodos (puedes acceder a dicha información en la documentación oficial), tenemos que especificar la columna donde vamos a ubicar a este (columnIndex) igualmente tenemos que ubicar la fila donde posicionamos nuestro nodo(rowIndex), también tenemos dos propiedades mucho más precisas en la cual determinamos cuántas filas o columnas ocupará dicho nodo(columnSpan, rowSpan). 

Restricciones GridPane JAVAFX

3. Ejercicio Práctico - GridPane Layout celda uniforme.

Nuestro primer ejercicio es bastante sencillo en el cual aprenderemos cómo distribuir los nodos a través de nuestro Layout, trabajaremos con 6 Botones los cuales serán agregados a nuestro GridPane el cual tendrá una división de 2 filas por 3 columnas (2x3). 

• Iniciamos con la creación de nuestro nodo raíz (GridPane).
• Seguido a esto agregamos las restricciones con las cuales se distribuirán los respectivos nodos para este ejemplo hemos utilizado dos formas para agregar dichas restricciones; Iniciamos con el método setColumnIndex() el cual posee dos parámetros (Nodo, Columna) iniciamos especificando el nodo a agregar que en este caso será un botón(btn1), seguido a esto asignamos la columna donde será posicionado dicho Nodo(Columna 0), repetimos el mismo proceso utilizando el método setRowIndex() en el cual agregamos el nodo(btn1) y la fila en la cual agregaremos dicho nodo(Fila 0).
• Otro método para posicionar los nodos a agregar en nuestro Layout es el método setContrains() el cual posee varios constructores pero nosotros vamos a utilizar el constructor para identificar el nodo a agregar, el número de columna y el número de fila.
• Una vez creadas las restricciones procedemos a agregar dichos nodos al nodo raíz.

import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.GridPane; import javafx.stage.Stage; public class Layouts_GridPane extends 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"); Button btn6 = new Button("Boton # 6"); //Creamos el nodo raiz GridPane GridPane root = new GridPane(); //Agregamos nodos en la FILA 0 GridPane.setColumnIndex(btn1, 0); GridPane.setRowIndex(btn1, 0); GridPane.setConstraints(btn2, 1, 0); GridPane.setConstraints(btn3, 2, 0); //Agregamos nodos en la FILA 1 GridPane.setConstraints(btn4, 0, 1); GridPane.setConstraints(btn5, 1, 1); GridPane.setConstraints(btn6, 2, 1); //aplicamos espacios horizontal y verticalmente root.setHgap(10); root.setVgap(10); //agregamos nodos hijos al nodo raiz root.getChildren().addAll(btn1, btn2, btn3, btn4, btn5, btn6); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("GridPane - Layout"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

Salida ejercicio GridPane el cual se distribuyen los botones en forma de cuadrícula, están ordenados de manera uniforme.

Salida GridPane Layout

4. Ejercicio Práctico - GridPane Layout Aplicando propiedad rowSpan y ColumnSpan.

Vamos a trabajar en base al anterior ejercicio lo único que cambia es que el botón # 1(btn1), ocupará un el espacio de dos filas  para lograr esto utilizamos el método setRowSpan() en el cual especificamos el número de filas que ocupará dicho nodo, igualmente podemos hacer este mismo proceso utilizando uno de los constructores del método setContrains() como lo podemos apreciar con el botón # 2(btn2).
Para lograr que dichos nodos se expandan de manera automática utilizamos el método setMaxHeight() y setMaxWidth() utilizamos la constante Double.MAX_VALUE.

import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.GridPane; import javafx.stage.Stage; public class Layouts_GridPane extends 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 btn5 = new Button("Boton # 5"); Button btn6 = new Button("Boton # 6"); //Creamos el nodo raiz GridPane GridPane root = new GridPane(); //Agregamos nodos en la FILA 0 GridPane.setColumnIndex(btn1, 0); GridPane.setRowIndex(btn1, 0); GridPane.setRowSpan(btn1, 2); btn1.setMaxHeight(Double.MAX_VALUE); GridPane.setConstraints(btn2, 1, 0, 2, 1); btn2.setMaxWidth(Double.MAX_VALUE); //Agregamos nodos en la FILA 1 GridPane.setConstraints(btn5, 1, 1); GridPane.setConstraints(btn6, 2, 1); //aplicamos espacios horizontal y verticalmente root.setHgap(10); root.setVgap(10); //agregamos nodos hijos al nodo raiz root.getChildren().addAll(btn1, btn2, btn5, btn6); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("GridPane - Layout"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

Salida ejercicio GridPane Aplicando la propiedad rowSpan al botón # 1(btn1) y columnSpan al botón # 2(btn2).

GridPane Layout rowspan y columspan

Con esto hemos concluido con el desarrollo del capítulo de hoy, la finalidad de esta entrada era entender a nivel básico los conceptos de GridPane y sus propiedades más relevantes 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...