Java

Programación orientada a objetos II
Unidad 2. Componentes gráficos
Desarrollo de Software
4o semestre
Programa de la asignatura:
Clave:
Ingeniería: TSU:
15142421 / 16142421
Universidad Abierta y a Distancia de México
Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

1
Índice
Unidad 2. Componentes gráficos ....................................................................................... 3
Presentación de la Unidad ................................................................................................. 3
Propósito ........................................................................................................................... 3
Competencia específica..................................................................................................... 3
2.1. Contenedores ............................................................................................................. 4
2.1.1. Paneles .................................................................................................................... 4
2.1.2. Marco ....................................................................................................................... 6
2.2. Controles .................................................................................................................. 11
2.2.1. Etiqueta.................................................................................................................. 11
2.2.2. Botones.................................................................................................................. 13
2.2.3. Casilla de activación .............................................................................................. 15
2.2.4. Lista desplegable ................................................................................................... 17
2.2.5. Campo de texto...................................................................................................... 19
2.2.6. Área de texto ......................................................................................................... 22
2.2.7. Separador .............................................................................................................. 24
2.2.8. Spinner .................................................................................................................. 26
2.2.9. Árbol ...................................................................................................................... 28
2.3. Menú......................................................................................................................... 39
2.3.1. Barra de menú ....................................................................................................... 39
2.3.2. Elemento de menú ................................................................................................. 41
2.3.3. Menú emergente .................................................................................................... 44
2.3.4. Separador .............................................................................................................. 45
2.4. Ventanas .................................................................................................................. 46
2.4.1. Cuadros de diálogo ................................................................................................ 47
2.4.2. Ventanas independientes y sus cambios ............................................................... 50
Cierre de la Unidad .......................................................................................................... 52
Cara saber más ............................................................................................................... 53
Fuentes de consulta ........................................................................................................ 54

2
Presentación de la Unidad
Bienvenido(a) a la unidad dos, en donde examinarás los componentes que se utilizan para
crear aplicaciones gráficas 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 información, que es el tema que se verá en la siguiente
unidad.
Por lo tanto, en esta unidad deberás poner atención a la sintaxis del uso de los componentes
gráficos, porque te ayudará a comprender mejor cómo se construyen las interfaces gráficas.
No olvides consultar las dudas que te surjan con tu Docente en línea para una mejor
comprensión de los temas y dar continuidad a tu estudio de POO2.
Propósito
Al término de esta unidad lograrás:
 Identificar diferentes tipos de componentes gráficos

y su codificación.
 Comprender la sintaxis de creación de diferentes
componentes gráficos, así como la manipulación de
sus propiedades.
 Unir diferentes componentes gráficos en una sola
clase para crear interfaces gráficas.
 Crear programas con interfaz gráfica y manipularlos
mediante eventos
Competencia específica
 Utilizar las clases y estructuras de los

componentes gráficos para crear aplicaciones
con interfaces gráficas, mediante el lenguaje
de programación Java.

3
2.1. Contenedores
Las aplicaciones más utilizadas cuentan con interfaz GUI (siglas en inglés) que en español
significa interfaz gráfica de usuario; esta interfaz es la carta de presentación de la aplicación,
que ofrece al usuario una interacción; esa apariencia debe programarse mediante
componentes gráficos. Para tener una idea más clara al respecto, tan sólo observa el
navegador en el que te encuentras revisando este material, en el podrás distinguir que en
la parte superior cuenta con un menú, que también tiene algunos botones, seguramente
también cuenta con un espacio para escribir texto, estos elementos que se acaban de
mencionar son justamente componentes gráficos.
Todos los componentes gráficos son objetos y para declararlos como tales se debe señalar
la clase a la que pertenece el componente en cuestión e ir utilizando los métodos que tienen
predefinidos para configurar sus características. Todos esos elementos se encuentran en
el paquete javax.swing (algunos pertenecen a java.awt) y son subclase de JComponent,
por esta razón se deberá importar dicha clase. Una clase es una abstracción que define un
tipo de objeto especificando qué propiedades y operaciones disponibles va a tener.
Finalmente, sólo falta mencionar que los contenedores son supracomponentes gráficos
que, precisamente como su nombre lo indica, ayudan a contener agrupar y organizar otros
componentes gráficos dentro de ellos, esto se hace para tener un mejor control sobre la
ubicación de dichos componentes en la interfaz gráfica que se esté construyendo.
En los siguientes subtemas, “Paneles” y “Marco”, se revisará cómo crear contenedores, así
como sus características 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 gráfica.
Los paneles son secciones que pueden configurarse en diferentes tamaños, colores,
márgenes, etcétera; sirven para segmentar la apariencia gráfica de una aplicación, porque
pueden crear divisiones en la GUI.
Las propiedades de los paneles son muy diversas, pero entre las que más destacan son
los bordes y color de fondo, debido a que son estas características las que ayudan a
segmentar una aplicación.
En seguida podrás observar un ejemplo que muestra la sintaxis para construir paneles y su
uso.

4
Observa el siguiente ejemplo de código declaración 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("Bord
e 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);

5
}
}
A continuación, se explicará el código anterior.

 En azul aparece la definición del paquete donde se encuentra la clase y la
importación de bibliotecas, recuerda que esto es importante, ya que al agregar
bibliotecas se indica que se usarán clases y métodos predefinidos, también se
encuentra la declaración de la clase y el método main, así como el cierre de las
llaves correspondientes.
 La sección verde declara el marco sobre el que se mostrará el panel.
 La sección 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 además cuenta con un borde.
 Por último, en la sección roja se agregan los panales al marco.
