201 PROGRAMACION ORIENTADA A OBJETOS I

Programacin de interfaces
grficas de usuarios

Unidad de Aprendizaje N3
Programacin de interfaces grficas de
usuarios

Aprendizajes Esperados
Construye una interfaz grfica de usuario para que resuelva un
problema
Construye casos de prueba utilizando el framework JUnit para
verificar el correcto funcionamiento
Revisa la codificacin de clases programadas en Java utilizando la
herramienta de debugging del entorno de desarrollo para
detectar errores

Objetivos
Describir elementos de interfaces de
usuario Swing
Utilizar JFrame y JPanel
Utilizar
JLabel,
JButton,
TextField,
PasswordField,
TextArea,
ComboBox,
CheckBox, RadioButton y ButtonGroup
Utilizar MenuBar, Menu y MenuItem
Programar eventos en los componentes
Solucionar un problema a travs de una
interfaz grfica de usuario

GUI

Qu es GUI?

GUI: Interfaz Grfica de Usuario.

Software que permite la interaccin entre
el usuario y los servicios que proporciona
el sistema operativo, utilizando para ello
una representacin grfica intuitiva de
alto nivel.
La mayora de los GUIs de propsito
general siguen la llamada metfora de
escritorio y utilizan un sistema de
ventanas. Para la interaccin con el
usuario disponen de un nmero ms o
menos grande de elementos: botones,
editores, etc.

La programacin en un GUI determinado

requiere el uso de un toolkit (o SDK) para
ese GUI, en el lenguaje
de programacin que se quiera utilizar.
Puesto que Java pretende ser un lenguaje
multiplataforma, el diseo del toolkit para
programacin de GUIs se hizo pensando
en que las aplicaciones tuvieran un buen
aspecto en cualquier plataforma pero
independiente de cualquier GUI especfico.

Swing
Toolkit que permite crear interfaces
grficas en Java.
Es una evolucin del AWT, con un diseo
interno orientado a componentes y un look
mucho ms satisfactorio.

cules
son
los
elementos bsicos?

Elementos bsicos
Componentes
Permiten al usuario interactuar con la aplicacin y
proporcionarle informacin sobre el estado de sta:
mens, botones, barras de desplazamiento,
etiquetas, cajas de texto, listas de seleccin, ...

Contenedores
Componentes que contienen otros Componentes:
ventanas, frames, dilogos y paneles. Sirven para
contener y organizar otros componentes.

IDE NetBeans
El IDE NetBeans es una herramienta para
programadores pensada para escribir,
compilar, depurar y ejecutar programas. Es
un producto libre y gratuito sin restricciones
de uso.

Cmo creamos una aplicacin Swing?

Configurar el Contenedor
JFrame: Representa una ventana bsica,
capaz de contener otros componentes. Casi
todas las aplicaciones construyen al menos
un JFrame.
Atributos Importantes
defaultCloseOperation:
EXIT_ON_CLOSE:Termina la aplicacin,
usando System.exit(0).
title: Modifica el ttulo de la ventana.

JPanel: Un panel sirve para agrupar y

organizar otros componentes. Puede estar
decorado mediante un borde y una etiqueta.

Aadir Componentes a los Contenedores

Las interfaces grficas de usuario se
construyen con componentes, cada uno de
los cuales est preparado para responder a
distintos
depara
eventos.
JLabel:tipos
etiqueta
mostrar texto.
JTextBox y JTextArea: cajas de texto para la entrada de
datos.
JButton: botn.
JCheckBox: caja de comprobacin, para elegir opciones.
JRadioButton: para elegir opciones mutuamente
excluyentes.
JComboBox: Lista desplegable de opciones.
JMenuBar, JMenu, JMenuItem: barras de men.
JOptionPane: Ventanas de dilogo.

Manejando Eventos
Cada vez que el usuario pulsa una tecla, un
botn, mueve el mouse, etc. se produce un
evento. Es posible notificar los eventos para
que el programa acte en consecuencia.
Para ello, se crean unos objetos llamados
listeners que capturan el evento realizado.

Componentes
JLabel
Con la clase JLabel, se puede mostrar texto no seleccionable
e imgenes. Si necesitamos crear un componente que
muestre un sencillo texto o una imagen, podemos hacerlo
utilizando un ejemplar de JLabel.

