:: Prof. Yeniffer Peña

Pro

gra

mació

n I

Interface Gráfica de UsuarioInterface Gráfica de Usuario

Presentación

Interface de UsuarioP

rog

ram

ació

n I La interface de usuario es la parte del programa que

permite a éste interactuar con el usuario. Las interfaces de usuario pueden adoptar muchas formas, que van desde la simple línea de comandos hasta las interfaces gráficas que proporcionan las aplicaciones más modernas.

La interface de usuario es el aspecto más importante de cualquier aplicación. Una aplicación sin una interfaz fácil, impide que los usuarios saquen el máximo rendimiento del programa.

Interface Gráfica de Usuario GUIP

rog

ram

ació

n I Permiten dar un mejor look a los programas,

además de:

Usuarios de nivel básico pueden usar los programas.

Rápida familiarización con programas.

Reducción de tiempo para aprender a usar los programas.

Componentes de Interface Gráfica de Usuario

Pro

gra

mació

n I Como ejemplo de componentes de Interface

Gráfica de Usuario podemos apreciar cualquier aplicación bajo windows, y podremos observar elementos como:

Ventanas,

Barras de menú,

Menú,

Campos de Texto,

Botones,

Entre otros.

Componentes de Interface Gráfica de Usuario

Pro

gra

mació

n I

Por ejemplo, en Microsoft Word, el cuadro diálogo que aparece en el menú Formato comando Fuente:

Botón

Cuadro de Texto

Lista Desplegada

Combo

Casillas de Verificación

Etiquetas

Interface Gráfica de Usuario en JavaP

rog

ram

ació

n I

Java proporciona los elementos básicos para construir decentes interfaces de usuario a través del AWT, y opciones para mejorarlas mediante Swing, que permite la creación de interfaces de usuario de gran impacto y sin demasiados problemas por parte del programador.

Pro

gra

mació

n I Se debe importar java.awt.*;

Está compuesto por Componentes y Contenedores.

Los Contenedores contienen Componentes, que son los controles básicos.

Acerca de… AWT

La arquitectura de la aplicación es dependiente del entorno de ventanas, en vez de tener un tamaño fijo. Por tanto, es bastante dependiente de la máquina en que se ejecuta la aplicación (no puede asumir que un diálogo tendrá el mismo tamaño en cada máquina).

Pro

gra

mació

n I Es una superficie de pantalla de alto nivel (una ventana) con

borde y título. Una instancia de la clase Frame puede tener una barra de menú. Una instancia de esta clase se asemeja a una ventana.

La clase Frame extiende a la clase Window, y su controlador de posicionamiento de Componentes por defecto es el BorderLayout.

Los objetos de tipo Frame son capaces de generar varios tipos de eventos, de los cuales el más interesante es el evento de tipo WindowClosing, que se utiliza de forma exhaustiva, y que se produce cuando el usuario pulsa sobre el botón de cerrar colocado en la esquina superior-derecha (normalmente) de la barra de título del objeto Frame.                                                                            

Acerca de… AWT

Contenedores: Contenedores: Frame

Pro

gra

mació

n I

Acerca de… AWT

Contenedores: Contenedores: Frame

Pro

gra

mació

n I Es una superficie de pantalla de alto nivel (una ventana). Una

instancia de la clase Window no puede estar enlazada o embebida en otro Contenedor, pero puede Ayudarse del Frame para su creación.

El controlador de posicionamiento de Componentes por defecto, sobre un objeto Window, es el BorderLayout.

Una instancia de esta clase no tiene ni título ni borde, así que es un poco difícil de justificar su uso para la construcción directa de una interface gráfica, porque es mucho más sencillo utilizar objetos de tipo Frame o Dialog.

Dispone de varios métodos para alterar el tamaño y título de la ventana, o los cursores y barrar de menús.                                                                            

Acerca de… AWT

Contenedores:Contenedores: Window

Pro

gra

mació

n I

Acerca de… AWT

Contenedores:Contenedores: Window

Pro

gra

mació

n I Es una superficie de pantalla de alto nivel (una ventana) con

borde y título, que permite entradas al usuario. La clase Dialog extiende la clase Window, queextiende la clase Container, que extiende a la clase Component; y el controlador de posicionamiento por defecto es el BorderLayout.

De los constructores proporcionados por esta clase, destaca el que permite que el diálogo sea o no modal. Todos los constructores requieren un parámetro Frame y, algunos de ellos, permiten la especificación de un parámetro booleano que indica si la ventana que abre el diálogo será modal o no. Si es modal, todas las entradas del usuario serán recogidas por esta ventana, bloqueando cualquier entrada que se pudiese producir sobre otros objetos presentes en la pantalla. Posteriormente, si no se ha especificado que el diálogo sea modal, se puede hacer que adquiera esta característica invocando al método setModal().                                                                            