Como pudiste observar, se habló del marco (la ventana) que es el contenedor principal,
donde se encontrarán los paneles, el siguiente tema ayudará a comprender tanto la
definición 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 comúnmente llamados frames, tal como el nombre de la clase los define (JFrame). Los
marcos son los contenedores principales para crear aplicaciones gráficas, ya que cualquier
otro componente gráfico que se cree, debe estar dentro de un marco.
Nota: el marco es la ventana sobre la que se construye la apariencia gráfica de un

programa.
Véase el siguiente ejemplo de código de declaración de un marco:
Ejemplo de código declaración de un marco

package GUI;
import javax.swing.JFrame;
/**
* @author ESAD
*/
public class marco {

6
}
}
 Se sombrea en azul la definición del paquete, clase utilizada, autor, así como la
declaración de la clase y el método.
 En sombreado morado se coloca el código para declarar el marco, que como se ha
dicho anteriormente, los componentes gráficos son objetos y se declaran como tal con
la palabra reservada new, el constructor para crear marcos recibe como parámetro el
título que tendrá el marco. Una vez declarado el marco que se ha llamado frame, se
configuran sus atributos mediante métodos que ya se encuentran previamente definidos
en la clase JFrame. En este caso se configuraron tres atributos:
o setLocation: recibe como parámetro dos enteros que son las coordenadas x, y
(en pixeles), para indicar dónde se ubicará el marco, respecto al ancho y alto de
la pantalla, toma en cuenta que la posición 0,0 es la esquina superior izquierda.
o setVisible: recibe como parámetro un valor booleano, en este caso true para
indicar que el marco debe ser visible.
o setSize: este método recibe dos valores enteros que indican el ancho y alto del
marco, en este mismo orden.
Ahora que ya identificaste las partes del código 2 de declaración de un marco, éste generará
una salida, como la que se muestra en la siguiente imagen, de la cual se recomienda
cambiar el tamaño y posición del marco y volver a ejecutar el código para ir comprendiendo
mejor sus propiedades.
Salida de pantalla del marco

7
Una vez definido el marco para agregar elementos dentro de éste, se utiliza el método add,
y un administrador de diseño llamado layout, esto permite acomodar en algún orden todos
los componentes que se agreguen al marco.
Como ya se mencionó anteriormente para construir interfaces gráficas se utilizan clases ya

predefinidas; las bibliotecas de clases Java para el desarrollo de interfaces gráficas de
usuario son Swing y AWT, éstas proporcionan los siguientes administradores de diseño
para el acomodo de componentes (Oracle, 2012):
 BorderLayout: esta distribución acomoda los componentes en máximo 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 distribución acomoda todos los componentes uno tras de otro en
una sola fila o columna, según el espacio disponible, en la siguiente imagen se
puede observar un ejemplo.

8
 CardLayout: permite implementar un área que contiene diferentes componentes en

diferentes momentos, observa el siguiente ejemplo:
 FlowLayout: esta distribución coloca los elementos por filas, de izquierda a derecha,
hasta acabar con el espacio, entonces crea una nueva fila debajo, como se muestra
a continuación:
 GridLayout: esta distribución acomoda los componentes en filas y columnas, ajusta

los elementos a que tengan un tamaño 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
continuación, se presenta un ejemplo en la siguiente imagen:

9
 GroupLayout: maneja un diseño de los elementos verticales y horizontales de

manera separada, por lo que cada una cuenta con una configuración independiente,
tal como se verá continuación:
 SpringLayout: esta distribución permite definir la relación de espacio entre los

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

10
De forma predeterminada cada contenedor tiene asignado un diseño del tipo BorderLayOut,
también 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 revisarán los demás componentes gráficos.
2.2. Controles
En los siguientes apartados se hablará sobre el tema controles, con ello se pueden crear
apariencias gráficas más 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 verán esos componentes gráficos, ya que
son aquellos elementos que ayudan a conformar la apariencia de una aplicación.
2.2.1. Etiqueta
El primer componente de los controles que se abordará es uno de los más utilizados para
colocar textos en la apariencia gráfica de una aplicación, sin que se requiera modificarlos.
Por lo general este componente es utilizado para el nombrado de campos.
Al igual que todos los componentes las etiquetas tienen una gran cantidad de propiedades,
entre las más comúnmente utilizadas se encuentra la tipografía de la fuente, así como el
color.
Como ejemplo de la creación de etiquetas, revisa el siguiente código de declaración y uso

de etiquetas, en donde se representa el uso de sus propiedades:
Ejemplo de código declaración y uso de etiquetas

package GUI;
importjavax.swing.*;
/**
* @author ESAD

11
*/
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));

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 definición del paquete, clases a utilizar, autor, así como la
 En sombreado verde se tiene la creación del marco sobre el que se colocarán las
etiquetas.

12
 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 parámetro el tipo de letra, el estilo deseado y el tamaño.
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 gráfica no se ve.
 En sombreado rojo se tiene la adición de las etiquetas al marco.
Como has visto las etiquetas pueden configurarse para que personalices su apariencia y
también puedes investigar sobre otras propiedades para que puedas ver cómo funcionan
al ejecutar el programa. Se te invita a continuar con el siguiente tema, para que sigas
involucrándote con el manejo de componentes gráficos.
2.2.2. Botones
El tema que se tratará en este apartado es el de botones. En este se abordará cómo se

construyen y se manipulan sus propiedades, para que puedas ir construyendo interfaces
gráficas con la funcionalidad (manejo de eventos) que los botones proporcionan.
Estos componentes son típicamente utilizados para recibir eventos y desencadenar el

