CECyTE 05 “Las Guacamayas”

Menus emergentes

El evento mouseClicked

El evento mouseClicked es capaz de capturar un clic del ratón sobre un determinado

elemento de la ventana.

Este evento recibe como parámetro un objeto del tipo MouseEvent, y gracias a él se
puede conseguir información como la siguiente:

- Qué botón del ratón fue pulsado.

- Cuantas veces (clic, doble clic, etc) - En qué coordenadas
fue pulsado el botón. - Etc.

Se puede usar esta información para saber por ejemplo si se pulsó el botón derecho
del ratón, y sacar en este caso un menú contextual en pantalla.

En este ejercicio guiado veremosa las posibilidades del evento mouseClicked y se

aplicarán a la creación y visualización de menús contextuales (o emergentes)

1. Crea un nuevo proyecto. Continuaremos con el mismo proyecto dentro del

ejercicio BarraMenu.

2. No hace falta que añada nada a la ventana.

3. Programaremos la pulsación del ratón sobre el formulario, así que haga clic
sobre el formulario y active el evento mouseClicked.

4. Observe el código del evento:

Ing. Jorge Arturo Sánchez Ponce Página 204

CECyTE 05 “Las Guacamayas”

private void formMouseClicked(java.awt.event.MouseEvent evt) {

// TODO add your handling code here:
}

Este evento recibe como parámetro un objeto llamado evt del tipo
MouseEvent (en rojo en el código) que nos permite saber en qué condiciones
se hizo clic.

5. Dentro del evento programe lo siguiente:

if (evt.getButton()==1) {
JOptionPane.showMessageDialog(null,"Pulso el izquierdo");
} else if (evt.getButton()==2) {
JOptionPane.showMessageDialog(null,"Pulso el central");
} else if (evt.getButton()==3) {
JOptionPane.showMessageDialog(null,"Pulso el derecho"); }

6. Ejecuta el programa y haz clic sobre el formulario con el botón derecho, con el
izquierdo y con el central. Observa el resultado.

7. Ahora quizás puedas comprender el código anterior. En él, se usa el método

getButton del objeto evt para saber qué botón se pulsó. El método getButton
devuelve un entero que puede ser 1, 2 o 3 según el botón pulsado.

8. Se puede aprovechar el método getButton para controlar la pulsación del

botón derecho del ratón y así sacar un menú contextual. Pero antes, es
necesario crear el menú.

Ing. Jorge Arturo Sánchez Ponce Página 205

CECyTE 05 “Las Guacamayas”

9. Agrega a tu formulario un objeto del tipo JPopupMenu. Estos objetos definen

menús emergentes.

10. Los objetos JPopupMenu no se muestran en el formulario, pero puedes verlo

en el Inspector dentro de la rama de Otros Componentes:

11. Aprovecharemos el inspector para cambiar el nombre al menú. Llámalo

menuEmergente.

12. Los menús emergentes se crean igual que las opciones de menús normales,
añadiendo con el botón derecho del ratón objetos JMenuItem.

13. Añada al menú emergente tres JMenuItem, y asígneles los siguientes

nombres a cada uno: menuRojo, menuVerde, menuAzul. El inspector debería
tener el siguiente aspecto:

14. Tienes que cambiar la propiedad

text de cada opción del menú. Recuerda que esta propiedad define lo que
aparece en el menú. Asignarás los siguientes textos: “Rojo”, “Verde” y “Azul”.

15. El menú emergente ya está construido. Ahora tenemos que hacer que
aparezca cuando el usuario pulse el botón derecho del ratón sobre el
formulario. Para ello, entraremos de nuevo en el evento mouseClicked del
formulario y cambiaremos su código por el siguiente:

Ing. Jorge Arturo Sánchez Ponce Página 206

CECyTE 05 “Las Guacamayas”

menuEmergente.show(this,evt.getX(),evt.getY());

16. Este código significa lo siguiente:

- El método show le da la orden al menuEmergente para que se muestre.

- El método show recibe tres elementos: por un lado la ventana donde actúa
(this)
- Por otro lado la posición x donde debe mostrarse el menú. Esta posición es
aquella donde se pulsó el ratón, y se puede conseguir gracias al método getX
del objeto evt.
- Por último se necesita la posición y. Esta posición se puede conseguir gracias
al método getY del objeto evt.