Acerca de… AWT

Contenedores:Contenedores: Dialog

Pro

gra

mació

n I

Acerca de… AWT

Contenedores:Contenedores: Dialog

Pro

gra

mació

n I La clase Panel es un Contenedor genérico de Componentes.

Una instancia de la clase Panel, proporciona un Contenedor al que se le añaden Componentes.

El controlador de posicionamiento de Componentes sobre un objeto Panel, por defecto es el FlowLayout; aunque se puede especificar uno diferente en el constructor a la hora de instanciar el objeto Panel, o aceptar el controlador de posicionamiento inicialmente, y después cambiarlo invocando al método setLayout().

Normalmente, un Panel no tiene manifestación visual alguna por sí mismo, aunque puede hacerse notar fijando su color de fondo por defecto a uno diferente del que utiliza normalmente.

Acerca de… AWT

Contenedores:Contenedores: Panel

Pro

gra

mació

n I

Acerca de… AWT

Contenedores:Contenedores: Panel

Pro

gra

mació

n I

Los Componentes se añaden al Contenedor invocando al método add() del Contenedor.

Acerca de… AWT

Añadir Componentes a un Añadir Componentes a un ContenedorContenedor

Pro

gra

mació

n I La clase Button es una clase que produce un componente de

tipo botón con un título.

El constructor más utilizado es el que permite pasarle como parámetro una cadena, que será la que aparezca como título e identificador del botón en el interfaz de usuario.

No dispone de campos o variables de instancia y pone al alcance del programador una gran variedad de Métodos para ser utilizado

Acerca de… AWT

Componentes:Componentes: Botón de Pulsación

Pro

gra

mació

n I Para la entrada directa de datos se suelen utilizar los campos

de texto, que aparecen en pantalla como pequeñas cajas que permiten al usuario la entrada por teclado de una línea de caracteres.

Los campos de texto (TextField) son los encargados de realizar esta entrada, aunque también se pueden utilizar, activando su indicador de no-editable, para presentar texto de una sola línea.

La clase TextField extiende a la clase TextComponent, que extiende a su vez, a la clase Component. Por ello, hay una gran cantidad de métodos que están accesibles desde los campos de texto. La clase TextComponent también es importante en las áreas de texto, en donde se permite la entrada de múltiples líneas de texto.

Acerca de… AWT

Componentes:Componentes: Campos de Texto

Pro

gra

mació

n I

Acerca de… AWT

Componentes:Componentes: Campos de Texto

Pro

gra

mació

n I Una etiqueta (Label) proporciona una forma de colocar texto

estático en un panel, para mostrar información fija, que no varía (normalmente), al usuario.

La clase Label extiende la clase Component y dispone de varias constantes que permiten especificar la alineación del texto sobre el objeto Label.

Acerca de… AWT

Componentes:Componentes: Etiquetas

Pro

gra

mació

n I Una zona de dibujo o lienzo (Canvas), es una zona rectangular

vacía de la pantalla sobre la cual una aplicación puede pintar, imitando el lienzo sobre el que un artista plasma su arte, o desde la cual una aplicación puede recuperar eventos producidos por acciones del usuario.

La clase Canvas existe para que se obtengan subclases a partir de ella. No hace nada por sí misma, solamente proporciona una forma de implementar Componentes propios.

Por ejemplo, un canvas es útil a la hora de presentar imágenes o gráficos en pantalla, independientemente de que se quiera saber si se producen eventos o no en la zona de presentación.

Acerca de… AWT

Componentes:Componentes: Canvas

La clase Canvas es muy simple, consiste en un solo constructor sin argumentos y dos métodos, que son:

AddNotify() Crea el observador del canvas

paint( Graphics ) Repinta el canvas

Pro

gra

mació

n I Cuando se implementa una subclase de la clase Canvas, hay

que prestar atención en implementar los métodos minimumSize() y preferredSize() para reflejar adecuadamente el tamaño de canvas; porque, en caso contrario, dependiendo del layout que utilice el contenedor del canvas, éste puede llegar a ser demasiado pequeño, incluso invisible.

Acerca de… AWT

Componentes:Componentes: Canvas

Estudiar el funcionamiento del Canvas.Estudiar el funcionamiento del Canvas.

Pro

gra

mació

n I Se debe importar: javax.swing.*;

Acerca de… Swing

Para usar los componentes GUI efectivamente, la javax.swing y java.awt debe comprender su jerarquía de herencia, especialmente la de la clase Component, la clase Container y la clase JComponent, las cuales definen caracerísticas comunes para la mayoría de los componentes swing.

Entre los métodos que origina la clase Component y que son usados frecuentemente estan: paint, repaint y update.

Acerca de… SwingP

rog

ram

ació