funcionamiento de las aplicaciones. Por lo general el texto que tienen los botones indica la
acción que desencadenará.
Revise el siguiente ejemplo, donde se podrá observar la creación de botones, así como la
personalización de sus propiedades:
 En sombreado verde se tiene la creación del marco sobre el que se colocarán las
etiquetas.
 En sombreado morado se tienen los botones, en donde veras que:
o El primer botón configura la propiedad setMnemonic, que indica la letra con la
que se podrá colocar el foco en ese elemento. Realizando alt+b (el mnemónico
especificado).
o El segundo botón configura el color de la letra.
o Y el tercer botón sólo tiene agregado un texto.
 En sombreado rojo se tiene la adición de los botones al marco.

13
Ejemplo de código declaración y uso de botones

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

@Override
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);

14
}
}
Lo importante de los botones es que son el

componente para el manejo de los eventos más
utilizado, por este motivo, siempre que se crea un
botón se debe tener asociado el manejo del evento
que desencadenará la ejecución de la acción que
deba realizar la aplicación.
Antes de continuar con el siguiente componente

(casilla de activación) 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 método que tratará la
información, y así el programa funcione como se
requiere.
2.2.3. Casilla de activación
En las ocasiones en que requieres permitir que

un usuario realice selecciones múltiples de una
o varias opciones de un conjunto de opciones
dado, es útil recurrir a las casillas de activación.
Las casillas de activación son componentes

gráficos utilizados para realizar selecciones
múltiples, cada casilla puede tomar sólo dos
valores; Verdadero o Falso, es decir, sólo se
sabrá si se activó o no.
Para comprender mejor lo dicho observa el

siguiente ejemplo de código de declaración y uso
de casillas de activación:
Ejemplo de código declaración y uso de casillas de activación

package GUI;

15
/**
* @author ESAD
*/
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);
}
}
 Sombreado verde se tiene la creación del marco sobre el que se colocarán las etiquetas.
 Sombreado morado se tienen las casillas de activación, en el que observarás que:

16
o La primera casilla sólo 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 código.
Recuerda éstos componentes sólo 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 adición de las casillas de activación al marco.
El uso de las casillas de activación 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 método de la clase JCheckBox, el cual se muestra a continuación:
Ejemplo de código de detección de activación de casilla

casilla.isSelected();
Este método retornará un valor booleano, para saber si se activó (true) o no (false), por lo
general este resultado suele acompañarse de una condición (if) para indicar que deberá
realizar en programa en cada caso.
Por último, sólo recuerda que, si quieres que los usuarios realicen elecciones sobre
múltiples opciones, debes utilizar casillas de activación, en el caso que sólo 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 información a un programa,
pero esta información 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 gráfico
lista desplegable. Este componente es
precisamente una lista de opciones, de las
cuales el usuario sólo podrá elegir una opción.
Las listas desplegables ofrecen al usuario varias

opciones de elección para un mismo concepto,
pudiendo elegir sólo uno de ellos.

17
Revisa el siguiente ejemplo de código de declaración y uso de lista desplegable, donde

se crea una lista desplegable:
Ejemplo de código declaración 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);
}
}
 En sombreado verde se tiene la creación del marco sobre el que se colocará la lista.
 En sombreado morado se tiene el ejemplo, donde se creó la lista y se le añadió un
modelo, indicando lo que debe estar visible, como:

18
o El modelo que es la configuración 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 sólo recibe modelos.
 En sombreado rojo se tiene la adición de la lista al marco.
Para conocer que elemento de la lista es el que se ha elegido, la clase JComboBox cuenta
con dos opciones, que se muestran a continuación:
Ejemplo de código detección del elemento seleccionado

lista.getSelectedItem().toString();
lista.getSelectedIndex();
La primer opción es obteniendo el elemento (item), el cual es seleccionado y convertido a

cadena (String). La conversión es necesaria debido a que el método getSelectedItem()
retorna un valor tipo objeto, y por lo general lo que se requiere es el texto elegido, por ello
se hace la conversión toString().
La segunda opción 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 método devuelve entonces un entero.
Toma en cuenta que, si quieres que el usuario sólo elija de una lista predefinida, lo más
conveniente es que utilices el componente gráfico lista desplegable. Pero si quieres que el
usuario sea quien ingrese la información 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 gráficos más utilizados para la creación
de los GUI, los elementos que se han visto anteriormente requieren de trabajo para su
configuración y obtención de datos, pero en particular los campos de texto deben también
contar con algún tipo de validación de la información que se está recibiendo.

19
Los contenedores cuentan con componentes, las

etiquetas sirven para colocar textos inamovibles
en la GUI, los botones reciben eventos, las
casillas de activación se activan o no, las listas
desplegables tienen algún elemento de la lista
elegido, pero el campo de texto proporciona
libertad al usuario de ingresar información como
él lo requiera, ya sea correcta o no, por ello es muy
importante realizar alguna validación a los datos
ingresados mediante este componente.
Primero se revisará el siguiente ejemplo de código de declaración y uso de campo de texto,

se describe la implementación de cajas de texto:
Ejemplo de código de declaración 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");

20
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);
}
}
 Se sombrea en azul la definición del paquete, clases a utilizar, el autor, así como la
 En sombreado verde se tiene la creación del marco en el que se colocarán los campos
de texto.
 En sombreado morado se tiene la declaración de dos campos de texto, al primero sólo
se le agrega un texto, y al segundo se le configura el tipo de letra y color.
 En sombreado rojo se tiene la adición del campo de texto al marco.
El ejemplo anterior muestra sólo la configuración de los campos de texto. Ahora se revisará
cómo obtener lo que el usuario haya ingresado y también como validarlo.
Es importante resaltar que el campo de texto tiene dentro una cadena, porque así está
estipulado en su definición. Revisa los siguientes tres ejemplos:
Ejemplo de código declaración y uso de campo de texto

