jairogarcíarincón

Introducción

Enel capítulo anterior, salvo en los ejemplos iniciales con la paleta de Swing, siempre hemos especificado a nuestros interfaces la propiedad setLayout(null), que indica al contenedor que no utilice ningún tipo de layout o, dicho de otro modo, que utilice un layout absoluto según el cual los elementos se posicionan según las coordenadas y valores absolutos que nosotros introduzcamos.

No obstante, Java ofrece la posibilidad de desarrollar nuestro interface de forma dinámica mediante el uso de un layout manager o gestor de composición, con el objeto de ayudar a adaptar los diversos componentes que se desean incorporar a un panel, es decir, especificar la apariencia que tendrán a la hora de colocarlos sobre un contenedor, controlando tamaño y posición (layout) automáticamente.

Para ello, Java dispone de varios tipos de layout manager, a saber:

• FlowLayout
• BorderLayout
• CardLayout
• GridLayout
• GridBagLayout
• BoxLayout
• OverlayLayout
• CustomLayout

Vamos a analizar en detalle y con ejemplos algunos de ellos.

FlowLayout

Es el más simple y el que se utiliza por defecto en todos los paneles si no se fuerza el uso de alguno de los otros. Los componentes añadidos a un panel con FlowLayout se encadenan en forma de lista. La cadena es horizontal, de izquierda a derecha, y se puede seleccionar el espaciado entre cada componente.

Si el contenedor se cambia de tamaño en tiempo de ejecución, las posiciones de los componentes se ajustarán automáticamente, para colocar el máximo número posible de componentes en la primera línea.

Los componentes se alinean según se indique en el constructor. Si no se indica nada, se considera que los componentes que pueden estar en una misma línea estarán centrados, pero también se puede indicar que se alineen a izquierda o derecha en el contenedor.

Ejemplo 15: Para ilustrarlo mejor, vamos a crear un JFrame con 5 botones centrados y con una separación inicial entre ellos de 3px. Al hacer clic en cualquier botón, se incrementará dicha separación en 5px. Además, al redimensionar el JFrame veremos cómo se adaptarán los componentes al nuevo tamaño:

BorderLayout

La composición BorderLayout (de borde) proporciona un esquema más complejo de colocación de los componentes en un panel. Es el layout o composición que utilizan por defecto JFrame y JDialog. La composición utiliza cinco zonas para colocar los componentes sobre ellas:

• Norte: parte superior del panel (NORTH o PAGE_START)
• Sur: parte inferior del panel (SOUTH o PAGE_END)
• Este: parte derecha del panel (EAST o LINE_END)
• Oeste: parte izquierda del panel (WEST o LINE_START)
• Centro: parte central del panel, una vez que se hayan rellenado las cuatro partes (CENTER)

Este controlador de posicionamiento resuelve los problemas de cambio de plataforma de ejecución de la aplicación, pero limita el número de componentes que pueden ser colocados en contenedor a cinco; aunque, si se va a construir un interfaz gráfico complejo, algunos de estos cinco componentes pueden contenedores, con lo cual el número de componentes puede verse ampliado.

En los cuatro lados, los componentes se colocan y redimensionan de acuerdo a sus tamaños preferidos y a los valores de separación que se hayan fijado al contenedor.

El tamaño prefijado , el tamaño máximo y el tamaño mínimo (setPreferredSize(new Dimension(WIDTH,HEIGHT)), setMaximumSize(new Dimension(WIDTH,HEIGHT)) y setMinimumSize(new Dimension(WIDTH,HEIGHT))) son informaciones muy importantes en este caso, ya que un botón o panel puede ser redimensionado a proporciones cualesquiera; sin embargo, el diseñador puede fijar un tamaño preferido para obtener una mejor visualización de cada componente.

Ejemplo 16: crea una ventana a través de un objeto JFrame y coloca cinco objetos JButton, sin funcionalidad alguna, utilizando un BorderLayout como manejador de composición y con una separación inicial entre ellos de 3px. Al hacer clic en cualquier botón, se incrementará dicha separación en 5px. Además, al redimensionar el JFrame veremos cómo se adaptarán los componentes al nuevo tamaño:



Se observará que se puede cambiar de tamaño el objeto JFrame, y que dentro de los límites, los componentes se van cambiado a la vez, para acomodarse al tamaño que va adoptando la ventana. Aunque todavía hay problemas que no se han eliminado, ya se podrá redimensionar la ventana para conseguir que los botones desaparezcan o se trunquen los rótulos. Sin embargo, es una forma muy flexible de posicionar componentes en una ventana y no tener que preocuparse de su redimensionamiento y colocación (dentro de unos límites normales).

