PDF de programación - Programación II - Tema 2. Programación dirigida por eventos

1



Programación II
Bloque temático 1. Lenguajes de programación
Bloque temático 2. Metodología de programación
Tema 2. Programación dirigida por eventos

Tema 3.

Verificación de programas

Bloque temático 3. Esquemas algorítmicos

Programación II

Tema 2. Programación dirigida por eventos

© Mario Aldea Rivas

02/03/11

Introducción

Tema 2. Programación dirigida por eventos
2.1.
2.2. Patrón Modelo-Vista-Controlador
2.3. Ventanas
2.4. Dibujar gráficos en un panel
2.5. Paneles y Gestores de Distribución
2.6. Componentes
2.7. Gestión de eventos
2.8. Ventanas y diálogos
2.9. Eventos de bajo nivel
2.10. Bibliografía

Programación II

Tema 2. Programación dirigida por eventos

© Mario Aldea Rivas

02/03/11

2

2.1 Introducción

2.1 Introducción
En función del tipo de interacción con el usuario, los programas se
clasifican en:
• Secuenciales: reciben los datos de entrada, realizan un conjunto

de operaciones o cálculos y muestran la salida
- por ejemplo: comando “ls” de Linux

• Interactivos: exigen la intervención del usuario en tiempo de

ejecución, pero el programa realiza acciones
independientemente de las órdenes del usuario

- por ejemplo: juego en tiempo real (deportes, estrategia, ...)
• Dirigidos por eventos: el programa “espera” la llegada de un
evento (orden del usuario, ...), cuando el evento se produce
realiza la acción correspondiente y vuelve a esperar

- por ejemplo: procesador de textos

Programación II

© Mario Aldea Rivas

02/03/11

3

Tema 2. Programación dirigida por eventos

Interfaces gráficas de usuario (GUIs)

2.1 Introducción

Muchos de los programas basados en GUIs (Graphical User
Interface) constituyen un ejemplo de programa dirigido por
eventos

Las GUIs facilitan la interacción del usuario con el programa

Programación II

Tema 2. Programación dirigida por eventos

© Mario Aldea Rivas

02/03/11

Librerías Java para la creación de GUIs

2.1 Introducción

En Java existen varias librerías que permiten crear interfaces
gráficas de usuario:

• AWT: Abstract Window Toolkit
• Swing: más moderna, basada en AWT
• SWT: Standard Widget Toolkit (Eclipse)
• Fundamentos

Usaremos Swing+AWT:

Aplicación del usuario

Swing

AWT

