Unidad 2. Componentes Graficos

Programacin orientada a objetos II
Unidad 2. Componentes grficos
Ingeniera en Desarrollo de Software

4o semestre
Programa de la asignatura:
Clave:
Ingeniera: TSU:
15142421 / 16142421
Universidad Abierta y a Distancia de Mxico
Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

ndice
Unidad 2. Componentes grficos ....................................................................................... 3
Presentacin de la Unidad ................................................................................................. 3
Propsito ........................................................................................................................... 3
Competencia especfica..................................................................................................... 4
2.1. Contenedores ............................................................................................................. 4
2.1.1. Paneles .................................................................................................................... 5
2.1.2. Marco ....................................................................................................................... 6
2.2. Controles .................................................................................................................. 12
2.2.1. Etiqueta.................................................................................................................. 12
2.2.2. Botones.................................................................................................................. 14
2.2.3. Casilla de activacin .............................................................................................. 17
2.2.4. Lista desplegable ................................................................................................... 19
2.2.5. Campo de texto...................................................................................................... 21
2.2.6. rea de texto ......................................................................................................... 24
2.2.7. Separador .............................................................................................................. 26
2.2.8. Spinner .................................................................................................................. 28
2.2.9. rbol ...................................................................................................................... 30
2.3. Men......................................................................................................................... 41
2.3.1. Barra de men ....................................................................................................... 41
2.3.2. Elemento de men ................................................................................................. 43
2.3.3. Men emergente .................................................................................................... 45
2.3.4. Separador .............................................................................................................. 47
2.4. Ventanas .................................................................................................................. 48
2.4.1. Cuadros de dilogo ................................................................................................ 48
2.4.2. Ventanas independientes y sus cambios ............................................................... 52
Cierre de la Unidad .......................................................................................................... 53
Cara saber ms ............................................................................................................... 54
Fuentes de consulta ........................................................................................................ 55

Presentacin de la Unidad
Bienvenido(a) a la unidad dos, en donde examinars los componentes que se utilizan
para crear aplicaciones grficas funcionales. Estos componentes son de suma
importancia debido a que son la base para desarrollar sistemas complejos al conectarlos
con bases de datos y permitir el almacenaje de informacin, que es el tema que se ver
en la siguiente unidad.
Por lo tanto, en esta unidad debers poner atencin a la sintaxis del uso de los
componentes grficos, porque te ayudar a comprender mejor cmo se construyen las
interfaces grficas.
No olvides consultar las dudas que te surjan con tu Docente en lnea para una mejor
comprensin de los temas y dar continuidad a tu estudio de POO2.
Propsito
Al trmino de esta unidad logrars:
Identificar diferentes tipos de componentes grficos

y su codificacin.
Comprender la sintaxis de creacin de diferentes
componentes grficos, as como la manipulacin de
sus propiedades.
Unir diferentes componentes grficos en una sola
clase para crear interfaces grficas.
Crear programas con interfaz grfica y manipularlos
mediante eventos

Competencia especfica
Utilizar las clases y estructuras de los

componentes grficos para crear
aplicaciones con interfaces grficas,
mediante el lenguaje de programacin Java.
2.1. Contenedores
Las aplicaciones ms utilizadas cuentan con interfaz GUI (siglas en ingls) que en
espaol significa interfaz grfica de usuario; esta interfaz es la carta de presentacin de la
aplicacin, que ofrece al usuario una interaccin; esa apariencia debe programarse
mediante componentes grficos. Para tener una idea ms clara al respecto, tan slo
observa el navegador en el que te encuentras revisando este material, en el podrs
distinguir que en la parte superior cuenta con un men, que tambin tiene algunos
botones, seguramente tambin cuenta con un espacio para escribir texto, estos elementos
que se acaban de mencionar son justamente componentes grficos.
Todos los componentes grficos son objetos y para declararlos como tales se debe
sealar la clase a la que pertenece el componente en cuestin e ir utilizando los mtodos
que tienen predefinidos para configurar sus caractersticas. Todos esos elementos se
encuentran en el paquete javax.swing (algunos pertenecen a java.awt) y son subclase de
JComponent, por esta razn se deber importar dicha clase. Una clase es una
abstraccin que define un tipo de objeto especificando qu propiedades y operaciones
disponibles va a tener.
Finalmente, slo falta mencionar que los contenedores son supracomponentes grficos
que, precisamente como su nombre lo indica, ayudan a contener agrupar y organizar
otros componentes grficos dentro de ellos, esto se hace para tener un mejor control
sobre la ubicacin de dichos componentes en la interfaz grfica que se est
construyendo.
En los siguientes subtemas, Paneles y Marco, se revisar cmo crear contenedores,
as como sus caractersticas y propiedades configurables.

2.1.1. Paneles
El primer tipo de contenedores que se revisa son los paneles, stos ayudan a definir
secciones dentro de una interfaz grfica.
Los paneles son secciones que pueden configurarse en diferentes tamaos, colores,
mrgenes, etctera; sirven para segmentar la apariencia grfica de una aplicacin, porque
pueden crear divisiones en la GUI.
Las propiedades de los paneles son muy diversas, pero entre las que ms destacan son
los bordes y color de fondo, debido a que son estas caractersticas las que ayudan a
segmentar una aplicacin.
En seguida podrs observar un ejemplo que muestra la sintaxis para construir paneles y
su uso.
Observa el siguiente ejemplo de cdigo 1:
Ejemplo de cdigo 1. Declaracin de un panel
package GUI;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.*;
/**
* @author ESAD
*/
public class panel {
public static void main (String args[]){
JFrame frame=new JFrame("Marco / Frame");
frame.setLocation(200, 200);
frame.setVisible(true);
frame.setSize(500, 500);
frame.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e){

System.exit(0);
}
});
JPanelpnl = new javax.swing.JPanel();
pnl.setBackground(Color.CYAN);
JPanel pnl2 = new javax.swing.JPanel();
pnl2.setBackground(Color.MAGENTA);
pnl2.setBorder(javax.swing.BorderFactory.createTitledBorder("Borde con titulo"));
JPanel pnl3 = new javax.swing.JPanel();
pnl3.setBackground(Color.ORANGE);
frame.add(pnl, BorderLayout.PAGE_START);
frame.add(pnl2, BorderLayout.CENTER);
frame.add(pnl3, BorderLayout.PAGE_END);
}
}
A continuacin se explicar el cdigo anterior.
En azul aparece la definicin del paquete donde se encuentra la clase y la
importacin de bibliotecas, recuerda que esto es importante, ya que al agregar
bibliotecas se indica que se usarn clases y mtodos predefinidos, tambin se
encuentra la declaracin de la clase y el mtodo main, as como el cierre de las
llaves correspondientes.
La seccin verde declara el marco sobre el que se mostrar el panel.
La seccin morada declara tres paneles; observa que se declaran como cualquier
objeto clasenombre=new constructor(parametros); a cada uno se le dio un color de
fondo diferente, y uno de ellos adems cuenta con un borde.
Por ltimo en la seccin roja se agregan los panales al marco.
Como pudiste observar, se habl del marco (la ventana) que es el contenedor principal,
donde se encontrarn los paneles, el siguiente tema ayudar a comprender tanto la
definicin de un marco como su respectivo ejemplo.
2.1.2. Marco
En el tema anterior se vieron los paneles, que deben ubicarse dentro de marcos, los
cuales son comnmente llamados frames, tal como el nombre de la clase los define
(JFrame). Los marcos son los contenedores principales para crear aplicaciones grficas,
ya que cualquier otro componente grfico que se cree, debe estar dentro de un marco.

Nota: el marco es la ventana sobre la que se construye la apariencia grfica de un

programa.
Vase el siguiente ejemplo de cdigo 2, donde:
Se sombrea en azul la definicin del paquete, clase utilizada, autor, as como la

declaracin de la clase y el mtodo.
En sombreado morado se coloca el cdigo para declarar el marco, que como se
ha dicho anteriormente, los componentes grficos son objetos y se declaran como
tal con la palabra reservada new, el constructor para crear marcos recibe como
parmetro el ttulo que tendr el marco. Una vez declarado el marco que se ha
llamado frame, se configuran sus atributos mediante mtodos que ya se
encuentran previamente definidos en la clase JFrame. En este caso se
configuraron tres atributos:
o setLocation: recibe como parmetro dos enteros que son las coordenadas
x, y (en pixeles), para indicar dnde se ubicar el marco, respecto al ancho
y alto de la pantalla, toma en cuenta que la posicin 0,0 es la esquina
superior izquierda.
o setVisible: recibe como parmetro un valor booleano, en este caso true
para indicar que el marco debe ser visible.
o setSize: este mtodo recibe dos valores enteros que indican el ancho y alto
del marco, en este mismo orden.
Ejemplo de cdigo 2. Declaracin de un marco