n I Un Container es una colección de componentes

relacionados.

La clase Container define los atributos y métodos comunes para todas sus subclases. Un método que origina la clase Container es add para añadir componentes a un Container, otro es setLayout, el cual dispone de un programa para especificar el layout manager (administrador de trazado) que ayuda al Container posicionar y darle tamaño a sus componentes.

Estudiar los atributos y métodos de la clase Component y Container en la documentación.

Estudiar los atributos y métodos de la clase Component y Container en la documentación.

Acerca de… SwingP

rog

ram

ació

n I La clase JComponent es la superclase de la mayoría

de los componentes swing, por tanto ella define atributos y métodos a todas las subclases de JComponent y entre sus características se cuentan:

Un pluggable look and feel que puede ser usado para personalizar el look and feel cuando el programa ejecuta en diferentes plataformas.

Método abreviado de acceso directo a los componentes GUI a través del teclado.

Manejadores de eventos comunes para aquellos casos en donde diversos componentes GUI inician la misma acción en un programa.

Acerca de… SwingP

rog

ram

ació

n I Descripciones breves de los componentes GUI (tool

tips) que son desplegadas cuando el mouse es posicionado sobre el componente en tiempo de ejecución por un corto tiempo.

Acerca de… SwingP

rog

ram

ació

n I Las diferencias principales en código de AWT y Swing

son las siguientes:

Para agregar componentes al frame AWT frame.add(nombre_componente); SWING frame.getContentPane().add(nombre_com);

Para establecer el layout AWT frame.setLayout(null); SWING frame.getContentPane().setLayout(null);

Acerca de… SwingP

rog

ram

ació

n I

Para cerrar la aplicación AWT

frame.addWindowListener(new WindowAdapter(){public void windowClosing(WindowEvent e){

System.exit(0);}});

SWING Ya trae uno implícito, pero se puede colocar frame.setDefaultCloseOperation(frame.EXIT_ON_CLOSE);

Para hacer visible el frame AWT frame.setVisible(true); SWING frame.setVisible(true); frame.show();

Componente JLabelP

rog

ram

ació

n I Las Labels (etiquetas) proveen instrucciones de texto

o información. Se definen con la clase JLabel –subclase de JComponent – .

Una etiqueta despliega una línea sencilla de texto de solo lectura, una imagen o ambos. El siguiente programa muestra un ejemplo de JLabel.

Pro

gra

mació

n I El programa declara un JLabel.

Los objetos JLabel son inicializados en el constructor LabelTest: Se crea un JLabel con el texto “Label with Text”. El label despliega este texto cuando aparece en la pantalla. Se usa el método setToolTipText (heredado en la clase JLabel de la clase JComponent) para especificar el tool tip (o descripción) que es desplegado automáticamente cuando el usuario posicona el mouse sobre la etiqueta. Luego, se añade el label al content pane.

Estudiar en la documentación de Java, los métodos de la clase javax.swing.JLabel.

Estudiar en la documentación de Java, los métodos de la clase javax.swing.JLabel.

Componente JLabel

Pro

gra

mació

n I

La interface SwingConstants (paquete javax.swing) define un grupo de constantes enteras (así como SwingConstants.LEFT) que son usadas por muchos componentes swing.

La alineación vertical y horizontal de las etiquetas puede fijarse con los métodos setHorizontalAlignment y setVerticalAlignment, respectivamente.

Errores comunes:Si no se añade explícitamente un componente al Container, el componente no será desplegado cuando el Container aparezca en la pantalla.

Añadir a un Container un Componente que no ha sido instanciado.

Componente JLabel

Pro

gra

mació

n I ¿Qué es un evento?

Un evento es una encapsulación de una información que puede ser enviada a la aplicación de manera asíncrona.

Los eventos pueden corresponder a acciones físicas (ratón y teclado) y acciones lógicas.

¿Con cuáles clases se trabajan los eventos?Java.util.EventObject es la clase padre de todos los eventos, su subclase java.awt.event es la clase padre de todos los eventos AWT.

Eventos

Pro

gra

mació

n I Las GUI son manejadores de eventos, ellos generan

eventos cuando el usuario del programa interactúa con la GUI) algunas interacciones comunes son las del movimiento del mouse, hacer clic, clic en un botón, tipeando un campo de texto, seleccionando un ítem de un menú, cerrando una ventana, etc.

Cuando un usuario interactúa, ocurre un evento que es enviando al programa. La información del evento de la GUI es almacenada en un objeto de una clase que hereda de AWTEvent.

Modelo de Manejo de Eventos

Pro

gra

mació

n I

Modelo de Manejo de Eventos

ComponentEvent Esconder, mover, redimensionar, mostrar

ContainerEvent Añadir o eliminar un componente

FocusEvent Obtener o perder el Focus

