Unidad 2. Componentes Graficos

Programacin orientada a objetos II
Unidad 2. Componentes Grficos

Ciencias Exactas, Ingenieras y Tecnologa | Ingeniera en Desarrollo de Software
1

Ingeniera en Desarrollo de software
5 Cuatrimestre

Programa de la asignatura:
Unidad 1. Eventos de Java

Clave: 150920518/ 160920518

Universidad abierta y a distancia de Mxico


2
ndice

Unidad 2. Componentes grficos
Presentacin de la unidad .............................................................................................. 4
Propsito ........................................................................................................................ 4
Competencia especfica ................................................................................................. 4
Actividad 1. Componentes grficos ................................................................................ 4
2.1. Contenedores .......................................................................................................... 5
2.1.1. Paneles ................................................................................................................ 5
2.1.2. Marco ................................................................................................................... 7
2.2. Controles ............................................................................................................... 12
2.2.1. Etiqueta .............................................................................................................. 12
2.2.2. Botones .............................................................................................................. 14
2.2.3. Casilla de activacin ........................................................................................... 16
2.2.4. Lista desplegable ............................................................................................... 18
2.2.5. Campo de texto .................................................................................................. 20
2.2.6. rea de texto ...................................................................................................... 22
2.2.7. Separador .......................................................................................................... 24
2.2.8. Spinner ............................................................................................................... 25
2.2.9. rbol ................................................................................................................... 27
Actividad 2. Contenedores y controles ......................................................................... 38
2.3. Men ..................................................................................................................... 39
2.3.1. Barra de men .................................................................................................... 39
2.3.2. Elemento de men ............................................................................................. 40
2.3.3. Men emergente ................................................................................................ 42
2.3.4. Separador .......................................................................................................... 44
2.4. Ventanas ............................................................................................................... 45
2.4.1. Cuadros de dialogo ............................................................................................ 45
2.4.2.Ventanas independientes y sus cambios ............................................................. 49
Actividad 3. Mens y ventanas ..................................................................................... 50
Autoevaluacin ............................................................................................................. 50
Evidencia de aprendizaje. ............................................................................................ 51

3
Autorreflexiones ........................................................................................................... 51
Cierre de la unidad ....................................................................................................... 51
Para saber ms ............................................................................................................ 52
Fuentes de consulta ..................................................................................................... 53


4
Unidad 2. Componentes grficos

Presentacin de la unidad

Bienvenido a la unidad dos en donde examinaras 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 almacn 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, que te ayudara a comprender mejor cada forma en que se
construyen las interfaces grficas.

No olvides consultar las dudas que te surjan a tu facilitador para una mejor comprensin a
los temas y dar continuidad a tu estudio de POO2.

Propsito

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

Actividad 1. Componentes grficos

Antes comenzar con el contenido temtico de esta unidad dos, te presentamos un foro de
discusin general, creado para que junto a tus compaeros discutan en torno al tema del
uso de componentes grficos al crear aplicaciones de software; en l, conocers los
puntos de vista de tus compaeros.

5
Propsito: comprender en grupo el tema principal de la unidad Los componentes como
instruccin a ste.

Para comenzar tu participacin, ingresa al foro: Componentes grficos y contesta las
siguientes preguntas:

Cules son los componentes grficos que conoces? Cul crees que es el componente
ms importante para crear cualquier aplicacin de software? y Por qu?

Recuerda realizar comentarios a la participacin de tus compaeros en el foro.

2.1. Contenedores

Las aplicaciones ms utilizadas cuentan con interfaz GUI (siglas en ingls) que en
espaol significa 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 solo
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 y seguramente cuenta con un espacio para escribir texto; pues estos elementos
que acabamos de mencionar son justamente componentes grficos.

Todos los componentes grficos son objetos y como tales para declararlos se debe
invocar 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 tanto deberemos importar dicha librera (recuerda que una librera es un
conjunto de funcionalidades estndares compartidas, que ya estn codificadas y solo
debemos utilizar) para el uso de estos componentes. (Ceballos, 2006).

Finalmente solo falta mencionar que los contenedores son supra-componentes 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, veremos cmo crear contenedores, as
como sus caractersticas y propiedades configurables.
2.1.1. Paneles