String texto=campoTexto1.getText();
intentrada= Integer.parseInt(campoTexto2.getText());
if (campoTexto3.getText().length() == 10){
// código si la condicion cumple
}
-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 número entero, entonces se declara un entero, se obtiene el texto y se convierte en
entero (Integer.parseInt).

21
-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 tamaño (length()) y se valida que ese tamaño sea igual a 10.
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 atención en lo que se necesita
para poder programarlo adecuadamente. Los campos de texto como has visto reciben
información del usuario, de la cual, típicamente reciben información breve, para las
ocasiones en que requieres mostrar o recibir una cantidad mayor de información debes
utilizar otro componente llamado área de texto, el cual será revisado en la siguiente
sección.
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 recepción de textos pequeños, es decir de una sola línea. Mientras que el
área de texto puede recibir varias líneas de texto y obviamente se utiliza para la recepción
de textos grandes.
Es importante que se comprenda el siguiente ejemplo de código de declaración y uso de

área de texto:
Ejemplo de código de declaración y uso de área de texto

package GUI;

22
/**
* @author ESAD
*/
public class areaTexto {

@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 sombreado verde se tiene la creación 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 tamaño de 20 columnas, es decir que todo el texto que se escriba se

23
acomodará a ese ancho, la segunda área tiene un pequeño texto y se dejó su propiedad
de edición en falso, lo que indica que el texto ahí no se puede editar, esto es útil para
cuando se quiere mostrar un texto de información al usuario sin brindarle la posibilidad
de modificarlo.
 En sombreado rojo se tiene la adición del área de texto al marco.
En el ejemplo anterior para obtener el texto introducido por un usuario también se usa el
método 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 sólo se utilizan cuando se
requiere recibir o mostrar una gran cantidad de información, 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 podrás
revisarlos en el siguiente apartado.
2.2.7. Separador
Para mantener una apariencia gráfica

ordenada, comúnmente se utilizan
secciones en la interfaz, para tener así
también ordenados los componentes
gráficos con que se cree ésta. Una de las
formas de hacer esta acción es mediante
paneles, y otra manera es utilizar
separadores, que son componentes
gráficos que ayudan en la división de
interfaces.
Los separadores son líneas 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.

24
Ejemplo de código declaración y uso de separador

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);
}
}
En el código anterior se demuestra y explica la creación y uso de separadores:


25
 En sombreado verde se tiene la creación del marco sobre en el cual se aplicará el

separador, así como la declaración 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 dirección, en este caso es horizontal, vea que al añadir los componentes al
marco se hizo, de la siguiente manera:
o Componente – separador – componente.
Indicando que el separador debía ubicarse entre ellos.
 En sombreado rojo se tiene la adición de las etiquetas de apoyo al marco, así como del
separador.
2.2.8. Spinner
Existen situaciones en las que se requiere que los usuarios proporcionen alguna
información, pero esta información puede ser elegida de un conjunto de valores ordenados
de manera consecutiva, para estas ocasiones es recomendable utilizar el componente
gráfico spinner.
Este componente es una pequeña 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 comúnmente utilizado con números, pero también pueden colocarse textos y
fechas en las opciones que brinda. La intención al utilizar este componente es que los
elementos que contengan estén ordenados en alguna forma predeterminada.
Revisa el siguiente ejemplo de código de declaración y uso de spinner, donde se plasma la

creación y uso del componente spinner:

26
 En sombreado verde se tiene la creación del marco, sobre él se colocarán los spinner
que se crearon en bloque de código anterior.
 En sombreado morado se tienen dos spinner:
