PROGRAMACIN EN ENTORNOS

GRFICOS DE USUARIO GUI

Yol anda Val ds Rodr guez
Programaci n Ori entada a Eventos
Uni ver si dad Autnoma de Chi l e
Entendemos por Interfaz Grfi ca de Usuari o (GUI) al SW que
permite la i nteracci n entre el usuari o y l os servici os que
proporci ona el si stema operativo.
Hoy en d a, la mayor parte de l as apli caci ones desti nadas a
usuari os fi nal es se real izan para este ti po de entornos.
La mayora de l os GUIs de propsi to general siguen la llamada
metfora de escri torio, y uti l izan un si stema de ventanas.
INTRODUCCIN
La programaci n en un GUI determi nado requiere el uso de
un toolki t (o SDK) para ese GUI, en el lenguaje de
programacin que queramos uti l izar.
La estructura de un GUI es de forma natural orientada a
objetos. El desarroll o con un toolki t orientado a objetos es
mucho ms senci l lo y rpi do.

SDK: Sof tware Development Ki t.
CARACTERSTICAS DE LA PROGRAMACIN
EN GUIS
Un programa tradi ci onal tiene una estructura li neal con el
cdi go repartido en una seri e de mtodos u operaciones.




CARACTERSTICAS DE LA PROGRAMACIN
EN GUIS
En cambi o la programaci n en GUIs es orientada a eventos. La
mayora de l os eventos son sucesos as ncronos producidos por
la i nteraccin del usuari o con la apli caci n, y estn l igados a
al gn el emento de l a i nterfaz, por ej empl o:
Pulsar un botn.
Cambiar el estado de una ventana
Pulsar una tecla
Etc.




CARACTERSTICAS DE LA PROGRAMACIN
EN GUIS
La mayor parte del cdigo en un programa para un GUI estn
l os l l amados manejadores de eventos.





CARACTERSTICAS DE LA PROGRAMACIN
EN GUIS
La programaci n en GUIs suele ser un proceso i terati vo de
tres pasos:
Disear la interfaz utilizando el toolkit de
desarrollo.
Realizar la captura de eventos de la interfaz
que permitan implementar la funcionalidad
requerida.
Implementar cada uno de los manejadores
correspondientes a los eventos capturados.
PROCESO ITERATIVO
Se presentan en tres capas:
Capa de presentacin o de interfaz.
Capa de aplicacin o del dominio del
problema.
Capa de persistencia.
ARQUITECTURA DE UNA APLICACIN CON GUI
La capa de presentacin contiene l os objetos que permiten
mostrar l a i nformaci n al usuari o y gesti onar la i nteracci n
con el mi smo.
La capa de apl icaci n contiene los objetos que modelan la
soluci n del problema (objetos de negoci o). Esta es la capa
ms i mportante y puede ser reuti lizada total o parci almente.
La capa de persistencia contiene cdigo necesari o para
almacenar l os objetos de negocio en bases de datos o
fi cheros.
ARQUITECTURA DE UNA APLICACIN CON GUI
Es fundamental respetar siempre esta divi si n de tareas entre
l as cl ases de una apl icaci n.
Mezclar en una misma cl ase aspectos y funci onalidades de
estos tres niveles es un grave fall o de di seo con diversas
consecuencias:
Propenso a errores
Dificultad para entender su funcionamiento
Mantenimiento y localizacin de errores
compleja.
Imposibilidad de reutilizacin.
ARQUITECTURA DE UNA APLICACIN CON GUI
PROGRAMACIN DE GUIS EN JAVA
Para las apli caci ones de escri tori o, Java i ncluye como parte
del J2SE dos conjuntos de l ibreras que proporci onan una
amplia variedad de componentes grficos, as como todo el
soporte necesari o para gesti onar la i nteracci n con el
usuari o.
APLICACIONES JAVA BASADAS EN ENTORNO
GRAFICO
AWT Swing
Swi ng es una extensi n de AWT, sus cl ases heredan alguna de
las clases de ste, proporci onando mayores capacidades de
presentaci n y la posibilidad de adaptarse a di ferentes
si stemas operativos.
Adems la creaci n de apli caci ones Swi ng sigue exactamente
las mismas pautas que las AWT, compartiendo i ncluso el
mi smo model o para l a gestin de eventos.
APLICACIONES JAVA BASADAS EN ENTORNO
GRAFICO
Conjunto de herramientas para la construcci n de i nterfaces
grfi cas mul tiplataforma.
Los elementos proporci onados por AWT permiten crear
apli caci ones que se ejecuten en diferentes plataformas,
haciendo su apariencia semejante a la plataforma donde se
ej ecute.
Lo anteri or tiene una desventaja, ya que l o hace dependiente
de l a pl ataforma donde se est desarrollando l a apl icacin.
AWT (ABSTRACT WINDOWS TOOLKIT)
PRINCIPALES CLASES DEL AWT
Las aplicaciones grficas con AWT se encuentran en el
paquete java.awt.
En toda apl i caci n basada en entorno grfi co, el conj unto de
obj etos vi sual es (control es) con l os que i nteracta el usuari o se
encuentran i ncl ui dos dentro de un obj eto superi or, conoci do
como contenedor.
Ventanas: Su aspecto es el de la clsica ventana
de Windows con barra de ttulo y cuadro de
control para maximizar , minimizar y cerrar.
Paneles: Son contenedores que no disponen de
barra de ttulo ni cuadro de control, adems su
tamao y posicin son fijos. Por lo general un
panel est contenido en otro contenedor.
CONTENEDORES
Lo primero que hay que hacer cuando se va a desarrollar una
apli caci n grfica es crear el contenedor que va a representar
l a vi sta de l a apl icacin.
La clase Window del paquete AWT proporci ona soporte bsico
para l a creaci n de ventanas.
Los pasos a seguir para crear una ventana son l os si gui entes:
CREACIN DE UNA VENTANA
Lo primero que hay que hacer cuando se va a desarrollar una
apli caci n grfica es crear el contenedor que va a representar
l a vi sta de l a apl icacin.
La clase Window del paquete AWT proporci ona soporte bsico
para l a creaci n de ventanas.
Los pasos a seguir para crear una ventana son l os si gui entes:
CREACIN DE UNA VENTANA
CREACIN DE UNA VENTANA
i mport j ava. awt. Frame;
public cl ass Mai n{
public static voi d mai n(String[] args){
Frame f = new Frame(Pri mera ventana);
f. setBounds(100, 100, 400, 250);
f. setVisible(true);
}
}
CREACIN DE UNA VENTANA
CREACIN DE UNA VENTANA