El primer tipo de contenedores que revisaremos son los paneles, estos ayudan a definir
secciones dentro de una interfaz grfica.

6

Entonces decimos que los paneles son secciones que pueden configurarse de diferentes
tamaos, colores, mrgenes, etc. Estos sirven para segmentar la apariencia grfica de
una aplicacin, pudiendo 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, pues 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, Veamos el siguiente bloque de cdigo:

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


7
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);
}
}
Ahora explicaremos el cdigo presentado.
En azul aparece la definicin del paquete donde se encuentra la clase y la
importacin de bibliotecas, recuerda que esto es importante, pues el 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 adems cuenta con un borde.
Por ltimo en la seccin roja se agregan los panales al marco.

Cmo pudiste observar se hablo del marco (la ventana) que es el contenedor principal,
donde se encontrarn los panales, por lo tanto continua con el siguiente tema para que
comprendas la definicin de un marco y 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 al 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.

Veamos el siguiente ejemplo de cdigo, donde:
Se sombrea en azul la definicin del paquete, librera 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

8
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 hemos
llamado frame, se configuran sus atributos mediante mtodos que ya se
encuentran previamente definidos en la clase JFrame. En este caso se
configuraron 3 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 el 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.

9

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 graficas se utilizan libreras
ya predefinidas; las bibliotecas de clases Java para el desarrollo de interfaces grficas de
usuario son Swing y AWT, estas 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, estas 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:

Ejemplo de BorderLayout

10

BoxLayout: esta distribucin acomoda todos los componentes uno tras de otro en
una sola fila o columna, segn el espacio disponible, a continuacin observa el
ejemplo de ste:

Ejemplo de BoxLayout

CardLayout: permite implementar un rea que contiene diferentes componentes en
diferentes momentos, observa el ejemplo:

Ejemplo de CardLayout

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 en seguida:

De izquierda a derecha.

Ejemplo de FlowLayout

GridLayout: esta distribucin acomoda los componentes en filas y columnas,
ajusta los elementos a que tengan un tamao similar, tal como lo veras en el
siguiente ejemplo:

Lo sealado
sera el rea
implementada.

11

Ejemplo de GridLayout

GridBagLayout: alinea los elementos en filas y columnas, como el anterior, con la
diferencia de que permite que un componente cubra varias filas y/o columnas
presentados en el siguiente ejemplo:

Ejemplo de GridBagLayout

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 lo veras a continuacin:

Ejemplo de GroupLayout

SpringLayout: esta distribucin permite definir la relacin de espacio entre los
componentes y sus bordes, observa el ejemplo:
Vertical
Horizontal

12

Ejemplo de SpringLayout

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 hemos visto los contenedores (paneles y marcos), as como las
distribuciones (layout) para el acomodo de componentes dentro de los contenedores. En
los temas siguientes veremos los dems componentes grficos.

2.2. Controles

En los siguientes apartados observaras todo lo relacionado con el tema controles, con los
que podrs comenzar a crear apariencias grficas ms sofisticadas para los programas
que vayas creando.

Realizando un recuento de la unidad, en el 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 veremos 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.

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, veamos el siguiente cdigo, en donde se
representa el uso de sus propiedades:

Ejemplo de cdigo 3. Declaracin y uso de etiquetas
package GUI;
Espacio

13


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

etiq2.setForeground(Color.yellow);

etiq3.setVisible(false);

frame.add(etiq1, BorderLayout.PAGE_START);
frame.add(etiq2, BorderLayout.CENTER);
frame.add(etiq3, BorderLayout.PAGE_END);


14
}
}

El ejemplo previo se encuentra conformado de la siguiente manera:
Se sombrea en azul la definicin del paquete, libreras 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 coloco un texto (setText) y diferentes propiedades a
cada una, de las cuales:
o En la primera etiqueta se configuro 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 La segunda etiqueta se configuro 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. Te invitamos a continuar con el siguiente tema, para que
contines involucrndote con el manejo de componentes grficos.
2.2.2. Botones

El tema que trataremos en este apartado es el de botones, en este veremos 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.

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 este desencadenar.