Es decir, decidimos mostrar el menú emergente justo en las coordenadas

donde se hizo clic.

17. Ejecuta el programa y

observa el resultado.

Al hacer clic con el derecho se mostrará el menú contextual.

18. Para hacer que al

pulsarse una opción
suceda algo, solo hay que activar el método actionPerformed del JMenuItem
correspondiente. Por ejemplo, active el actionPerformed del menuRojo y
dentro programe lo siguiente:

this.getContentPane().setBackground(Color.RED);

19. Ejecuta el programa y comprueba lo que sucede al pulsar la opción Rojo del
menú contextual.

Ing. Jorge Arturo Sánchez Ponce Página 207

CECyTE 05 “Las Guacamayas”

CONCLUSIÓN
Los menús contextuales son objetos del tipo JPopupMenu. Estos objetos
contienen JMenuItem al igual que las opciones de menú normales.
Cuando se asigna un JPopupMenu a un formulario, no aparece sobre la
ventana, pero sí en el inspector.

Práctica 14.- Creación de barras de Herramientas.

Práctica Guiada. Barra de herramientas

Barras de herramientas

Una barra de herramientas es básicamente un contenedor de botones y otros

elementos propios de la ventana.

A través de estos botones se pueden activar de forma rápida las opciones del
programa, las cuales suelen estar también incluidas dentro de la barra de menús.

1. Veamos como añadir una barra de herramientas a nuestras aplicaciones.

2. Añade a tu ventana un objeto JmenuBar (una barra de menús). Para este

caso lo realizaremos en el mismo ejercicio que estamos trabajando.(Menu
anterior).

3. En la parte superior de tu ventana aparecerá esto:

Ing. Jorge Arturo Sánchez Ponce Página 208

CECyTE 05 “Las Guacamayas”

4. Debajo de la barra de menús colocaremos una barra de herramientas, así que

añade un objeto del tipo JToolBar. Haz que la barra se coloque debajo de la
barra de menús y que alcance desde la parte izquierda de la ventana a la
parte derecha.

La ventana quedará así:

5. Las barras de herramientas son simples contenedoras de objetos. Dentro de

ellas se pueden colocar botones, combos, etiquetas, etc.

Normalmente, las
barras de
herramientas
contienen botones.
Así que añade
cuatro botones
(JButton) dentro de
la barra. Solo tienes
que colocarlos
dentro de ella.

6. Puedes ver si los botones están bien colocados observando el Inspector:

Observa como los botones colocados se encuentran dentro de la barra.

7. Aprovecharemos el inspector para

cambiar el nombre a la barra y a cada botón.

Ing. Jorge Arturo Sánchez Ponce Página 209

CECyTE 05 “Las Guacamayas”

A la barra la llamaremos barraHerramientas, y a los botones los llamaremos

btnUno, btnDos, btnTres y btnCuatro:

8. Cambia el texto de los botones. Estos contendrán el texto: “Uno”, “Dos”,

“Tres” y “Cuatro”.

9. Ejecuta el programa.

10. La forma de programar cada botón no varía, aunque estos se encuentren

dentro de la barra herramientas. Solo hay que seleccionar el botón y acceder
a su evento actionPerformed.

11. Solo como demostración de esto

último, entra en el actionPerformed del
primer botón y programa esto:

JOptionPane.showMessageDialog(null,"Activaste el botón uno");

Luego ejecuta el programa y comprueba el funcionamiento del botón.

12. Los botones de la barra de herramientas normalmente no contienen texto,

sino que contienen un icono que representa la función que realiza. La forma
de colocar un icono dentro de un botón es a través de su propiedad icon.

13. A través de la propiedad icon de un botón podrá seleccionar un fichero de

imagen que contenga la imagen a mostrar en el botón.

14. Activa la propiedad icon del primer botón. Luego elige la opción Fichero y
pulsa el botón Seleccionar Fichero para buscar un fichero con imagen.

Ing. Jorge Arturo Sánchez Ponce Página 210

CECyTE 05 “Las Guacamayas”

Nota: Busca un fichero de

imagen que sea del tipo .gif o
.jpg.

Nota: Procura que la imagen

sea pequeña.

Nota: Se recomienda buscar