o El primero cuenta con una configuración de tipo numérica, donde, se tienen 4
parámetros, (el número donde aparecerá, número mínimo, número máximo,
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 adición de los spinner al marco.
Ejemplo de código declaración y uso de spinner

package GUI;
/**
* @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();

27
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 método,

spinner.getValue().toString();. El método 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 estén en orden
consecutivo, ya que este componente gráfico permite el movimiento de valor de manera
ascendente o descendente (flechas arriba o abajo).
2.2.9. Árbol
Este componente gráfico a diferencia de los anteriores crea un árbol de información, 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 información.
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 creación, se requieren padres

e hijos, los cuales normalmente son
utilizados para mostrar archivos, o
información que pueda ser
categorizada de manera jerárquica.
Analiza el siguiente ejemplo de código de declaración y uso de casillas de árbol, donde se

crea y maneja un árbol:
Ejemplo de código de declaración y uso de casillas de árbol
package GUI;

28
/**
* @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");

29
e3.add(treeNode4);
e2.add(e3);
e1.add(e2);
arbol.setModel(new javax.swing.tree.DefaultTreeModel(e1));
frame.add(arbol, BorderLayout.CENTER);
}
}
 En sombreado verde se tiene la creación del marco sobre el que se colocará el á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 serán raíces; después
se crean las hojas del árbol, y se van agregando (add) a la raíz a la que
pertenecerán.
o El último paso es añadir ese modelo creado al árbol declarado. Tal como en la
lista desplegable que primero se crea el modelo y después se agrega a la lista.
El árbol también primero se crea su modelo y después se agrega este al árbol.
 En sombreado rojo se tiene la adición del árbol al marco.
Antes de seguir con el siguiente subtema se verá un ejemplo de un programa conversor de

unidades, de manera que, además de crear y manipular componentes gráficos de manera
aislada, se aprenda cómo utilizarlos de forma conjunta para crear las GUI. El ejemplo se
muestra a continuación:

30
La imagen anterior cuenta con tres secciones que se describen a continuación:

 Equivalencia de moneda, se tiene una lista desplegable para elegir una moneda, se
oprime el botón “convertir” y muestra la equivalencia en la caja de texto que está
junto a pesos.
 Equivalencia de grados, tiene un spinner numérico para ingresar los grados
centígrados, las casillas de activación si fueron seleccionadas mostrarán la
equivalencia en las cajas de texto que están junto a ellas, si no se eligió, no muestra
nada al pulsar el botón convertir.
 Equivalencia de longitud se ingresa el número de pulgadas, yardas y/o millas y al
oprimir el botón convertir muestra en la caja de texto su equivalencia en centímetros,
metros y/o millas.
A continuación, se analizará el ejemplo de código de programa conversor de unidades que

creó la interfaz gráfica mostrada en la imagen anterior, así como la funcionalidad de esa
interfaz:
Ejemplo de código de 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();

31
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();

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();

32
frame.add(pnlMoneda, BorderLayout.WEST);
frame.add(pnlGrados, BorderLayout.CENTER);
frame.add(pnlLongitud,BorderLayout.EAST);
publicvoidaparienciaMoneda(){
//se configuran los componentes de moneda
pnlMoneda.setBackground(new java.awt.Color(255, 255, 255));
pnlMoneda.setBorder(javax.swing.BorderFactory.createTitledBorder(
javax.swing.BorderFactory.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
realizarán 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)

33
txtPesos.setText("16.99");
if(eleccion==1)
if(eleccion==2)
}
publicvoidaparienciaGrados(){
//se configuran los componentes de grados
pnlGrados.setBackground(new java.awt.Color(255, 255, 255));
pnlGrados.setBorder(javax.swing.BorderFactory.createTitledBorder(
javax.swing.BorderFactory.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
}
});

pnlGrados.setLayout(acomodo);
pnlGrados.add(lblCent);
pnlGrados.add(spnCn);
pnlGrados.add(cbxF);
pnlGrados.add(txtFr);
pnlGrados.add(cbxK);
pnlGrados.add(txtKv);
pnlGrados.add(btnTemp);

34
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));
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.createTitledBorde
r("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
}
});
btnMet.addMouseListener(new MouseAdapter() {
@Override

35
convertirMt(); //se invoca al metodo moneda, que sonde se

}
});
btnKm.addMouseListener(new MouseAdapter() {
@Override
convertirKm(); //se invoca al metodo moneda, que sonde se
}
});

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

36
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());
float km= (float) (millas * 1.609344);
txtKm.setText(String.valueOf(km));
}
}
 El código con sombreado azul: contiene la declaración del paquete, el autor, la clase,
definición del autor y las llaves correspondientes.
 El bloque de código sombreado rosa: tiene la declaración de todos los componentes
gráficos que se estarán utilizando en el programa, se debe notar que estas
declaraciones están fuera de todos los métodos, lo que significa que están
declarados a nivel de clase, recuerden que esto se hace cuando las variables se
utilizarán en toda la clase sin distinción, esto tiene la intención de poder manipular
cada uno de los componentes gráficos desde cualquier parte de la clase.
 La sección morada es el método que conjunta la apariencia total:
o Dentro de este método se crea el marco principal, y la definición de sus
características,
o Además, se mandan llamar los métodos de aparienciaMoneda();
aparienciaGrados(); aparienciaLongitud(); que cada uno de esos métodos
construye la apariencia de los paneles que conforman por partes la
apariencia total,
o También en este bloque al final se añaden los paneles que crean los
métodos mencionados en el punto anterior al marco principal.
 El bloque de código verde claro, crea la apariencia del pnlMoneda, en este método
se configuran las propiedades del panel, además de las etiquetas, la lista
desplegable, la caja de texto donde se colocará el resultado y el botón convertir, se
agrega al botón el manejo del evento mouseClicked y cuando lo detecte re-
direccionará el flujo del programa al método equivalenciaMoneda(); y por último se
acomodan los componentes gráficos mencionados en el panel, mediante el
administrador de diseño GridLayout.
 El bloque de código verde obscuro, es el método equivalenciaMoneda();
mencionado en el punto anterior, lo que realiza es que toma el índice elegido en la

37
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 código rojo claro, crea la apariencia del pnlGrados, en este método se
configuran las propiedades del panel, además de las etiquetas, el spinner, las
casillas de selección y el botón que activa la conversión, que redirecciona el flujo
del programa al método equivalenciaGrados(), y por último se acomodan los
componentes en el panel.
 El bloque de código rojo obscuro, toma el valor dado en el spinner, y calcula la
conversión de grados, si se han seleccionado mediante las casillas de activación,
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ó también el manejo de eventos para cada botón que
redirecciona el flujo a tres posibles métodos de conversión según se haya elegido.
Por último se muestra el acomodo de los componentes en el panel, en el que se
añadió la línea pnlLongitud.add(new JLabel(" ")); para crear un espacio en el panel
y que no aparecieran los componentes pegados unos a otros.
 El bloque naranja obscuro muestra los tres métodos de conversión de unidades, que
toman los valores de una caja de texto, calculan la conversión 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 métodos, respetando así el paradigma orientado a objetos.
Si ya has introducido el código mostrado en la clase previa (toda la clase completa) para su
ejecución en el IDE NetBeans, notarás que el compilador no permite su ejecución, recuerda
que para que eso ocurra debe definirse un método 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 continuación en el ejemplo de código de clase de llamado:
Ejemplo de código de clase de llamado

package GUI;
/**
* @author ESAD
*/
public class conv {

conversores c=new conversores();
c.aparienciaTotal();
}
}

38
 El código azul es la declaración del paquete, el autor y la clase, así como sus
respectivas llaves.
 Las dos líneas 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