package GUI;
import javax.swing.JFrame;
/**
* @author ESAD
*/
public class marco {
}
}
Ahora que ya identificaste las partes del cdigo 2 de declaracin de un marco, ste
generar una salida, como la que se muestra en la siguiente imagen, de la cual se
recomienda cambiar el tamao y posicin del marco y volver a ejecutar el cdigo para ir
comprendiendo mejor sus propiedades.

Salida de pantalla del marco
Una vez definido el marco para agregar elementos dentro de ste, se utiliza el mtodo
add, y un administrador de diseo llamado layout, esto permite acomodar en algn orden
todos los componentes que se agreguen al marco.
Como ya se mencion anteriormente para construir interfaces grficas se utilizan clases
ya predefinidas; las bibliotecas de clases Java para el desarrollo de interfaces grficas de
usuario son Swing y AWT, stas proporcionan los siguientes administradores de diseo
para el acomodo de componentes (Oracle, 2012):
BorderLayout: esta distribucin acomoda los componentes en mximo 5

ubicaciones del frame, stas son: arriba (PAGE_START), abajo (PAGE_END),
izquierda (PAGE_START),derecha (PAGE_END) y centro (PAGE_CENTER), tal
como se muestra en la siguiente imagen:

BoxLayout: esta distribucin acomoda todos los componentes uno tras de otro en
una sola fila o columna, segn el espacio disponible, en la siguiente imagen se
puede observar un ejemplo.
CardLayout: permite implementar un rea que contiene diferentes componentes en

diferentes momentos, observa el siguiente ejemplo:

FlowLayout: esta distribucin coloca los elementos por filas, de izquierda a

derecha, hasta acabar con el espacio, entonces crea una nueva fila debajo, como
se muestra a continuacin:
GridLayout: esta distribucin acomoda los componentes en filas y columnas,

ajusta los elementos a que tengan un tamao similar, como se ve en la siguiente
imagen:
GridBagLayout: alinea los elementos en filas y columnas, como el anterior, pero

con la diferencia de que permite que un componente cubra varias filas y/o
columnas, a continuacin se presenta un ejemplo en la siguiente imagen:
10

GroupLayout: maneja un diseo de los elementos verticales y horizontales de

manera separada, por lo que cada una cuenta con una configuracin
independiente, tal como se ver continuacin:
SpringLayout: esta distribucin permite definir la relacin de espacio entre los

componentes y sus bordes, como se muestra en el siguiente ejemplo.
11

De forma predeterminada cada contenedor tiene asignado un diseo del tipo

BorderLayOut, tambin se puede dejar a un frame sin administrador de estilo, de manera
que los elementos que se agreguen se posicionen en base a coordenadas.
Hasta este punto se han visto a los contenedores (paneles y marcos), as como las
distribuciones (layout) para el acomodo de componentes dentro de los contenedores. En
los temas siguientes se revisarn los dems componentes grficos.
2.2. Controles
En los siguientes apartados se hablar sobre el tema controles, con ello se pueden crear
apariencias grficas ms sofisticadas para los programas que se realicen.
Como resumen del apartado anterior, se vieron contenedores, que son donde se colocan
los componentes. En este segundo subtema se vern esos componentes grficos, ya que
son aquellos elementos que ayudan a conformar la apariencia de una aplicacin.
2.2.1. Etiqueta
El primer componente de los controles que se abordar es uno de los ms utilizados para
colocar textos en la apariencia grfica de una aplicacin, sin que se requiera modificarlos.
Por lo general este componente es utilizado para el nombrado de campos.
12

Al igual que todos los componentes las etiquetas tienen una gran cantidad de
propiedades, entre las ms comnmente utilizadas se encuentra la tipografa de la fuente,
as como el color.
Como ejemplo de la creacin de etiquetas, revisa el siguiente cdigo 3, en donde se
representa el uso de sus propiedades:
Ejemplo de cdigo 3. Declaracin y uso de etiquetas
package GUI;
importjavax.swing.*;
/**
* @author ESAD
*/
public class etiquetas {
@Override
System.exit(0);
}
});
JLabel etiq1= new javax.swing.JLabel();

etiq1.setText("Ejemplo1");
etiq1.setFont(new java.awt.Font("Calibri", 1, 11));
13

etiq2.setForeground(Color.yellow);
etiq3.setVisible(false);
frame.add(etiq1, BorderLayout.PAGE_START);
frame.add(etiq2, BorderLayout.CENTER);
frame.add(etiq3, BorderLayout.PAGE_END);
}
}
El ejemplo anterior se encuentra conformado de la siguiente manera:
Se sombrea en azul la definicin del paquete, clases a utilizar, autor, as como la
En sombreado verde se tiene la creacin del marco sobre el que se colocarn las
etiquetas.
En sombreado morado se tienen las etiquetas, en este ejemplo se crearon tres
etiquetas, a las que se les coloc un texto (setText) y diferentes propiedades a
cada una, de las cuales:
o En la primera etiqueta se configur el tipo de letra; si no se define una letra
las etiquetas tienen por defecto la letra Dialog. Para configurar la letra se
deben enviar como parmetro el tipo de letra, el estilo deseado y el
tamao.
o En la segunda etiqueta se configur su color de letra.
o La tercera etiqueta se coloc su visibilidad en falso, por lo que existe pero
en la apariencia grfica no se ve.
En sombreado rojo se tiene la adicin de las etiquetas al marco.
Como has visto las etiquetas pueden configurarse para que personalices su apariencia y
tambin puedes investigar sobre otras propiedades para que puedas ver cmo funcionan
al ejecutar el programa. Se te invita a continuar con el siguiente tema, para que sigas
involucrndote con el manejo de componentes grficos.
2.2.2. Botones
El tema que se tratar en este apartado es el de botones. En este se abordar cmo se
construyen y se manipulan sus propiedades, para que puedas ir construyendo interfaces
grficas con la funcionalidad (manejo de eventos) que los botones proporcionan.
14

Estos componentes son tpicamente utilizados para recibir eventos y desencadenar el
funcionamiento de las aplicaciones. Por lo general el texto que tienen los botones indica la
accin que desencadenar.
Revise el siguiente ejemplo, donde se podr observar la creacin de botones, as como la
personalizacin de sus propiedades:

En sombreado verde se tiene la creacin del marco sobre el que se colocarn las
etiquetas.
En sombreado morado se tienen los botones, en donde veras que:
o El primer botn configura la propiedad setMnemonic, que indica la letra con
la que se podr colocar el foco en ese elemento. Realizando alt+b (el
mnemnico especificado).
o El segundo botn configura el color de la letra.
o Y el tercer botn slo tiene agregado un texto.
En sombreado rojo se tiene la adicin de los botones al marco.
Ejemplo de cdigo 4. Declaracin y uso de botones

package GUI;
/**
* @author ESAD
*/
public class marco {
@Override
15

System.exit(0);
}
});
JButtonbtn = new javax.swing.JButton();

btn.setText("Boton1");
btn.setMnemonic('B');
JButton btn2 = new javax.swing.JButton();
btn2.setText("Boton2");
btn2.setBackground(Color.red);
JButton btn3 = new javax.swing.JButton();
btn3.setText("Boton3");
frame.add(btn, BorderLayout.LINE_START);
frame.add(btn2, BorderLayout.CENTER);
frame.add(btn3, BorderLayout.LINE_END);
}
}
Lo importante de los botones es que son el
componente para el manejo de los eventos ms
utilizado, por este motivo, siempre que se crea
un botn se debe tener asociado el manejo del
evento que desencadenar la ejecucin de la
accin que deba realizar la aplicacin.
Antes de continuar con el siguiente componente
(casilla de activacin) es importante que
recuerdes que en los botones debes hacer el
manejo de eventos, para que estos botones
redireccionen el flujo del programa hacia el
mtodo que tratar la informacin, y as el
programa funcione como se requiere.
16

2.2.3. Casilla de activacin
En las ocasiones en que requieres permitir que
un usuario realice selecciones mltiples de una
o varias opciones de un conjunto de opciones
dado, es til recurrir a las casillas de activacin.
Las casillas de activacin son componentes
grficos utilizados para realizar selecciones
mltiples, cada casilla puede tomar slo dos
valores; Verdadero o Falso, es decir, slo se
sabr si se activ o no.
Para comprender mejor lo dicho observa el
siguiente ejemplo de cdigo 5 donde:

Sombreado verde se tiene la creacin del marco sobre el que se colocarn las
etiquetas.
Sombreado morado se tienen las casillas de activacin, en el que observars que:
o La primer casilla slo tiene configurado el texto con el que aparecer.
o La segunda casilla tiene su propiedad de seleccionado en activado
(setSelected(true); ), por lo que aparecer la casilla activa al ejecutar el
cdigo. Recuerda stos componentes slo pueden tener dos valores
Verdadero/ Falso (True/False).
o La tercera casilla tiene un texto y se configuro de manera que ste se vea
en rojo.
En sombreado rojo se tiene la adicin de las casillas de activacin al marco.
Ejemplo de cdigo 5. Declaracin y uso de casillas de activacin

package GUI;
/**
* @author ESAD
*/
17

public class casilla {

@Override
System.exit(0);
}
});
JCheckBox check1 = new javax.swing.JCheckBox();
check1.setText("Chek1");
check2.setSelected(true);
check3.setForeground(Color.red);
frame.add(check1, BorderLayout.NORTH);
frame.add(check2, BorderLayout.SOUTH);
frame.add(check3, BorderLayout.CENTER);
}
}
El uso de las casillas de activacin como en el ejemplo anterior requiere que, al estar
codificando un programa, se detecte si la casilla ha sido activada, esto se hace mediante
un mtodo de la clase JCheckBox, el cual se muestra a continuacin:
Ejemplo de cdigo 6. Deteccin de activacin de casilla
casilla.isSelected();
18

Este mtodo retornar un valor booleano, para saber si se activ (true) o no (false), por lo
general este resultado suele acompaarse de una condicin (if) para indicar que deber
realizar en programa en cada caso.
Por ltimo, slo recuerda que si quieres que los usuarios realicen elecciones sobre
mltiples opciones, debes utilizar casillas de activacin, en el caso que slo quieres que
elijan un valor, utiliza listas desplegables, que es el siguiente subtema.
2.2.4. Lista desplegable

En las ocasiones en que requieres que un usuario
introduzca informacin a un programa, pero esta
informacin ya est predefinida, como los nombres
de los estados, y quieres evitar errores de tecleo
por parte de los usuarios es recomendable que
utilices el componente grfico lista desplegable.
Este componente es precisamente una lista de
opciones, de las cuales el usuario slo podr elegir
una opcin.
Las listas desplegables ofrecen al usuario varias
opciones de eleccin para un mismo concepto,
pudiendo elegir slo uno de ellos.
Revisa el siguiente ejemplo de cdigo 7, donde se
crea una lista desplegable:

En sombreado verde se tiene la creacin del marco sobre el que se colocar la
lista.
En sombreado morado se tiene el ejemplo, donde se cre la lista y se le aadi un
modelo, indicando lo que debe estar visible, como:
o El modelo que es la configuracin de los elementos que deben estar dentro
de la lista.
o Si no se agregan las opciones al modelo, stas no pueden agregarse
directamente a la lista, porque la lista slo recibe modelos.
En sombreado rojo se tiene la adicin de la lista al marco.
19

Ejemplo de cdigo 7. Declaracin y uso de lista desplegable
package GUI;
/**
* @author ESAD
*/
public class lista {
@Override
System.exit(0);
}
});
JComboBox lista1= new javax.swing.JComboBox();
lista1.setModel(new javax.swing.DefaultComboBoxModel(new String[] { "UNO", "DOS",
"TRES" }));
lista1.setVisible(true);
frame.add(lista1);
}
}
Para conocer que elemento de la lista es el que se ha elegido, la clase JComboBox
cuenta con dos opciones, que se muestran a continuacin:
Ejemplo de cdigo 8. Deteccin del elemento seleccionado
lista.getSelectedItem().toString();
lista.getSelectedIndex();
20

La primer opcin es obteniendo el elemento (item), el cual es seleccionado y convertido a
cadena (String). La conversin es necesaria debido a que el mtodo getSelectedItem()
retorna un valor tipo objeto, y por lo general lo que se requiere es el texto elegido, por ello
se hace la conversin toString().
La segunda opcin es que devuelva el ndice del elemento elegido, es decir el orden en
que est en la lista, y no el texto que aparece, este mtodo devuelve entonces un entero.
Toma en cuenta que si quieres que el usuario slo elija de una lista predefinida, lo ms
conveniente es que utilices el componente grfico lista desplegable. Pero si quieres que el
usuario sea quien ingrese la informacin directamente, puedes utilizar campos de texto,
que es el siguiente tema.
2.2.5. Campo de texto

Los campos de texto son uno de los componentes grficos ms utilizados para la creacin
de los GUI, los elementos que se han visto anteriormente requieren de trabajo para su
configuracin y obtencin de datos, pero en particular los campos de texto deben tambin
contar con algn tipo de validacin de la informacin que se est recibiendo.
Los contenedores cuentan con componentes, las
etiquetas sirven para colocar textos inamovibles
en la GUI, los botones reciben eventos, las
casillas de activacin se activan o no, las listas
desplegables tiene algn elemento de la lista
elegido, pero el campo de texto proporciona
libertad al usuario de ingresar informacin
como l lo requiera, ya sea correcta o no, por ello
es muy importante realizar alguna validacin a
los datos ingresados mediante este componente.
Primero se revisar el siguiente ejemplo de cdigo 9, se describe la implementacin de
cajas de texto:
Se sombrea en azul la definicin del paquete, clases a utilizar, el autor, as como

la declaracin de la clase y el mtodo.
En sombreado verde se tiene la creacin del marco en el que se colocarn los
campos de texto.
En sombreado morado se tiene la declaracin de dos campos de texto, al primero
slo se le agrega un texto, y al segundo se le configura el tipo de letra y color.
En sombreado rojo se tiene la adicin del campo de texto al marco.
21

Ejemplo de cdigo 9. Declaracin y uso de campo de texto
package GUI;
/**
* @author ESAD
*/
public class campoTexto {
@Override
System.exit(0);
}
});
JTextField campo1=new JTextField();
campo1.setText("Caja de texto 1");
JTextField campo2=new JTextField();
campo2.setText("Caja de texto 2");
campo2.setFont(new java.awt.Font("Tunga", 1, 24));
campo2.setForeground(new java.awt.Color(255, 51, 51));
frame.add(campo1, BorderLayout.LINE_START);
frame.add(campo2, BorderLayout.LINE_END);
}
}
El ejemplo anterior muestra slo la configuracin de los campos de texto. Ahora se
revisar cmo obtener lo que el usuario haya ingresado y tambin como validarlo.
22

Es importante resaltar que el campo de texto tiene dentro una cadena, porque as est
estipulado en su definicin. Revisa los siguientes tres ejemplos:
-En el ejemplo 1, sombreado azul, se debe pensar que se requiere obtener un texto del
usuario, entonces se declara una cadena, donde se colocar lo que se obtuvo del campo
de texto (getText()).
-En el ejemplo 2, sombreado morado, se debe pensar que lo que debe ingresar el usuario
es un nmero entero, entonces se declara un entero, se obtiene el texto y se convierte en
entero (Integer.parseInt).
-En el ejemplo 3, sombreado verde, se debe pensar que se requiere que lo que ingrese el
usuario sea un texto de 10 letras; se obtiene lo que el usuario ingreso (getText().), a eso
se le obtiene el tamao (length()) y se valida que ese tamao sea igual a 10.
Ejemplo de cdigo 10. Declaracin y uso de campo de texto
String texto=campoTexto1.getText();
intentrada= Integer.parseInt(campoTexto2.getText());
if (campoTexto3.getText().length() == 10){
// cdigo si la condicion cumple
}
As como esos tres ejemplos pueden darse muchos otros, todo depende de lo que se
requiera del programa, por lo que se debe poner mucha atencin en lo que se necesita
para poder programarlo adecuadamente. Los campos de texto como has visto reciben
informacin del usuario, de la cual, tpicamente reciben informacin breve, para las
ocasiones en que requieres mostrar o recibir una cantidad mayor de informacin debes
utilizar otro componente llamado rea de texto, el cual ser revisado en la siguiente
seccin.
23

2.2.6. rea de texto
Este componente es muy similar al anterior,
la diferencia radica en que un campo de texto
se utiliza para la recepcin de textos
pequeos, es decir de una sola lnea.
Mientras que el rea de texto puede recibir
varias lneas de texto y obviamente se utiliza
para la recepcin de textos grandes.
Es importante que se comprenda el siguiente ejemplo de cdigo 11, en donde:

En sombreado verde se tiene la creacin del marco sobre el que se colocar el
rea de texto.
En sombreado morado se tienen dos reas de texto, en donde la primera tiene
configurado un tamao de 20 columnas, es decir que todo el texto que se escriba
se acomodar a ese ancho, la segunda rea tiene un pequeo texto y se dej su
propiedad de edicin en falso, lo que indica que el texto ah no se puede editar,
esto es til para cuando se quiere mostrar un texto de informacin al usuario sin
brindarle la posibilidad de modificarlo.
En sombreado rojo se tiene la adicin del rea de texto al marco.
Ejemplo de cdigo 11. Declaracin y uso de rea de texto

package GUI;
/**
* @author ESAD
*/
public class areaTexto {
24

@Override
System.exit(0);
}
});
JTextArea area1= new JTextArea();
area1.setColumns(10);
area1.setText("Area de texto 1");
JTextArea area2= new JTextArea();
area2.setColumns(20);
area2.setText("Area de texto 2");
area2.setEditable(false);
frame.add(area1, BorderLayout.LINE_START);
frame.add(area2, BorderLayout.LINE_END);
}
}
En el ejemplo anterior para obtener el texto introducido por un usuario tambin se usa el
mtodo getText(), tal como en el campo de texto, y el texto obtenido se tendr en una
cadena.
Por ltimo, se debe tomar en cuenta que las reas de texto slo se utilizan cuando se
requiere recibir o mostrar una gran cantidad de informacin, si no se requiere esto, mejor
utiliza los campos de texto que se revisaron en el apartado anterior y ahorra espacio en tu
interfaz.
Uno de los elementos que ayudan a ordenar las interfaces son los separadores, porque
stos ayudan a dividir la apariencia de la interfaz del programa, estos componentes
podrs revisarlos en el siguiente apartado.
25

2.2.7. Separador
Para mantener una apariencia grfica
ordenada, comnmente se utilizan
secciones en la interfaz, para tener as
tambin ordenados los componentes
grficos con que se cree sta. Una de
las formas de hacer esta accin es
mediante paneles, y otra manera es
utilizar separadores, que son
componentes grficos que ayudan en la
divisin de interfaces.
Los separadores son lneas que se pintan sobre los marcos de manera horizontal o
vertical, para dividir el espacio de un marco.
Los separadores son de utilidad para dar un mejor orden y apariencia a las interfaces que
se implanten.
Vase el siguiente ejemplo de cdigo 12, donde se demuestra y explica la creacin y uso
de separadores:

En sombreado verde se tiene la creacin del marco sobre en el cual se aplicar el
separador, as como la declaracin de las etiquetas de apoyo para mostrar el
ejemplo de uso de los separadores.
En sombreado morado se tiene el ejemplo del separador, que se declara (con
new) y se indica la direccin, en este caso es horizontal, vea que al aadir los
componentes al marco se hizo, de la siguiente manera:
o Componente separador componente.
Indicando que el separador deba ubicarse entre ellos.
En sombreado rojo se tiene la adicin de las etiquetas de apoyo al marco, as
como del separador.
Ejemplo de cdigo 12. Declaracin y uso de separador
26

package GUI;
/**
* @author ESAD
*/
public class separador {
@Override
System.exit(0);
}
});
etiq1.setText("Etiqueta1");
etiq2.setText("Etiqueta2");
frame.add(etiq1, BorderLayout.PAGE_START);
frame.add(new JSeparator(SwingConstants.HORIZONTAL), BorderLayout.CENTER);
frame.add(etiq2, BorderLayout.PAGE_END);
}
}
27

2.2.8. Spinner
Existen situaciones en las que se requiere que los usuarios
proporcionen alguna informacin, pero esta informacin puede
ser elegida de un conjunto de valores ordenados de manera
consecutiva, para estas ocasiones es recomendable utilizar el
componente grfico spinner.
Este componente es una pequea caja de texto, con dos
flechas a la derecha, una hacia arriba y otra hacia abajo, con
las flechas se puede ir incrementando o reduciendo su valor.
El spinner es comnmente utilizado con nmeros, pero tambin
pueden colocarse textos y fechas en las opciones que brinda.
La intencin al utilizar este componente es que los elementos
que contengan estn ordenados en alguna forma
predeterminada.
Revisa el siguiente ejemplo de cdigo 13, donde se plasma la creacin y uso del
componente spinner:

En sombreado verde se tiene la creacin del marco, sobre l se colocarn los
spinner que se crearon en bloque de cdigo anterior.
En sombreado morado se tienen dos spinner:
o El primero cuenta con una configuracin de tipo numrica, donde, se tienen
4 parmetros, (el nmero donde aparecer, nmero mnimo, nmero
mximo, incremento). De esta manera se tienen los elementos ya
definidos.
o El segundo spinner tiene un modelo de tipo lista, donde se colocan los
elementos que se quieren en el spinner.
En sombreado rojo se tiene la adicin de los spinner al marco.
Ejemplo de cdigo 13. Declaracin y uso de spinner

package GUI;
/**
28

* @author ESAD
*/
public class ejemploSpinner{
@Override
System.exit(0);
}
});
JSpinner spn1= new javax.swing.JSpinner();
spn1.setModel(new javax.swing.SpinnerNumberModel(1, 0, 5, 1));
JSpinner spn2= new javax.swing.JSpinner();
Spn2.setModel(new javax.swing.SpinnerListModel(new String[] {"Lunes", "Martes",
"Miercoles", "Jueves", "Viernes"}));
frame.add(spn1, BorderLayout.PAGE_START);
frame.add(spn2, BorderLayout.PAGE_END);
}
}
Para obtener el elemento que se seleccion en el spinner se utiliza el mtodo,
spinner.getValue().toString();. El mtodo getValue(),obtiene el valor que se ha
seleccionado en el spinner, y retorna un objeto, por lo que se debe convertir el objeto en
cadena toString(), para obtener el valor elegido.
Los spinners deben utilizarse cuando se quieren acotar los valores que el usuario pueda
proporcionar al programa, de manera que los valores predefinidos estn en orden
consecutivo, ya que este componente grfico permite el movimiento de valor de manera
ascendente o descendente (flechas arriba o abajo).
29

2.2.9. rbol
Este componente grfico a diferencia de los anteriores crea un rbol de informacin, que
permite visualizar cada uno de los nodos y ver si tiene hijos o no, as como desplegar y
replegar a los hijos de cada nodo para ir revisando la informacin.
El componente rbol se visualiza de manera muy
similar a lo que muestran los exploradores de
archivos, mostrando los nodos y sus respectivos
hijos, que se pueden comparar como carpetas y
archivos.
Para su creacin, se requieren padres e hijos, los
cuales normalmente son utilizados para mostrar
archivos, o informacin que pueda ser
categorizada de manera jerrquica.
Analiza el siguiente ejemplo de cdigo 14, donde se crea y maneja un rbol:
rbol.
En sombreado morado se tiene el rbol del cual:
o Lo primero es declarar el rbol.
o Una vez que se tiene el rbol se crea su modelo, en donde desde un inicio
debes declarar los nodos del rbol, es decir aquellos nodos que sern
races; despus se crean las hojas del rbol, y se van agregando (add) a la
raz a la que pertenecern.
o El ltimo paso es aadir ese modelo creado al rbol declarado. Tal como
en la lista desplegable que primero se crea el modelo y despus se agrega
a la lista. El rbol tambin primero se crea su modelo y despus se agrega
este al rbol.
En sombreado rojo se tiene la adicin del rbol al marco.
Ejemplo de cdigo 14. Declaracin y uso de casillas de rbol
package GUI;
30

/**
* @author ESAD
*/
public class arbol{
@Override
System.exit(0);
}
});
JTreearbol= new javax.swing.JTree();
javax.swing.tree.DefaultMutableTreeNode e1 = new
javax.swing.tree.DefaultMutableTreeNode("Inicio");
javax.swing.tree.DefaultMutableTreeNode("Segmento1");
javax.swing.tree.DefaultMutableTreeNode("E1-S1");
e1.add(e2);
e2.add(e3);
e3 = new javax.swing.tree.DefaultMutableTreeNode("E2-S1");
e2.add(e3);
e2.add(e3);
e2 = new javax.swing.tree.DefaultMutableTreeNode("Segmento 2");
e2.add(e3);
javax.swing.tree.DefaultMutableTreeNode treeNode4 = new
javax.swing.tree.DefaultMutableTreeNode("SE1-E2-S2");
e3.add(treeNode4);
e2.add(e3);
e1.add(e2);
arbol.setModel(new javax.swing.tree.DefaultTreeModel(e1));
31

