Materia: Tpicos Avanzados de Programacin

Docente: Christian Eduardo Milln Hernndez.

Unidad: I. Eventos, II. Interfaz grfica de usuario (GUI).
Actividad: Apuntes.

GESTORES DE DISEO.


Como complemento a la investigacin de Layout realzada con anticipacin,
revisaremos cada uno de ellos. Los gestores de diseo nos permiten tener ms
control sobre los componentes que agregamos a un marco (JFrame). Cuando
las necesidades que tenemos de agregar componentes a un contenedor
(JFrame) y no se adapta un solo gestor, podemos utilizar varios.

Al reorganizar una ventana, se pueden crear un desastre

Algunas herramientas de programacin nos permiten colocar un elemento por
sus coordenadas, incluso Java nos ofrece esa libertad. Sin embargo, al
redimensionar la ventana que contendr nuestra interfaz se puede crear un
desastre visual, ya que los componentes se pueden mostrar parcialmente o no
visualizarse.

Por lo que es recomendable utilizar los gestores de diseo para que nuestras
aplicaciones visuales se adapten a cualquier plataforma y resoluciones.

Como primer dato debemos saber que el gestor de diseo por defecto para un
JFrame es, FlowLayout, del cual ya hemos hablado en clase. Esto significa
que si no asigno un Layout al contenedor JFrame y comienzo a agregar
componentes, estos se administraran en la ventana como ya lo conocemos al
implementar FlowLayout.

Los gestores de diseo que contiene la librera AWT son:

BorderLayout
BoxLayout
CardLayout
FlowLayout
GridBagLayout
GridLayout
GroupLayout
SpringLayout

Puedes conocer ms de ellos en:
http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html


Para implementar un gestor de diseo requerimos seguir unos paso muy
sencillos:

1. Creamos un gestor de diseo, instanciando un objeto de su clase.
2. Aplicamos ese gestor de diseo a un contenedor con el mtodo
setLayout( )
3. Despus que el gestor a sido aplicado al contenedor, podemos empezar
a incluir componentes.


EJEMPLO 1. FlowLayout

Como podemos verificar en la documentacin de Java, tenemos tres
constructores:



Donde en la segunda opcin podemos especificar la alineacin de los
componentes:



LEFT tomarn una justificacin a la izquierda, en el caso de que los
componentes no se puedan agregar en una sola lnea, continuarn en una
siguiente lnea justificados a la izquierda.

RIGHT tomarn una justificacin a la derecha, esta opcin quiz no sea muy
implementada en nuestro caso, sin embargo, existen regiones en el mundo
donde la lectura y escritura se realiza de derecha a izquierda y es cuando esta
opcin toma significado.

CENTER Este valor indica que cada lnea estar justificada.


Veamos un ejemplo con el ya conocido FlowLayout. Con una aplicacin de las
primeras letras del alfabeto aeronutico.

Por lo que comenzamos escribiendo nuestra clase de la siguiente manera:


A continuacin en el mtodo initComponent( ), definimos el gesto de diseo y
agregamos los componentes:



Como se puede observar en la imagen superior, en los comentarios se indican
los tres pasos a seguir para implementar un gestor de diseo.

Ahora veamos el resultado, implementado nuestra clase AlfabetoAeronautico
en una aplicacin.



Como se observa en el la imagen, los botones se agregan comenzando en por
el lado izquierdo, hasta terminar con la lnea y continuar en la siguiente, ahora
modifica la lnea 29 de la clase AlfabetoAeronuatico para que conozcas los
otras maneras de justificar los componetes:

Ejemplo:



Otro aspecto importante es la separacin entre los compontes y la separacin
entre las lneas, nosotros podemos modificar el valor, el cual por default es de
5 pixeles.

Para ello utilizaremos el tercer constructor:



donde podemos observar que adems de solicitar como parmetro de entrada
la alineacin, tambin nos solicita la separacin horizontal y vertical

Por lo que nuevamente modificamos la lnea 29 de la siguiente manera:


Ejecuta nuevamente tu aplicacin y concluye la implementacin de los
parmetros hgap y vgap.

