► CURSO PRÁCTICO JAVAFX: Create Login Form │NetBeans IDE【VBOX - LAYOUT】

Hola amigos lectores y seguidores de Software Galaxia Blogs, el dia de hoy traemos el quinto capítulo de esta serie de tutoriales relacionados a la tecnología de JAVAFX, seguimos estudiando todo lo referente a los Layouts, el dia de hoy estudiaremos una nueva clase y esta es VBox o vertical box, un layout muy utilizado a la hora de trabajar con interfaces gráficas en JAVAFX, vamos a explicar los aspectos más relevantes de esta y realizaremos un ejercicio para comprender un poco más acerca del funcionamiento de esta.

Quédate con nosotros y aprendamos más sobre esta gran tecnología, en una entrada anterior le dimos inicio a la temática de layouts y estuvimos trabajando con la clase BorderPane, así que te recomiendo que vayas y visites esta entrada, en la cual estuvimos explicando los conceptos claves a la hora de trabajar con layouts en JAVAFX  ► CURSO PRÁCTICO JAVAFX: Ejemplo de Layouts - Layouts Examples │【BORDERPANE - CLASS】

Links de código fuente

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

Explicación por Foto-Tutorial:

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

1. VBox Layout.

Cuando utilizamos un panel de diseño de tipo VBox todos los elementos hijos se mostrarán en una sola columna vertical. Fuente

Siempre que voy a explicar este tipo de Layout lo comparo con una columna o un locker donde guardamos objetos de todo tipo por ejemplo; zapatos, libros etc... podríamos comparar este tipo de layout como una matriz de 1 columna por n filas, el número de filas en este caso sería equivalente al número de nodos o componentes que vamos a utilizar, cada nodo que agreguemos será ordenado uno debajo del otro.

Ejemplo VBox Layout

2. Propiedades Clase VBox.

Es importante resaltar que esta clase pertenece al paquete javafx.scene.layout, igualmente esta clase hereda de la clase Pane la razón es porque todos los paneles de tipo Layout heredan de esta clase, esto lo estuvimos tratando en la entrada anterior ► CURSO PRÁCTICO JAVAFX: Ejemplo de Layouts - Layouts Examples │【BORDERPANE - CLASS】 .

Esta clase contiene 5 Propiedades las cuales son:

• alignment: esta propiedad representa la alineación de los nodos dentro de los límites de VBox. esta propiedad se establece mediante el método setAlignment (), podemos posicionar los  elementos al centro, a la izquierda, derecha etc.
• fillHeight: esta propiedad es de tipo booleano y al establecer esto como verdadero; Los nodos redimensionables en el VBox se redimensionan a la altura del VBox. Puede establecer el valor de esta propiedad utilizando el método setter setFillHeight().
• spacing: esta propiedad la utilizamos para agregar un espacio entre nodos y de esta manera crear una separación entre los mismos, para acceder a esta propiedad lo hacemos a traves del metodo setSpacing().
• setVgrow: al utilizar este metodo obligamos a un nodo hijo a redimensionarse una vez el VBox cambie sus dimensiones, es importante resaltar que el crecimiento del nodo hijo será vertical. 
• setMargin: con este método podemos aplicar márgenes al VBox, con este método podemos aplicar márgenes a un nodo hijo específicamente.

Nota: El dia de hoy vamos a aplicar algunas de las propiedades anteriormente mencionadas sobre el ejercicio que estaremos trabajando.

3. Ejercicio Práctico Login Form- Creamos nuestro Layout Pane(VBox).

Vamos a desarrollar un ejercicio en el cual crearemos un formulario de inicio de sesión o login, en el cual podremos apreciar cómo se distribuyen los nodos cuando trabajamos con este tipo de layout.