frame.add(arbol, BorderLayout.CENTER);
}
}
Antes de seguir con el siguiente subtema se ver un ejemplo de un programa conversor
de unidades, de manera que, adems de crear y manipular componentes grficos de
manera aislada, se aprenda cmo utilizarlos de forma conjunta para crear las GUI. El
ejemplo se muestra a continuacin:
La imagen anterior cuenta con tres secciones que se describen a continuacin:

Equivalencia de moneda, se tiene una lista desplegable para elegir una moneda,
se oprime el botn convertir y muestra la equivalencia en la caja de texto que
est junto a pesos.
Equivalencia de grados, tiene un spinner numrico para ingresar los grados
centgrados, las casillas de activacin si fueron seleccionadas mostrarn la
equivalencia en las cajas de texto que estn junto a ellas, si no se eligi, no
muestra nada al pulsar el botn convertir.
Equivalencia de longitud se ingresa el nmero de pulgadas, yardas y/o millas y al
oprimir el botn convertir muestra en la caja de texto su equivalencia en
centmetros, metros y/o millas.
Ahora se analizar el ejemplo de cdigo 15 que cre la interfaz grfica mostrada en la
imagen anterior, as como la funcionalidad de esa interfaz:
El cdigo con sombreado azul: contiene la declaracin del paquete, el autor, la
clase, definicin del autor y las llaves correspondientes.
32

El bloque de cdigo sombreado rosa: tiene la declaracin de todos los

componentes grficos que se estarn utilizando en el programa, se debe notar que
estas declaraciones estn fuera de todos los mtodos, lo que significa que estn
declarados a nivel de clase, recuerden que esto se hace cuando las variables se
utilizarn en toda la clase sin distincin, esto tiene la intencin de poder manipular
cada uno de los componentes grficos desde cualquier parte de la clase.
La seccin morada es el mtodo que conjunta la apariencia total:
o Dentro de este mtodo se crea el marco principal, y la definicin de sus
caractersticas,
o Adems, se mandan llamar los mtodos de aparienciaMoneda();
aparienciaGrados(); aparienciaLongitud(); que cada uno de esos mtodos
construye la apariencia de los paneles que conforman por partes la
apariencia total,
o Tambin en este bloque al final se aaden los paneles que crean los
mtodos mencionados en el punto anterior al marco principal.
El bloque de cdigo verde claro, crea la apariencia del pnlMoneda, en este mtodo
se configuran las propiedades del panel, adems de las etiquetas, la lista
desplegable, la caja de texto donde se colocar el resultado y el botn convertir,
se agrega al botn el manejo del evento mouseClicked y cuando lo detecte redireccionar el flujo del programa al mtodo equivalenciaMoneda(); y por ltimo se
acomodan los componentes grficos mencionados en el panel, mediante el
administrador de diseo GridLayout.
El bloque de cdigo verde obscuro, es el mtodo equivalenciaMoneda();
mencionado en el punto anterior, lo que realiza es que toma el ndice elegido en la
lista desplegable (cmbMoneda.getSelectedIndex();), con base en l se decide
mediante condiciones (if) que equivalencia es la que se debe mostrar en la caja de
texto (txtPesos) de resultado.
El bloque de cdigo rojo claro, crea la apariencia del pnlGrados, en este mtodo
se configuran las propiedades del panel, adems de las etiquetas, el spinner, las
casillas de seleccin y el botn que activa la conversin, que redirecciona el flujo
del programa al mtodo equivalenciaGrados(), y por ltimo se acomodan los
componentes en el panel.
El bloque de cdigo rojo obscuro, toma el valor dado en el spinner, y calcula la
conversin de grados, si se han seleccionado mediante las casillas de activacin,
se mostrar o no el resultado en las casillas de texto correspondientes.
El bloque naranja, crea la apariencia del pnlLongitud agregando las propiedades
tanto del panel mismo como de las etiquetas, cajas de texto, y botones para
realizar las conversiones; se agreg tambin el manejo de eventos para cada
botn que redirecciona el flujo a tres posibles mtodos de conversin segn se
haya elegido. Por ltimo se muestra el acomodo de los componentes en el panel,
en el que se aadi la lnea pnlLongitud.add(new JLabel(" ")); para crear un
espacio en el panel y que no aparecieran los componentes pegados unos a otros.
33

El bloque naranja obscuro muestra los tres mtodos de conversin de unidades,

que toman los valores de una caja de texto, calculan la conversin y muestran el
resultado en otra caja de texto.
Se debe notar en el ejemplo que el programa est creado de manera modular,

segmentado en mtodos, respetando as el paradigma orientado a objetos.
Ejemplo de cdigo 15. Programa conversor de unidades
package GUI;
import java.awt.GridLayout;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
/**
* @author ESAD
*/
publicclass conversores{
//Se declaran de manera global todos los componentes a utilizar
JPanelpnlMoneda = new javax.swing.JPanel();
JLabel lbl2 = new javax.swing.JLabel();
JComboBoxcmbMoneda = new javax.swing.JComboBox();
JTextFieldtxtPesos = new javax.swing.JTextField();
JButtonbtnMoneda = new javax.swing.JButton();
JPanelpnlGrados = new javax.swing.JPanel();
JLabellblCent = new javax.swing.JLabel();
JSpinnerspnCn = new javax.swing.JSpinner();
JCheckBoxcbxK = new javax.swing.JCheckBox();
JTextFieldtxtKv = new javax.swing.JTextField();
JCheckBoxcbxF = new javax.swing.JCheckBox();
JTextFieldtxtFr = new javax.swing.JTextField();
JButtonbtnTemp = new javax.swing.JButton();
JPanelpnlLongitud = new javax.swing.JPanel();
34

JTextFieldtxtPul = new javax.swing.JTextField();
JTextFieldtxtCm = new javax.swing.JTextField();
JButtonbtnCent = new javax.swing.JButton();
JTextFieldtxtYar = new javax.swing.JTextField();
JTextFieldtxtMt = new javax.swing.JTextField();
JButtonbtnMet = new javax.swing.JButton();
JTextFieldtxtMil = new javax.swing.JTextField();
JTextFieldtxtKm = new javax.swing.JTextField();
JButtonbtnKm = new javax.swing.JButton();
public void aparienciaTotal(){

@Override
System.exit(0);
}
});
aparienciaMoneda();
aparienciaGrados();
aparienciaLongitud();
frame.add(pnlMoneda, BorderLayout.WEST);
frame.add(pnlGrados, BorderLayout.CENTER);
frame.add(pnlLongitud,BorderLayout.EAST);
}
publicvoidaparienciaMoneda(){
//se configuran los componentes de moneda
35

pnlMoneda.setBackground(new java.awt.Color(255, 255, 255));
pnlMoneda.setBorder(javax.swing.BorderFactory.createTitledBorder(javax.swing.Border
Factory.createLineBorder(new java.awt.Color(153, 0, 0)), "Equivalencia de moneda",
javax.swing.border.TitledBorder.DEFAULT_JUSTIFICATION,
javax.swing.border.TitledBorder.DEFAULT_POSITION, new java.awt.Font("Tahoma", 0,
11), new java.awt.Color(153, 0, 0)));
lbl1.setText("De:");
lbl2.setText("A pesos:");
cmbMoneda.setModel(new javax.swing.DefaultComboBoxModel(new String[] { "Euro",
"Dolar", "Libra" }));
btnMoneda.setText("Convertir");
//Se agrega el manejo de eventos al boton
btnMoneda.addMouseListener(new MouseAdapter() {
@Override
public void mouseClicked(MouseEvent e){
equivalenciaMoneda(); //se invoca al metodo moneda, que sonde se realizarn las
acciones
}
});
//se agregan los componentes al panel moneda
GridLayoutacomodo = new GridLayout(3,2);
pnlMoneda.setLayout(acomodo);
pnlMoneda.add(lbl1);
pnlMoneda.add(cmbMoneda);
pnlMoneda.add(lbl2);
pnlMoneda.add(txtPesos);
pnlMoneda.add(btnMoneda);
}
publicvoidequivalenciaMoneda(){
inteleccion=cmbMoneda.getSelectedIndex();
if(eleccion==0)
txtPesos.setText("16.99");
if(eleccion==1)
if(eleccion==2)
}
publicvoidaparienciaGrados(){
//se configuran los componentes de grados
36

pnlGrados.setBackground(new java.awt.Color(255, 255, 255));
pnlGrados.setBorder(javax.swing.BorderFactory.createTitledBorder(javax.swing.Border
Factory.createLineBorder(new java.awt.Color(153, 0, 0)), "Equivalencia de Grados",
javax.swing.border.TitledBorder.DEFAULT_JUSTIFICATION,
javax.swing.border.TitledBorder.DEFAULT_POSITION, new java.awt.Font("Tahoma", 1,
11), new java.awt.Color(153, 255, 0)));
lblCent.setText("Centigrados");
cbxK.setText("Kelvin");
cbxF.setText("Fahrenheit");
btnTemp.setText("Convertir");
//Se agrega el manejo de eventos al boton
btnTemp.addMouseListener(new MouseAdapter() {
@Override
equivalenciaGrados(); //se invoca al metodo moneda, que sonde se realizarn las
acciones
}
});
pnlGrados.setLayout(acomodo);
pnlGrados.add(lblCent);
pnlGrados.add(spnCn);
pnlGrados.add(cbxF);
pnlGrados.add(txtFr);
pnlGrados.add(cbxK);
pnlGrados.add(txtKv);
pnlGrados.add(btnTemp);
}
publicvoidequivalenciaGrados(){
intcentigrados= Integer.parseInt(spnCn.getValue().toString());
double fr= ((9.0/5.0)*centigrados)+32;
float kv= (float) (centigrados+273.15);
if(cbxK.isSelected())
txtKv.setText(String.valueOf(kv));
37

if(cbxF.isSelected())
txtFr.setText(String.valueOf(fr));
}
publicvoidaparienciaLongitud(){
//se configuran los componentes de longitud
pnlLongitud.setBackground(new java.awt.Color(255, 255, 255));
pnlLongitud.setBorder(javax.swing.BorderFactory.createTitledBorder("Equivalencia de
longitud"));
lbl4.setText("Pulgadas");
lbl5.setText("Centimetros");
btnCent.setText("Convertir");
lbl6.setText("Yardas");
lbl7.setText("Metros");
btnMet.setText("Convertir");
lbl8.setText("Millas");
lbl9.setText("Kilometros");
btnKm.setText("Convertir");
//Se agrega el manejo de eventos a cada boton

btnCent.addMouseListener(new MouseAdapter() {
@Override
convertirCm(); //se invoca al metodo moneda, que sonde se realizarn las acciones
}
});
btnMet.addMouseListener(new MouseAdapter() {
@Override
convertirMt(); //se invoca al metodo moneda, que sonde se realizarn las acciones
}
});
btnKm.addMouseListener(new MouseAdapter() {
@Override
convertirKm(); //se invoca al metodo moneda, que sonde se realizarn las acciones
}
});
38