Veamos el siguiente ejemplo, donde podrs 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:

15
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 solo 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
System.exit(0);
}
});

JButtonbtn = new javax.swing.JButton();
btn.setText("Boton1");
btn.setMnemonic('B');

JButton btn2 = new javax.swing.JButton();
btn2.setText("Boton2");

16
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 manejado de eventos
ms utilizado, por lo que 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
recordarte, que en los botones debes hacer el manejo de eventos, para que estos
(botones) re-direccionen el flujo del programa hacia el mtodo que tratar la informacin,
y el programa funcione como se requiere.
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 solo dos valores; Verdadero o Falso, es decir, solo
sabremos si se activ o no, para comprender mejor lo dicho observa el siguiente ejemplo
de cdigo 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 veras que:

o La primer casilla solo 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 estos componentes solo pueden tener dos valores
Verdadero/ Falso (True/False).

17
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
*/

public class casilla {



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

JCheckBox check1 = new javax.swing.JCheckBox();
check1.setText("Chek1");

check2.setSelected(true);

check3.setForeground(Color.red);


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

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 solo recuerda que si quieres que los usuarios realicen elecciones sobre
mltiples opciones debes utilizar casillas de activacin, en el caso que solo 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 solo podr elegir una opcin.

Las listas desplegables ofrecen al usuario varias opciones de eleccin para un mismo
concepto, pudiendo elegir solo uno de ellos.

Veamos el siguiente ejemplo de cdigo, 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, estas no pueden agregarse
directamente a la lista, pues la lista solo 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 pues el mtodo getSelectedItem() retorna un
valor tipo objeto, y por lo general lo que requerimos es el texto elegido, por ello se hace la
conversintoString();.

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 solo 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 nuestro siguiente tema.
2.2.5. Campo de texto

Los campos de texto son uno de los componentes grficos ms utilizados para la creacin
de GUIs, los elementos que hemos 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, contienen 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 veamos el siguiente ejemplo, en el cual se describe el cdigo para la
implementacin de cajas de texto:
Se sombrea en azul la definicin del paquete, libreras 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, donde el
primero solo 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.

Ejemplo de cdigo 9. Declaracin y uso de campo de texto
package GUI;


21

/**
* @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 previo muestra solo la configuracin de los campos de texto ahora veamos
cmo obtener lo que el usuario haya ingresado y tambin como validarlo.

Es importante resaltar que lo que el campo de texto tiene dentro siempre es una cadena,
pues as est estipulado en su definicin. Veamos los siguientes tres ejemplos donde:
-En el ejemplo 1 sombreado azul, supongamos 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()).

22
-En el ejemplo 2 sombreado morado, supongamos 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, supongamos 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 estos tres ejemplos pueden darse muchos otros todo depende de lo que se
requiera del programa, as que pon 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.
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.

Para ello es importante que lo comprendas con el siguiente ejemplo, 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.


23

Ejemplo de cdigo 11. Declaracin y uso de rea de texto
package GUI;


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


24
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 ten en cuenta que las reas de texto solo se utilizan cuando requieres recibir o
mostrar una gran cantidad de informacin, si no requieres esto mejor utiliza los campos de
texto que vimos en el apartado anterior y ahorra espacio en tu interfaz.

Uno de los elementos que ayudan a ordenar las interfaces son los separadores, pues
estos ayudan a dividir la apariencia de la interfaz del programa, estos componentes
podrs revisarlos en el siguiente apartado.
2.2.7. Separador

Para mantener una apariencia grfica ordenada, comnmente se utilizan secciones en la
interfaz, para tener as tambin tener ordenados los componentes grficos con que se
cree esta. Una de las formas de hacer esto 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.

Veamos el siguiente ejemplo de cdigo, 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
package GUI;


25

/**
* @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);
}
}
Los separadores te sern de utilidad para dar un mejor orden y apariencia a las interfaces
que implantes.
2.2.8. Spinner

Existen situaciones en las que requerimos que los usuarios nos den 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 fechitas se puede ir incrementando o reduciendo su
valor.

26

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 algn orden predeterminado.

Veamos el siguiente ejemplo de cdigo, 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;


/**
* @author ESAD
*/

public class ejemploSpinner{



@Override

27
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 le valor que se ha
seleccionado en el spinner, y retorna un objeto, por lo que debemos convertir el objeto en
cadena toString(), para que podamos 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).
2.2.9. rbol

Este componente grfico a diferencia de los anteriores crea un rbol de informacin como
tal, permitiendo 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 podramos
comprarlo 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.
Veamos el siguiente ejemplo de cdigo donde se crea y maneja un rbol:

rbol.

28
En sombreado morado se tiene el rbol del cual:
o Lo primero es declara 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;


/**
* @author ESAD
*/

public class arbol{



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

JTreearbol= new javax.swing.JTree();
javax.swing.tree.DefaultMutableTreeNode e1 = new

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

frame.add(arbol, BorderLayout.CENTER);

}
}