Prefijo: lbl
Atributos Importantes:
text: Permite modificar el texto de la etiqueta

Mtodos Importantes:
setText(String): Cambia el texto de la etiqueta
getText(): Obtiene el texto de la etiqueta
setVisible(boolean): Cambia el estado visible/invisible
setEnabled(boolean): Cambia el estado
habilitado/deshabilitado

JButton
Es el botn. Puede recibir eventos (click del botn).

Prefijo: btn
Atributos Importantes:
text: Permite modificar el texto del botn

Mtodos Importantes:
setText(String): Cambia el texto del botn
getText(): Obtiene el texto del botn
setVisible(boolean): Cambia el estado visible/invisible
setEnabled(boolean):
Cambia
el
estado
habilitado/deshabilitado
doClick(): Ejecuta el ActionListener(click) asociado al
botn

Ejemplo: HOLA MUNDO

Componentes:
3 JLabel
1 JButton
Elaboracin:
Una vez agregados los componentes al JFrame, manipule el
atributo font de los JLabel para cambiar su apariencia y el
atributo text para cambiar su contenido. El atributo icon del
JLabel permite incluir imgenes en el objeto. Programe en el
ActionListener del botn lo necesario para que la aplicacin se
termine.

Ejemplo: CLICS DEL BOTN

Componentes:
1 JLabel
2 JButton
Elaboracin:
Una vez agregados los componentes al JFrame, manipule el
atributo text de los botones y la etiqueta para que tengan la
apariencia del ejemplo. Programe los ActionListener de los
botones para que al hacer clic en el botn ClickMe! se
incremente el valor escrito en la etiqueta. En el botn Salir,
programe lo necesario para que la aplicacin se termine.

JTextField y JPasswordField
Un campo de texto es un control bsico que permite al
usuario teclear una pequea cantidad de texto y dispara un
evento action cuando el usuario indique que la entrada de
texto
se
ha
completado
(normalmente
pulsando
return(enter)). Si necesitamos proporcionar un passwordfield
un campo de texto editable que no muestra los caracteres
tecleados por el usuarioutilizaremos la clase JPasswordField.

Prefijo: txt
Atributos Importantes:
text: Permite modificar el texto del campo de texto

Mtodos Importantes:
setText(String): Cambia el texto del campo de texto
getText(): Obtiene el texto escrito en el campo
setVisible(boolean): Cambia el estado visible/invisible
setEnabled(boolean): Cambia el estado
habilitado/deshabilitado

JTextField

JPasswordField

Ejemplo: HOLA TU!

Componentes:
2 JLabel
2 JButton
1 JTextField
Elaboracin:
Una vez agregados los componentes al JFrame, manipule el
atributo text de los botones y las etiquetas para que tengan la
apariencia del ejemplo. Programe los ActionListener de los
botones para que al hacer clic en el botn OK aparezca el
mensaje en la etiqueta. En el botn Salir, programe lo necesario
para que la aplicacin se termine.

Ejemplo: INICIAR SESIN

Componentes:
4 JLabel
1 JButton
1 JTextField
1 JPasswordField
Elaboracin:
Una vez agregados los componentes al JFrame, manipule el
atributo text de los botones y las etiquetas para que tengan la
apariencia del ejemplo. Programe el ActionListener del botn
para que al hacer clic en el botn Entrar aparezca el mensaje
en la etiqueta si los datos de Login no son correctos, de lo
contrario, escriba en la etiqueta Inicio de Sesin exitoso.

Ejemplo: CONVERSOR DE DIVISAS

Componentes:
2 Jlabel
2 JButton
1 JTextField
Elaboracin:
Una vez agregados los componentes al JFrame, manipule el
atributo text de los botones y las etiquetas para que tengan la
apariencia del ejemplo. Programe el ActionListener de los
botones para que al hacer clic en el botn Convertir aparezca
en la etiqueta el correspondiente de los dlares ingresados en
pesos. Programe el botn Salir para que termine la aplicacin.

JTextArea
Un TextArea es un componente bsico del Swing de Java y su
funcin principal es la de capturar texto ingresado por el
teclado. Su funcionamiento es idntico a JTextField, con la
diferencia que tiene la propiedad de ser multilnea.

Prefijo: txa
Atributos Importantes:
text: Permite modificar el texto del rea de texto