imágenes .gif en Internet para
practicar.

15. Una vez colocadas las imágenes a los botones, se puede quitar el texto de
estos. Un ejemplo de cómo podría quedar la barra de herramientas es este:

CONCLUSIÓN
Las barras de herramientas son simplemente contenedores de objetos.
Normalmente botones.
Los elementos de la barra de herramientas se manejan de la misma forma que
si no estuvieran dentro de la barra.
Lo normal es hacer que los botones de la barra no tengan texto y tengan
iconos asociados.

Ing. Jorge Arturo Sánchez Ponce Página 211

CECyTE 05 “Las Guacamayas”

Práctica 15.- Implementación de herramientas visuales con programación.

Práctica Guiada. Centralizar código

El problema de la repetición de código es muy habitual en Java que varios eventos

tengan que ejecutar el mismo
código. En este caso se plantea
la necesidad de “copiar y pegar”
ese código en los distintos
eventos a programar:

Esta es una mala forma de programación, ya que se necesitara modificar el código,

sería necesario realizar la modificación en cada copia del código. Es muy fácil que
haya olvidos y aparezcan errores en el programa que luego son muy difíciles de
localizar.

Lo mejor es que el código que tenga que ser ejecutado desde distintos eventos
aparezca solo una vez, y sea llamado desde cada evento:

Veamos algunos ejemplos en los

que el código se puede repetir y
como evitar esta repetición.

Ing. Jorge Arturo Sánchez Ponce Página 212

CECyTE 05 “Las Guacamayas”

1. Crea un nuevo proyecto en java que se llame ProyectoCalculos. Este

proyecto tendrá un paquete llamado
PaqueteCalculos. Y dentro de él creará un
JFrame llamado VentanaCalculos. El
proyecto tendrá el siguiente aspecto:

2. La VentanaCalculos debe estar diseñada de la siguiente forma:

Esta ventana contiene los siguientes elementos:

- Una barra de menús a la que puede llamar menuBarra.

- La barra de menús contiene un JMenu con el texto “Calcular” y que se puede
llamar menuCalcular
- El menuCalcular contendrá tres JMenuItem, llamados respectivamente:
menuSumar, menuRestar, menuBorrar y con los textos “Sumar”, “Restar” y
“Borrar”.
- Una etiqueta con el texto “Número 1”. (no importa su nombre)

Ing. Jorge Arturo Sánchez Ponce Página 213

CECyTE 05 “Las Guacamayas”

- Una etiqueta con el texto “Número 2”. (no importa su nombre) - Un cuadro
de texto con un 0 y con el nombre txtNumero1.
- Un cuadro de texto con un 0 y con el nombre txtNumero2.
- Una etiqueta con el nombre etiResultado.
- Un botón “Sumar” con el nombre btnSumar. - Un botón “Restar” con el
nombre btnRestar.
- Un botón “Borrar” con el nombre btnBorrar.

3. Aquí puedes ver la ventana en ejecución con el menú “Calcular” desplegado:

4. El objetivo de programa es el siguiente:

a. El usuario introducirá dos números en los cuadros de texto.

b. Si pulsa el botón Sumar, se calculará la suma.
c. Si pulsa el botón Restar, se calculará la resta.
d. Si pulsa el botón Borrar, se borrarán ambos cuadros de texto.
e. Si elige la opción del menú Calcular-Sumar entonces se calculará la
suma.

Ing. Jorge Arturo Sánchez Ponce Página 214

CECyTE 05 “Las Guacamayas”

f. Si elige la opción del menú Calcular-Restar entonces se calculará la

resta.
g. Si elige la opción del menú Calcular-Borrar entonces se borrarán
ambos cuadros de texto.
h. Si se pulsa enter en alguno de los dos cuadros de texto se debería
calcular la suma.

5. Este es un ejemplo en el que al activarse uno de varios eventos distintos se

tiene que ejecutar el mismo código. Observa el caso de la suma:

6. Para que el código esté “centralizado”, es decir, que aparezca solo una vez,
será necesario construir en la clase un método. Un método en java es el
equivalente de una función o procedimiento en C. Veamos como hacerlo:

7. Accede al código de tu programa a través del botón Source.

Ing. Jorge Arturo Sánchez Ponce Página 215

CECyTE 05 “Las Guacamayas”

