Date post: | 23-Jan-2016 |
Category: |
Documents |
Upload: | desideria-galvan |
View: | 223 times |
Download: | 0 times |
:: 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