Lo primero que vamos hacer, es declarar un objeto de la clase VBox 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.layout.VBox; import javafx.stage.Stage; public class LayoutsVBoxextends Application { @Override public void start(Stage primaryStage){ VBox root = new VBox(); Scene scene = new Scene(root, 300, 300); primaryStage.setTitle("Layout - VBox"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

4. Ejercicio Práctico Login Form- Creamos los nodos requeridos.

Procedemos a crear los nodos que utilizaremos, es importante resaltar que los nodos son los componentes de interfaz gráfica, instanciamos varios objetos los cuales son de tipo Label, TextField, PasswordField y Button, todas estas clases pertenecen al paquete javafx.scene.control.

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.stage.Stage; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.PasswordField; import javafx.scene.control.TextField; public class LayoutsVBoxextends Application { @Override public void start(Stage primaryStage){ Label labelTitle = new Label("Login"); Label labelUser = new Label("Usuario"); Label labelPassword = new Label("Contraseña"); TextField textUser = new TextField(); PasswordField textPass = new PasswordField(); Button btnLogin = new Button("Entrar"); VBox root = new VBox(); Scene scene = new Scene(root, 300, 300); primaryStage.setTitle("Layout - VBox"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

5. Ejercicio Práctico Login Form- Personalizamos los componentes de interfaz gráfica.

Lo siguiente que haremos una vez creados los respectivos nodos, será personalizarlos como por ejemplo cambiar el tipo de fuente a las etiquetas de texto; para efectos de nuestro ejercicio trabajamos con tres etiquetas de texto(labelTitle, labelUser, labelPassword), las cuales le cambiaremos el tamaño de fuente que quedaría de la siguiente manera, labelTitle=30, labelUser=15, labelPass=15.

Seguido a eso le cambiaremos el ancho a los campos de texto y botones (textUser, textPass, btnLogin), para esto utilizamos el método setMaxWidth el cual tendrá una dimensión de 150, es importante resaltar que al utilizar la propiedad setMaxWidth al maximizar la ventana los componentes no cambian su tamaño ya que le hemos dado una dimensión fija.

Para finalizar al botón le vamos agregar una propiedad para cambiar la forma del cursor, para esto hacemos uso del método setCursor() al cual le pasamos como parámetro la constante Cursor.HAND.

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.stage.Stage; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.PasswordField; import javafx.scene.control.TextField; import javafx.scene.text.Font; import javafx.scene.Cursor; public class LayoutsVBoxextends Application { @Override public void start(Stage primaryStage){ Label labelTitle = new Label("Login"); Label labelUser = new Label("Usuario"); Label labelPassword = new Label("Contraseña"); TextField textUser = new TextField(); PasswordField textPass = new PasswordField(); Button btnLogin = new Button("Entrar"); labelTitle.setFont(new Font(30)); labelUser.setFont(new Font(15)); labelPassword.setFont(new Font(15)); textUser.setMaxWidth(150); textPass.setMaxWidth(150); btnLogin.setMaxWidth(150); btnLogin.setCursor(Cursor.HAND); VBox root = new VBox(); Scene scene = new Scene(root, 300, 300); primaryStage.setTitle("Layout - VBox"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

6. Ejercicio Práctico Login Form- Agregamos componentes(nodos) al Nodo raíz.

Lo siguiente que vamos a hacer es agregar los Nodos anteriormente creados, los cuales serán los nodos hijos del nodo raíz, por lo tanto debemos agregarlos a dicho nodo haciendo uso del método getChildren() para obtener la lista de nodos agregados y luego agregar los nuevos nodos haciendo uso del método addAll(), utilizamos este método para agregar todos los nodos en una sola linea de codigo, agregaremos los respectivos nodos en el orden que deseamos que aparezcan en nuestra interfaz gráfica.

Lo siguiente que haremos será hacer uso del método setAlignment(), el cual lo utilizaremos para posicionar los nodos o componentes de interfaz gráfica en el centro. 

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.stage.Stage; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.PasswordField; import javafx.scene.control.TextField; import javafx.scene.text.Font; import javafx.geometry.Pos; import javafx.scene.Cursor; public class LayoutsVBoxextends Application { @Override public void start(Stage primaryStage){ Label labelTitle = new Label("Login"); Label labelUser = new Label("Usuario"); Label labelPassword = new Label("Contraseña"); TextField textUser = new TextField(); PasswordField textPass = new PasswordField(); Button btnLogin = new Button("Entrar"); labelTitle.setFont(new Font(30)); labelUser.setFont(new Font(15)); labelPassword.setFont(new Font(15)); textUser.setMaxWidth(150); textPass.setMaxWidth(150); btnLogin.setMaxWidth(150); btnLogin.setCursor(Cursor.HAND); VBox root = new VBox(); root.getChildren().addAll(labelTitle, labelUser, textUser, labelPassword, textPass, btnLogin); root.setAlignment(Pos.CENTER); Scene scene = new Scene(root, 300, 300); primaryStage.setTitle("Layout - VBox"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

7. Ejemplo Práctico - Aplicamos márgenes a los nodos

Para finalizar debemos aplicar márgenes a las etiquetas labelUser y labelPassword igualmente al botón btnLogin, para esto hacemos uso del método setMargin(), para acceder a este método debemos hacer referencia a la clase del nodo raíz la cual es VBox, seguido a esto hacemos la llamada del método el cual lleva un parámetro de tipo Node, el cual hace referencia al nodo que deseamos aplicar márgenes y pasamos como parámetro un objeto de tipo Insets.

import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.stage.Stage; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.PasswordField; import javafx.scene.control.TextField; import javafx.scene.text.Font; import javafx.geometry.Pos; import javafx.scene.Cursor; import javafx.geometry.Insets; public class LayoutsVBoxextends Application { @Override public void start(Stage primaryStage){ Label labelTitle = new Label("Login"); Label labelUser = new Label("Usuario"); Label labelPassword = new Label("Contraseña"); TextField textUser = new TextField(); PasswordField textPass = new PasswordField(); Button btnLogin = new Button("Entrar"); labelTitle.setFont(new Font(30)); labelUser.setFont(new Font(15)); labelPassword.setFont(new Font(15)); textUser.setMaxWidth(150); textPass.setMaxWidth(150); btnLogin.setMaxWidth(150); btnLogin.setCursor(Cursor.HAND); VBox root = new VBox(); root.getChildren().addAll(labelTitle, labelUser, textUser, labelPassword, textPass, btnLogin); root.setAlignment(Pos.CENTER); VBox.setMargin(labelUser, new Insets(10, 0, 0, 0)); VBox.setMargin(labelPassword, new Insets(10, 0, 0, 0)); VBox.setMargin(btnLogin, new Insets(10, 0, 0, 0)); Scene scene = new Scene(root, 300, 300); primaryStage.setTitle("Layout - VBox"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

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


La salida de nuestra aplicación quedaría de la siguiente manera, es un ejemplo bastante sencillo para ilustrar un poco el funcionamiento de este layout(VBox), en próximas entradas mejoraremos este ejemplo cuando apliquemos otro tipo de layout.

Salida Login JAVAFX VBox

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 VBox Layout, 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...