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 ceroconstraints.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);

JButton boton2 = new JButton ("Boton 2");constraints.gridx = 2;constraints.gridy = 1;

constraints.gridwidth = 1;constraints.gridheight = 1;this.getContentPane().add (boton2, constraints);

JButton boton3 = new JButton ("Boton 3");constraints.gridx = 0;constraints.gridy = 2;constraints.gridwidth = 1;constraints.gridheight = 1;this.getContentPane().add (boton3, constraints);

JButton boton4 = new JButton ("Boton 4");constraints.gridx = 2;constraints.gridy = 2;constraints.gridwidth = 1;constraints.gridheight = 1;this.getContentPane().add (boton4, constraints);

JTextField campoTexto = new JTextField ("Campo texto");constraints.gridx = 1;constraints.gridy = 2;constraints.gridwidth = 1;constraints.gridheight = 1;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 weightxconstraints.gridy = 0; // Fila 0. Necesita estirarse, hay que poner weightyconstraints.gridwidth = 2;constraints.gridheight = 2; constraints.weighty = 1.0; // La fila 0 debe estirarse, le ponemos un 1.0this.getContentPane().add (cajaTexto, constraints); constraints.weighty = 0.0; // Restauramos al valor por defecto, para no afectar a los siguientes componentes.

JButton boton1 = new JButton ("Boton 1");constraints.gridx = 2; // Columna 2. No necesita estirarse, no ponemos weightxconstraints.gridy = 0; // Fila 0. Necesita estirarse, hay que poner weightyconstraints.gridwidth = 1; constraints.gridheight = 1; 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.*/this.getContentPane().add (boton1, constraints); constraints.weighty = 0.0; // Restauramos al valor por defecto, para no afectar a los siguientes componentes.

JButton boton2 = new JButton ("Boton 2");constraints.gridx = 2; // Columna 2, no necesita estirarse, no ponemos weigthxconstraints.gridy = 1; // Fila 1, necesita estirarse, hay que poner weigthyconstraints.gridwidth = 1;constraints.gridheight = 1; constraints.weighty = 1.0; // La fila 1 debe estirarse, le ponemos 1.0this.getContentPane().add (boton2, constraints); constraints.weighty = 0.0; // Restauramos el valor por defecto.

JButton boton3 = new JButton ("Boton 3");constraints.gridx = 0; // Columna 0, no necesita estirarse, no ponemos weigthxconstraints.gridy = 2; // Fila 2, no necesita estirarse, no ponemos weigthyconstraints.gridwidth = 1; constraints.gridheight = 1;this.getContentPane().add (boton3, constraints);

JButton boton4 = new JButton ("Boton 4");constraints.gridx = 2; // Columna 2, no necesita estirarse, no ponemos weightxconstraints.gridy = 2; // Fila 2, no necesita estirarse, no ponemos weigthyconstraints.gridwidth = 1; constraints.gridheight = 1;this.getContentPane().add (boton4, constraints);

JTextField campoTexto = new JTextField ("Campo texto");

constraints.gridx = 1; // Columna 1, debe estirarse, le ponemos el weigthxconstraints.gridy = 2; // Fila 2, no necesita estirarse, no ponemos weigthyconstraints.gridwidth = 1; constraints.gridheight = 1;constraints.weightx = 1.0; // La columna 1 debe estirarse, ponemos el 1.0 en weigthxthis.getContentPane().add (campoTexto, constraints);/* 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"); constraints.gridx = 0;constraints.gridy = 0;constraints.gridwidth = 2;constraints.gridheight = 2;// 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); constraints.weighty = 0.0;

JButton boton1 = new JButton ("Boton 1"); constraints.gridx = 2;constraints.gridy = 0;constraints.gridwidth = 1;constraints.gridheight = 1;constraints.weighty = 1.0;// 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;this.getContentPane().add (boton1, constraints);// Restauramos valores por defectoconstraints.anchor = GridBagConstraints.CENTER; constraints.weighty = 0.0;

JButton boton2 = new JButton ("Boton 2");constraints.gridx = 2;constraints.gridy = 1; constraints.gridwidth = 1; constraints.gridheight = 1; constraints.weighty = 1.0; // El boton 2 debe ocupar la posición NORTH de su celda. constraints.anchor = GridBagConstraints.NORTH;this.getContentPane().add (boton2, constraints);// Restauramos valores por defecto.constraints.weighty = 0.0; constraints.anchor = GridBagConstraints.CENTER;

JButton boton3 = new JButton ("Boton 3"); constraints.gridx = 0;constraints.gridy = 2;constraints.gridwidth = 1; constraints.gridheight = 1; this.getContentPane().add (boton3, constraints);

JButton boton4 = new JButton ("Boton 4");constraints.gridx = 2;constraints.gridy = 2; constraints.gridwidth = 1; constraints.gridheight = 1;this.getContentPane().add (boton4, constraints);

JTextField campoTexto = new JTextField ("Campo texto");constraints.gridx = 1; constraints.gridy = 2;constraints.gridwidth = 1;constraints.gridheight = 1;constraints.weightx = 1.0;// El campo de texto debe estirarse sólo en horizontal.constraints.fill = GridBagConstraints.HORIZONTAL;this.getContentPane().add (campoTexto, constraints);

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