Tema 9: Interfaces grficas

Cmo construir GUIs? Interfaces grficas de usuario. Ejemplos. Packages java.awt y java.awt.event AWT (Abstract Windows Toolkit) Jerarqua de clases. Clase Graphics. Ejemplos. Usando Widgets a toda potencia. Uso de gestores de maquetacin. Manejo de eventos en AWT. Diseo e implementacin de una aplicacin

F.Escolano & M.I.Alfonso

PG -

1: Cmo construir GUIs?

F.Escolano & M.I.Alfonso

PG -

GUIs: Graphic User Interfaces

Aplicacin = GUI + gestin eventos Componentes: Windows y frames, Mens desplegables, File dialogs, Canvas, Botones, Scroll. Package java.awt (Grficos) Package java.awt.event (Gestin eventos)

F.Escolano & M.I.Alfonso

PG -

Frames, mens y sub-mens

F.Escolano & M.I.Alfonso

PG -

File dialogs

F.Escolano & M.I.Alfonso

PG -

Botones, listas desplegables y grficos

F.Escolano & M.I.Alfonso

PG -

2: AWT: Abstract Windows Toolkit

F.Escolano & M.I.Alfonso

PG -

Elementos
AWT (Abstract Windows Toolkit): Conjunto de clases para construir interfaces grficas de usuario (GUIs).