Un detalle a mencionar sobre las ventanas AWT es que
el botn de cierre de la ventana se encuentra
inhabilitado.
Cuando se trabaja con ventanas, l o normal es NO crear
di rectamente l os obj etos de l a cl ase Frame.
Resul ta ms i nteresante defi ni r subcl ases de stas que
encapsulen en su i nterior todo el proceso de construcci n de
la ventana e i nclusi n de controles, liberando de esta tarea
al mtodo mai n().
PERSONALIZACIN DE VENTANAS
PERSONALIZACIN DE VENTANAS
import java.awt.Frame;

public class Ventana extends Frame{
Ventana(String titulo, int x, int y, int ancho, int alto){
super(titulo); //llamamos al constructor de la superclase Frame
this.setBounds(x, y, alto, ancho);
this.setVisible(true);
}
}
public class Main {
public static void main(String[] args) {
Ventana v = new Ventana("MiVentana",100,100,200,300);
}
}
AGREGAR CONTROLES A UN CONTENEDOR
AGREGAR CONTROLES A UN CONTENEDOR
import java.awt.Frame;
import java.awt.Button;
public class Ventana extends Frame{
Button boton;
Ventana(String titulo, int x, int y, int ancho, int alto){
super(titulo); //llamamos al constructor de la superclase Frame
this.setBounds(x, y, alto, ancho);
this.setLayout(null); //elimina el gestor de organizacion
boton = new Button(Aceptar);
boton.setBounds(50,50,100,30);
this.add(boton);
this.setVisible(true);
}
}
AGREGAR CONTROLES A UN CONTENEDOR
Los eventos son sucesos que pueden tener lugar sobre la
i nterfaz grfi ca de una apl i cacin.
La mayor parte son provocados por alguna acci n llevada a
cabo por el usuari o, tal como la pul saci n de un botn, la
sel eccin de un el emento, el ci erre de una ventana etc.
Normalmente, se espera que cuando se produzca uno de estos
sucesos en la apli caci n el programa reacci one de cierta
manera.
Esta forma de programar se la conoce como programaci n
basada en eventos.
MODELO DE GESTIN DE EVENTOS EN JAVA
La gesti n de eventos consi ste en implementar una serie de
mtodos que se ejecuten de manera automtica en el
momento en que estos eventos se producen.
En java l os mtodos de respuesta a l os diferentes eventos que
pueden produci rse, se encuentran defi nidos en unas
i nterfaces conoci das como i nterfaces de escucha.
INTERFACES DE ESCUCHA Y ESCUCHADORES
INTERFACES DE ESCUCHA Y ESCUCHADORES
Las interfaces de escucha para la gestin de eventos
en aplicaciones AWT se encuentran en el paquete
java.awt.event.
Cada interfaz de escucha contiene mtodos para
gestionar un determinado grupo de eventos.
Wi ndowLi stener: defi ne el formato de mtodos para la gesti n
de l os eventos relacionados con la ventana, como son la
acti vaci n del botn de cierre de l a ventana, mi ni mizaci n de
l a ventana, etc.

Acti onListener: contiene el mtodo para la gesti n del evento
de acci n, el cual es provocado por un suceso diferente en
cada ti po de control .

MouseLi stener: defi ne el formato de mtodos para la gesti n
de l os eventos rel acionados con botones.