8. Un buen sitio para programar tus procedimientos puede ser debajo del
constructor. Puedes distinguir fácilmente al constructor porque tiene el mismo
nombre que la clase que estás programando, o dicho de otro modo, tiene el
mismo nombre que la ventana que estás programando: VentanaCalculos.

9. Se va a programar un procedimiento que se encargue de recoger los valores

de los cuadros de texto. Calculará la suma de dichos valores, y luego
mostrará la suma en la etiqueta de resultados.

Los procedimientos en java tienen prácticamente la misma estructura que en

C. Programe lo siguiente:

Ing. Jorge Arturo Sánchez Ponce Página 216

CECyTE 05 “Las Guacamayas”

10. Si observas el código, es el típico procedimiento de C, cuya cabecera

comienza con void y el nombre que le hayas asignado (en nuestro caso
Sumar)

void Sumar() {
....
}

Si estudias las líneas del código, verás que lo que hace es recoger el
contenido de los dos cuadros de texto en dos variables de cadena llamadas
cad1 y cad2.

Luego convierte dichas cadenas en números que almacena en dos variables

enteras llamadas a y b.

Finalmente calcula la suma en una variable s y presenta el resultado en la

etiqueta etiResultado.

11. Hay que destacar que este código no pertenece ahora mismo a ningún evento
en concreto, por lo que no tiene efecto ninguno sobre el programa. Será
necesario pues asociar los eventos correspondientes con este procedimiento.

12. Interesa que al pulsar el botón “Sumar” se ejecute la suma, así pues entre en
el evento actionPerformed del botón “Sumar” y añada la siguiente línea:

Sumar();

13. Como también interesa que al pulsar la opción del menú “Calcular-Sumar” se
ejecute la suma, entre en el evento actionPerformed de la opción del menú
“Sumar” y añade de nuevo la siguiente línea:

Ing. Jorge Arturo Sánchez Ponce Página 217

CECyTE 05 “Las Guacamayas”

Sumar();
14. También se quiere que al pulsar la tecla enter en el cuadro de texto del
número 1 se ejecute la suma. Por lo tanto, en el evento actionPerformed del
cuadro de texto txtNumero1 hay que añadir la siguiente línea:

Sumar();

15. Y como también se quiere que al pulsar la tecla enter en el cuadro de texto
del número 2 se ejecute la suma, también habrá que introducir en su
actionPerformed la siguiente línea:

Sumar();

16. Antes de continuar, ejecute el programa, introduzca dos números, y

compruebe como se calcula la suma al pulsar el botón Sumar, o al activar la
opción del menú Calcular– Sumar, o al pulsar Enter en el primer cuadro de
texto, o al pulsar Enter en el segundo cuadro de texto.

En cada uno de los eventos hay una llamada al procedimiento Sumar, que es
el que se encarga de realizar la suma.

Ing. Jorge Arturo Sánchez Ponce Página 218

CECyTE 05 “Las Guacamayas”

17. En el caso de la resta sucede igual. Tenemos que varios eventos distintos
deben provocar que se realice una misma operación. En este caso tenemos lo
siguiente:

18. Para centralizar el código, crearemos un método Restar que se encargará de

hacer la resta de los números introducidos en los cuadros de texto. Este
método se puede colocar debajo del anterior método Sumar:

Ing. Jorge Arturo Sánchez Ponce Página 219

CECyTE 05 “Las Guacamayas”

19. El código de este procedimiento es prácticamente idéntico al del

procedimiento Sumar, así que no se comentará.

20. Ahora, es necesario que cuando se activen los eventos indicados antes, estos
hagan una llamada al procedimiento Restar para que se efectúe la resta. Así
pues, entre en el evento actionPerformed del botón “Restar” y añada esta
línea de código:

Restar();

21. Igualmente, entre en el evento actionPerformed de la opción del menú

“Calcular – Restar” y añada la misma llamada:

Restar();

22. Ejecute el programa y compruebe como funciona el cálculo de la resta, da

igual que lo haga pulsando el botón “Restar” o la opción del menú “Restar”.
Ambos eventos llaman al mismo método.

23. Finalmente se programará el borrado de los cuadros de texto a través del

botón “Borrar” y de la opción del menú “Borrar”. En primer lugar, programa el
siguiente método (puedes hacerlo debajo del método “Restar”):