Componentes: Mens, botones, etiquetas, selectores, reas de texto, etc. Eventos: listeners (objetos que se asocian a componentes y manejan los eventos especficos de su clase (pulsado de botn, eventos de ratn, de ventana, etc.)

F.Escolano & M.I.Alfonso

PG -

Jerarqua de clases

F.Escolano & M.I.Alfonso

PG -

Clase Graphics: Programacin grfica

import java.applet.*; import java.awt.*; public class Hola extends Applet { public static void paint(Graphics g) { g.drawString(Hola!, 20, 10); } } g.drawRect(0, 0, 50, 100); // draw: dibujar. g.drawOval(0, 0, 50, 100); g.clearRect(0, 0, 50, 100); // clear: color backg. g.fillRect(0, 0, 50, 100); // fill: rellenar color. Coloy miColor = new Color(Color.green); g.setColor(miColor); g.setFont(new Font(SansSerif, Font.BOLD, 12);
F.Escolano & M.I.Alfonso

PG -

10

Graphics: ejemplo

import java.applet.*; import java.awt.*; public class Ovalos extends Applet { public void paint (Graphics g) { int i; // Pintar fondo negro g.setColor(Color.black); g.fillRect(0,0, 500, 350);

F.Escolano & M.I.Alfonso

PG -

11

Graphics: ejemplo

// Pintar los diez agujeros for (i=0; i<=9; i++) pintarAgujero(i, g); // Pintar el texto g.setColor(Color.blue); g.setFont(new Font("TimesRoman",Font.BOLD, 36)); g.drawString("Ovalos...!", 22, 300); // Pintar el texto como haciendo sombra) g.setColor(Color.white); g.drawString("Ovalos...!", 20, 298); }

F.Escolano & M.I.Alfonso

PG -

12

Graphics: Ejemplo
public void pintarAgujero(int n, Graphics g) { int x0=50, // x-esquina sup-izq del ovalo exterior y0=50, // y-esquina sup-izq del ovalo exterior w0=350,// anchura del ovalo exterior h0=200,// altura del ovalo exterior INC_X = 30, // Incremento-x entre ovalos INC_Y = 10, // Incremento-y entre ovalos INC_RG = 10, // Incremento de R y G (color) INC_B = 25; // Incremento de B (azul) g.setColor(new Color(n*INC_RG, n*INC_RG, (n+1)*INC_B)); g.fillOval(x0+n*INC_X, y0+n*INC_Y, w0-n*INC_X, h0-n*2*INC_Y); } }
F.Escolano & M.I.Alfonso

PG -

13

Componentes AWT: Ejemplos

Button comp = new Button("Etiq"); Checkbox comp = Checkbox("Etiq", true); CheckboxGroup cbg = new CheckboxGroup(); Checkbox comp1 = new Checkbox("Etiq 1", cbg, true); Checkbox comp2 = new Checkbox("Etiq 2", cbg, false); Choice comp = new Choice(); comp.add("Etiq 1"); comp.add("Etiq 2"); comp.add("Etiq 3"); Label comp = new Label("Etiq"); TextField comp = new TextField("Etiq",15); // nmero de columnas

F.Escolano & M.I.Alfonso

PG -

14

Componentes AWT: Ejemplos

TextArea comp = new TextArea("Etiq", 10,20); // filas y cols. List list = new List(3, false); // Visualizo 3 list.add("Etiq 1"); // elementos, list.add("Etiq 2"); // sin seleccin list.add("Etiq 3"); // mltiple list.add("Etiq 4"); list.add("Label 5"); Scrollbar comp = new Scrollbar(Scrollbar.HORIZONTAL, 0, // valor inicial 5, // ancho del slider -100, 100); // rango

F.Escolano & M.I.Alfonso

PG -

15

Componentes AWT: Ejemplos

import java.awt.*; import java.applet.Applet; public class Test extends Applet { public void init() { // Insertar el cdigo ejemplo aqu List list = new List(3, false); // Visualizo 3 list.add("Etiq 1"); // elementos, list.add("Etiq 2"); // sin seleccin list.add("Etiq 3"); add(list); } }

F.Escolano & M.I.Alfonso

PG -

16

Componentes AWT: Ejemplos

class RegionDibujo extends Canvas { public RegionDibujo() { setSize(100, 50); } public void paint(Graphics g) { g.drawRect(0, 0, 99, 49); // dibujo el borde g.drawString("Un Canvas", 20,20); } } import java.awt.*; import java.applet.Applet; public class Test extends Applet { public void init() { RegionDibujo comp = new RegionDibujo(); add(comp); } }
F.Escolano & M.I.Alfonso

PG -

17

Contenedores y gestores de maquetacin

q BorderLayout. Especificacin norte, sur, este, oeste y centro. setLayout(new BorderLayout()); add(BorderLayout.NORTH, botonNorte); add(BorderLayout.SOUTH, botonSur); add(BorderLayout.EAST, botonEste); add(BorderLayout.WEST, botonOeste); Panel panelCentro = new Panel(); Add(BorderLayout.CENTER, pCentro); q GridLayout. Especificacin de filas, columnas y separacin Panel p1 = new Panel(); p1.setLayout(new GridLayout(5, 2, 6, 2)); p1.add(etiquetaNombre); p1.add(campoNombre);
F.Escolano & M.I.Alfonso

PG -

18

Componentes AWT: Ejemplos

import java.awt.*; import java.applet.Applet; public class Test extends Applet { public void init() { // Insertar el cdigo ejemplo aqu List list = new List(3, false); // Visualizo 3 list.add("Etiq 1"); // elementos, list.add("Etiq 2"); // sin seleccin list.add("Etiq 3"); add(list); } }

F.Escolano & M.I.Alfonso

PG -

19

Manejo de eventos en AWT

q Definir una clase que implemente la interfaz del oyente de eventos deseado. class MiClase implements ActionListener { q Implementar en esa clase los mtodos que van a manejar los eventos que se reciban: public void actionPerformed (ActionEvent e) { // cdigo que gestiona el evento recibido } q Registrar un objeto de esta clase como oyente en uno o ms componentes que actuarn como fuentes de eventos: componente.addActionListener(instanciadeMiClase);
F.Escolano & M.I.Alfonso

PG -

20

Ejemplo sencillo
public class Beep2 extends Applet { public void init() { BotonBeep botonBeep = new BotonBeep("Beep"); add(botonBeep); } } class BotonBeep extends Button implements ActionListener { public BotonBeep(String str) { super(str); addActionListener(this); } public void actionPerformed(ActionEvent event) { Component c = (Component)event.getSource(); c.getToolkit().beep(); } }
F.Escolano & M.I.Alfonso

PG -

21

Registro y tratamiento de eventos

!No es posible capturar eventos si no hay registro previo!

Registro Registro componente1 componente1 Registro Registro Registro Registro componente2 componente2 Registro Registro

oyente1 oyente1 Eventos Eventos componente1 componente1 oyente2 oyente2 Eventos Eventos componente2 componente2 oyente3 oyente3 Eventos Eventos Eventos Eventos

oyente1 oyente1

oyente2 oyente2

oyente3 oyente3

Los eventos solamente sern escuchados por los objetos de las clases que implementen la interfaz correspondiente: XXXXEvent -> XXXXListener
F.Escolano & M.I.Alfonso

PG -

22

Eventos, listeners y mtodos

F.Escolano & M.I.Alfonso

PG -

23

Eventos, listeners mtodos y...componentes

Cada componente puede generar un determinado tipo de evento. La capacidad de generar eventos se hereda!
F.Escolano & M.I.Alfonso

PG -

24

EjemploAWT.java
public void init() { menu = new Choice(); .... MiItemListener il = new MiItemListener(); menu.addItemListener(il); add(menu); cb1 = new Checkbox("Checkbox 1"); cb1.addItemListener(il); add(cb1); .... text = new TextField("Escribe algo aqu"); add(text); Button boton = new Button("Escribir"); boton.addActionListener(new BotonListener()); add(boton); output = new TextArea(10, 40); add(output); }
F.Escolano & M.I.Alfonso

PG -

25

EjemploAWT.java (2)

class BotonListener implements ActionListener public void actionPerformed(ActionEvent String str = menu.getSelectedItem(); if (cb1.getState()) // Checkbox str = str + " " + cb1.getLabel(); if (cb2.getState()) str = str + " " + cb2.getLabel(); if (cb3.getState()) str = str + " " + cb3.getLabel(); str = str + " " + text.getText(); // output.append(str+"\n"); } }

{ event) { // Choice

TextField

F.Escolano & M.I.Alfonso

PG -

26

EjemploAWT.java (3)

class MiItemListener implements ItemListener { public void itemStateChanged(ItemEvent event) { Object source = event.getSource(); if (source instanceof Choice) output.append(((Choice)source). getSelectedItem()+" seleccionada\n"); else if (source instanceof Checkbox) output.append(((Checkbox)source). getLabel()+" ha cambiado\n"); } }

F.Escolano & M.I.Alfonso

PG -

27