KeyEvent Pulsar, liberar o teclear una tecla

MouseEvent Entrar, salir, pulsar, soltar o hacer click

MouseMotionEvent Arrastrar o mover

WindowEvent Maximizar, minimizar, abrir, cerrar, activar o desactivar

Eventos FísicosEventos Físicos

Pro

gra

mació

n I

Modelo de Manejo de Eventos

ActionEvent Una acción se ha ejecutado

AdjustmendEvent Un valor se ha ajustado

ItemEvent Un estado ha cambiado

TextEvent Un texto ha cambiado

Eventos SemánticosEventos Semánticos

Pro

gra

mació

n I

Modelo de Manejo de Eventos

Origen de los EventosOrigen de los Eventos

Pro

gra

mació

n I

Modelo de Manejo de Eventos

Origen de los EventosOrigen de los Eventos

Pro

gra

mació

n I

Existen 3 mecanismos para manejar los eventos: event source event object event listener

El event source es el particular componente GUI con el cual el usuario interactúa.

El event object encapsula información del evento que ocurre. Esta información incluye una referencia al source event y cualquier información del evento que puede ser requerida por el escuchador de eventos para el manejador del mismo.

El escuchador de eventos es un objeto que es notificado por el source event cuando un evento ocurre y recibe un event object.

Modelo de Manejo de Eventos

Pro

gra

mació

n I

Un escuchador de eventos para un evento de una GUI es un objeto de una clase que implementa uno o más interfaces de escuchadores de eventos del paquete java.awt.event y javax.swing.event.

Modelo de Manejo de Eventos

El programador debe realizar 2 tareas para el proceso de eventos de una GUI en un programa: Registrar un escuchador de eventos para el componente GUI que se espera que genere un evento; y la implementación de un método (o métodos) manejador(es) de eventos, comúnmente llamados event handlers.

Pro

gra

mació

n I Existen tres componentes importantes a la hora de

crear lo que debe hacer un evento:

La interface que maneja el evento.

La clase adaptadora del evento.

El método que implementa el evento.

Modelo de Manejo de Eventos

Pro

gra

mació

n I

Modelo de Manejo de Eventos

Pro

gra

mació

n I

Modelo de Manejo de Eventos

Pro

gra

mació

n I

Modelo de Manejo de Eventos

Pro

gra

mació

n I

Un objeto escuchador de eventos escucha específicos tipos de eventos generados por event source (normalmente componentes GUI) en un programa.

Un manejador de eventos es un método que es invocado en respuesta de un particular tipo de evento.

Cada interface de escuchador de eventos específica uno o mas métodos manejadores de eventos que deben ser definidos en la clase que implementa la interface escuchadora de eventos, recordando que las interfaces definen métodos abstractos y cualquier clase que implemente una interface debe definir todos sus métodos; además, no pueden crearse objetos de una clase abstracta.

Modelo de Manejo de Eventos

Pro

gra

mació

n I

El uso de escuchadores de eventos en manejadores de eventos es conocido como Modelo de Delegación de Eventos — el proceso de un evento es delegado a un particular objeto (el que escucha) en el programa.

Cuando ocurre un evento, el componente GUI con el cual el usuario interactúa notifica a sus escuchadores registrados para que cada escuchador invoque al método manejador de evento apropiado.

Por ejemplo, cuando el usuario presiona la tecla Enter en un JTextField, el método actionPerformed del escuchador registrado es invocado.

Modelo de Manejo de Eventos

Pro

gra

mació

n I

Modelo de Manejo de Eventos

La interfaz que implementa el escuchadorLa clase Adaptadora

El método que se va a implementarNombre del Evento

Pro

gra

mació

n I

Un botón es un componente que al hacer el usuario click captura una acción.

Un programa en Java puede usar diversos tipos de botones, incluyendo botones de comando, Check Box y botones de radio.

Captura de Eventos del Componente JButton

Estudiaremos los botones que son utilizados para iniciar un comando: Botones de Comando. Estos generan un ActionEvent cuando el usuario hace click en el botón con el mouse. Son creados con la clase JButton.

Pro

gra

mació

n I

Captura de Eventos del Componente JButton

La interfaz que implementa el escuchador

No posee clase adaptadora, se debe crear objeto anónimo de la

escuchadoraEl método que se va

a implementar

Nombre del Evento

Pro

gra

mació

n I

Captura de Eventos del Componente JButton

Objeto de la clase interna

Se le configura la escuchadora a cada botón y se le envía el objeto

anterior

El objeto anterior se puede enviar también

anónimo

Clase interna que implementa la interface escuchadora

El método que se va a implementarNombre del Evento

:: Prof. Yeniffer Peña

Pro

gra

mació

n I

Programación Orientada a ObjetosProgramación Orientada a Objetos

Finalización