Ing. Jorge Arturo Sánchez Ponce Página 220

CECyTE 05 “Las Guacamayas”

24. Ahora programa las llamadas al procedimiento borrar desde los distintos
eventos. En el evento actionPerformed del botón “Borrar” y en el evento
actionPerformed de la opción del menú “Borrar” programa la siguiente
llamada:

Borrar();

25. Ejecuta el programa y prueba su funcionamiento.

CONCLUSIÓN
En java se pueden programar procedimientos al igual que en C. Normalmente,
estos procedimientos se programarán debajo del constructor, y tienen la
misma estructura que en C.
Se puede llamar a un mismo procedimiento desde distintos eventos, evitando
así la repetición de código.

Práctica 16.- Diseño de Pantallas (Layouts y Paneles).

Práctica Guiada. Layouts

El problema de la distribución de elementos en las ventanas

Uno de los problemas que más quebraderos de cabeza da al programador es el

diseño de las ventanas y la situación de los distintos componentes en ellas.

Para diseñar más cómodamente las ventanas, Java proporciona una serie de
objetos denominados Layouts, que definen la forma que tendrán los elementos de
situarse en las ventanas.

Ing. Jorge Arturo Sánchez Ponce Página 221

CECyTE 05 “Las Guacamayas”

Así pues, un Layout define de qué forma se colocarán las etiquetas, botones,
cuadros de textos y demás componentes en la ventana que diseñamos.

“Diseño Libre”

1. Crea un nuevo proyecto en java.

2. Añade una etiqueta y un botón. Muévelos a la posición que se indica en la

imagen. Deben aparecer las líneas “guía” de color azul que se muestran:

3. Las líneas azules que aparecen indican con qué otro elemento está
relacionado un componente de la ventana. La situación de un elemento
dependerá siempre de la situación del otro.

Dicho de otra forma, las líneas azules indican las distancias que siempre se
respetarán. Observa la siguiente imagen:

Ing. Jorge Arturo Sánchez Ponce Página 222

CECyTE 05 “Las Guacamayas”

Tanto el botón como la

etiqueta estarán siempre
a esta distancia del borde
derecho de la ventana…

El botón siempre estará a

esta distancia de la
etiqueta…

El botón siempre estará a

esta distancia del borde
inferior de la ventana…

4. Ejecuta el programa y prueba a ensanchar (o achicar) la ventana por el lado

derecho y por el lado inferior. Debes observar como la etiqueta y el botón
mantienen sus distancias relativas entre sí y con los bordes derecho e inferior
de la ventana.

Siempre se mantienen las

distancias relativas
definidas en el diseño
aunque el tamaño de la
ventana cambie.

5. Este comportamiento de los elementos en la ventana viene dado por una

opción del NetBeans llamada Diseño Libre (Free Design)

El Diseño Libre permite que los elementos de una ventana mantengan una
distribución relativa da igual el tamaño que tenga la ventana. Dicho de otra
forma, los elementos se redistribuyen al cambiar el tamaño de la ventana.

El problema del Diseño Libre es el poco control que se tiene sobre los
elementos que se añaden a la ventana.

Ing. Jorge Arturo Sánchez Ponce Página 223

CECyTE 05 “Las Guacamayas”

Se puede observar como a veces los elementos no se colocan en la posición

que deseamos o como cambian de tamaño de forma inesperada. Todo esto
es debido a la necesidad de dichos elementos de mantener unas distancias
relativas con otros elementos de la ventana. Cuantos más elementos
tengamos en una ventana, más difícil será el colocarlos usando el Diseño
Libre.

“AboluteLayout. Posiciones Absolutas”

6. El Diseño Libre es la opción que está activada por defecto cuando se crea un
proyecto en NetBeans. Sin embargo, esta opción se puede cambiar por
distintos “Layouts” o “Distribuciones”.

7. En el Inspector de tu proyecto pulsa el botón derecho del ratón sobre el objeto

JFrame y activa la opción Establecer Disposición(Set Layout) –
AbsoluteLayout.

Ing. Jorge Arturo Sánchez Ponce Página 224

CECyTE 05 “Las Guacamayas”

8. El Inspector tendrá la siguiente forma ahora:

Como ves, aparece un objeto dentro del JFrame

