Concepto de layout

Concepto de layout
A la hora de hacer "ventanitas" en java, un componente es cualquiera de los botones,
etiquetas, listas, menús, etc que podemos colocar en la ventana. Hay determinados
componentes que no tienen un aspecto claro y que únicamente están destinados a contener a
los demás y se les llama contenedores. Por ejemplo, si una ventana contiene dos botones, la
ventana en si misma en otro componente java que recibe el nombre de contenedor. Otro
ejemplo, si te fijas en la barra de herramientas de tu navegador (echa el ojo un poco para
arriba), verás que está llena de botones-iconos. La barra de herramientas en sí misma es
otro contenedor (aunque posiblemente no sea de java, sino del internet explorer o netscape).
¿Cómo se distribuyen los botones dentro de la ventana?. Todos los contenedores en java
tienen en su interior una clase, de nombre genérico "layout", que es la encargada de
distribuir los botones dentro del contenedor. Por ejemplo, la clase FlowLayout se encarga
de hacer que los botones vayan todos seguidos de izquierda a derecha, como sería el caso
de tu barra de herramientas del navegador. El GridLayout los coloca en forma de matriz,
etc, etc.
Cualquier contenedor java tiene una clase layout por defecto, pero la podemos cambiar con
el método setLayout().
En java hay disponibles varios layout como los mencionados anteriormente, la mayoría de
ellos son muy sencillos de usar. Basta ponerlos y nos dan pocas opciones para configurar.
Esto es válido para ventanas sencillas con una distribución de botones no muy compleja.
Por ejemplo, la barra de herramientas del navegador o el teclado de una calculadora, en el
que todos los botones sean del mismo tamaño.
Para ventanas más complejas estos layout simples se quedan escasos. Java nos proporciona
un layout bastante potente, aunque bastante complejo de usar cuando no se comprende
bien: el GridBagLayout. Este layout será suficiente para hacer casi cualquier distribución
de botones en una ventana, por compleja que parezca, pero debemos entender bien su
funcionamiento para que el resultado final se parezca a lo que queremos.
En este tutorial vamos a hacer una ventanita con unos botones usando el GridBagLayout y
vamos a ver paso a paso cómo usarlo. La ventana que pretendemos obtener es la de la
siguiente figura:

Pincha la imagen para ver el applet que produce esta ventana y sus código fuente.
Juega a estirar la ventana para ver el comportamiento de los componentes en su interior.
Tiene un área de texto que ocupa casi toda la ventana. Un "Boton 1" en la parte superior
derecha, un "Boton 2" en la derecha hacia el medio, el "Boton 3" en la equina inferior
izquierda, el "Boton 4" en la esquina inferior derecha y un campo de texto entre estos dos
últimos botones.
Vamos a ello.
Hacer una rejilla adecuada
El primer paso es dibujar la ventana que queremos (a los más espabilados les bastará con
hacerse una idea mental). Es importante dibujarla más o menos estirada, para tener claro si
los botones deben hacerse grandes o no. Por ejemplo, en la figura anterior, los botones
deben mantener su tamaño aunque estiremos la ventana, sin embargo el area de texto debe
crecer con la ventaa y el campo de texto sólo debe crecer horizontalmente.
Luego, sobre el dibujo, hay que trazar unas lineas horizontales y verticales, para tratar de
delimitar una rejilla en la que iran colocados los botones. Para trazar esta rejilla y que luego
el código no nos salga muy complicado conviene tener en cuenta lo siguiente:
 Debemos tratar de meter los componentes en las celdas. Cada componente debe
ocupar una o más celdas. Dos componentes no pueden ocupar la misma celda.
 No es necesario que las celdas de la rejilla sean todas del mismo tamaño ni es
necesario que un componente ocupe una celda completa.
 Para que no se lie el código, conviene que el componente ocupe toda la celda, o bien