CardLayout

Este es el tipo de composición que se utiliza cuando se necesita una zona de la ventana que permita colocar distintos componentes en esa misma zona. Este layout suele ir asociado con botones de selección, de tal modo que cada selección determina el panel (grupo de componentes) que se presentarán.

Ejemplo 17: Crea una interfaz de usuario basado en un objeto JFrame, que contiene a los dos objetos JPanel que lo conforman. Uno de los JPanel en la parte superior permitirá alternar entre diferentes fichas (cards), utilizando el CardLayout. El otro JPanel mostrará la ficha correspondiente con varios objetos JButton.



GridLayout

La composición GridLayout proporciona gran flexibilidad para situar componentes. El controlador de posicionamiento se crea con un determinado número de filas y columnas y los componentes van dentro de las celdas de la tabla así definida.

Si el contenedor es alterado en su tamaño en tiempo de ejecución, el sistema intentará mantener el mismo número de filas y columnas dentro de los márgenes de separación que se hayan indicado. En este caso, estos márgenes tienen prioridad sobre el tamaño mínimo que se haya indicado para los componentes, por lo que puede llegar a conseguirse que sean de un tamaño tan pequeño que sus etiquetas sean ilegibles.

El siguiente ejemplo muestra la Calculadora desarrollada anteriormente, pero en este caso utilizando FlowLayout para display y botón de resultado, y GridLayout para los 16 botones centrales.

GridBagLayout

Es igual que la composición de GridLayout, con la diferencia que los componentes no necesitan tener el mismo tamaño. Es quizá el controlador de posicionamiento más sofisticado de los que actualmente soporta AWT.

Dada la complejidad de trabajar con este layout y que en posteriores capítulos se van a utilizar librerías más modernas para la creación de interfaces, no se van a implementar ejemplos de GridBagLayout, prefiriendo para ganar en sencillez con la combinación de layouts y paneles (como en el caso anterior).

BoxLayout

El controlador de posicionamiento BoxLayout es uno de los dos que incorpora Java a través de Swing y permite colocar los componentes a lo largo del eje X o del eje Y. También posibilita que los componentes ocupen diferente espacio a lo largo del eje principal.

En un controlador BoxLayout sobre el eje Y, los componentes se posicionan de arriba hacia abajo en el orden en que se han añadido. Al contrario en en el caso del GridLayout, aquí se permite que los componentes sean de diferente tamaño a lo largo del eje Y, que es el eje principal del controlador de posicionamiento, en este caso.

En el eje que no es principal, BoxLayout intenta que todos los componentes sean tan anchos como el más ancho, o tan alto como el más alto, dependiendo de cuál sea el eje principal. Si un componente no puede incrementar su tamaño, el BoxLayout mira las propiedades de alineamiento en X e Y para determinar donde colocarlo.

OverlayLayout

El controlador de posicionamiento OverlayLayout, es el otro que se incopora a Java con Swing, y es un poco diferente a todos los demás. Se dimensiona para contener el más grande de los componentes y superpone cada componente sobre los otros.

La clase OverlayLayout no tiene un constructor por defecto, así que hay que crearlo dinámicamente en tiempo de ejecución.

No obstante, en la bibliografía adjunta existen ejemplos y especificaciones de GridBagLayout que permitirían, por ejemplo, que la calculadora se hiciera con un único layout, así como de BoxLayout y OverlayLayout.

Igualmente y para finalizar el capítulo, se ofrece el siguiente ENLACE por si el alumno está interesado en crear su propio layout (CustomLayout).

Ejercicios propuestos

14. Desarrolla, utilizando BorderLayout, un interfaz con 5 botones a cada lado (Este y Oeste), un título arriba (Norte), un pie abajo (Sur) y un jTextArea en el espacio restante (Centro)
15. Sustituye el jtextArea del ejercicio anterior de modo que se convierta en un CardLayout con 3 tarjetas con distintos colores de fondo. De los 5 botones anteriores, el primero debe ir a la tarjeta anterior a la que se esté mostrando, los 3 siguientes deben ir a su tarjeta correspondiente (1 a 3) y el último botón debe ir a la tarjeta siguiente a la que se esté mostrando.
16. Desarrolla el interfaz de la Calculadora mediante un GridLayout de modo que sea redimensionable.

---

Publicado el 17 de Enero de 2025

interfacesusuariousabilidad