llamado AbsoluteLayout. Este objeto define otra
forma de situar los elementos en la ventana.
Concretamente, la distribución AbsoluteLayout
permite al programador colocar cada elemento
donde él quiera, sin restricciones, sin tener en cuenta distancias relativas.

9. Sitúa la etiqueta y el botón donde quieras. Observa que no aparece ninguna

línea guía que defina distancias relativas:

10. La ventana de definir una distribución AbsoluteLayout es la facilidad para

colocar cada elemento en la ventana (no tendrás los problemas del Diseño
Libre). Sin embargo, la desventaja es que los elementos no mantienen una
distribución relativa respecto al tamaño de la ventana.

11. Ejecuta el programa y reduce su ancho. Observa lo que ocurre:

Ing. Jorge Arturo Sánchez Ponce Página 225

CECyTE 05 “Las Guacamayas”

Verás que los elementos de la ventana

son inamovibles aunque la ventana
cambie de tamaño. En cambio, en el
Diseño Libre los elementos intentaban
siempre estar dentro de la ventana.

“Distribución en línea. FlowLayout”

12. Practiquemos ahora con otro tipo de distribución. Accede al Inspector y pulsa
el botón derecho del ratón sobre el objeto JFrame. Activa la opción Establecer
Disposición – FlowLayout.

13. Observa como el layout “AbsoluteLayout”

es sustituido por la distribución “FlowLayout”.
Una elemento solo puede tener un tipo de
distribución a la vez.

14. Observa la ventana. Los elementos se han colocado uno detrás de otro. Se
han colocado “en línea”. Esto es lo que hace el “FlowLayout”. Fuerza a los
distintos elementos a que se coloquen en fila.

Ing. Jorge Arturo Sánchez Ponce Página 226

CECyTE 05 “Las Guacamayas”

15. Si seleccionas el FlowLayout en el Inspector, podrás acceder a sus

propiedades (los layout son objetos como los demás) Una de las propiedades
del FlowLayout se llama alineación y permite que los elementos estén
alineados a la izquierda, derecha o centro. El FlowLayout tiene una alineación
centro por defecto.

16. El FlowLayout no permite controlar la posición de los elementos en la

ventana, pero sí procura que los elementos estén siempre visibles aunque la
ventana se cambie de tamaño. Ejecuta el programa y observa el
comportamiento del FlowLayout al agrandar o achicar la ventana:

En el FlowLayout, los elementos

intentan siempre estar dentro de
la ventana, aunque esta se
cambie de tamaño…

“Distribución en rejilla. GridLayout”

17. Otra distribución que se puede usar es la distribución GridLayout. Esta

distribución coloca a los elementos en filas y columnas, como si formaran

Ing. Jorge Arturo Sánchez Ponce Página 227

CECyTE 05 “Las Guacamayas”

parte de una tabla. Al añadir esta distribución es necesario indicar cuantas

filas y columnas tendrá la rejilla.

18. Cambia el layout del JFrame por un GridLayout:

19. Marca el GridLayout y cambia sus

propiedades Filas y Columnas. Asigna a la
propiedad Filas un 2 y a la propiedad
Columnas un 3.

20. Al asignar 2 filas y 3 columnas al GridLayout, conseguiremos que los

elementos de la ventana se distribuyan en una tabla como la siguiente:

Los distintos elementos se adaptarán al espacio que tienen asignado, y

cambiarán de tamaño.

21. Ya que solo tienes dos elementos en la ventana (una etiqueta y un botón),
añade otros cuatro elementos más (cuatro botones) para observar como se
distribuyen en la cuadrícula.

Ing. Jorge Arturo Sánchez Ponce Página 228

CECyTE 05 “Las Guacamayas”

22. En un GridLayout, los elementos estarán situados siempre en una casilla de la

rejilla, ocupando todo su espacio. El programador no tiene mucho control
sobre la disposición de los elementos.

23. Ejecuta el programa y agranda y achica la ventana. Observa como los

elementos siempre mantienen su disposición en rejilla y siempre aparecen
dentro de la ventana aunque el tamaño de esta varíe.

Con un GridLayout los

elementos aparecen en
filas y columnas.

Siempre aparecen dentro

de la ventana aunque el
tamaño de esta cambie.