que esté centrado en la misma, o bien pegado al centro de uno de los bordes de la
celda o a una esquina de la misma. Vaya, que no pongamos una celda enorme con

un componente dentro a tres cuartos de la parte derecha y medio septimo de la parte
de arriba.
Un ejemplo de rejilla para nuestra ventana puede ser la de la siguiente figura:
Vamos con las líneas verticales:
 La primera en el borde izquierdo de la ventana.
 La segunda entre el boton 3 y el campo de texto.
 La tercera entre el campo de texto y el boton 4.
 La última en el borde derecho de la ventana.
Estas líneas son casi obligadas, puesto que el boton 3, el campo de texto y el boton 4 nos
las limitan. No importa que una de ellas pase por enmedio del area de texto, símplemente
haremos que esta ocupe dos columnas. Estas líneas nos limitan tres columnas que hemos
numerado como 0, 1 y 2. Vamos ahora con las líneas horizontales.
 La primera por la parte de arriba de la ventana
 La segunda puede pasar por cualquier sitio entre el boton 1 y el boton 2.
 La tercera pasa justo por debajo del area de texto y por encima de boton 3, campo
de texto y boton 4
 La última por el borde inferior de la ventana.
Como hemos dicho, la segunda puede pasar por cualquier lado entre los dos botones. Para
que no se nos complique el código y según dijimos arriba, cogiendo la segunda línea
pegando por arriba al botón 2 (como hemos hecho en el dibujo), ya tenemos al boton 2
ocupando la parte superior de su celda. También podíamos haberla pegado al botón 1, así el
botón 2 estaría más o menos en el centro de su celda. Lo que complicaría luego el código

sería poner la línea entre ambos botones, por lo que el boton 2 quedaría a 1/3 de la parte
superior de su celda.
Podemos trazar más lineas si queremos, como otras lineas horizontales que pasen por
debajo de boton 1 y boton 2, pero no son necesarias. Tampoco importaría mucho hacerlas
ni se iba a complicar excesivamente el código.
Resumiendo, nuestro area de texto ocupa cuatro celdas, los botones una cada uno y el
campo de texto otra. Boton 1 y 2 no ocupan toda la celda, pero están en la parte superior de
la misma.
Nuestra primera aproximación
Vamos a hacer nuestro primer código para obtener la ventana. Nuestra ventana será un
JFrame, así que hacemos una clase que herede de JFrame y le ponemos el GridBagLayout.
class Ventana extends JFrame
{
public Ventana()
{
super ("Ejemplo 1"); // El título
this.getContentPane().setLayout (new GridBagLayout()); // Le ponemos el
GridBagLayout
...
}
}
Lo del getContentPane() es porque en realidad la ventana no es el contenedor, sino un
componente que lleva internamente la ventana y que se puede obtener a través de este
método. Es a este componente al que debemos añadirle el layout y los componentes
(botoncitos y demás).
Ahora debemos empezar a añadir componentes. Tenemos por un lado el método add() con
un sólo parámetro.
JTextArea areaTexto = new JTextArea("Area texto");
this.getContentPane().add (areaTexto);
Esta llamada añade el área de texto, dejando al GridBagLayout total libertad para decidir
dónde y cómo ponerlo. No es lo que queremos. Necesitamos el método add() que admite un
segundo parámetro. Este segundo parámetro le indica al layout dónde y cómo colocar el
componente. El segundo parámetro es un Object, lo que quiere decir que podriamos meter
cualquier cosa. Evidentemente esto no es asi, debemos meter algo que el layout entienda.
Cada layout entiende su propio segundo parámetro. El GridBagLayout admite como
segundo parámetro un GridBagConstraints.

GridBagConstraints en una clase en cuyos atributos se guarda información de cómo y
dónde añadir el componente. De momento vamos a contemplar sólo cuatro de estos
atributos:
 GridBagConstraints.gridx nos dice la posición x del componente, es decir, el