línea invoca el método aparienciaTotal(); del objeto previamente creado, y
realizando esta llamada se crea el programa.
Es recomendable que se realicen modificaciones al código anterior para que se analice el

funcionamiento de cada línea.
2.3. Menú
El uso del menú facilita la ubicación de funciones de un

programa o aplicación, ya que sus elementos
funcionan como accesos rápidos, y con sólo un clic
sobre el elemento del menú de interés se llegará a la
pantalla o función deseada.
Tal como su nombre lo dice, el componente gráfico de

menú ofrece diferentes opciones de acciones a realizar
dentro de una aplicación, ya sea ir a otra ventana, o
realizar alguna acción sobre la ventana actual.
En los siguientes subtemas se verá que los menús deben estar en una barra, cómo crearla,
así como la elaboración de los elementos y subelementos que el menú mostrará. También
se analizarán los menús emergentes.
2.3.1. Barra de menú
Las opciones que ofrecen los menús están contenidas en una barra, así que al crear un
menú lo primero que se debe hacer es crear la barra para después colocar en ella los
elementos que se vayan creando. Para comprender mejor su creación, se debe analizar el
siguiente ejemplo de código de declaración y uso de barra de menú.

39
Ejemplo de código de declaración y uso de barra de menú

package GUI;
/**
* @author ESAD
*/
public class menu{

@Override
System.exit(0);
}
});

JMenuBarbarra = new javax.swing.JMenuBar();

40
frame.add(barra, BorderLayout.PAGE_START);
frame.add(pnl, BorderLayout.PAGE_END);
}
}
El sombreado en:
 Azul es la definición del paquete, clases a utilizar, autor, así como la declaración de la
clase y el método.
 Verde tiene la creación del marco sobre el que se colocará el menú.
 Morado tiene un panel azul, creado sólo 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 adición de la barra de menú al marco.
Al ser la barra de menú un contenedor de elementos, sólo se requiere declararla, lo que
conforma en sí este elemento serán las acciones que se adicionen.
En seguida se verá cómo crear elementos del menú que son las opciones que se mostrarán,
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 sección
anterior se revisaron los
elementos que debe
contener una barra, la cual
se declara. Ahora se
estudiará cómo se crean
los elementos que
conformarán las diferentes
opciones del menú.
En el siguiente ejemplo de código declaración y uso de menú, se crean elementos del

menú, y se añaden a una barra del menú para mostrarlos en la interfaz, en la cual
deberás ligar cada descripción con el código que se explica, para que se comprenda de
mejor manera la sintaxis de los menús a continuación se presenta una explicación y el
código:
Ejemplo de código declaración y uso de menú

41
package GUI;
/**
* @author ESAD
*/
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");

42
elemento2.add(sub1);
barra.add(elemento1);
barra.add(elemento2);
frame.add(barra, BorderLayout.PAGE_START);
}
}
 En sombreado verde se tiene la creación del marco sobre el que se colocará el menú.
 En sombreado morado se tiene un panel azul, creado sólo para ubicar mejor en la
pantalla el menú (se crea la barra del menú). Después se crean los elementos del
menú new javax.swing.JMenu(); y se añaden los elementos del menú (add) a la barra
previamente creada. Si se requieren submenús (javax.swing.JMenuItem()), se crean y
se añaden al menú de donde se deberán desplegar.
 En sombreado rojo se tiene la adición de la barra de menú al marco.
Se debe entender que el acomodo de menús queda de la siguiente manera, revisa la

siguiente imagen:
Elementos del menú Barra de menú
Sub-menú
Sub-menú Sub-sub-menú
Menús
Para comprender mejor el acomodo de la imagen anterior revisa lo siguiente:

 El elemento principal es la barra de menú
 Después los elementos del menú, que son los que aparecen inmediatamente
sobre la barra, éstos se añaden precisamente a la barra.
 Si el elemento de menú va a desplegar otras opciones se crean submenús y éstos
se agregan al elemento de menú de donde se van a desplegar.
 Si el submenú requiere también que se desplieguen otros sub-submenús, se
agregan al submenú de donde se deberá desplegar.
Además de los menús tradicionales, como el que se acaba de revisar, también existe el
menú emergente el cual se estudiará a continuación.

43
2.3.3. Menú emergente
En ocasiones se requiere contar con un menú que no esté visible todo el tiempo, que
aparezca sólo cuando el usuario así lo requiera, para ahorrar espacio dentro de la interfaz
gráfica de usuario, para ello existen los menús emergentes.
El menú emergente (popup) no

se encuentra visible al aparecer
la ventana gráfica de una
aplicación, deberá agregarse en
el manejo de eventos para que
aparezca, su construcción es
similar a los anteriores. Se
comienza con la declaración del
menú emergente, se crean
elementos de menú y se añaden
al emergente, tal como si se
añadieran a una barra de menú.
Observa el siguiente ejemplo de código:
Ejemplo de código de declaración y uso de menú emergente

package GUI;
/**
* @author ESAD
*/
public class menu{


44
@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);
frame.add(popup, BorderLayout.PAGE_START);
}
}
En el código anterior se observa cómo crear un menú emergente, el cual al igual que en un
menú normal deberán crearse primero sus elementos y después añadirse a éste:
 En sombreado verde se tiene la creación del marco sobre el que se colocará el menú.
 Se crea el menú emergente (JPopupMenu()). Después se crean los elementos del menú
JMenuItem() y se añaden los elementos del menú (add) al menú emergente
previamente creado.
 En sombreado rojo se tiene la adición del menú emergente al marco.