Mtodos Importantes:
setText(String): Cambia el texto del rea de texto
getText(): Obtiene el texto escrito en el textarea
setVisible(boolean): Cambia el estado visible/invisible
setEnabled(boolean): Cambia el estado
habilitado/deshabilitado

Ejemplo: CHAT ROOM

Componentes:
1 JButton
1 JTextField
1 JTextArea
Elaboracin:
Una vez agregados los componentes al JFrame, manipule el
atributo text de los botones y los campos de texto para que
tengan la apariencia del ejemplo. Programe el ActionListener del
botn para que al hacer clic en l se traspase lo escrito en el
textField hacia el textArea.
Utilizando el mtodo doClick() del botn, programe un listener en
el JTextField para suceda lo mismo al presionar enter.

ComboBox
Nos permite definir un conjunto de datos o valores asociados a
una caja de seleccin, as ahora el usuario tendr la oportunidad
de seleccionar un dato del conjunto de datos o respuestas ya
predefinido.
.

Prefijo: cbo
Atributos Importantes:
model: Permite ingresar la lista de datos

Mtodos Importantes:
getSelectedIndex(): Obtiene la posicin del dato seleccionado
getSelectedItem(): Obtiene el dato seleccionado
setSelectedIndex(int): Selecciona el dato de la posicin por
parmetro
setSelectedItem(Object): Selecciona el dato por parmetro

Ejemplo: CALCULO DE NOTAS

Elaboracin:
Una vez agregados los componentes al JFrame, manipule el
atributo text de los botones y los campos de texto para que
tengan la apariencia del ejemplo. Programe lo necesario para
que la aplicacin calcule la nota de presentacin de la asignatura
seleccionada en el combobox.

CheckBox
Se utilizan frecuentemente como botones de estado. Proporcionan
informacin del tipo S o No (true o false). El argumento es de tipo
booleano: verdadero (true) si la caja se ha seleccionado y falso
(false) en otro caso.

Prefijo: chk
Atributos Importantes:
selected: Permite marcar el objeto por defecto

Mtodos Importantes:
getText(): Obtiene el texto del objeto
isSelected(): devuelve true si el objeto se encuentra
seleccionado, falso
en caso contrario
setSelected(boolean): permite seleccionar un objeto

RadioButton
Es un elemento de formulario que permite seleccionar una opcin
y slo una, sobre un conjunto de posibilidades.

Prefijo: opt
Atributos Importantes:
selected: Permite marcar el objeto por defecto
ButtonGroup: asocia el objeto a un grupo

Mtodos Importantes:
getText(): Obtiene el texto del objeto
isSelected(): devuelve true si el objeto se encuentra
seleccionado, falso
en caso contrario
setSelected(boolean): permite seleccionar un objeto

Eventos
Comunes a todos los componentes:
FocusListener: captura eventos relacionados con la
recepcin (focusGained) o prdida del foco
(focusLost).
KeyListener: captura pulsaciones de teclado sobre el
componente activo.
MouseListener: captura la entrada o salida del cursor
sobre un componente, as como pulsaciones de los
botones.
MouseMotionListener: captura movimientos del ratn
sobre el componente.

Especficos de algunos componentes:

ActionListener: captura cierto tipo de accin
realizada sobre ciertos componente. Por ejemplo,
pulsar un botn, seleccionar un elemento en una lista
desplegable o una opcin en un men.
ItemListener: recoge el cambio de estado en un
componente tipo on/off: checkboxes, radiobuttons y
listas desplegables.
WindowListener: permite recoger los eventos
relacionados con las ventanas (cerrar, minimizar,
maximizar, iconizar, etc.) en los frames, frames
internos y cuadros de dilogo.

Men

Si se quiere agregar una nueva opcin de

Men debemos arrastrar un MenuItem hacia
un Men:

Luego, se activa el evento del MenuItem:

Por defecto un JFrame se crea de forma

invisible, as que es necesario activar su
visualizacin
mediante
la
operacin
setVisible().

Resumen
Se describi elementos de interfaces de
usuario Swing
Se utiliz JFrame y JPanel
Se utiliz JLabel, JButton, TextField,
PasswordField,
TextArea,
ComboBox,
CheckBox, RadioButton y ButtonGroup
Se utiliz MenuBar, Menu y MenuItem
Se program eventos en los componentes
Se solucion un problema a travs de una
interfaz grfica de usuario