número de columna en la que está el componente, siendo la columna 0 la primera
columna de la izquierda. Si el componente ocupa varias columnas (como nuestra
área de texto), debemos indicar la columna en la que está la esquina superior
izquierda del componente.
 GridBagConstraints.gridy nos dice la posición y del componente, es decir, el
número de fila en la que está el componente, siendo la fila 0 la primera fila de la
parte de arriba. Si el componente ocupa varias filas (como nuestra área de texto),
debemos indicar la fila en la que está la esquina superior izquierda del componente.
 GridBagConstraints.gridwidth nos dice cuántas celdas en horizontal debe ocupar
el componente. El ancho del componente.
 GridBagConstraints.gridheight nos dice cuantas celdas en vertical debe ocupar el
componente. El alto del componente.
Con esto podemos añadir nuestra área de texto
JTextArea areaTexto = new JTextArea ("Area texto");
GridBagConstraints constraints = new GridBagConstraints();
constraints.gridx = 0; // El área de texto empieza en la columna cero.
constraints.gridy = 0; // El área de texto empieza en la fila cero
constraints.gridwidth = 2; // El área de texto ocupa dos columnas.
constraints.gridheight = 2; // El área de texto ocupa 2 filas.
this.getContentPane().add (areaTexto, constraints);
En realidad gridwith y gridheight admite también determinadas constantes que hacen que el
componente se estire hasta el final del contenedor, ocupando todas las columnas o filas
libres o hasta que encuentre otro componente. No vamos a usar esas constantes (están
definidas en GridBagConstraints) y simplemente hemos puesto el número de filas y
columnas (2 en ambos casos) que queremos que ocupe.
Los siguientes elementos tienen todos un gridwidth y gridheight de 1, puesto que ocupan
una fila y columna. Las posiciones son las siguientes:
JButton boton1 = new JButton ("Boton 1");
constraints.gridx = 2;
constraints.gridy = 0;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton1, constraints);

JTextField campoTexto = new JTextField ("Campo texto");
this.getContentPane().add (campoTexto, constraints);
Hay un detalle importante a tener en cuenta. Sólo hemos hecho un new de
GridBagConstraints, por lo que todos ellos comparten la misma instancia de ese objeto.
Hay que tener en cuenta que si cambiamos uno de los atributos para un componente,
debemos restaurarlo luego para el siguiente. Por ejemplo, para el area de texto pusimos
gridwidth a 2. Para el siguiente componente (el botón1), debemo volver a poner esta valor a
1.
Por ello es acosejable poner siempre todos los atributos. Otra opción es hacer un new
GridBagConstraints para cada componente (claramente menos eficiente) o finalmente la
que he seguido en el código de ejemplo, ser muy cuidadoso e ir restaurando valores según
se van cambiando.
Si ejecutamos lo que tenemos hasta ahora y estiramos un poco la ventana resultante nos
sale lo de la siguiente figura:

Pincha la figura para ver el applet que produce esta ventana y sus código fuente.
Bueno, no se parece mucho a lo que queríamos. Se ha quedado todo en el centro de la
ventana y el area de texto es bastante canija. ¿Qué ha pasado?
Estirar las filas y las columnas
Lo que ha pasado es que sólo le hemos dicho al GridBagLayout dónde colocar los
componentes y eso lo ha hecho bien. Cada componente está donde debe. Lo que pasa es
que no le hemos dicho nada de cómo estirar las filas y columnas, así que ha hecho lo que
hace por defecto: Cada fila y columna es del tamaño mínimo necesario para albergar sus
componentes y están centradas dentro de la ventana. En la siguiente figura vemos como
están nuestras filas y columnas:

Las filas son de la altura justa para contener a los botones. Las columnas también. El área
de texto que ocupa cuatro celdas se ha situado en el medio de ellas y le sobra un montón de
espacio.
El siguiente paso a dar consiste en decir cómo se deben estirar las filas columnas. Si
comparamos con la figura en las que marcamos inicialmente las filas y columnas, vemos
que las dos primeras filas deben ser más anchas, la tercera fila ya está bien de ancho. En
cuanto a las columnas, la segunda es la que debe estirarse, la primera y tercera están bien.
Para estirar filas y columnas, dentro del GridBagConstraints tenemos los campos weigthx y
weigthy. El primero indica cómo estirar las columnas. El segundo las filas. Aqui vamos a
contar una forma sencilla de usar estos campos que nos servirá para la mayoría de los
casos. En realidad podríamos sacarle bastante más jugo.
A estos campos debemos darles el valor 0.0 (que es el valor por defecto) si no queremos
que la fila o columna se estire. Este es el caso para la primera y tercera columna, así como
para la tercera fila. Debemos dar el valor 1.0 a las filas o columnas que queremos que se
estiren hasta completar toda la ventana. Es el caso de las dos primeras filas y de la columna
del medio.
Hay dos detalles con estos campos. El primero es que widthy afecta a una fila completa, no
solo a un componente. Por ello, cada vez que añadamos un componente a esa fila, debemos
dar a widthy el mismo valor (o 0.0 o 1.0). Lo mismo pasa con widthx y las columnas. El
segundo detalle es el que comentamos antes, sólo estamos usando una instancia de
GridBagConstraints, asi que después de poner uno de estos campos a 1.0 y añadir un
componente, debemos volver a ponerlo a 0.0 para el siguiente (suponiendo que sea eso lo
que necesita).

El código ahora, añadiendo estos dos campos, quedaría así:
JTextArea cajaTexto = new JTextArea("Area texto");
constraints.gridx = 0; // Columna 0. No necesita estirarse, no ponemos weightx
constraints.gridy = 0; // Fila 0. Necesita estirarse, hay que poner weighty
constraints.weighty = 1.0; // La fila 0 debe estirarse, le ponemos un 1.0
this.getContentPane().add (cajaTexto, constraints);
constraints.weighty = 0.0; // Restauramos al valor por defecto, para no afectar a los
siguientes componentes.
constraints.gridx = 2; // Columna 2. No necesita estirarse, no ponemos weightx
constraints.gridy = 0; // Fila 0. Necesita estirarse, hay que poner weighty
constraints.weighty = 1.0; /* La fila 0 debe estirarse, le ponemos un 1.0. Ya lo hicimos en
el area de texto, pero aquí debemos ser coherentes y poner lo mismo.*/
constraints.weighty = 0.0; // Restauramos al valor por defecto, para no afectar a los
siguientes componentes.
constraints.gridx = 2; // Columna 2, no necesita estirarse, no ponemos weigthx
constraints.gridy = 1; // Fila 1, necesita estirarse, hay que poner weigthy
constraints.weighty = 1.0; // La fila 1 debe estirarse, le ponemos 1.0
constraints.weighty = 0.0; // Restauramos el valor por defecto.
constraints.gridx = 0; // Columna 0, no necesita estirarse, no ponemos weigthx
constraints.gridy = 2; // Fila 2, no necesita estirarse, no ponemos weigthy
constraints.gridx = 2; // Columna 2, no necesita estirarse, no ponemos weightx

constraints.gridx = 1; // Columna 1, debe estirarse, le ponemos el weigthx
constraints.weightx = 1.0; // La columna 1 debe estirarse, ponemos el 1.0 en weigthx
/* Puesto que es el último componente, no restauramos el valor por defecto. Si más
adelante añadimos más componentes, seguro que pagamos cara nuestra osadía.*/
Bueno, vamos a ejecutar nuestro programa, estirar la ventana y a ver qué sale. Sale lo de la
siguiente figura, que tampoco es lo que queremos.
Pincha la figura para ver el applet que produce esta ventana y sus código fuente.
¿Qué es lo que ha pasado ahora?. Como dice un viejo dicho de informática, el ordenador se
empeña en hacer lo que le decimos y no lo que queremos. Le hemos dicho que estire las
filas y columnas y es lo que ha hecho, pero como no le hemos dicho nada sobre los
componentes, no los ha estirado en absoluto.
Estirar los componentes
Si pintamos sobre la ventana las rayas que delimtan filas y columnas, vemos que
efectivamente se han ensanchado las que hemos dicho

