Iniciando con JavaFX: Layouts - Ejemplos de uso.
Exordio
Mas allá de querer impresionar al lector con palabras rebuscadas lo que pretendo es advertirle de lo que esta por ver. Contenido sobre los layouts y su uso básico en JavaFX. Esto no es un discurso, ni una novela pero debo advertir que por cuestiones de preferencias personales he decidido crear una publicación lo suficientemente grande como para resultar incomoda de leer. Sin mas que agregar ¡Que comience el codeo!
Layout VBox
Como habíamos mencionado este layout nos permite colocar nodos hijos en una columna , lista vertical o caja vertical, escojan la definición que prefieran.
Aclaración: usare un nodo de tipo Button para ejemplificar el uso de los diferentes layouts, ya que al tener un tamaño definido sera mas fácil de apreciar las características del layout.
Iniciemos con el primer ejemplo:
El resultado es el siguiente:
Se nota en la imagen que los botones están pegados uno después del otro y que están al ras de la ventana, y ademas agregamos los nodos hijos en tres lineas, escribiendo código innecesario, para modificar eso haremos lo siguiente.
El resultado:
Para la manipulación básica de este layout esto basta.
Layout HBox
Este layout es exactamente igual que el anterior a excepción de que en lugar de ser una fila vertical, esta es horizontal. El constructor y el método setPadding están disponibles, ademas de que los nodos hijos se agregan de la misma forma. Por esta razón no haremos código de este layout.
Layout BorderPane
Este layout permite agregar 5 nodos hijos en distintas posiciones, top, left, right, bottom y center. Veamos un ejemplo
Resultado:
Como podemos observar top, left y bottom aparecen están alineados de manera vertical, incluso si agrandamos la ventana veremos como left esta pegado a top.
A continuación podemos observar en una imagen bastante cutre y simple como se comporta el BorderPane
Las flechas significan que puede agrandarse o encogerse, según la posición de la flecha. Las lineas significan que ese tamaño permanece, osea, no se modifica. Ya sea alto o ancho.
Layout FlowPane
Este tipo de layout es parecido al HBox y al VBox. Puede ser como cualquiera de los dos, todo depende del constructor, veamos un ejemplo:
El resultado es:
Como podemos observar, por defecto el constructor vació del flowpane lo crea como horizontal. Al constructor no le podemos pasar simplemente el espacio entre los nodos como en los otros layouts. El FlowPane tiene 4 constructores, el primero es vació, el segundo se pasa la orientación, el tercero recibe dos parámetros llamados hgap y vgap y el ultimo recibe la orientación y los hgap y vgap.
Entonces, si quisieramos hacer un FlowPane vertical seria asi:
Quedando de la siguiente manera:
Si quisieramos agregar espacio entre los nodos, podemos hacerlo desde el constructor o setearlo desde el layout asi;
El resultado es el siguiente:
Layout GridPane
Este layout nos permite crear una matriz/cuadricula, veamos un ejemplo simple de esto:
Obtendremos como resultado lo siguiente:
Al igual que FlowPane, GridPane tambien tiene los metodos Hgap y Vgap para separar los nodos. Una simple linea hace la diferencia:
Resultado:
Pero este layout no pareceria tan cool si no lo hicieramos mas complejo, veamos una verdadera matriz:
Recordemos, que los parametros que recibe el metodo add que usamos del layout GridPane recibe un nodo y las posiciones, donde primero es la columna y despues la fila.
Resultado:
Observamos tambien que agregamos el espacio horizontal.
Pero GridPane es mas potente de lo que parece y podemos hacer algo bastante util en algunos casos, colocar un nodo en un espacio sin relacion con los otros nodos, importandonos solamente su posicion.
El resultado es el siguiente:
Layout StackPane
Estamos ante uno de los layouts un tanto peculiar, puesto que este agrega sus nodos en una pila, el primer elemento queda debajo del segundo y así sucesivamente. Veamos un ejemplo simple:
Resultado:
Al parecer no tiene sentido, puesto que todo esta encimado pero, hay formas de colocar los nodos en diferentes posiciones. Aunque, antes de eso veamos otro ejemplo.
Hay que tener en cuenta que de manera predeterminada el StackPane coloca los nodos en el centro. Aunque eso se puede modificar:
Resultando:
Ahora veamos como colocar los nodos en diferentes posiciones:
El resultado es:
TilePane
TilePane al igual que FlowPane crea un layout que permite añadir nodos de forma vertical o horizontal. La diferencia radica en que TilePane puede especificar en filas y columnas como se van añadiendo los nodos. Veamos un ejemplo.
Nota: Por defecto la posicion es horizontal al igual que FlowPane.
Resultado:
De manera vertical la cosa cambia, pero hay que tener en cuenta que las posiciones por los métodos
y
no son definitivas, si tu cambias el tamaño de la ventana puedes obtener resultados que a simple vista parecen extraños pero solo hay que entender los métodos.
Resultado:
Layout AnchorPane
AnchorPane es parecido a BorderPane la diferencia radica en que AnchorPane nos brinda mas libertad para posicionar los elementos, veamos un ejemplo simple de esto:
Resultado:
Como podemos observar, se posicionan los nodos mediante los metodos estaticos de la clase AnchorPane y para agregarlos al layout se usar el metodo getChildren.add o addAll.
Con esto terminamos esta publicación, si leyeron todo, gracias y si no, también ;)
Cualquier duda la responderé según mis conocimientos y mi tiempo. Se aceptan criticas de cualquier tipo siempre y cuando sea para mejorar el contenido.
Saludos.
- Jose Manuel's blog
- Inicie sesión o regístrese para enviar comentarios