“BorderLayout”

Ing. Jorge Arturo Sánchez Ponce Página 229

CECyTE 05 “Las Guacamayas”

24. Otra de las distribuciones posibles es la llamada BorderLayout. Esta

distribución coloca los elementos de la ventana en cinco zonas:

- Zona norte (parte superior de la ventana)

- Zona sur (parte inferior de la ventana)
- Zona este (parte derecha de la ventana) - Zona oeste (parte
izquierda de la ventana) - Zona centro.

25. Haz clic con el derecho sobre el JFrame y asigna una distribución
“BorderLayout”.

26. Para poder entender el funcionamiento del BorderLayout, se recomienda que

el JFrame contenga únicamente 5 botones (elimine los elementos que tiene
ahora y añada cinco botones)

La ventana tendrá un aspecto parecido al siguiente:

Ing. Jorge Arturo Sánchez Ponce Página 230

CECyTE 05 “Las Guacamayas”

27. Como se puede

observar, cada botón se
ha colocado en una
zona, y su tamaño ha
variado hasta ocupar la
zona entera. Tenemos
un botón en el norte,
otro al sur, uno al este,
otro al oeste y uno en el
centro.

El programador no tiene mucho control sobre la disposición de los elementos

en la ventana al usar esta distribución.

28. Ejecuta el programa y observa como los elementos siempre se mantienen

dentro de la ventana aunque esta cambie de tamaño.

Con un GridLayout los

elementos aparecen
zonas.

Siempre aparecen dentro

de la ventana aunque el
tamaño de esta cambie.

Ing. Jorge Arturo Sánchez Ponce Página 231

CECyTE 05 “Las Guacamayas”

CONCLUSIÓN
El diseño de la ventana viene definido por los Layouts o distribuciones.

Diseño Libre – Esta distribución viene activada por defecto en el NetBeans, y

define una distribución de componentes en la que se respetan las distancias
entre ellos cuando la ventana cambia de tamaño.

AbsoluteLayout – En esta distribución el programador puede colocar cada

elemento en la posición que desee de la ventana. Los distintos elementos
mantienen su posición aunque la ventana cambie de tamaño, lo que puede
hacer que si la ventana se reduce de tamaño algunos elementos no se vean.

FlowLayout – En esta distribución los elementos se colocan uno detrás de

otro. Los elementos intentarán estar dentro de la ventana aunque esta se
reduzca de tamaño.

GridLayout – Esta distribución coloca a los elementos en filas y columnas. Los

elementos siempre estarán dentro de la ventana aunque esta se reduzca de
tamaño.

BorderLayout – Esta distribución coloca a los elementos en zonas. Los

elementos siempre estarán dentro de la ventana aunque esta se reduzca de
tamaño.

Ing. Jorge Arturo Sánchez Ponce Página 232

CECyTE 05 “Las Guacamayas”

Práctica Guiada. Layouts y paneles

Técnicas de distribución de elementos en las ventanas

A la hora de diseñar una ventana se tienen en cuenta dos cosas:

- La facilidad a la hora de colocar muchos 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 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
introduce 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.

Ing. Jorge Arturo Sánchez Ponce Página 233

CECyTE 05 “Las Guacamayas”

JFrame
(BorderLayout o GridLayout)

JPanel 1 JPanel 2 etc…

(Diseño Libre, AbsoluteLayout o (Diseño Libre, AbsoluteLayout o
FlowLayout) FlowLayout)

Componentes Componentes

1. Crea un nuevo proyecto en java. Podemos realizarlo dentro del proyecto

anterior unicamente en un paquete diferente.

Se pretende crear un proyecto con una ventana de diseño complejo. Para ello
sigue los siguiente pasos:

2. En primer lugar, asigna un BorderLayout al JFrame:

3. El BorderLayout divide la ventana principal en zonas. Ahora añade un panel

(JPanel) a la zona norte de la ventana.

Ing. Jorge Arturo Sánchez Ponce Página 234

CECyTE 05 “Las Guacamayas”

Panel en la zona norte.

4. Cambia el nombre a este panel y llámalo panelTitulo, ya que contendrá el

nombre del programa.

5. Añade otro panel, esta vez a la parte central. El panel se llamará panelDatos:

Panel Central

Ing. Jorge Arturo Sánchez Ponce Página 235