EJEMPLO 2. BoxLayout

Este gestor de diseo, que pudiera pensarse que es muy parecido a
FlowLayout, sin embargo tiene grandes funcionalidades, alinea nuestro
componentes de manera vertical u horizontal. Se encuentra dentro de la librera
swing.

Como podemos revisar en la documentacin de Java tiene un constructor:



Los detalles del constructor son los siguientes:



El primer parmetro target es el contendor que manejar, el segundo es una
variable de clase donde se configura la alineacin de los componentes, las
cuales son:

X_AXIS. Especifica que los componentes deben ser presentados de izquierda
a derecha.

Y_AXIS Especifica que los componentes deben ser presentados de arriba a
bajo.

LINE_AXIS. Especifica que los componentes sern presentados en direccin
del texto determinado por el contenedor objetivo en su propiedad
ComponentOrientation.

PAGE_AXIS. Especifica que los componentes se presentarn en direccin de
fluido de las pginas determinado por el contenedor objetivo en su propiedad
ComponentOrientation.


Para comenzar el desarrollo de este ejemplo utilizaremos la clase JPanel, el
cual es un contenedor al igual que JFrame, sin embargo no tiene barra de
titulo, ni botones minimizar, maximizar y cerrar, por lo que lo ms comn es
que este tipo de contenedores los utilicemos dentro de un JFrame. En esta
prctica nuestra GUI tendr la siguiente estructura:



















Otra clase que utilizaremos en esta parte el JTextArea, la cual nos permite
crear un componente similar a JTextField, la diferencia es que en este
podemos especificar el numero de lneas donde el usuario podr escribir texto.

Aun que ms adelante ampliaremos estos dos temas, te sugiero que para
conocer ms acerca de JPanel y JTextArea, revisa la documentacin de Java.
Clic aqu.

Como se puede apreciar en la imagen anterior, tendremos una JFrame el cual
ser nuestro contenedor principal y contendr dos JPanel, como JPanel es un
contenedor ambos podrn contener mas elementos tanto contenedores y
componentes.

La primera parte debe ser conocida para todos ustedes, de lo contrario les
recomiendo hacer un repaso a los temas ya vistos con anterioridad.
Marco
(JFrame)
JPanel
JPanel


En la siguiente parte definimos la apariencia de nuestra GUI:













Realizamos una aplicacin donde implementemos nuestra clase Pila:



como se puede observar se pueden utilizar diferentes gestores de diseo,
dependiendo de cuantos gestores de diseo queramos utilizar deberemos,
entonces de JPanel utilizar, para cada uno de ellos. De esta manera podemos
empezar a construir GUI ms complejas.






EJEMPLO 3. GridLayout

Es muy similar a los grid o parrilla utilizados en base de datos, (para aquellos
que no estn familiarizados, podemos decir que es algo similar a una matriz).
Se encuentra definido en la librera AWT.

En la clase GridLayout tenemos tres constructores:


El primer constructor no recibe parmetros y crea un Layout por default, el
segundo nos permite determinar la numero especificar de lneas y columnas, y
el tercero es muy similar , solo que adems nos permite definir la separacin
horizontal y vertical como lo hicimos en FlowLayout. Para mayor detalle favor
de revisar la documentacin de Java.


La siguiente implementacin que vamos a realizar sigue los mismos pasos que
hemos seguido hasta ahora para implementar un Layout, por lo que cada ves
debe ser ms familiar para usted el uso de los Layout.

El cdigo de esta implementacin debe ser ya familiar para ustedes, as que
omito los comentarios.





Como se puede observar en la lnea 33 se implementa un GridLayout con las
caractersticas de tener tres lneas y tres columnas. As como una separacin
entres los componentes tanto horizontal como en cada lnea de 10 pixeles.


Le sugiero que cambie los valores de estos parmetros para comprenderlos
mejor.
El resultado con los valores antes indicados deber ser:




Le sugiero como parte final, copiar los cdigos y compilarlos por su cuenta para
reafirmar los conocimientos.

Como puede ver cualquier Layout se adapta a los tres pasos que les di al inicio
del documento.