Técnicas de
distribución de elementos en las ventanas
Al momento de
diseñar una ventana se tienen en cuenta dos cosas:
-
La facilidad a la hora
de colocar donde queramos los componentes en la ventana.
-
Que dichos componentes
estén siempre visibles independientemente del tamaño de la ventana.
La distribución AbsoluteLayout
por ejemplo nos da mucha facilidad a la hora de colocar los elementos en la
ventana, pero sin embargo los componentes no se adaptan a los cambios de
tamaño.
El Diseño
Libre en cambio nos permite crear ventanas en las que sus componentes
se “recolocan” según el tamaño de
estas pero a cambio crece la dificultad del diseño.
Para aprovechar
las ventajas de los distintos layouts y minimizar sus inconvenientes, es
habitual en java crear una estructura de paneles cada uno de ellos con un
layout distinto, según nuestras necesidades.
Normalmente, al
JFrame se le asigna un layout que lo divida en zonas, como puede ser el BorderLayout
o el GridLayout.
Luego, dentro de cada una de estas zonas se coloca un panel (objeto JPanel). Y
a cada uno de estos paneles se le asigna el layout que más le convenga al
programador (FlowLayout, Diseño Libre, AbsoluteLayout,
etc…). Finalmente, dentro de cada panel se añaden los componentes de la
ventana.
Ejemplo:
- Crea un nuevo
proyecto en NetBeans.
- Dentro de Source Packages crea
un Java Package y llamalo paqueteInicial.
- Dentro de paqueteInicial crea un JFrame Form y llamalo VentanaInicial.
Se pretende crear un proyecto con una ventana de diseño complejo. Para
ello sigue los siguientes pasos:
- En primer
lugar, asigna un BorderLayout al JFrame:
- El BorderLayout
divide la ventana principal en zonas. Ahora añade un panel (JPanel) a la
zona norte de la ventana.
- Cambia el
nombre a este panel y llámalo panelTitulo, ya que contendrá
el nombre del programa.
- Añade otro
panel, esta vez a la parte central. El panel se llamará panelDatos:
- Añade un nuevo
panel en la parte sur de la ventana. Su nombre será panelEstado.
NOTA. A veces es complicado agregar un panel en una zona de la ventana
cuando tenemos un BorderLayout. Para ello haz clic derecho sobre JFrame
en el Inspector y activar la opción Add
From Palete – Swing Containers – Panel.
- Si el panel
no se coloca en el sitio deseado, se puede seleccionar en el Inspector y activar su propiedad Dirección, e indicar la zona donde
se quiere colocar:
El panel debería
estar situado finalmente en el sur de la ventana:
- El Inspector tendrá la siguiente forma
ahora:
- Ahora añade
otro panel en la zona oeste llamado panelBotones
y otro en la zona este llamado panelVerificacion.
El Inspector debería tener la siguiente forma al finalizar:
- Cada panel
puede ser diseñado de forma individual, simplemente haciendo doble clic
sobre él. Así pues, empezaremos diseñando el panel panelBotones.
Haz doble clic sobre él.
- En la parte
izquierda del NetBeans aparecerá únicamente el panelBotones.
Agrándalo para que tenga la siguiente forma:
14.
A cada panel se le
puede asignar un Layout distinto. A este panel le asignaremos un AbsoluteLayout
para poder colocar cada elemento donde quiera. Asigna un AbsoluteLayout al panel
haciendo clic derecho sobre él en el Inspector. El Inspector
debería quedar así:
- Ahora añade cinco botones al panel. Observa
como tienes libertad total para colocar cada botón donde quieras. Procura
que el panel quede así:
(No nos vamos a preocupar en este ejercicio de los nombres de los
componentes)
- Ahora diseña el
panel panelVerificacion
haciendo doble clic sobre él.
- Asígnale
también un layout AbsoluteLayout.
- Coloca en él cinco
casillas de verificación. El aspecto del panel al terminar debe ser
parecido al siguiente:
Y el Inspector
debe tener un aspecto similar a este:
- Ahora se
diseñará el panelTitulo.
Haz doble clic sobre él.
- En este caso se
le añadirá un FlowLayout. Recuerda que este layout hace que cada
elemento se coloque uno detrás de otro.
- Añade al panel tres
etiquetas como las que siguen. Ponle un borde a cada una:
El Inspector tendrá este aspecto en lo que se refiere al panelTitulo:
- El panelEstado lo diseñaremos
sin asignar ningún layout, es decir, usando el Diseño Libre. En él
añadiremos cuatro etiquetas de forma que estas mantengan una distancia
relativa con respecto al límite derecho del panel. Dicho de otra forma,
que siempre estén pegadas a la parte derecha del panel:
Observa las líneas
“guía”. Indican que las etiquetas dependen de la parte derecha del panel. A su
vez cada una depende de la otra. Es como si estuvieran “enganchadas”, como los
vagones de un tren.
- El panelDatos lo vamos a
complicar un poco. Haz doble clic sobre él para diseñarlo y asígnale un GridLayout.
- Marca el GridLayout
y asígnale 3 filas y 2 columnas usando sus propiedades Rows
y Columns respectivamente, para que interiormente tenga
forma de una rejilla como esta:
- A cada una de
las divisiones del GridLayout del panelDatos le asignaremos
un nuevo panel. Añade al panelDatos seis
paneles. Esto lo puedes hacer fácilmente haciendo clic con el botón
derecho del ratón sobre el panelDatos en el Inspector y
eligiendo la opción Add From
Palette – Swing
Containers – Panel.
El aspecto del inspector debería ser como el que sigue, en lo que se
refiere al panelDatos:
- Asignaremos a
cada uno de los seis paneles los siguientes nombres: panelEtiqueta1,
panelCuadro1, panelEtiqueta2, panelCuadro2, panelEtiqueta3 y
panelCuadro3. El panelDatos quedará así en el Inspector.
Así pues, el panel panelDatos tiene forma de rejilla con seis
celdas, y en cada celda hay un panel. Puede imaginarse el panelDatos así:
- Ahora añada al
panelEtiqueta1, panelEtiqueta2 y panelEtiqueta3 sendas etiquetas. Y al
panelCuadro1, panelCuadro2 y panelCuadro3 sendos cuadros de texto. El
panel panelDatos debe
quedar así:
- Finalmente ejecuta el programa y comprueba
como se comportan los elementos según el panel donde se encuentre y el
layout asignado a cada uno.
CONCLUSIONES:
Para el diseño de
ventanas muy complejas, se suelen definir layouts que dividan en zonas el
JFrame, como por ejemplo el BorderLayout
o el GridLayout.
Dentro de cada una de
dichas zonas se añade un JPanel, al
que se le asigna un AbsoluteLayout,
un FlowLayout o se mantiene el Diseño
Libre.
Es posible asignar a
un panel un layout de zonas, como el GridLayout
y a su vez introducir en él nuevos paneles, y así sucesivamente.
No hay comentarios.:
Publicar un comentario