CECyTE 05 “Las Guacamayas”

6. Añade un nuevo panel en la parte sur de la ventana. Su nombre será

panelEstado.

NOTA. A veces resulta complicado agregar un panel en una zona de la ventana

cuando tenemos un BorderLayout. Puedes entonces hacer clic con el derecho
sobre JFrame en el Inspector y activar la opción Agregar desde paleta – Swing –
JPanel.

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

Ing. Jorge Arturo Sánchez Ponce Página 236

CECyTE 05 “Las Guacamayas”

El panel debería estar situado finalmente en el sur de la ventana:

8. El Inspector tendrá la siguiente forma ahora:

Ing. Jorge Arturo Sánchez Ponce Página 237

CECyTE 05 “Las Guacamayas”

9. Añade ahora tu solo un panel en la zona oeste llamado panelBotonera y otro

en la zona esta llamado panelVerificacion. El Inspector debería tener la
siguiente forma al finalizar:

10. Cada panel puede ser diseñado de forma individual, simplemente haciendo
doble clic sobre él. Así pues, empezaremos diseñando el panel
panelBotonera. Haz doble clic sobre él.
11. En la parte izquierda del NetBeans aparecerá únicamente el panelBotonera.
Agrándalo para que tenga la siguiente forma:

12. 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 con el derecho sobre él en el Inspector. El Inspector
debería quedar así:

13. Ahora añade cuatro botones al panel. Observa como tienes

Ing. Jorge Arturo Sánchez Ponce Página 238

CECyTE 05 “Las Guacamayas”

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)
14. Ahora diseña el panel panelVerificación haciendo doble clic
sobre él.

15. Asígnale también un layout AbsoluteLayout.

16. Coloca en él cuatro casillas de verificación. El aspecto del

panel al terminar debe ser parecido al siguiente:

Y el Inspector debe tener un estado similar a

este:

17. Ahora se diseñará el panelTitulo. Haz doble clic sobre él.

18. En este caso se le añadirá un FlowLayout. Recuerda que este layout hace
que cada elemento se coloque uno detrás de otro.

19. Añade al panel dos etiquetas como las que siguen. Ponle un borde a cada
una:

Ing. Jorge Arturo Sánchez Ponce Página 239

CECyTE 05 “Las Guacamayas”

El Inspector tendrá este aspecto en lo que se refiere al panelTitulo...

20. El panelEstado lo diseñaremos sin asignar ningún layout, es decir, usando el

Diseño Libre. En él añadiremos tres 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.

21. El panelDatos lo vamos a complicar un poco. Haz doble clic sobre él para
diseñarlo y asígnale un GridLayout.

22. Marca el GridLayout y asígnale 2 filas y 2 columnas, para que interiormente

tenga forma de una rejilla como esta:

Ing. Jorge Arturo Sánchez Ponce Página 240

CECyTE 05 “Las Guacamayas”

23. A cada una de las divisiones del GridLayout del panelDatos le asignaremos
un nuevo panel. Añade al panelDatos cuatro 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 Añadir desde paleta – Swing – JPanel.

El aspecto del inspector debería ser como el que sigue, en lo que se refiere al
panelDatos:

24. Asignaremos a cada uno de los cuatro paneles los siguientes nombres:
panelEtiqueta1, panelCuadro1, panelEtiqueta2, panelCuadro2. El panel
quedará así en el Inspector.

Así pues, el panel panelDatos tiene forma

de rejilla con cuatro celdas, y en cada celda hay un panel. Puede imaginarse
el panelDatos así:

panelDatos

Ing. Jorge Arturo Sánchez Ponce Página 241

CECyTE 05 “Las Guacamayas”

PanelEtiqueta1 PanelCuadro1

PanelEtiqueta2 PanelCuadro2

25. Ahora añada al panelEtiqueta1 y al panelEtiqueta2 estas etiquetas. Y al

panelCuadro1 y panelCuadro2 estos cuadros de textos. El panel panelDatos
debe quedar así:

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

Ing. Jorge Arturo Sánchez Ponce Página 242

CECyTE 05 “Las Guacamayas”

CONCLUSIÓN

Para el diseño de ventanas muy complejas, ser 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.

Ing. Jorge Arturo Sánchez Ponce Página 243