• Forman parte de las JFC (Java Foundation Classes)
• Permite cumplir el objetivo: practicar con la programación
dirigida por eventos
• Paquetes java.awt, javax.swing
(http://java.sun.com/javase/6/docs/api/)

Programación II

Tema 2. Programación dirigida por eventos

Elementos de una GUI

© Mario Aldea Rivas

02/03/11

2.1 Introducción

4

5

• Componentes: un objeto que el usuario puede ver en la pantalla

y con el que puede interactuar

- botón, barra de desplazamiento, cuadro de texto, ...

• Contenedores: un componente que contiene otros componentes

- ventana, panel, ...

• Eventos: una acción disparada por el usuario

- pulsación de tecla, movimiento de ratón, pulsación del botón

del ratón, ...

El diseño de una GUI requiere:

- crear componentes,
- ponerles dentro de contenedores,
- y manejar los eventos generados por el usuario

Programación II

© Mario Aldea Rivas

02/03/11

6

Tema 2. Programación dirigida por eventos

Jerarquía de clases Swing y AWT
Ventanas, contenedores y eventos:

2.1 Introducción

Object

Component

Container

JComponent

Event

Window

JPane

JScrollPane

...

Frame

Dialog

JFrame

JDialog

Programación II

Tema 2. Programación dirigida por eventos

Componentes Swing:

JComponent

© Mario Aldea Rivas

02/03/11

7

2.1 Introducción

Jerarquía de clases Swing y AWT (cont.)

JLabel

JList

JTextComponent

JSlider

AbstractButton

JComboBox

JFileChooser

ToggleButton

JButton

JTextArea

JTextField

© Mario Aldea Rivas

02/03/11

8

2.2 Patrón Modelo-Vista-Controlador

JCheckBox

JRadioButton

ButtonGroup

Programación II

Tema 2. Programación dirigida por eventos

2.2 Patrón Modelo-Vista-Controlador
Modelo Vista Controlador (MVC) es un patrón de arquitectura de
software

• utilizado en aplicaciones con interfaz gráfica
• que divide la aplicación en tres partes: el Modelo, la Vista y el

Controlador

• Modelo: conjunto de clases que constituyen la solución del

problema
• puede existir independientemente de que exista la GUI

• Vista: conjunto de elementos (ventanas) que constituyen la

“vista” que el usuario tiene de la aplicación

• Controlador: actúa cuando el usuario realiza una acción sobre un

elemento activo de la vista (botón, cuadro de texto, ...)

Programación II

© Mario Aldea Rivas

02/03/11

9

Tema 2. Programación dirigida por eventos

Relación entre Modelo, Vista y Controlador

2.2 Patrón Modelo-Vista-Controlador

Vista

Modelo

Controlador

• El Controlador accede a la Vista y al Modelo

• necesita acceder a la Vista para conocer lo que el usuario ha

introducido en los distintos elementos que la forman

• con esa información accederá al Modelo para consultar o

cambiar sus contenidos

• La Vista necesita acceder al Modelo:

• por ejemplo para representar una gráfica con datos contenidos

en el Modelo

• El modelo es independiente:

• ni siquiera “sabe” que existen la Vista y el Controlador

Programación II

Tema 2. Programación dirigida por eventos

© Mario Aldea Rivas

02/03/11

10

2.2 Patrón Modelo-Vista-Controlador

Ejemplo de utilización del patrón MVC
Aplicación de gestión de un colegio

Vista

Curso

Modelo

Profesor

Alumno

Asignatura

- cuando se cierra la ventana “Introducir alumno” se actualizan los datos del
Alumno
- cuando se pulsa el botón “Ver Curso” se abre la ventana “Datos Curso” que
muestra su nombre y las asignaturas que lo componen
...............

Controlador

Programación II

Tema 2. Programación dirigida por eventos

© Mario Aldea Rivas

02/03/11

2.3 Ventanas
Clase JFrame: ventana con título y marco
• Algunos métodos heredados por la clase JFrame:

Método

Descripción

11

2.3 Ventanas

void setLocation(int x, int y)

Posiciona la ventana en la panta-
lla. (x, y) son las coordenadas de
su vértice superior izquierdo

void setSize(int ancho, int alto) Cambia el tamaño de la ventana
void setVisible(boolean b)

void pack()
void setDefaultCloseOperation
(int acción);

Hace la ventana visible o la oculta
(cuando b es false)
Reduce la ventana alrededor de
sus componentes
Acción al cerrar la ventana
(JFrame.EXIT_ON_CLOSE)

Programación II

© Mario Aldea Rivas

02/03/11

12

Tema 2. Programación dirigida por eventos

2.3 Ventanas

Ejemplo:
import javax.swing.*;
public class VentanaHola extends JFrame {

public VentanaHola() {
super("Hola");
setLocation(50,100);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(250, 200);
setVisible(true);

}
public static void main(String[] args) {
}

new VentanaHola();

}

Programación II

Tema 2. Programación dirigida por eventos

© Mario Aldea Rivas

02/03/11

Panel de contenidos (”content pane”)
Cada ventana tiene un panel asociado: “content pane”
• sobre él se dibujan los componentes y los gráficos

13

2.3 Ventanas

Para obtener o cambiar el content pane existen los métodos:
Container getContentPane()
void setContentPane(Container contentPane)

Programación II

Tema 2. Programación dirigida por eventos

2.4 Dibujar gráficos en un panel

© Mario Aldea Rivas

02/03/11

14

2.4 Dibujar gráficos en un panel

Los dibujos se realizan sobre un contexto gráfico
• representado por un objeto de la clase Graphics
• los paneles tienen un contexto gráfico asociado

Sistema de coordenadas:

0

0

3

eje y

6

eje x

(x=6, y=3)

Programación II

© Mario Aldea Rivas

02/03/11

15

Tema 2. Programación dirigida por eventos

Algunos métodos de la clase Graphics
void drawString(String str,
int x, int y)

(x,y)

abcdefghi

2.4 Dibujar gráficos en un panel

(1/2)

void drawLine(int x1, int y1,
int x2, int y2)

(x1,y1)

(x2,y2)

void drawRect(int x, int y,
int ancho,
int alto)

(x,y)

ancho

alto

void fillRect(int x, int y,
int ancho,
int alto)

(x,y)

ancho

alto

Programación II

© Mario Aldea Rivas

02/03/11

16

Tema 2. Programación dirigida por eventos

Algunos métodos de la clase Graphics
void drawRoundRect(int x, int y,
int ancho,
int alto,
int anchoArco,
int altoArco)
void fillRoundRect(int x, int y,
int ancho,
int alto,
int anchoArco,
int altoArco)

(x,y)

(x,y)

alto

alto

2.4 Dibujar gráficos en un panel

(2/2)

ancho

altoArco

anchoArco

ancho

void drawOval(int x, int y,
int ancho,
int alto)

(x,y)

ancho

alto

Programación II

Tema 2. Programación dirigida por eventos

Control del color

© Mario Aldea Rivas

02/03/11

17

2.4 Dibujar gráficos en un panel

(1/2)

Los gráficos se dibujan en el color vigente
La clase Graphics proporciona dos métodos para cambiar y leer
el color vigente:

public void setColor(Color c);
public Color getColor();

La clase Color proporciona constantes predefinidas para
algunos colores:

public final static Color red
public final static Color green
public final static Color blue
public final static Color yellow
public final static Color white
public final static Color black
...

Programación II

© Mario Aldea Rivas

02/03/11

18

Tema 2. Programación dirigida por eventos

(2/2)
Control del color
La clase Color también proporciona constructores para crear
nuestros propios colores:

2.4 Dibujar gráficos en un panel

public Color(int r, int g, int b)
// r, g y b en el rango [0, 255]
public Color(float r, float g, float b)
// r, g y b en el rango [0.0, 1.0]

La forma de utilizar los constructores de la clase Color es:

g.setColor(new Color(240, 35, 0));
// estas dos líneas son equivalentes
g.setColor(new Color(1.0, 1.0, 0.0));
g.setColor(Color.yellow);

Programación II

Tema 2. Programación dirigida por eventos

© Mario Aldea Rivas

02/03/11

19

2.4 Dibujar gráficos en un panel

Ejemplo de gráficos
import java.awt.Graphics;
impo