En este tema se ha analizado a los menús y su creación, esta última comienza con la
implementación de los elementos que los compondrán, así como la barra en la que se
posicionará el menú completo. También se analizaron los menús emergentes, la única
diferencia entre ellos es que el menú normal siempre está visible para el usuario en la
interfaz gráfica, mientras que el menú emergente aparecerá sólo 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 sólo es la creación de una línea divisoria para separar elementos de
un menú, su declaración es la misma y se añade entre los componentes que se quiera
separar.

45
Revisa el siguiente ejemplo de código de declaración y uso de separador, así como la

imagen siguiente, en donde se está agregando un submenú, después se coloca un
separador y después otro submenú, lo que mostrará una división entre los submenús.
Ejemplo de código de declaración 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 menús se deberán agregar
eventos a éstos para que generen las acciones requeridas por los menús.
2.4. Ventanas
Hasta ahora se han visto diferentes componentes gráficos para crear una sola pantalla,
enseguida se verá cómo crear diferentes pantallas o ventanas en una misma aplicación. Es
decir, se construirán diferentes marcos que se comuniquen entre sí, además de conocer
las ventanas auxiliares que pueden dar información a los usuarios (cuadros de diálogo),
ventanas que pueden proporcionar información de los archivos que tiene nuestra
computadora (JFileChooser) y el cambio de una ventana (marco) a otra.
Ejemplos de ventanas

46
2.4.1. Cuadros de diálogo
Existen momentos en que un programa requiere que el usuario confirme o niegue

información, ingrese, o seleccione datos o simplemente que conozca lo que está pasando,
para esto se cuenta con los cuadros de diálogo que son de ayuda en estas ocasiones.
Los cuadros de diálogo son sub-

ventanas independientes, se utilizan
generalmente para dar avisos sobre
acciones que está realizando la
aplicación, ya sea para solicitar
confirmación de información, o para dar
avisos de error o advertencias (Oracle,
2012).
Existen diferentes tipos de cuadros de diálogo, entre ellos los siguientes:
 Diálogo de confirmación: el diálogo de confirmación como su nombre lo indica se

utiliza para confirmar alguna acción, el código que lo crea es el marcado en naranja
dentro del ejemplo de código 21, que se presenta más adelante.
Como se puede observar en el código, el diálogo de confirmación se igualó a un

entero, por lo que el diálogo de confirmación ofrece tres respuestas, Si, No y
Cancelar, tal y como se muestra en la imagen siguiente. Para saber qué respuesta
brindo el usuario, el diálogo de confirmación retorna un número con la opción
elegida, siendo 0-Si, 1-No y 2-Cancelar.

47
 Diálogo de entrada: este tipo de cuadro de diálogo solicita el ingreso de algún dato
en particular, el código que lo crea está en morado dentro del ejemplo de código
21, nótese que está igualado a una cadena, porque automáticamente este diálogo
retorna en una cadena lo que el usuario haya capturado en el cuadro de diálogo, si
se requiere otro tipo de dato tendrá que realizarse el casting (conversión de tipo de
datos) necesario. Este cuadro de diálogo se ejemplifica en la siguiente imagen:
 Diálogo de entrada personalizada: este cuadro de diálogo, al igual que el anterior,

solicita el ingreso de algún dato en particular, pero además la entrada de esos
datos puede personalizarse, en este caso el código que lo crea, está en morado
obscuro dentro del ejemplo de código 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 línea recibirá el objeto elegido del cuadro de diálogo, que tiene como
parámetros el título del cuadro de diálogo, así como el mensaje que mostrará; se
indica que es un mensaje de información y después se pasa el arreglo de objetos,
se indica el valor que mostrará por defecto (valores[0]). El resultado de ese código
implementado se muestra en la siguiente imagen:
 Mensaje: en este cuadro de diálogo se muestra un mensaje al usuario, una de las

características interesantes de este cuadro de diálogo es que puedes indicar el
tipo de mensaje que es y en base a ello colocará un icono representativo (revisa el
código que los crea marcado en verde dentro del ejemplo de código 21), el
resultado de código se muestra en las siguientes imágenes respectivamente:
o Mensaje de cuidado.

48
o Mensaje de error.
o Mensaje plano.
 Diálogo opcional: en este cuadro de diálogo pueden personalizarse los botones

que tendrá, así como lo que éstos dirán, después de analizar todos los ejemplos
anteriores, se debe resaltar que no se indica nada sobre los botones que
aparecerán, ya que se crean automáticamente, pero en este cuadro de diálogo en
particular puedes personalizar los botones. Como podrás ver en el ejemplo de
código 21, en la sección roja; lo primero es crear un arreglo de objetos con los
botones que contendrá. Después se pasa esto como parámetro. El resultado se
muestra en la siguiente imagen:
Revisa detalladamente el siguiente código, en el que se tienen los bloques que

construyen cada uno de los cuadros de diálogo mencionados. Identifica cada porción
mencionada, para que puedas comprender mejor la sintaxis.
Ejemplo de código de declaración y uso de cuadros de diálogo