pnlLongitud.setLayout(acomodo);
pnlLongitud.add(lbl4);
pnlLongitud.add(txtPul);
pnlLongitud.add(txtCm);
pnlLongitud.add(btnCent);
pnlLongitud.add(new JLabel(" "));
pnlLongitud.add(txtYar);
pnlLongitud.add(txtMt);
pnlLongitud.add(btnMet);
pnlLongitud.add(txtMil);
pnlLongitud.add(txtKm);
pnlLongitud.add(btnKm);
}
public void convertirCm(){
intpulgadas=Integer.parseInt(txtPul.getText());
float cm= (float) (pulgadas * 2.56);
txtCm.setText(String.valueOf(cm));
}
public void convertirMt(){
intyardas=Integer.parseInt(txtYar.getText());
float mt= (float) (yardas * 0.91440);
txtMt.setText(String.valueOf(mt));
}
public void convertirKm(){
intmillas=Integer.parseInt(txtMil.getText());
39

float km= (float) (millas * 1.609344);
txtKm.setText(String.valueOf(km));
}
}
Si ya has introducido el cdigo mostrado en la clase previa (toda la clase completa) para
su ejecucin en el IDE NetBeans, notars que el compilador no permite su ejecucin,
recuerda que para que eso ocurra debe definirse un mtodo main, siguiendo con el
paradigma orientado a objetos, del que se ha separado el arranque del programa en la
clase de llamado, la cual se muestra a continuacin en el ejemplo de cdigo 16:
El cdigo azul es la declaracin del paquete, el autor y la clase, as como sus
respectivas llaves.
Las dos lneas moradas son las que permiten el funcionamiento del programa, la
primera crea un objeto de la clase conversores, que es la clase que se describi
antes, donde se crea toda la apariencia y funcionalidad del programa. La segunda
lnea invoca el mtodo aparienciaTotal(); del objeto previamente creado, y
realizando esta llamada se crea el programa.
Ejemplo de cdigo 16. Clase de llamado
package GUI;
/**
* @author ESAD
*/
public class conv {
conversores c=new conversores();
c.aparienciaTotal();
}
}
Es recomendable que se realicen modificaciones al cdigo presentado en el ejemplo de
cdigo 16 para que se analice el funcionamiento de cada lnea.
40

2.3. Men
El uso del men facilita la ubicacin de funciones
de un programa o aplicacin, ya que sus
elementos funcionan como accesos rpidos, y con
slo un clic sobre el elemento del men de inters
se llegar a la pantalla o funcin deseada.
Tal como su nombre lo dice, el componente grfico
de men ofrece diferentes opciones de acciones a
realizar dentro de una aplicacin, ya sea ir a otra
ventana, o realizar alguna accin sobre la ventana
actual.
En los siguientes subtemas se ver que los mens deben estar en una barra, cmo
crearla, as como la elaboracin de los elementos y subelementos que el men mostrar.
Tambin se analizarn los mens emergentes.
2.3.1. Barra de men

Las opciones que ofrecen los mens estn contenidas en una barra, as que al crear un
men lo primero que se debe hacer es crear la barra para despus colocar en ella los
elementos que se vayan creando. Para comprender mejor su creacin, se debe analizar el
siguiente ejemplo de cdigo 17.
El sombreado en:
Azul es la definicin del paquete, clases a utilizar, autor, as como la declaracin
de la clase y el mtodo.
Verde tiene la creacin del marco sobre el que se colocar el men.
Morado tiene un panel azul, creado slo para ubicar mejor la barra del men, se
crea la barra del men en la pantalla mediante su constructor new
javax.swing.JMenuBar().
Rojo tiene la adicin de la barra de men al marco.
41

Al ser la barra de men un contenedor de elementos, slo se requiere declararla, lo que
conforma en s este elemento sern las acciones que se adicionen.
Ejemplo de cdigo 17. Declaracin y uso de barra de men
package GUI;
/**
* @author ESAD
*/
public class menu{
@Override
System.exit(0);
}
});
JMenuBarbarra = new javax.swing.JMenuBar();
frame.add(barra, BorderLayout.PAGE_START);
frame.add(pnl, BorderLayout.PAGE_END);
}
}
42

En seguida se ver cmo crear elementos del men que son las opciones que se
mostrarn, y que deben estar contenidas en la barra de men para que sean visibles.
2.3.2. Elemento de men
Cada elemento de un men debe ser

creado y configurado. En la seccin
anterior se revisaron los elementos que
debe contener una barra, la cual se
declara. Ahora se estudiar cmo se
crean los elementos que conformarn las
diferentes opciones del men.
En el siguiente ejemplo de cdigo 18 se crean elementos del men, y se aaden a una
barra del men para mostrarlos en la interfaz, en la cual debers ligar cada descripcin
con el cdigo que se explica, para que se comprenda de mejor manera la sintaxis de los
mens a continuacin se presenta una explicacin y el cdigo:

men.
En sombreado morado se tiene un panel azul, creado slo para ubicar mejor en la
pantalla el men (se crea la barra del men). Despus se crean los elementos del
men new javax.swing.JMenu(); y se aaden los elementos del men (add) a la
barra previamente creada. Si se requieren submens (javax.swing.JMenuItem()),
se crean y se aaden al men de donde se debern desplegar.
En sombreado rojo se tiene la adicin de la barra de men al marco.
Ejemplo de cdigo 18. Declaracin y uso de men

package GUI;
/**
* @author ESAD
43

*/
public class menu{
@Override
System.exit(0);
}
});
frame.add(pnl, BorderLayout.PAGE_END);
JMenuBarbarra = new javax.swing.JMenuBar();
JMenu elemento1 = new javax.swing.JMenu();
elemento1.setText("Elemento1");
JMenu elemento2 = new javax.swing.JMenu();
elemento2.setText("Elemento2");
JMenuItem sub1 = new javax.swing.JMenuItem();
sub1.setText("Sub-Elemento1");
elemento2.add(sub1);
barra.add(elemento1);
barra.add(elemento2);
frame.add(barra, BorderLayout.PAGE_START);
}
}
44