pero los componentes siguen con su tamaño original y en el centro de las celdas que tienen
asignadas. El area de texto sigue igual, en el centro de sus cuatro celdas, los botones 1 y 2
se han centrado en sus celdas y lo mismo le pasa al campo de texto.
Lo siguiente que tenemos que hacer es decir qué componentes deben estirarse (el area de
texto y el campo de texto para nuestro ejemplo). Para aquellos componentes que no deben
estirarse, podemos indicar en qué parte de la celda queremos que se situen (caso del boton 1
y boton 2).
Para hacer que un componente se estire, tenemos el atributo fill del GridBagConstraints.
Este puede tomar los siguientes valores:
 GridBagConstraints.NONE para que no se estire en ningún sentido, es la opción
por defecto.
 GridBagConstraints.VERTICAL para que se estire sólo en vertical
 GridBagConstraints.HORIZONTAL para que se estire sólo en horizontal.
 GridBagConstraints.BOTH para que se estire en ambas dimensiones
Si el componente no se estira en alguna dirección, podemos decirle por medio de anchor en
GridBagConstraints qué posición queremos que ocupe. Las posibilidades son
 GridBagConstraints.CENTER para que el componente ocupe el centro de la
celda. Es la opción por defecto
 GridBagConstraints.NORTH para que se pegue a la parte superior, centrado en la
misma.
 GridBagConstraints.NORTHEAST para que se pegue a la esquina superior
derecha.
 ... (qué pereza me da escribir todos los puntos cardinales ...)
 GridBagConstraints.WEST para que se pegue al lado izquierdo, centrado en ese
lado.
 GridBagConstraints.NORTHWEST para que se pegue a la esquina superior
izquierda.

Igual que antes, estamos usando una única instancia de GridBagConstraints, por lo que si
al añadir un componente cambiamos una opción, debemos tenerlo en cuenta para el
siguiente.
Bueno, pues básicamente nos queda decirle al area de texto de se ensanche en todos los
sentidos, al campo de texto que se ensanche en horizontal y a los botones 1 y 2 que ocupen
la posicion NORTH de su celda. El código sería el siguiente:
JTextArea cajaTexto = new JTextArea("Area texto");
// El area de texto debe estirarse en ambos sentidos. Ponemos el campo fill.
constraints.fill = GridBagConstraints.BOTH;
constraints.weighty = 1.0;
this.getContentPane().add (cajaTexto, constraints);
// El botón 1 debe ocupar la posición NORTH de su celda
constraints.anchor = GridBagConstraints.NORTH;
// El botón 1 no debe estirarse. Habíamos cambiado este valor en el
// area de texto, asi que lo restauramos.
constraints.fill = GridBagConstraints.NONE;
// Restauramos valores por defecto
constraints.anchor = GridBagConstraints.CENTER;
// El boton 2 debe ocupar la posición NORTH de su celda.
constraints.anchor = GridBagConstraints.NORTH;
// Restauramos valores por defecto.
constraints.anchor = GridBagConstraints.CENTER;

constraints.weightx = 1.0;
// El campo de texto debe estirarse sólo en horizontal.
constraints.fill = GridBagConstraints.HORIZONTAL;
Bueno, ejecutamos esto, estiramos la ventana, y ¡Eureka!. Sale lo que queríamos al
principio. (No repito la figura, sube un poco y échale un ojo si no la recuerdas).

Concepto de layout

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Concepto de layout (20)

Más de jbersosa (20)

Último (20)

Concepto de layout