package GUI;
import javax.swing.JOptionPane;
/**
* @author ESAD
*/
public class ventanas {

49
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" };

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 más 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.

50
En el ejemplo que se muestra a

continuación sólo se crea el selector de
archivos, éste normalmente se utiliza en
un programa más 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
sólo se construirá la ventana para fines
didácticos sobre la creación de
componentes gráficos que se ha creado
separado.
A continuación, se presenta en el ejemplo de código de declaración y uso de la ventana

selector de archivos, así como su utilización:
Ejemplo de código declaración y uso de la ventana selector de archivos

package GUI;
import java.io.File;
import javax.swing.JFileChooser;
/**
* @author ESAD
*/
public class ventanas2 {
public static void main(String[] args){

JFileChooser fc= new JFileChooser();
fc.showOpenDialog(null);
File file = fc.getSelectedFile();
System.out.print(file);
}
}
 Lo primero es crear un objeto del tipo selector de archivo e indicar que se muestre,
como se hace en la sección morada.
 Una vez que se muestra para conocer el archivo que se ha elegido se utiliza un
método creado para ello, y se muestra el resultado en consola, como se hace en la
sección roja.
Una de las prácticas más comunes al crear programas con componentes gráficos 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, después se invoca de ese

51
objeto al método que inicia la creación de la apariencia gráfica y por último se elimina de la
pantalla la ventana anterior, tal como se muestra en el ejemplo de código siguiente.
Ejemplo de código de cambio de ventana.

claseCambioc= new claseCambio();
c.metodoApariencia();
this.dispose();
Con esta información se concluye el estudio de las ventanas, lo importante es aprender que
se pueden cambiar de ventanas, para obtener o pasar información de una a otra, tal como
lo hacen los programas más conocidos. Por ejemplo, cuando se quiere imprimir, se abre
una ventana independiente del programa en ejecución para dar las indicaciones de la
impresión, esto es algo que podrás 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 gráficos, que son los elementos mediante los que se crean las interfaces
gráficas de usuario.
Como parte de este tema se vieron los contenedores, que son aquellos elementos que
conjuntan a los componentes gráficos para acomodarlos y crear las interfaces, también 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.
También se analizaron los controles, que son los componentes gráficos que conforman la
interfaz, entre ellos están las etiquetas con que se nombran los campos, los botones que
disparan acciones, las casillas de activación que detectan valores boléanos, las listas
desplegables para que el usuario pueda elegir un elemento de una lista predefinida, campos
de texto para recopilar información, á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 información y árboles que despliegan
información jerárquica.
Además, se estudiaron las barras de menús, los elementos de éstos, y también menús
emergentes, que ayudan a tener concentrada la información 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 cómo cambiar de una a otra, así como
el despliegue de cuadros de diálogo que ayudan a retroalimentar a los usuarios sobre el
funcionamiento del programa.

52
La siguiente unidad trata

sobre conexión a bases de
datos, todo lo que se ha
visto en esta unidad te será
de utilidad, ya que para
mostrar información
obtenida de la base de
datos requieres
componentes gráficos
donde colocar dicha
información.
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 estás
preparado(a) para seguir con la unidad tres, en donde continuarás con la revisión de
conexión a base de datos, para que al final de la materia logres crear aplicaciones más
completas con almacenamiento de datos.
Para saber más
Es importante que instales un IDE en tu computadora personal para que pases todos los
ejemplos de código y veas cómo funcionan, de esta manera podrás analizar el
funcionamiento de los códigos 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/
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 dirección electrónica:
 (Oracle,The Java Tutorials. Recuperado de

http://docs.oracle.com/javase/tutorial/uiswing/components/index.html
En esta página obtendrás todas las propiedades para cada componente con que cuenta
JAVA, está escrito directamente por los autores del lenguaje.

53
Fuentes de consulta
 Ceballos, F. J. (2006). Java 2: Interfaces gráficas 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: O’Reilly.

54

Java

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Java

Cargado por

Copyright:

Formatos disponibles

Programación orientada a objetos II

Unidad 2. Componentes gráficos

Unidad 2. Componentes gráficos

Universidad Abierta y a Distancia de México

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

Unidad 2. Componentes gráficos

 Identificar diferentes tipos de componentes gráficos

 Utilizar las clases y estructuras de los

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

Observa el siguiente ejemplo de código declaración de un panel

public class panel {

public static void main (String args[]){

JFrame frame=new JFrame("Marco / Frame");

JPanelpnl = new javax.swing.JPanel();

JPanel pnl2 = new javax.swing.JPanel();

JPanel pnl3 = new javax.swing.JPanel();

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

A continuación, se explicará el código anterior.

Nota: el marco es la ventana sobre la que se construye la apariencia gráfica de un

Véase el siguiente ejemplo de código de declaración de un marco:

Ejemplo de código declaración de un marco

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

Salida de pantalla del marco

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

Como ya se mencionó anteriormente para construir interfaces gráficas se utilizan clases ya

 BorderLayout: esta distribución acomoda los componentes en máximo 5

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

 CardLayout: permite implementar un área que contiene diferentes componentes en

 GridLayout: esta distribución acomoda los componentes en filas y columnas, ajusta

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

 GroupLayout: maneja un diseño de los elementos verticales y horizontales de

 SpringLayout: esta distribución permite definir la relación de espacio entre los

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

Como ejemplo de la creación de etiquetas, revisa el siguiente código de declaración y uso

Ejemplo de código declaración y uso de etiquetas

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

public class etiquetas {

public static void main (String args[]){

JFrame frame=new JFrame("Marco / Frame");

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

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

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

El ejemplo anterior se encuentra conformado de la siguiente manera:

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

 En sombreado morado se tienen las etiquetas, en este ejemplo se crearon tres

El tema que se tratará en este apartado es el de botones. En este se abordará cómo se

Estos componentes son típicamente utilizados para recibir eventos y desencadenar el

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

Ejemplo de código declaración y uso de botones

public class marco {

public static void main (String args[]){

JFrame frame=new JFrame("Marco / Frame");

JButtonbtn = new javax.swing.JButton();

JButton btn2 = new javax.swing.JButton();

JButton btn3 = new javax.swing.JButton();

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software

Lo importante de los botones es que son el

Antes de continuar con el siguiente componente

2.2.3. Casilla de activación

En las ocasiones en que requieres permitir que

Las casillas de activación son componentes