Se debe entender que el acomodo de mens queda de la siguiente manera, revisa la
siguiente imagen:
Elementos del men
Barra de men
Sub-men
Sub-men
Sub-sub-men
Mens
Para comprender mejor el acomodo de la imagen anterior revisa lo siguiente:

El elemento principal es la barra de men
Despus los elementos del men, que son los que aparecen inmediatamente
sobre la barra, stos se aaden precisamente a la barra.
Si el elemento de men va a desplegar otras opciones se crean submens y stos
se agregan al elemento de men de donde se van a desplegar.
Si el submen requiere tambin que se desplieguen otros sub-submens, se
agregan al submen de donde se deber desplegar.
Adems de los mens tradicionales, como el que se acaba de revisar, tambin existe el
men emergente el cual se estudiar a continuacin.
2.3.3. Men emergente

En ocasiones se requiere contar con un men que no est visible todo el tiempo, que
aparezca slo cuando el usuario as lo requiera, para ahorrar espacio dentro de la interfaz
grfica de usuario, para ello existen los mens emergentes.
El men emergente (popup) no se
encuentra visible al aparecer la ventana
grfica de una aplicacin, deber
agregarse en el manejo de eventos
para que aparezca, su construccin es
similar a los anteriores. Se comienza
con la declaracin del men emergente,
se crean elementos de men y se
aaden al emergente, tal como si se
aadieran a una barra de men.
Observa el siguiente ejemplo de cdigo 19, en el que se ve cmo crear un men

emergente, el cual al igual que en un men normal deber crearse primero sus elementos
y despus aadirse a ste:
45


men.
Se crea el men emergente (JPopupMenu()). Despus se crean los elementos del
men JMenuItem() y se aaden los elementos del men (add) al men emergente
previamente creado.
En sombreado rojo se tiene la adicin del men emergente al marco.
Ejemplo de cdigo 19. Declaracin y uso de men emergente

package GUI;
/**
* @author ESAD
*/
public class menu{
@Override
System.exit(0);
}
});
JPopupMenu popup = new JPopupMenu();
JMenuItem menu1 = new JMenuItem("Menu item");
JMenuItem menu2 = new JMenuItem("Otro item");
popup.add(menu1);
popup.add(menu2);
46

frame.add(popup, BorderLayout.PAGE_START);
}
}
En este tema se ha analizado a los mens y su creacin, esta ltima comienza con la
implementacin de los elementos que los compondrn, as como la barra en la que se
posicionar el men completo. Tambin se analizaron los mens emergentes, la nica
diferencia entre ellos es que el men normal siempre est visible para el usuario en la
interfaz grfica, mientras que el men emergente aparecer slo cuando el usuario se
posicione sobre el rea donde se mostrar, de esta manera el men estar disponible
cuando el usuario as lo quiera.
2.3.4. Separador
El separador de men es el mismo concepto del separador de ventana visto en el
subtema 2.2.7. Separador, ste slo es la creacin de una lnea divisoria para separar
elementos de un men, su declaracin es la misma y se aade entre los componentes
que se quiera separar.
Revisa el siguiente ejemplo de cdigo 20 y la imagen siguiente, en donde se est
agregando un submen, despus se coloca un separador y despus otro submen, lo que
mostrar una divisin entre los submens.
Ejemplo de cdigo 20. Declaracin y uso de separador
menu.add(subelemento1);
menu.add(new JSeparator(SwingConstants.HORIZONTAL));
menu.add(subelemento2);
Ejemplo de separador en un men
Por ltimo, cabe resaltar que para un manejo adecuado de los mens se debern agregar
eventos a stos para que generen las acciones requeridas por los mens.
47

2.4. Ventanas
Hasta ahora se han visto diferentes componentes grficos para crear una sola pantalla,
enseguida se ver cmo crear diferentes pantallas o ventanas en una misma aplicacin.
Es decir se construirn diferentes marcos que se comuniquen entre s, adems de
conocer las ventanas auxiliares que pueden dar informacin a los usuarios (cuadros de
dilogo), ventanas que pueden proporcionar informacin de los archivos que tiene nuestra
computadora (JFileChooser) y el cambio de una ventana (marco) a otra.
Ejemplos de ventanas
2.4.1. Cuadros de dilogo

Existen momentos en que un programa requiere que el usuario confirme o niegue
informacin, ingrese, o seleccione datos o simplemente que conozca lo que est pasando,
para esto se cuenta con los cuadros de dilogo que son de ayuda en estas ocasiones.
Los cuadros de dilogo son subventanas independientes, se utilizan
generalmente para dar avisos sobre
acciones que est realizando la
aplicacin, ya sea para solicitar
confirmacin de informacin, o para
dar avisos de error o advertencias
(Oracle, 2012).
Existen diferentes tipos de cuadros de dilogo, entre ellos los siguientes:
48

Dilogo de confirmacin: el dilogo de confirmacin como su nombre lo indica se

utiliza para confirmar alguna accin, el cdigo que lo crea es el marcado en
naranja dentro del ejemplo de cdigo 21, que se presenta ms adelante.
Como se puede observar en el cdigo, el dilogo de confirmacin se igual a un
entero, por lo que el dilogo de confirmacin ofrece tres respuestas, Si, No y
Cancelar, tal y como se muestra en la imagen siguiente. Para saber qu respuesta
brindo el usuario, el dilogo de confirmacin retorna un nmero con la opcin
elegida, siendo 0-Si, 1-No y 2-Cancelar.
Dilogo de entrada: este tipo de cuadro de dilogo solicita el ingreso de algn dato
en particular, el cdigo que lo crea est en morado dentro del ejemplo de cdigo
21, ntese que est igualado a una cadena, porque automticamente este dilogo
retorna en una cadena lo que el usuario haya capturado en el cuadro de dilogo, si
se requiere otro tipo de dato tendr que realizarse el casting (conversin de tipo de
datos) necesario. Este cuadro de dilogo se ejemplifica en la siguiente imagen:
Dilogo de entrada personalizada: este cuadro de dilogo, al igual que el anterior,
solicita el ingreso de algn dato en particular, pero adems la entrada de esos
49

datos puede personalizarse, en este caso el cdigo que lo crea, est en morado
obscuro dentro del ejemplo de cdigo 21, observa que primero se cre un arreglo
de objetos llamado valores, donde se ingresan los datos de la lista que se quiere
desplegar. La siguiente lnea recibir el objeto elegido del cuadro de dilogo, que
tiene como parmetros el ttulo del cuadro de dilogo, as como el mensaje que
mostrar; se indica que es un mensaje de informacin y despus se pasa el
arreglo de objetos, se indica el valor que mostrar por defecto (valores[0]). El
resultado de ese cdigo implementado se muestra en la siguiente imagen:
Mensaje: en este cuadro de dilogo se muestra un mensaje al usuario, una de las

caractersticas interesantes de este cuadro de dilogo es que puedes indicar el
tipo de mensaje que es y en base a ello colocar un icono representativo (revisa el
cdigo que los crea marcado en verde dentro del ejemplo de cdigo 21), el
resultado de cdigo se muestra en las siguientes imgenes respectivamente:
o
o
o
Mensaje de cuidado.
Mensaje de error.
Mensaje plano.
Dilogo opcional: en este cuadro de dilogo pueden personalizarse los botones

que tendr, as como lo que stos dirn, despus de analizar todos los ejemplos
anteriores, se debe resaltar que no se indica nada sobre los botones que
aparecern, ya que se crean automticamente, pero en este cuadro de dilogo en
particular puedes personalizar los botones. Como podrs ver en el ejemplo de
cdigo 21, en la seccin roja; lo primero es crear un arreglo de objetos con los
botones que contendr. Despus se pasa esto como parmetro. El resultado se
muestra en la siguiente imagen:
50

Revisa detalladamente el siguiente cdigo, en el que se tienen los bloques que