Antes de seguir con el siguiente subtema veamos un ejemplo de un programa conversor
de unidades, de manera que adems de crear y manipular componentes grficos de
manera aislada, aprendas como utilizarlos de manera conjunta para crear GUIs. El
ejemplo queda como la imagen que se muestra a continuacin:


30

GUI del programa conversor de unidades

La imagen 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
esta junto a pesos.
Equivalencia de grados, tiene un spinner numrico para ingresar los grados
centgrados, las casillas de activacin si fueron seleccionadas mostraran 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 analicemos el cdigo 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.
El bloque de cdigo sombreado rosa: tiene la declaracin de todos los
componentes grficos que se estarn utilizando en el programa, ntese 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

31
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 re-
direccionar 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();), y en base a este 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 re-direcciona 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 re-direcciona 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.
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.

Ntese en el ejemplo que el programa esta 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;

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

33
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
pnlMoneda.setBackground(new java.awt.Color(255, 255, 255));

pnlMoneda.setBorder(javax.swing.BorderFactory.createTitledBorder(javax.swing.BorderFa
ctory.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

34
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
pnlGrados.setBackground(new java.awt.Color(255, 255, 255));

pnlGrados.setBorder(javax.swing.BorderFactory.createTitledBorder(javax.swing.BorderFa
ctory.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

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

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

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

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

37

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());
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,
pues 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 llamado la cual se muestra a continuacin:
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.


38
Ejemplo de cdigo 16. Clase de llamado
package GUI;
/**
* @author ESAD
*/
public class conv {

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

Es recomendable que realices modificaciones al cdigo presentado en el ejemplo 16 para
que juegues con l y veas el funcionamiento que cada lnea crea.

Actividad 2. Contenedores y controles

En esta actividad se solicita que se realice un programa con apariencia grfica, este
programa deber contener el uso de todos los componentes grficos que se han visto
hasta este momento (contenedores -paneles y marcos- y controles -etiqueta, botn,
casilla de activacin, lista desplegable, campo de texto, rea de texto, separador, spinner
y rbol). Esto con la finalidad de que practiques la construccin de componentes grficos
y la manipulacin de sus propiedades.

Propsito: Crear un programa en base a componentes grficos, donde se manipulen las
propiedades de los diferentes tipos de contenedores y controles grficos.

Para comenzar con tu prctica, realiza las siguientes instrucciones:

1. Crea un proyecto en Netbeans, que contenga las clases necesarias para
completar un programa, demostrando los diferentes tipos de contenedores y
controles grficos, incluyendo la estructura algortmica (pasos) y sintctica (cdigo)
vistos durante la unidad.
2. Copia todo el cdigo en un procesador de textos, sombrea cada parte del cdigo y
describe lo que muestras, enva adems del proyecto el documento con la
descripcin de tu cdigo.
3. Guarda la actividad con el nombre POO2_U2_A2_XXYZ. Sustituye las XX por las
dos primeras letras del primer nombre, la Y por la inicial del apellido paterno y la Z
por la inicial del apellido materno.
Ingresa al apartado de tareas, sube tu archivo para el facilitador(a) y recibe
retroalimentacin.


39
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 solo 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 veremos que los mens deben estar en una barra, cmo
crearla, as como crear los elementos y subelementos que el men mostrar. Tambin
veremos 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 que comprendas mejor el cmo crearla, presta
atencin al siguiente ejemplo en donde encontraras sombreado en:

Azul: la definicin del paquete, libreras a utilizar, autor, as como la declaracin de
la clase y el mtodo.
Verde: se tiene la creacin del marco sobre el que se colocar el mnu.
Morado: se tiene un panel azul, creado solo para ubicar mejor la barra del men,
se crea la barra del men en la pantalla mediante su constructor new
javax.swing.JMenuBar().
Rojo se tiene la adicin de la barra de men al marco.

Al ser la barra de men un contenedor de elementos, solo requerimos declararla, lo que
conforma en si este elemento sern las acciones que se adicionen.

Ejemplo de cdigo 17. Declaracin y uso de barra de men
package GUI;


/**

40
* @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);
}
}

En seguida veremos cmo crear elementos del men que son las opciones que se nos
mostrarn; las cuales 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; Por lo tanto en la seccin
anterior se vio que los elementos se deben contener en una barra la cual se declara,
ahora veremos cmo se crean los elementos que conformarn las diferentes opciones del
men.

En el siguiente ejemplo de cdigo se crean elementos de men, y se aaden a una barra
de men para mostrarlos en la interfaz, en el cual debers ligar cada descripcin con el
cdigo que se explica, para que comprendas mejor la sintaxis de los mens, veamos a
continuacin la explicacin y cdigo:

41
men.
En sombreado morado se tiene un panel azul, creado solo 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
*/

public class menu{



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

frame.add(pnl, BorderLayout.PAGE_END);

42

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

}
}

Entindase entonces que el acomodo de mens queda de la siguiente manera:
Barra de men Elementos del men
Sub-men
Sub-sub-men
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, estos se aaden precisamente a la barra.
Si el elemento de men va a desplegar otras opciones se crean submens y estos
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 estos al submen de donde se deber desplegar.

Adems de los mens tradicionales como el que acabamos de revisar tambin existe el
men emergente el cual veremos a continuacin.
2.3.3. Men emergente


43
En ocasiones se requiere contar con un men que no est visible todo el tiempo, que se
vea solo 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) al aparecer la ventana grfica de una aplicacin no se ve,
debern agregarse manejo de eventos para que aparezcan, su construccin es similar a
los anteriores, se declara el men emergente, se crean elementos de men y se aaden
al emergente, tal como si se aadieran a una barra de men.

Veamos el siguiente ejemplo, donde se ve cmo crear un men emergente, el cual al
igual que en un men normal debern crearse sus elementos y despus aadirse a este:
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{




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 este tema hemos visto los mens y que para crearlos debemos construir tambin los
elementos que los compondrn, as como la barra en la que se posicionara el men
completo. Tambin vimos los mens emergentes, la nica diferencia entre ellos es que el
men normal esta siempre visible para el usuario en la interfaz grfica, mientras que el
men emergente surgir solo cuando el usuario se posicione sobre el rea donde se
mostrar, de esta manera el men solo ser disponible cuando el usuario as lo quiera.
2.3.4. Separador

El separador de men es el mismo concepto del separador de ventana visto
anteriormente (2.2.7. Separador), ste solo es la creacin de una lnea divisoria para
separar elementos de un men, su declaracin es la misma y solo se aade entre los
componentes que se quiera separar.

Observa el siguiente ejemplo de cdigo y su imagen, 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);


45
Ejemplo de separador en un men

Por ltimo cabe resaltar que para un manejo adecuado de los mens se debern agregar
eventos a estos para que generen las acciones requeridas por los mens.

2.4. Ventanas

Hasta ahora se han visto diferentes componentes grficos con los que se crean en una
sola pantalla, ahora veremos cmo crear diferentes pantallas o ventanas en una misma
aplicacin. Es decir construiremos diferentes marcos que se comuniquen entre s, adems
de conocer las ventanas auxiliares que pueden dar informacin a los usuarios (cuadros de
dialogo), ventanas que pueden proporcionarnos informacin de archivos que tiene nuestra
computadora (JFileChooser) y el cambio de una ventana (marco) a otra.

2.4.1. Cuadros de dialogo

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 dialogo que son de ayuda en estas ocasiones.

Los cuadros de dialogo son sub-ventanas 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 dialogo, entre ellos los siguientes:

Dialogo de confirmacin: El dialogo 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 ms adelante se mostrara.

Como podrs observar en el cdigo el dialogo de confirmacin se igualo a un
entero, como se puede ver en la imagen siguiente que el dialogo de confirmacin
ofrece tres respuestas, Si, No y Cancelar, y para saber qu respuesta brindo el
usuario, el dialogo de confirmacin retorna un nmero con la opcin elegida,
siendo 0-Si, 1-No y 2-Cancelar.


46

Dialogo de confirmacin.

Dialogo de entrada: Este tipo de cuadro de dialogo 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, pues automticamente este dialogo
retorna en una cadena lo que el usuario haya capturado en el cuadro de dialogo, si
se requiere otro tipo de dato tendr que realizarse el casting (conversin de tipo de
datos) necesario. Este cuadro de dialogo se ejemplifica en la siguiente imagen.

Dialogo de entrada.

Dialogo de entrada personalizada: Este cuadro de dialogo al igual que el anterior
solicita el ingreso de algn dato en particular, pero adems la entrada de esos
datos puede personalizarse, en este caso el cdigo que lo crea, est en morado
obscuro dentro del ejemplo de cdigo 21, ntese 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 dialogo, 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 tambin el valor que mostrar por defecto (valores[0]).El
resultado de ese cdigo implementado se muestra en la siguiente imagen.

Dialogo de entrada personalizada.

47

Mensaje: Lo que realiza es mostrar un mensaje al usuario, una de las
caractersticas interesantes de este cuadro de dialogo es que puedes indicar el
tipo de mensaje que es y en base a ello colocar un icono representativo (vase el
cdigo que los crea marcado en verde dentro del Ejemplo de cdigo 21), el
resultado de cdigo se muestra en las siguientes imgenes:
o Mensaje de cuidado.
o Mensaje de error.
o Mensaje plano.

Mensaje de cuidado.

Mensaje de error.

Mensaje plano.

Dialogo opcional: En este cuadro de dialogo pueden personalizarse los botones
que tendr, as como lo que estos dirn, si has observado en todos los ejemplos
anteriores no se indica nada sobre los botones que aparecern, ya que estos se
crean automticamente, pero en este cuadro de dialogo 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. Y el resultado se muestra en la
siguiente imagen.

48

Mensaje de cuidado.

Revisa detalladamente el siguiente cdigo, donde se tienen los bloques que construyen
cada uno de los cuadros de dialogo mencionados. Identifica cada porcin mencionada,
para que puedas comprender mejor la sintaxis.

Ejemplo de cdigo 21. Declaracin y uso de cuadros de dialogo
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" };

49
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 utilizadas es el selector de archivos, este es
muy utilizado como su nombre lo indica para seleccionar un archivo o la ruta de alguna
carpeta. Generalmente esto es utilizado para la carga de archivos.

En el ejemplo que se muestra a continuacin solo 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 leeremos o escribiremos en un archivo,
pero por ahora solo construiremos la ventana para fines didcticos sobre la creacin de
componentes grficos que se ha creado separado.

A continuacin veremos cmo se utiliza en un ejemplo, pero para ello debers leer lo
siguiente:
Lo primero es crear un objeto del tipo selector de archivo e indicar que se
muestre, tal 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 {

public static void main(String[] args){
JFileChooser fc= new JFileChooser();
fc.showOpenDialog(null);
File file = fc.getSelectedFile();
System.out.print(file);
}
}

50

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 esto terminamos el estudio de las ventanas, lo importante es que aprendas que
puede 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.
Actividad 3. Mens y ventanas
Ahora que aprendiste todas las caractersticas de funcionamiento para los mens y
ventanas, ests listo para realizar las siguientes instrucciones.

Propsito: Construir mens y ventanas grficas, as como identificar su declaracin e
implementar su manipulacin.

Instrucciones:
1. Identifica los diferentes tipos de mens y ventanas grficas vistas en el desarrollo
de la unidad.
2. Identifica su estructura algortmica (pasos) y sintctica (cdigo).
3. Crea un proyecto en NetBeans, que contenga un programa donde apliques todos
los contenedores y controles identificados en los puntos 1 y 2.
4. Guarda la actividad con el nombre POO2_U2_A3_XXYZ. Sustituye las XX por las
5. Ingresa al apartado de tareas y sube tu archivo
6. Enva el archivo al facilitador(a) para recibir retroalimentacin.
7. Consulta la escala de evaluacin para conocer los parmetros de la actividad.

Autoevaluacin

Para reforzar los conocimientos relacionados con los temas que se abordaron en esta
segunda unidad del curso, es necesario que resuelvas la actividad de autoevaluacin .

51
Recuerda que es muy importante leer cuidadosamente los planteamientos indicados y
elegir la opcin adecuada para cada uno.

Evidencia de aprendizaje. Programa con componentes grficos

Como parte de la evaluacin de esta unidad, es necesario realizar un programa que
resuelva alguna problemtica de tu entorno y que utilices componentes grficos.

Ingresa al aula virtual para realizar la actividad.

Propsito: Realizar un programa modular utilizando componentes grficos.

Instrucciones:
1. Identifica los diferentes componentes grficos presentados durante esta unidad.
2. Identifica la estructura algortmica (pasos) y sintctica (cdigo) para manejar
componentes grficos.
3. Crea un proyecto en NetBeans. El proyecto deber contener las clases necesarias
para que construyas un programa que resuelva algn problema de tu entorno, y
que utilice interfaces grficas con el uso de todos los tipos de componentes
grficos vistos en la unidad (Por ejemplo una calculadora de intereses, calculadora
cientfica, clculos de pago de nmina, etc.).
4. Guarda la actividad con el nombre POO2_U2_EA_XXYZ. Sustituye las XX por las
5. Enva el archivo al facilitador(a) a travs de la seccin de Evidencias.

Autorreflexiones

Adems de enviar tu trabajo de la Evidencia de aprendizaje, es importante que ingreses
al foro Preguntas de Autorreflexin y consultes las preguntas que tu Facilitador(a)
presente, a partir de ellas, debes elaborar tu Autorreflexin en un archivo de texto llamado
POO2_U2_ATR_XXYZ. Posteriormente enva tu archivo mediante la herramienta
Autorreflexiones.

Cierre de la unidad

Has concluido la segunda unidad del curso, a lo largo de esta 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

52
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 vieron 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
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 vieron las barras de mens, los elementos de estos, 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 vieron las ventanas, para saber cmo cambiar de una a otra, as como el
despliegue de cuadros de dialogo 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 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.
*Nota: se recomienda que instales NetBeans 7.0, como IDE, por su facilidad de uso, este
puede ser descargado gratuitamente de la siguiente liga:
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 direccin electrnica:
(Oracle,The Java Tutorials, Consultado Enero, 2012)
http://docs.oracle.com/javase/tutorial/uiswing/components/index.html

53

En esta pgina obtendrs todos las propiedades para cada componente con que cuenta
JAVA, est escrito directamente por los duelos del lenguaje.
Fuentes de consulta

Robert Eckstein, Marc Loy, Dave Wood 1998 JAVA Swing Estados Unidos
de America OReilly

Francisco Javier Ceballos 2006 Interfaces grficas y aplicaciones para
internet, 2da Edicin Espaa RA-MA

Oracle 2011 The JAVA Tutorials Estados Unidos de America Oracle

Eckstein, R., Loy, M., Wood, D. (1998) JAVA Swing. Estados Unidos de Amrica:
OReilly.

Ceballos, F. (2006) Interfaces grficas y aplicaciones para internet, 2da Edicin.
Espaa: RA-MA.

Oracle (2011) The JAVA Tutorials. Estados Unidos de Amrica: Oracle.

Unidad 2. Componentes Graficos

Cargado por

Información del documento

Descripción 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

Unidad 2. Componentes Graficos

Cargado por

Copyright:

Formatos disponibles

Programacin orientada a objetos II

Unidad 2. Componentes Grficos

También podría gustarte