FocusListener: contiene el mtodo para la gesti n del evento
reci bidos de tecl ado en un componente.
EJEMPLOS DE INTERFACES DE ESCUCHA
EJEMPLO MTODOS DE LA INTERFAZ
WINDOWLISTENER
EJEMPLO MTODOS DE LA INTERFAZ
MOUSELISTENER
Dado que existen i nterfaces ((oyentes)) con un gran nmero
de mtodos y que un receptor que implementa una de estas
clases se ve obligado a sobreescribi r todos ell os, cuando se
requiere una i nterfaz de este tipo se utilizan clases
adaptadoras, que implementan las i nterfaces oyentes con
mtodos vac os y se defi nen las clases receptoras para que
exti endan l as adaptadoras.

Las cl ases adapt adoras hacen i nnecesari o redefi ni r aquel l os
mt odos, decl arados en l a i nt erf az, no ti l es para el programa
que se est di seando.

CLASES ADAPTADORAS
Las cl ases adapt adoras di sponi bl es en j ava. awt . event son:

Cl ass Component Adapter
Cl ass Cont ai nerAdapter.
Cl ass FocusAdapter.
Cl ass KeyAdapt er.
Cl ass MouseAdapter .
Cl ass MouseMot i onAdapter.
Cl ass Wi ndowAdapt er.

CLASES ADAPTADORAS
En java existen dos actores u objetos en la gesti n de un
evento:
Origen del evento: Representa el objeto grfico en el que se
produce el evento que se quiere capturar (botn, ventana,
etc. )
Escuchador: es el objeto de la clase que implementa la
i nterfaz de escucha y que contiene el mtodo de respuesta al
evento.
PROCESO DE GESTIN DE EVENTOS
ORIGEN Y DESTINO DEL EVENTO
RESUMEN DE PASOS A SEGUIR
Desarrollar la pulsaci n del botn de cierre de una ventana. Al
produci rse este suceso, el programa responder fi nalizando la
apl icacin.

Sol ucin: crear una cl ase l l amada Gesti onVentana.
EJEMPLO DE GESTIN DE EVENTOS
SOLUCIN
SOLUCIN: GESTIONVENTANA
import java.awt.event.*;
public class GestionVentana implements WindowListener {
public void windowOpened(WindowEvent e) {}
public void windowClosing(WindowEvent e) {
System.exit(0);
}
public void windowClosed(WindowEvent e) {}
public void windowIconified(WindowEvent e) {}
public void windowDeiconified(WindowEvent e) {}
public void windowActivated(WindowEvent e) {}
public void windowDeactivated(WindowEvent e) {}
}
SOLUCIN VENTANA
import java.awt.Frame;
import java.awt.Button;
public class Ventana extends Frame{
Button boton;
Ventana(String titulo, int x, int y, int ancho, int alto){
super(titulo); //llamamos al constructor de la superclase Frame
this.setBounds(x, y, alto, ancho);
this.setLayout(null); //elimina el gestor de organizacin, se puede utilizar otros
boton = new Button(Aceptar);
boton.setBounds(50,50,100,30);
//se crea el escuchador
GestionVentana gv = new GestionVentana();
this.addWindowListener(gv);
this.add(boton);
this.setVisible(true);
}
}
Presentar l as coordenadas de l a posi ci n donde se pul se el
ratn dentro del rea de un marco. El programa termi na
cuando se ci erra l a ventana.

PRACTICO
EJERCICIO 3
Se presenta como una mej ora de AWT, entre las mej oras cabe
destacar:
Apariencia independiente de la plataforma
Mayor nmero de componentes grficos.
Mejora de los componentes clsicos.

Las clases swing se encuentran en el paquete
javax.swing.
SWING
PRINCIPALES CLASES DE SWING
Los objetos JFrame tienen habili tado el botn de cierre de la
ventana.
Los objetos swi ng no se aaden di rectamente al objeto
JFrame.
Un objeto JFrame i ncluye un contenedor i nterno, conocido
como panel de contenido, donde se deben si tuar l os
componentes vi suales.
Para obtener el panel de contenido de una ventana swi ng,
utilizaremos el mtodo getContentPane() de JFrame:
Container getContentPane()
CREACIN DE UNA VENTANA SWING
import javax.swing.*;
public class JVentana extends JFrame{
JButton jboton;
JTextField jcampo;

public Jventana(String titulo, int x, int y, int ancho, int alto){
super(titulo);
this.setBounds(x, y, ancho, alto);
//se elimina el gestor de organizacin en el panel de contenido
this.getContentPane().setLayout(null));
jboton = new JButton(Aceptar);
jboton.setBounds(130, 200, 150, 30);
jcampo = new JTextField();
jcampo.setBounds(150,70,100,30);
//los controles se agregan al panel de contenido
this.getContentPane().add(jboton);
this.getContentPane().add(jcampo);
this.setVisible(true);
}
}

import javax.swing.*;
public class Main{

public static void main(String[] args){
JVentana v = new JVentana(Ventana swing, 30,80,400,300);
}
}