construyen cada uno de los cuadros de dilogo mencionados. Identifica cada porcin
mencionada, para que puedas comprender mejor la sintaxis.
Ejemplo de cdigo 21. Declaracin y uso de cuadros de dilogo
package GUI;
import javax.swing.JOptionPane;
/**
* @author ESAD
*/
public class ventanas {
public static void main(String[] args){
int a=JOptionPane.showConfirmDialog(null,"Deseas continuar");
String b=JOptionPane.showInputDialog("Ingresa un dato");
Object[] valores = { "Uno", "Dos", "Tres" };
ObjectvalorElegido = JOptionPane.showInputDialog(null,"Elige", "Entrada",
JOptionPane.INFORMATION_MESSAGE, null,valores, valores[0]);
JOptionPane.showMessageDialog(null, "Mensaje", "Cuidado",
JOptionPane.WARNING_MESSAGE);
JOptionPane.showMessageDialog(null, "Algofallo", "Error",
JOptionPane.ERROR_MESSAGE);
JOptionPane.showMessageDialog(null, "Sin icono", "Plano",
JOptionPane.PLAIN_MESSAGE);
Object[] opciones = { "OKI", "NOP" };
51

JOptionPane.showOptionDialog(null, "Elige OKI Para continuar", "Selecciona",
JOptionPane.DEFAULT_OPTION, JOptionPane.WARNING_MESSAGE,null, opciones,
opciones[0]);
}
}
2.4.2. Ventanas independientes y sus cambios

Una de las ventanas independientes ms empleadas es el selector de archivos, es muy
utilizada, como su nombre lo indica, para seleccionar un archivo o la ruta de alguna
carpeta. Generalmente se usa para la carga de archivos.
En el ejemplo que se muestra a
continuacin slo se crea el selector de
archivos, ste normalmente se utiliza en
un programa ms completo y no de
manera aislada. Por lo general al crear
este tipo de ventanas es porque se leer
o escribir en un archivo, pero por ahora
slo se construir la ventana para fines
didcticos sobre la creacin de
componentes grficos que se ha creado
separado.
A continuacin se presenta en el ejemplo de cdigo 22 y cmo se utiliza:
Lo primero es crear un objeto del tipo selector de archivo e indicar que se muestre,
como se hace en la seccin morada.
Una vez que se muestra para conocer el archivo que se ha elegido se utiliza un
mtodo creado para ello, y se muestra el resultado en consola, como se hace en la
seccin roja.
Ejemplo de cdigo 22. Declaracin y uso de la ventana selector de archivos.

package GUI;
import java.io.File;
import javax.swing.JFileChooser;
/**
* @author ESAD
*/
public class ventanas2 {
52

public static void main(String[] args){

JFileChooser fc= new JFileChooser();
fc.showOpenDialog(null);
File file = fc.getSelectedFile();
System.out.print(file);
}
}
Una de las prcticas ms comunes al crear programas con componentes grficos es
pasar de una ventana a otra, para hacer esto, lo primero que se debe hacer es crear un
objeto de la clase que crea la ventana (marco) a la que se va a cambiar, despus se
invoca de ese objeto al mtodo que inicia la creacin de la apariencia grfica y por ltimo
se elimina de la pantalla la ventana anterior, tal como se muestra en el ejemplo de cdigo
23.
Ejemplo de cdigo 23. Cambio de ventana.
claseCambioc= new claseCambio();
c.metodoApariencia();
this.dispose();
Con esta informacin se concluye el estudio de las ventanas, lo importante es aprender
que se pueden cambiar de ventanas, para obtener o pasar informacin de una a otra, tal
como lo hacen los programas ms conocidos. Por ejemplo, cuando se quiere imprimir, se
abre una ventana independiente del programa en ejecucin para dar las indicaciones de
la impresin, esto es algo que podrs llegar a requerir al construir programas.
Cierre de la Unidad
Has concluido la segunda unidad del curso, a lo largo de sta se ha visto el tema de
componentes grficos, que son los elementos mediante los que se crean las interfaces
grficas de usuario.
Como parte de este tema se vieron los contenedores, que son aquellos elementos que
conjuntan a los componentes grficos para acomodarlos y crear las interfaces, tambin se
vieron los paneles que ayudan a organizar los componentes y los marcos que son los
contenedores por excelencia donde deben acomodarse todos los elementos de los que se
compondr la interfaz.
Tambin se analizaron los controles, que son los componentes grficos que conforman la
interfaz, entre ellos estn las etiquetas con que se nombran los campos, los botones que
disparan acciones, las casillas de activacin que detectan valores bolanos, las listas
53

desplegables para que el usuario pueda elegir un elemento de una lista predefinida,
campos de texto para recopilar informacin, reas de texto que son de ayuda para
recopilar grandes cantidades de texto por parte de los usuarios, separadores para
segmentar la apariencia de la interfaz, spinners para acotar el ingreso de informacin y
rboles que despliegan informacin jerrquica.
Adems, se estudiaron las barras de mens, los elementos de stos, y tambin mens
emergentes, que ayudan a tener concentrada la informacin de un programa y al elegir
cualquiera de las opciones que se presente y se pueda redirigir el flujo del programa.
Por ltimo se analizaron las ventanas, para saber cmo cambiar de una a otra, as como
el despliegue de cuadros de dilogo que ayudan a retroalimentar a los usuarios sobre el
funcionamiento del programa.
La siguiente unidad trata
sobre conexin a bases de
datos, todo lo que se ha
visto en esta unidad te ser
de utilidad, ya que para
mostrar informacin
obtenida de la base de
datos requieres
componentes grficos
donde colocar dicha
informacin.
Es aconsejable que revises nuevamente la unidad en caso de que los temas que se
acaban de mencionar no te sean familiares o no los recuerdes, de no ser este tu caso, ya
ests preparado(a) para seguir con la unidad tres, en donde continuars con la revisin de
conexin a base de datos, para que al final de la materia logres crear aplicaciones ms
completas con almacenamiento de datos.
Para saber ms
Es importante que instales un IDE en tu computadora personal para que pases todos los
ejemplos de cdigo y veas cmo funcionan, de esta manera podrs analizar el
funcionamiento de los cdigos presentados.
Se recomienda que instales NetBeans 7.0, como IDE, por su facilidad de uso,
puede ser descargado gratuitamente. Recuperado de
http://netbeans.org/downloads/
54

Si deseas conocer todas las propiedades asociadas a cada tipo de componente, revisa la
tabla de los componentes de swing con las propiedades que cada uno puede asociar, que
encontraras en la siguiente direccin electrnica:
(Oracle,The Java Tutorials. Recuperado de
http://docs.oracle.com/javase/tutorial/uiswing/components/index.html
En esta pgina obtendrs todos las propiedades para cada componente con que cuenta
JAVA, est escrito directamente por los autores del lenguaje.
Fuentes de consulta
Ceballos, F. J. (2006). Java 2: Interfaces grficas y aplicaciones para internet. (2

Ed.). Madrid: RA-MA.
Oracle (2011). The JAVA Tutorials. California: Oracle.
Eckstein, R., Loy, M. y Wood, D. (1998). JAVA Swing. California: OReilly.
55

Unidad 2. Componentes Graficos

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unidad 2. Componentes Graficos

Uploaded by

Copyright:

Available Formats

Programacin orientada a objetos II

Unidad 2. Componentes grficos

Ingeniera en Desarrollo de Software

Unidad 2. Componentes grficos

Universidad Abierta y a Distancia de Mxico

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Identificar diferentes tipos de componentes grficos

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Utilizar las clases y estructuras de los

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Nota: el marco es la ventana sobre la que se construye la apariencia grfica de un

Se sombrea en azul la definicin del paquete, clase utilizada, autor, as como la

Ejemplo de cdigo 2. Declaracin de un marco

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Salida de pantalla del marco

BorderLayout: esta distribucin acomoda los componentes en mximo 5

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

CardLayout: permite implementar un rea que contiene diferentes componentes en

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

FlowLayout: esta distribucin coloca los elementos por filas, de izquierda a

GridLayout: esta distribucin acomoda los componentes en filas y columnas,

GridBagLayout: alinea los elementos en filas y columnas, como el anterior, pero

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

GroupLayout: maneja un diseo de los elementos verticales y horizontales de

SpringLayout: esta distribucin permite definir la relacin de espacio entre los

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

De forma predeterminada cada contenedor tiene asignado un diseo del tipo

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

JLabel etiq1= new javax.swing.JLabel();

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Se sombrea en azul la definicin del paquete, clases a utilizar, autor, as como la

Ejemplo de cdigo 4. Declaracin y uso de botones

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

JButtonbtn = new javax.swing.JButton();

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

Se sombrea en azul la definicin del paquete, clases a utilizar, autor, as como la

Ejemplo de cdigo 5. Declaracin y uso de casillas de activacin

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

public class casilla {

Ciencias Exactas, Ingeniera y Tecnologa | Desarrollo de Software

Programacin orientada a objetos II

2.2.4. Lista desplegable

Se sombrea en azul la definicin del paquete, clases a utilizar, autor, as como la