Interfaces Grficas de Usuario

Introduccin Programacin basada en eventos

Desarrollo de interfaces de usuario

Generalizacin del uso del ordenador Importancia creciente de la facilidad de uso

La interfaz de usuario no aade funcionalidad a una aplicacin

Sin embargo es un aspecto decisivo en el xito de un producto

Desarrollo muy costoso

Normalmente, 50% del esfuerzo se dedica al desarrollo de la interfaz

Herramientas que ayudan al desarrollo de interfaces

POO - EPS - UAM 2

Herramientas: software para el desarrollo de interfaces (I)

Basadas en una categorizacin, modelizacin de formas de interfaz Facilitan el desarrollo

Proporcionan parte del cdigo Ayudan a organizar/estructurar el cdigo escrito por el programador

Limitan (condicionan) las caractersticas de las interfaces que se pueden desarrollar Alternativa: pintar en la pantalla, seguir movimiento e input del ratn
POO - EPS - UAM 3

Herramientas: software para el desarrollo de interfaces (II)

Sistemas de ventanas / toolkits: Microsoft Windows, X-Window + Motif, Mac/ OS, OS/2 PM, etc.

Interfaz al sistema operativo Librera para el desarrollo de interfaces grficas Bajo nivel, mxima expresividad, dificultad de uso

Libreras de objetos: Java AWT, Swing, Microsoft MFC, Borland OWL, etc.

Cdigo ms fcil de producir y mantener Normalmente acompaadas de un constructor grfico de interfaces

Constructores grficos de interfaces: MS-Visual Studio, Netbeans, etc.

Programacin visual Gran facilidad de uso, utilidad limitada

Otras herramientas avanzadas: campo de investigacin

POO - EPS - UAM 4

Nivel de las herramientas

Rango de interfaces generadas

Facilidad de desarrollo

POO - EPS - UAM

Qu tienen que ver las interfaces con POO?

El usuario ve objetos en la pantalla El usuario puede manipular los objetos Los objetos tienen comportamiento propio: distintas formas de responder a una accin del usuario:

Por ejemplo: pulsar el ratn sobre un objeto grfico

POO - EPS - UAM

Qu tienen que ver las interfaces con POO?

No existe una funcin "pulsar ratn" que sepa lo que debe hacer segn el elemento sobre el que acta Cada elemento grfico contiene la funcionalidad correspondiente a la accin de pulsar el ratn (la responsabilidad reside en el objeto) Programacin basada en eventos (mensajes)
POO - EPS - UAM 7

Un nuevo modelo de programacin

Programacin basada en eventos
Main

ejecuta
Main

f (x) f(arg) g() g()

termina
f(arg)

pregunta / respuesta
g()

control, flujo ejecucin

no hay orden estrictro

8

POO - EPS - UAM

Programacin basada en eventos (I)

El modo de operacin de una interfaz de usuario no se ajusta a un control de flujo estrictamente secuencial El usuario tiene un alto grado de libertad en todo momento: normalmente dispone de un amplio conjunto de acciones posibles Es muy difcil representar todos los caminos posibles con un modelo de programacin tradicional
POO - EPS - UAM 9

Programacin basada en eventos (II)

Modelo utilizado en las interfaces de usuario actuales basadas en ventanas La iniciativa no la lleva el programa sino el usuario El programa se divide en subprogramas asociados a ventanas o componentes grficas Las componentes estn a la espera de las acciones del usuario Las acciones del usuario generan eventos que se acumulan en una cola El sistema de eventos extrae eventos de la cola y los enva a los programas Los programas procesan los eventos recibidos respondiendo segn el tipo de evento Cada tipo de componente se caracteriza por una forma propia de respuesta a los eventos
POO - EPS - UAM 10

Programacin basada en eventos (III)

Interfaz Cola de eventos
evento 1 evento 2 ... ... event n

Despachador

mensajes

eventos (acciones) de usuario

Componentes de la interfaz
11

POO - EPS - UAM

La base: el sistema de ventanas

Funciones de dibujo de primitivas grficas: formas geomtricas, texto, etc. Generacin de mensajes (eventos)

Usuario

Accin del usuario

Ventana

Mensaje Sistema de ventanas (p.e. Windows)

La ventana recibe eventos sin diferenciar Respuesta de ventanas a eventos:

Repintar Cambiar apariencia y repintar Ejecutar una funcin (accin)

POO - EPS - UAM 12

Ventanas
rea rectangular de la pantalla en la que tiene lugar una interaccin (intercambio de input y output) con el usuario Recibe input del usuario (ratn y teclado), muestra output por intermedio del sistema de ventanas, mediante envo de mensajes Ventana marco: ventana principal asociada a una aplicacin Ventanas hijas: subreas que procesan sus propios eventos
POO - EPS - UAM 13

Ejemplo de programa con Java AWT

import java.awt.*; import java.awt.event.*; public class Ventana extends Frame implements WindowListener { public static void main (String args[]) { Ventana v = new Ventana (); v.setSize (300, 200); v.addWindowListener (v); v.setVisible (true); } public void paint (Graphics g) { g.drawString("Hola a todos!", 100, 100); } public void windowClosing (WindowEvent e) { dispose (); } public void windowClosed (WindowEvent e) {} public void windowActivated (WindowEvent e) {} public void windowDeactivated (WindowEvent e) {} public void windowIconified (WindowEvent e) {} public void windowDeiconified (WindowEvent e) {} public void windowOpened (WindowEvent e) {} }
POO - EPS - UAM

14

Resultado...

POO - EPS - UAM

15

Java Abstract Window Toolkit (AWT)

Usuario Accin del usuario Sistema de ventanas Mensaje Sistema AWT

Invocacin a mtodo Las componentes son objetos A cada tipo de evento corresponde un mtodo de la componente La respuesta a eventos se define implementando mtodos

Componentes AWT
16

POO - EPS - UAM

Interfaces orientadas a objetos

Objetos grficos con:

Estado: variables de la clase

Propiedades visuales: color, posicin, tamao Valores visualizados: string, bitmap, etc. Valores internos

Presencia en la pantalla: mtodo paint ()

Mantiene un dibujo en la pantalla Depende del estado: controlar la apariencia a travs del estado

Comportamiento: respuesta a eventos

Cambios de estado o apariencia Ejecucin de funciones (accin) Emisin de eventos

POO - EPS - UAM

17

Objetos grficos
Presentacin en la pantalla Objetos del programa

POO - EPS - UAM

18

Abstract Window Toolkit (AWT)

1ra. Parte: Introduccin

La biblioteca AWT: java.awt, java.awt.event

Componentes

Componentes predefinidas Agregacin de componentes Las interfaces se dibujan a s mismas: funciones de dibujo Creacin de nuevas componentes Emisin de eventos Recepcin y procesamiento de eventos

Interaccin con el usuario: gestin de eventos

Layout de componentes
POO - EPS - UAM 20

10

Anatoma de un programa basado en GUI

Componer interfaces con las clases predefinidas

La clase Container, adicin de subcomponentes Control de la apariencia de las componentes manipulando su estado Posiciones absolutas Layout managers Eventos de accin generados por las clases predefinidas Gestin directa del input del usuario La clase Canvas Utilizacin de las funciones de dibujo
POO - EPS - UAM 21

Definir la disposicin de las partes de un contenedor

Gestionar los eventos: modelo emisor / receptor

Definir componentes personalizadas

Ejemplo: editor de texto

POO - EPS - UAM

22

11

Componentes predefinidas
Label TextField Button TextArea

Frame

POO - EPS - UAM

23

Disposicin de las componentes

Alto fijo Ancho ocupa toda la ventana Ancho fijo, centrado Llenar espacio disponible hasta borde inferior de la ventana

Ancho ocupa toda la ventana

POO - EPS - UAM

24

12

Aspectos interactivos
Editar texto del campo Cerrar ventana

Leer el fichero indicado en el campo de texto, asignar como string del rea de texto Escribir string del rea de texto en el fichero indicado en el campo de texto Editar texto multilnea
POO - EPS - UAM 25

Ejemplo: cdigo (I)

import java.awt.*; import java.awt.event.*; import java.io.*; public class Editor extends Frame implements WindowListener, ActionListener { TextField fileName; TextArea fileBuffer; Button load, save, quit; Editor () { setLayout (null); Label label = new Label ("File Name: "); label.setBounds (10, 30, 300, 20); add (label); fileName = new TextField (); fileName.setBounds (10, 50, 290, 20); add (fileName); ...
POO - EPS - UAM 26

13

Ejemplo: cdigo (II)

load = new Button ("Load"); load.setBounds (40, 80, 60, 20); add (load); save = new Button ("Save"); save.setBounds (120, 80, 60, 20); add (save); quit = new Button ("Quit"); quit.setBounds (200, 80, 60, 20); add (quit); fileBuffer = new TextArea (); fileBuffer.setBounds (10, 110, 300, 200); add (fileBuffer); this.addWindowListener load.addActionListener save.addActionListener quit.addActionListener } // Fin del constructor (this); (this); (this); (this);
27

POO - EPS - UAM

Ejemplo: cdigo (III)

... public void actionPerformed (ActionEvent e) { String command = e.getActionCommand (); if (command.equals ("Quit")) dispose (); else if (command.equals ("Load")) load (); else if (command.equals ("Save")) save (); } public public public public public public public ... void void void void void void void windowClosing (WindowEvent e) { dispose (); } windowActivated (WindowEvent e) {} windowClosed (WindowEvent e) {} windowDeactivated (WindowEvent e) {} windowDeiconified (WindowEvent e) {} windowIconified (WindowEvent e) {} windowOpened (WindowEvent e) {}

POO - EPS - UAM

28

14

Ejemplo: cdigo (IV)

... void load () { try { RandomAccessFile input = new RandomAccessFile (fileName.getText (), "r"); byte buffer[] = new byte [(int) input.length ()]; input.read (buffer); input.close (); fileBuffer.setText (new String (buffer)); } catch (IOException e) { System.out.println (e); } } void save () { try { FileWriter output = new FileWriter (fileName.getText ()); output.write (fileBuffer.getText ()); output.close (); } catch (IOException e) { System.out.println (e); } } ...
POO - EPS - UAM 29

Ejemplo: cdigo (V)

... public static void main (String args[]) { Editor edit = new Editor (); edit.setSize (320, 320); edit.setVisible (true); } } // Fin clase Editor

POO - EPS - UAM

30

15

Resumen
Programar un IU para una aplicacin en Java involucra:
Composicin Layout Eventos Paint

POO - EPS - UAM

31

Abstract Window Toolkit (AWT)

2da. Parte: Componentes

16

Componentes AWT predefinidas

POO - EPS - UAM

33

Jerarqua de componentes AWT: el package java.awt

Jerarqua = Herencia

POO - EPS - UAM

34

17

Jerarqua de componentes AWT: el package java.awt

Jerarqua = Herencia

POO - EPS - UAM

35

Uso componentes AWT: ejemplo

POO - EPS - UAM

36

18

Clases en el ejemplo
Frame Converter

Label TextField ScrollBar ConversionPanel Choice

layout manager: GridBagLayout

POO - EPS - UAM 37

Cdigo del ejemplo

import java.awt.*; import java.awt.event.*; import java.util.*; import java.applet.Applet; public class Converter extends Frame { ConversionPanel metricPanel, usaPanel; Unit[] metricDistances = new Unit[3]; Unit[] usaDistances = new Unit[4];

Creacin de la ventana

public void init() { // Use a GridLayout with 2 rows, as many columns as necessary, // and 5 pixels of padding around all edges of each cell. setLayout(new GridLayout(2,0,5,5)); ....

POO - EPS - UAM

38

19

Cdigo del ejemplo

// Create Unit objects for metric distances, and then // instantiate a ConversionPanel with these Units. metricDistances[0] = new Unit("Centimeters", 0.01); metricDistances[1] = new Unit("Meters", 1.0); metricDistances[2] = new Unit("Kilometers", 1000.0); metricPanel = new ConversionPanel(this, "Metric System", metricDistances); //Create Unit objects for U.S. distances, and then //instantiate a ConversionPanel with these Units. Inicializacin usaDistances[0] = new Unit("Inches", 0.0254); usaDistances[1] = new Unit("Feet", 0.305); usaDistances[2] = new Unit("Yards", 0.914); usaDistances[3] = new Unit("Miles", 1613.0); usaPanel = new ConversionPanel(this, "U.S. System", usaDistances); //Add both ConversionPanels to the Converter. add(metricPanel); add(usaPanel); }
POO - EPS - UAM 39

Cdigo del ejemplo

/** * Does the conversion from metric to U.S., or vice versa, and * updates the appropriate ConversionPanel. */ void convert(ConversionPanel from) { ConversionPanel to; if (from == metricPanel) to = usaPanel; else to = metricPanel;

funcionalidad

double multiplier = from.getMultiplier() / to.getMultiplier(); to.setValue(multiplier * from.getValue()); }

POO - EPS - UAM 40

20

Cdigo del ejemplo

/** Draws a box around this panel. */ public void paint(Graphics g) { Dimension d = getSize(); g.drawRect(0,0, d.width - 1, d.height - 1); } /** * Puts a little breathing space between * the panel and its contents, which lets us draw a box * in the paint() method. */ public Insets getInsets() { return new Insets(5,5,5,5); }

Dibujo

POO - EPS - UAM

41

Cdigo del ejemplo

public static void main(String[] args) { //Create a new window. Frame f = new Frame("Converter Applet/Application"); f.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } }); //Create a Converter instance. Converter converter = new Converter(); converter.init();

Main

//Add the Converter to the window and display the window. f.add("Center", converter); f.pack(); //Resizes the window to its natural size. f.setVisible(true); } }
POO - EPS - UAM 42

21

Cdigo del ejemplo

class ConversionPanel extends Panel implements ActionListener, AdjustmentListener, ItemListener { TextField textField; Choice unitChooser; Scrollbar slider; int max = 10000; int block = 100; Converter controller; Unit[] units;

Panel interno

POO - EPS - UAM

43

Cdigo del ejemplo

ConversionPanel(Converter myController, String myTitle, Unit[] myUnits) { //Initialize this ConversionPanel to use a GridBagLayout. GridBagConstraints c = new GridBagConstraints(); GridBagLayout gridbag = new GridBagLayout(); setLayout(gridbag); controller = myController; //Save arguments in instance variables. units = myUnits; //Set up default layout constraints. c.fill = GridBagConstraints.HORIZONTAL;

Composicin

//Add the label. It displays this panel's title, centered. Label label = new Label(myTitle, Label.CENTER); c.gridwidth = GridBagConstraints.REMAINDER; //It ends a row. gridbag.setConstraints(label, c); add(label);
POO - EPS - UAM 44

22

Cdigo del ejemplo

//Add the text field. It initially displays "0" and needs //to be at least 10 columns wide. textField = new TextField("0", 10); c.weightx = 1.0; //Use maximum horizontal space... c.gridwidth = 1; //The default value. gridbag.setConstraints(textField, c); add(textField); textField.addActionListener(this);

+ componentes

POO - EPS - UAM

45

Cdigo del ejemplo

//Add the pop-up list (Choice).

+ componentes

unitChooser = new Choice(); for (int i = 0; i < units.length; i++) { //Populate it. unitChooser.add(units[i].description); } c.weightx = 0.0; //The default value. c.gridwidth = GridBagConstraints.REMAINDER; //End a row. gridbag.setConstraints(unitChooser, c); add(unitChooser); unitChooser.addItemListener(this);

POO - EPS - UAM

46

23

Cdigo del ejemplo

// Add the slider. It's horizontal, and it has the maximum // value specified by the instance variable max. Its initial // and minimum values are the default (0). A click increments // the value by block units. slider = new Scrollbar(Scrollbar.HORIZONTAL); slider.setMaximum(max + 10); slider.setBlockIncrement(block); c.gridwidth = 1; //The default value. gridbag.setConstraints(slider, c); add(slider); slider.addAdjustmentListener(this); }

+ componentes

POO - EPS - UAM

47

Cdigo del ejemplo

/** Draws a box around this panel. */ public void paint(Graphics g) { Dimension d = getSize(); g.drawRect(0,0, d.width - 1, d.height - 1); }

Dibujo

/** * Puts a little breathing space between the panel * and its contents, which lets us draw a box in the paint() method. */ public Insets getInsets() { return new Insets(5,5,5,8); }

POO - EPS - UAM

48

24

Cdigo del ejemplo

/** Respond to the text field */ public void actionPerformed(ActionEvent e) { setSliderValue((double)Double.valueOf( textField.getText()).doubleValue()); controller.convert(this); } /** Respond to the choice */ public void itemStateChanged(ItemEvent e) { controller.convert(this); } /** Respond to the slider. */ public void adjustmentValueChanged(AdjustmentEvent e) { textField.setText(String.valueOf(e.getValue())); controller.convert(this); }
POO - EPS - UAM 49

Respuesta a eventos

Cdigo del ejemplo

/** Set the values in the slider and text field. */ void setValue(double f) { setSliderValue(f); textField.setText(String.valueOf((float)f)); } /** Set the slider value. */ void setSliderValue(double f) { int sliderValue = (int)f; if (sliderValue > max) sliderValue = max; if (sliderValue < 0) sliderValue = 0; slider.setValue(sliderValue); } }
POO - EPS - UAM 50

Modificacin componentes

25

Cmo se usan las componentes AWT

Jerarqua de componentes:

Jerarqua = Composicin Las componentes son estructuradas en una jerarqua de componentes, con instancias de (subclases de) Container definiendo dicha estructura. Los componentes son dibujados desde el tope de la jerarqua (la Ventana) hacia abajo, hasta arribar a las hojas (componentes no contenedores) Los eventos son enviados a los objetos que se registran como event listeners Modelo de delegacin
POO - EPS - UAM 51

Dibujo de las componentes:

Manejo de eventos:

Jerarqua de componentes: la clase java.awt.Container

Jerarqua = Composicin Las interfaces se construyen agregando componentes a modo de piezas La jerarqua de componentes debe empezar con una ventana (frame) o un applet Una componente slo puede aadirse a un Container

Agregar: add(Component) Retirar: remove(Component)

Las ventanas no pueden aadirse a otra componente La colocacin de las componentes en un contenedor se puede definir:

Mediante layout managers de distintos tipos A mano, con posiciones absolutas

POO - EPS - UAM 52

26

Jerarqua de componentes (II)

Jerarqua = Composicin

Las componentes se pueden aadir:

En el constructor del contenedor En main En cualquier funcin Acceso a componentes: getComponent(int), getComponentAt(int,int), getComponentCount(), getComponents() Acceso al contenedor desde una componente: getParent()
POO - EPS - UAM 53

Atravesar el rbol de componentes:

Jerarqua de componentes: ejemplo

public class Converter extends Frame { ... public void init() { ... add(metricPanel); add(usaPanel); ...

POO - EPS - UAM

54

27

Apariencia de las componentes:

paint(Graphics) de Component
La apariencia en pantalla de cada subclase de Component est definida por el cdigo de paint(Graphics) El cdigo de paint consiste en llamadas a funciones de dibujo sobre el objeto de tipo Graphics Es poco factible cambiar el dibujo de las componentes predefinidas (En cambio, es fcil cambiar su respuesta a eventos)

Normalmente no se redefine paint de las clases predefinidas Para modificar su apariencia, modificar su estado (el sistema refleja los cambios en la pantalla automticamente) En componentes personalizadas desde cero s se define paint Utilizar hilos si es necesario para no bloquear el repintado
POO - EPS - UAM 55

Es importante que paint no sea costoso de ejecutar

Dibujo de componentes
El dibujo comienza por el componente ms alto en la jerarqua que necesita ser dibujado

Por ejemplo, un Frame.

Se baja por la jerarqua, dibujando cada componente intermedio, hasta las hojas. El sistema de dibujo de AWT organiza este procedimiento No se pueden hacer suposiciones sobre el orden relativo de dibujo de las componentes
POO - EPS - UAM 56

28

Dibujo de componentes: ejemplo

Se dibuja el frame Se dibuja el Converter

Caja del borde

Se dibuja uno de los dos ConversionPanel

Caja del borde

Los componentes de este panel (Label, TextField, Scrollbar y Choice) son dibujados
POO - EPS - UAM 57

Refresco de las componentes

Refresco = (re)dibujar

Cundo

Al desplegar una ventana o cambiarle el tamao Al hacer visible un componente Al cambiar desde el programa propiedades visuales de un componente Al ser necesario cambiar la apariencia de uno componente para reflejar cambios en la aplicacin En los tres primeros casos, el sistema AWT. En el ltimo caso, el mismo programa
POO - EPS - UAM 58

Quin solicita

29

Refresco de las componentes

El proceso de dibujo en s slo puede llevarse a cabo cuando lo diga el sistema AWT
Estos procesos se deben ejecutar sin interrupcin. AWT hace que todos los dibujos ocurran en el mismo hilo.

El dibujo no puede insumir mucho tiempo

Si es necesario, crear un hilo separado para ejecutar alguna operacin larga

POO - EPS - UAM 59

Refresco de las componentes:

update(Graphics) y repaint()
AWT decide dibujar un componente

invoca a update(Graphics) Esta invocacin se hace desde el hilo de procesamiento de eventos update(Graphics) borra el rea a refrescar e invoca a paint(Graphics) invoca a repaint() Peticin al sistema AWT para llamar a update lo antes posible El programa no debe llamar a paint directamente
POO - EPS - UAM 60

Lo solicita el programa

30

Refresco de las componentes: el objeto Graphics

Es el argumento de los mtodos update y paint

Normalmente nos llega a nuestro cdigo desde AWT Dibujar y rellenar rectngulos, arcos, lneas, valos, polgonos, textos e imgenes. Obtener o cambiar el color, tipo de fuente o rea de clipping actuales. Cambiar el modo de dibujo.

Provee mtodos para:

POO - EPS - UAM

61

Refresco de las componentes: ejemplo

La forma ms simple de dibujar una componente es especializar el mtodo paint Ejemplo:
/** Draws a box around this panel. */ public void paint(Graphics g) { Dimension d = getSize(); g.drawRect(0,0, d.width - 1, d.height - 1); }

POO - EPS - UAM

62

31

Gestin de eventos: modelo de eventos de AWT 1.1

Modelo basado en delegacin
Eventos generados por emisores (sources) de eventos. Objetos (listeners) se registran para ser notificados de eventos:

De

cierto tipo Desde un emisor en particular

Se pueden tratar y generar eventos

POO - EPS - UAM 63

Gestin de eventos
Los eventos son objetos de distintas subclases de AWTEvent Se generan eventos cuando:

Se produce input del usuario: MouseEvent,KeyEvent Un widget se acciona: ActionEvent, TextEvent, AdjustmentEvent Una ventana es manipulada: WindowEvent Otras causas: ContainerEvent, ComponentEvent, PaintEvent, etc.

Los manejadores de eventos (listeners) pueden ser instancias de cualquier clase.

Slo es necesario que la clase implemente la interfaz listener correspondiente

POO - EPS - UAM 64

32

Estructura de programa
En cada programa con un manejador de eventos:
1. En el encabezamiento de la clase, declaracin de implementar la interfaz (o extender una clase que la implemente):

public class MyClass implements ActionListener {

2.

Cdigo que registra una instancia del manejador como receptor de eventos de uno o ms emisores:

someComponent.addActionListener(instanceOfMyClass);

3.

La implementacin de los mtodos declarados en la interfaz:

code that reacts to the action...}
POO - EPS - UAM

public void actionPerformed(ActionEvent e) { ...//

65

Ejemplo visto
class ConversionPanel extends Panel implements ActionListener, AdjustmentListener, ItemListener { textField.addActionListener(this);

public void actionPerformed(ActionEvent e) { setSliderValue((double)Double.valueOf( textField.getText()).doubleValue()); controller.convert(this); }

POO - EPS - UAM 66

33

Abstract Window Toolkit (AWT)

Repaso de clases bsicas

java.awt.Component
Dibujarse en la pantalla: paint(), update(), repaint() Procesamiento de eventos: delegacin Control de la apariencia visual:

Color: setForeground(Color), getForeground(), setBackground(Color), getBackground() Font: setFont(Font), getFont() Cursor: setCursor(Cursor), getCursor()

POO - EPS - UAM

68

34

java.awt.Component (II)
Tamao y posicin:

setSize(int,int) getSize() Dimension getLocation() Point getLocationOnScreen() Point setBounds(int,int,int,int) getBounds() Rectangle

(El layout manager puede alterar estos valores)

Mostrar detalles en System.out: list()

POO - EPS - UAM 69

java.awt.Graphics
Argumento de paint() y update() Dibujo de primitivas grficas:

drawLine(int,int, int,int), drawRect(int,int,int,int), drawArc(int,int,int,int,int,int), fillRect(int,int,int,int) drawString(String,int,int) drawImage(Image,int,int[,int,int],ImageObserver)

Estado:

Componente sobre la que dibujar: getGraphics() de Component Origen de coordenadas: translate(int,int) rea de clip: getClip(), setClip(int,int,int,int) Color: setColor(Color), getColor() Font: setFont(Font), getFont() Modo XOR: setXORMode(Color)
POO - EPS - UAM 70

35

Clases auxiliares en java.awt

Posiciones y tamaos:

Dimension: width, height Point: x, y Rectangle: x, y, width, height, contains(Point) Polygon: npoints, xpoints, ypoints, addPoint(Point) new Color(0.8f, 0.3f, 1.0f) en RGB Constantes de tipo Color: Color.white,Color.blue, etc. Funciones para conversin RGB HSB
POO - EPS - UAM 71

Color:

Clases auxiliares en java.awt (II)

Font:

new Font ("Helvetica", Font.BOLD + Font.ITALIC, 18) getName(), getStyle(), getSize() Constantes de estilo: Font.BOLD, Font.ITALIC, Font.PLAIN new Cursor(Cursor.HAND_CURSOR) Cursor.CROSSHAIR_CURSOR etc.
POO - EPS - UAM 72

Cursor:

36

Abstract Window Toolkit (AWT)

3ra. Parte: Gestin de Eventos

Modelo de eventos
Modelo basado en delegacin. A cada tipo de evento xxxEvent corresponde:

Un tipo de receptor xxxListener (excepcin: MouseEvent tiene dos) Una lista de clases de componentes que pueden producir el evento Un mtodo addxxxListener para registrar receptores de esos eventos

Este mtodo est definido en las clases que generan el evento Una componente slo puede registrar listeners del tipo de eventos que genera la componente
POO - EPS - UAM 74

37

Modelo de eventos: ejemplo

Clase de evento: Objetos que lo emiten: Tipo de interfaz listener: Mtodos a implementar en clase listener: Mtodo para registrar listener: ActionEvent Button, TextField, List, MenuItem ActionListener actionPerformed (ActionEvent) addActionListener (ActionListener)

Una componente slo puede registrar listeners del tipo de eventos que genera la componente
POO - EPS - UAM 75

Modelo de eventos: ejemplo

public class Beeper implements ActionListener { ... //where initialization occurs: button = new Button("Click Me"); button.addActionListener(this); ... public void actionPerformed(ActionEvent e){ ...//Implements the answer... } }

POO - EPS - UAM

76

38

Utilizacin de adapters y clases internas

La mayora de las interfaces de eventos contienen ms de un evento.
Por ejemplo, MouseListener define cinco mtodos. Aunque slo nos interese un evento, si nuestra clase implementa directamente la interfaz, igual debemos dar cdigo (probablemente un cuerpo vaco) para los otros cuatro mtodos

POO - EPS - UAM

77

Ejemplo de cdigo de listener

public class MyClass implements MouseListener { ... someObject.addMouseListener(this); ... /* Empty method definition. */ public void mousePressed(MouseEvent e) { } /* Empty method definition. */ public void mouseReleased(MouseEvent e) { } /* Empty method definition. */ public void mouseEntered(MouseEvent e) { } /* Empty method definition. */ public void mouseExited(MouseEvent e) { } public void mouseClicked(MouseEvent e) { ...//Event handler implementation goes here... } }
POO - EPS - UAM

78

39

Utilizacin de adapters
Este tipo de cdigo resulta ms difcil de leer y mantener. Para evitar la implementacin vaca de mtodos, AWT provee clases adapters

implementan listeners con mtodos vacos; proporciona los adaptadores en java.awt.event; para cada interfaz de listener con ms de un mtodo.

Crear una subclase del adaptador definiendo slo los mtodos que interesen
POO - EPS - UAM 79

Utilizacin de adapters: ejemplo

Por ejemplo, si se extiende la clase MouseAdapter se hereda definiciones (vacas) de los cinco mtodos definidos por la interfaz MouseListener.
class MouseAdapter implements public void mouseClicked public void mousePressed public void mouseReleased public void mouseEntered public void mouseExited } MouseListener { (MouseEvent e) {} (MouseEvent e) {} (MouseEvent e) {} (MouseEvent e) {} (MouseEvent e) {}

public class MyClass extends MouseAdapter { ... someObject.addMouseListener(this); ... public void mouseClicked(MouseEvent e) { ...//Event handler implementation goes here... } }
POO - EPS - UAM 80

40

Adaptadores: problemas (I)

Una subclase de Component no puede heredar de otra clase Utilizar un objeto adaptador auxiliar para hacer de listener

POO - EPS - UAM

81

Adaptadores: cdigo
class MyListener extends MouseAdapter { public void mouseEntered (MouseEvent e) { ... // Respuesta de la ventana al evento } } class Ventana extends Frame { Ventana () { Button boton = new Button (); boton.addMouseListener (new MyListener ()); ... } }
POO - EPS - UAM 82

41

Adaptadores: problemas (II)

A menudo los mtodos listener necesitan acceder a variables de la clase de componente
Incluir en el adaptador una variable que apunte a la componente O bien definir el adaptador como clase interna de la clase de componente

POO - EPS - UAM

83

Adaptador como clase interna

class Ventana extends Frame { private String nombre; Ventana () { Button boton = new Button (); boton.addMouseListener (new MyListener ()); ... } class MyListener extends MouseAdapter { public void mouseEntered (MouseEvent e) { ... System.out.println (nombre); ... } }
POO - EPS - UAM 84

42

Adaptador como clase annima

class Ventana extends Frame { private String nombre; Ventana () { Button boton = new Button (); boton.addMouseListener ( new MouseAdapter () { public void mouseEntered (MouseEvent e) { ... System.out.println (nombre); ... } } ); } }
POO - EPS - UAM 85

Adaptadores autosuficientes = reutilizables

class Mover extends MouseAdapter implements MouseMotionListener { private Point initialPoint; public Mover (Component c) { listenTo (c); } public void listenTo (Component c) { c.addMouseListener (this); new Mover (obj); c.addMouseMotionListener (this); } public void mousePressed (MouseEvent e) { initialPoint = e.getPoint (); } public void mouseDragged (MouseEvent e) { Component c = (Component) e.getSource (); Point p = c.getLocation (); c.setLocation (p.x + e.getX () - initialPoint.x, p.y + e.getY () - initialPoint.y); } public void mouseMoved (MouseEvent e) {} }
POO - EPS - UAM 86

43

Ver apndice A
Clases de Eventos Mtodos de los listeners

POO - EPS - UAM

87

Abstract Window Toolkit (AWT)

4ta. Parte: Gestin de Eventos: Implementacin de los listeners

44

Qu deben hacer los mtodos de los receptores?

Modificar caractersticas de la interfaz

Cambiar colores, fonts, etiquetas, etc. Mover objetos, cambiar su tamao Ocultar, mostrar, aadir, eliminar componentes Abrir un cuadro de dilogo etc. Normalmente se refleja algn resultado en la interfaz

Ejecutar programas de la aplicacin

POO - EPS - UAM

89

Procesar eventos o ignorarlos?

Eventos de bajo nivel recogidos en widgets y elaborados en forma de eventos de alto nivel

Botones: MouseEvent ActionEvent Widgets de texto: MouseEvent, KeyEvent TextEvent, ActionEvent Widgets de seleccin: MouseEvent ItemEvent, ActionEvent etc.

Eventos de cambio de estado de componentes: procesar los eventos inmediatamente vs. acceder al estado cuando se necesite

TextEvent, ItemEvent, ComponentEvent, ContainerEvent, AdjustmentEvent, etc.

POO - EPS - UAM 90

45

Contenido de las clases de eventos

Las distintas clases de eventos incluyen: Constantes (variables estticas)

ID de los distintos eventos de una clase Ejemplo: MouseEvent.MOUSE_MOVED, KeyEvent.KEY_RELEASED Constantes para ciertas propiedades de los eventos (valores devueltos por mtodos) Ejemplo: ItemEvent.SELECTED, ItemEvent.DESELECTED Devuelven informacin adicional sobre el evento Ejemplo: getX(), getY() de MouseEvent, getKeyChar() de KeyEvent, getID() de AWTEvent
POO - EPS - UAM 91

Mtodos

Implementacin de un ActionListener
Probablemente son los ms fciles y comunes de implementar. Se implementa un ActionListener para responder a las indicaciones del usuario de que alguna accin dependiente de la implementacin debe ocurrir. Cundo ocurre?

Click sobre un botn Doble Click sobre un item de lista Elegir un menu item Enter en un campo de texto

Como resultado, se enva el mensaje actionPerformed a todos los listeners que se han registrado para ese componente
POO - EPS - UAM 92

46

Interfaz ActionListener
Define un solo mtodo
void actionPerformed(ActionEvent)
Llamado

por AWT justo despus que el usuario informe a la componente oda que algo debe ocurrir.

Por lo tanto, no tiene clase Adapter

POO - EPS - UAM

93

Ejemplo de ActionListener

POO - EPS - UAM

94

47

Ejemplo de ActionListener
public class MultiListener ... implements ActionListener { ... //where initialization occurs: button1.addActionListener(this); button2.addActionListener(this); button2.addActionListener(new Eavesdropper(bottomTextArea)); } public void actionPerformed(ActionEvent e) { topTextArea.append(e.getActionCommand() + "\n"); } } class Eavesdropper implements ActionListener { ... public void actionPerformed(ActionEvent e) { myTextArea.append(e.getActionCommand() + "\n"); } }
POO - EPS - UAM 95

Ver apndice B
Implementacin de interfaces de listeners

POO - EPS - UAM

96

48

Abstract Window Toolkit (AWT)

5ta. Parte: Layout de componentes dentro de un contenedor

Layout de componentes
Qu es layout?

Disposicin global de un conjunto de componentes

Layout Manager

POO - EPS - UAM

98

49

Layout Manager
Objeto que controla el tamao y posicin de los componentes de un contenedor. Implementan la interfaz LayoutManager Por qu layout managers?

La posicin de una componente depende de las componentes que la rodean y del espacio disponible para el grupo Un layout manager por encima de las componentes individuales impone un orden Las componentes negocian su colocacin y tamao con el layout manager.
POO - EPS - UAM 99

Clases de Layout Managers

Existen distintas clases de manager para distintos tipos de layout

Predefinidos por AWT

Simples:

FlowLayout y GridLayout BorderLayout, CardLayout

Especficos: Ultra

flexible:GridBagLayout

Cada uno tiene sus propias reglas de uso

POO - EPS - UAM

100

50

Clases de Layout Manager

Cada Container tiene un controlador por omisin.

Panel FlowLayout Windows BorderLayout de Container.

Si no sirve, se puede cambiar fcilmente

setLayoutManager(LayoutManager)

Es posible incluso crear manejadores propios

POO - EPS - UAM 101

Reglas generales de uso

A menos que el programador lo cambie, cada contenedor tiene su propia instancia de LayoutManager asociada. Es consultado cada vez que que el contenedor tiene que cambiar su apariencia. La mayora de los LayoutManagers no requiere que se llame explcitamente a sus mtodos
POO - EPS - UAM 102

51

Cmo elegir LayoutManager

Escenario:

Se necesita mostrar una componente en tanto espacio como sea posible. Con BorderLayout, se debe poner la componente vida de espacio en el centro. Con GridBagLayout es necesario que la propiedad fill de las restricciones sea fill=GridBagConstraints.BOTH. Si no importa que las otras componentes sean igual de grandes, se puede usar un GridLayout.
POO - EPS - UAM 103

Considere BorderLayout o GridBagLayout

Cmo elegir LayoutManager (II)

Escenario:

Se necesita mostrar unas pocas componentes en una fila a tamao natural.

Considere utilizar un Panel para contener los componentes y el manager por omisin para el Panel, el FlowLayout manager. Escenario:

Es necesario mostrar unos pocos componentes del mismo tamao en filas y/o columnas.

El GridLayout es perfecto para esto.

POO - EPS - UAM 104

52

Algunas guas de uso

Los siguientes mtodos de Container provocan invocaciones al layout manager:
add(), remove(), removeAll(): en cualquier momento. layout(): usualmente como resultado de una solicitud paint, y no directamente. preferredSize(), minimumSize(): el retorno es slo una sugerencia, el programa tiene que mantener estos valores.

POO - EPS - UAM 105

Ver apndice C
Clases de layout managers

POO - EPS - UAM

106

53

Interfaz KeyListener
void keyTyped(KeyEvent)

Llamado por AWT despus que el usuario introduce un carcter Unicode en la componente de inters. Llamado por AWT despus que el usuario presiona una tecla en el teclado. Llamado por AWT despus que el usuario suelta una tecla en el teclado.

void keyPressed(KeyEvent)

void keyReleased(KeyEvent)

POO - EPS - UAM

107

Clase KeyEvent
int getKeyChar() void setKeyChar(char)

Obtiene o cambia el carcter Unicode asociado con el evento.

int getKeyCode() void setKeyCode(int)

Obtiene o cambia el cdigo de tecla asociado al evento. La clase KeyEvent define varias constantes de cdigos para las teclas comunes. Por ejemplo:

VK_A especifica la tecla con rtulo A VK_ESCAPE especifica la tecla ESCAPE.

void setModifiers(int)

Cambia el estado de las teclas modificadoras para el evento.

POO - EPS - UAM 108

54

Abstract Window Toolkit (AWT)

Apndice C Clases de layout managers

BorderLayout

POO - EPS - UAM

110

55

BorderLayout (II)
class Ventana extends Frame { Ventana () { setLayout (new BorderLayout ()); setTitle ("Border Layout"); add("North", new Button("North")); add("South", new Button("South")); add("East", new Button("East")); add("West", new Button("West")); add("Center", new Button("Center")); } }

mportante: en este caso, siempre se debe utilizar una I versin de add con dos argumentos:

Sector Componente
POO - EPS - UAM 111

BorderLayout (III)
La parte central es la que ms vara con la ventana. Las otras partes slo varan para mantener ocupado todo el espacio disponible. Manager por omisin de las ventanas. Por omisin, no tiene ninguna distancia al borde

Se puede especificar con este constructor:

public BorderLayout(int horizontalGap, int verticalGap)

POO - EPS - UAM

112

56

FlowLayout

POO - EPS - UAM

113

FlowLayout (II)
Este manager pone las componentes en una fila, cada una a su preferredSize(). Si el espacio horizontal es muy pequeo, agrega nuevas filas. En cada fila los componentes puedan estar centrados (omisin), alineados a izquierda o a derecha.

POO - EPS - UAM

114

57

FlowLayout (III)
class Ventana extends Frame { Ventana () { setLayout (new FlowLayout ()); setTitle ("Flow Layout"); add (new Button ("Button 1")); add (new Button ("Button 2")); add (new Button ("Button 3")); add (new Button ("Button 4")); add (new Button ("Button 5")); } }

POO - EPS - UAM

115

FlowLayout (IV)

class Ventana extends Frame { Ventana () { FlowLayout f = new FlowLayout (); f.setAlignment(FlowLayout.RIGHT); setLayout (f); setTitle ("Flow Layout"); add (new Button ("Button 1")); add (new Button ("Button 2")); add (new Button ("Button 3")); add (new Button ("Button 4")); add (new Button ("Button 5")); add (new Button ("Button 6")); } }
POO - EPS - UAM 116

58

FlowLayout (V)
Tres constructores:

public FlowLayout() public FlowLayout(int alignment) public FlowLayout(int alignment, int horizontalGap, int verticalGap)

Alineamiento:

FlowLayout.LEFT FlowLayout.CENTER FlowLayout.RIGHT

Horizontal y Vertical gap: distancia entre

componentes (omisin: 5)
POO - EPS - UAM 117

GridLayout

setRows(int), setColumns(int) GridLayout(0,n) tantas filas como hagan falta Ejemplo: GridLayout(2,3)

POO - EPS - UAM

118

59

GridLayout (II)
Este manager pone las componentes en una grilla de celdas. Cada componente toma todo el espacio disponible en su celda, las cuales tienes todas el mismo tamao. Cuando se redimensiona una ventana con GridLayout, se cambia el tamao de las celdas de forma que sean lo ms grandes posibles dado el espacio disponible.
POO - EPS - UAM 119

GridLayout (III)
class Ventana extends Frame { Ventana () { setLayout (new GridLayout (2,3)); setTitle ("Grid Layout"); add (new Button ("Button 1")); add (new Button ("Button 2")); add (new Button ("Button 3")); add (new Button ("Button 4")); add (new Button ("Button 5")); } }

Constructores: public GridLayout(int rows, int columns) public GridLayout(int rows, int columns, int horizontalGap, int verticalGap)
POO - EPS - UAM 120

60

CardLayout

POO - EPS - UAM

121

CardLayout (II)
Un CardLayout permite manipular dos o ms componentes (usualmente Paneles) para que compartan el mismo espacio de la pantalla. Conceptualmente, una pila de cartas donde slo se ve la que est en la cima. Se puede elegir qu carta estar en la cima:

Solicitando la primera o ltima carta (orden en que se agregaron al contenedor). Recorriendo la pila hacia delante o hacia atrs. Especificando una carta por nombre
POO - EPS - UAM 122

61

CardLayout (III)
//Where instance variables are declared: Panel cards; final static String BUTTONPANEL = "Panel with Buttons"; final static String TEXTPANEL = "Panel with TextField"; ... //Where the container is initialized: cards = new Panel(); cards.setLayout(new CardLayout()); ... //Create a Panel named p1. Put buttons in it. //Create a Panel named p2. Put a text field in it. ... cards.add(BUTTONPANEL, p1); cards.add(TEXTPANEL, p2); ... ((CardLayout)cards.getLayout()).show(cards, BUTTONPANEL); // o bien ((CardLayout)cards.getLayout()).show(cards, TEXTPANEL);
POO - EPS - UAM 123

CardLayout (IV)
Eligiendo componente:

public public public public public String

void first(Container parent) void next(Container parent) void previous(Container parent) void last(Container parent) void show(Container parent, name)

El primer argumento siempre es el contenedor para quien el manager est trabajando.

POO - EPS - UAM

124

62

GridBagLayout
mantienen igualdad

POO - EPS - UAM

125

GridBagLayout (II)
El ms flexible (y complejo) de los layout managers. Coloca a las componentes en una grilla de filas y columnas

Ciertos componentes pueden abarcar varias filas o columnas. No todas las filas (columnas) deben que tener el mismo alto (ancho).

Coloca las componentes en celdas y luego utiliza los preferredSize de las componentes para determinar el tamao de las celdas.
POO - EPS - UAM 126

63

GridBagLayout (III)
mantienen igualdad y ocupan todo el ancho

toma todo el espacio adicional

POO - EPS - UAM

127

GridBagLayout (IV)
Las posiciones y tamaos se especifican mediante restricciones (constraints) para cada componente.

Se crea instancia de GridBagConstraint, Se le da valor a sus variables de instancia, Se asocia la restriccin con el componente

GridBagLayout gridbag = new GridBagLayout(); GridBagConstraints c = new GridBagConstraints(); setLayout(gridbag); // Para cada componente a ser agregado: //... Se crea el componente ... //... Se da valor a las variables de c gridbag.setConstraints(theComponent, c); add(theComponent);
POO - EPS - UAM 128

64

Restricciones de GridBagLayout
Se puede usar la misma instancia de GridBagLayout para distintas componentes. gridx, gridy

Especifica la celda que contiene el extremo izquierdo (superior) del componente. La primera celda tiene gridx (gridy) = 0. Usar GridBagConstraints.RELATIVE (el valor por omisin) para especificar que el componente se coloque justo a la derecha (o abajo) del componente anterior.
POO - EPS - UAM 129

Restricciones de GridBagLayout
(II)
gridwidth, gridheight

Especifica el nmero de columnas (filas) que ocupa la componente. No son pixels. El valor default es 1. Usar GridBagConstraints.REMAINDER para especificar que la componente sea la ltima de la fila (columna). Usar GridBagConstraints.RELATIVE para especificar que la componente sea la anteltima en la fila (columna).

POO - EPS - UAM

130

65

Restricciones de GridBagLayout
(III)
fill

Usado cuando el rea disponible para una componente es mayor que la requerida:
GridBagConstraints.NONE (valor por omisin), GridBagConstraints.HORIZONTAL:lacomponente creceparaocuparhorizontalmentetodaelrea,perono cambiasualto. GridBagConstraints.VERTICAL:lacomponentecrece paraocuparverticalmentetodaelrea,peronocambiasu ancho. GridBagConstraints.BOTH:hacequelacomponente lleneporcompletoelreadisponible.

ipadx, ipady

Especifica el margen interno (por omisin es 0). El ancho (alto) de la componenteEPS - UAM lo menos el ancho (alto)131 POO - es, por mnimo ms ipadx*2 pixels (ipady*2 pixels).

Restricciones de GridBagLayout
(IV)
Insets

Especifica el margen externo de la componente el mnimo espacio entre la componente y los mrgenes del rea disponible. El valor es especificado en un objeto Insets. Por omisin el valor es 0. Usado cuando la componente es menor que el rea disponible, para determinar dnde (dentro del rea) ubicarlo:

Anchor

GridBagConstraints.CENTER (default) GridBagConstraints.NORTH GridBagConstraints.NORTHEAST GridBagConstraints.EAST GridBagConstraints.SOUTHEAST GridBagConstraints.SOUTH GridBagConstraints.SOUTHWEST GridBagConstraints.WEST GridBagConstraints.NORTHWEST
POO - EPS - UAM

132

66

Restricciones de GridBagLayout
(V)
weightx, weighty

Especificar los pesos es un arte que puede tener un impacto significativo en la apariencia final. Son usados para determinar cmo se distribuye el espacio entre las columnas (filas); esto es importante para el comportamiento de redimensionamiento. A menos que se especifique un valor distinto de cero, todas las componentes se agrupan juntas en el centro del contenedor. Esto es porque cuando el peso es 0.0 (default), el GridBagLayout pone cualquier espacio extra en los mrgenes externos del contenedor. (contina)
POO - EPS - UAM 133

Restricciones de GridBagLayout
(VI)
weightx, weighty(cont.)

Generalmente los pesos son especificados con 0.0 y 1.0 como valores extremos, usando nmeros intermedios cuando es necesario. Nmeros mayores indican que la fila (columna) del componente debe tener ms espacio. Para cada columna (fila), el peso es relacionado con el mayor weightx (weighty) especificado para un componente en esa columna (fila).

Para los componentes multicolumnas (multifilas) el peso es dividido de alguna manera entre las columnas (filas) que abarca

El espacio extra tiende a irse hacia abajo a la derecha.

POO - EPS - UAM 134

67

GridBagLayout: Ejemplo

GridBagLayout gridbag = new GridBagLayout(); GridBagConstraints c = new GridBagConstraints(); setLayout(gridbag); c.fill = GridBagConstraints.BOTH; c.weightx = 1.0; makebutton("Button1", gridbag, c); makebutton("Button2", gridbag, c); makebutton("Button3", gridbag, c);
POO - EPS - UAM 135

GridBagLayout: Ejemplo
Cada componente tan grande como sea posible
GridBagLayout gridbag = new GridBagLayout(); GridBagConstraints c = new GridBagConstraints(); setLayout(gridbag); c.fill = GridBagConstraints.BOTH; c.weightx = 1.0; makebutton("Button1", gridbag, c); makebutton("Button2", gridbag, c); makebutton("Button3", gridbag, c);
POO - EPS - UAM 136

68

GridBagLayout: Ejemplo
Si no estuviera
GridBagLayout gridbag = new GridBagLayout(); GridBagConstraints c = new GridBagConstraints(); setLayout(gridbag); c.fill = GridBagConstraints.BOTH; c.weightx = 1.0; makebutton("Button1", gridbag, c); makebutton("Button2", gridbag, c); makebutton("Button3", gridbag, c);
POO - EPS - UAM 137

GridBagLayout: Ejemplo
Todas las columnas iguales y mayores que 0
GridBagLayout gridbag = new GridBagLayout(); GridBagConstraints c = new GridBagConstraints(); setLayout(gridbag); c.fill = GridBagConstraints.BOTH; c.weightx = 1.0; makebutton("Button1", gridbag, c); makebutton("Button2", gridbag, c); makebutton("Button3", gridbag, c);
POO - EPS - UAM 138

69

GridBagLayout: Ejemplo
Si no estuviera (es decir, weightx = 0)
GridBagLayout gridbag = new GridBagLayout(); GridBagConstraints c = new GridBagConstraints(); setLayout(gridbag); c.fill = GridBagConstraints.BOTH; c.weightx = 1.0; makebutton("Button1", gridbag, c); makebutton("Button2", gridbag, c); makebutton("Button3", gridbag, c);
POO - EPS - UAM 139

GridBagLayout: Ejemplo

c.gridwidth = GridBagConstraints.REMAINDER; //end of row makebutton("Button4", gridbag, c); c.weightx = 0.0; //reset to the default makebutton("Button5", gridbag, c); //another row c.gridwidth = GridBagConstraints.RELATIVE; //next to last makebutton("Button6", gridbag, c); c.gridwidth = GridBagConstraints.REMAINDER; //end of row makebutton("Button7", gridbag, c);
POO - EPS - UAM 140

70

GridBagLayout: Ejemplo

c.gridwidth = 1; //reset to the default c.gridheight = 2; c.weighty = 1.0; makebutton("Button8", gridbag, c); c.weighty = 0.0; //reset to the default c.gridwidth = GridBagConstraints.REMAINDER; //end of row c.gridheight = 1; //reset to the default makebutton("Button9", gridbag, c); makebutton("Button10", gridbag, c);
POO - EPS - UAM 141

GridBagLayout: Ejemplo

c.gridwidth = 1; //reset to the default c.gridheight = 2; c.weighty = 1.0; makebutton("Button8", gridbag, c); c.weighty = 0.0; //reset to the default c.gridwidth = GridBagConstraints.REMAINDER; //end of row c.gridheight = 1; //reset to the default makebutton("Button9", gridbag, c); makebutton("Button10", gridbag, c);
POO - EPS - UAM 142

ocupa dos filas

71

GridBagLayout: Ejemplo

c.gridwidth = 1; //reset to the default c.gridheight = 2; c.weighty = 1.0;

es el nico con valor > 0

makebutton("Button8", gridbag, c); c.weighty = 0.0; //reset to the default c.gridwidth = GridBagConstraints.REMAINDER; //end of row c.gridheight = 1; //reset to the default makebutton("Button9", gridbag, c); makebutton("Button10", gridbag, c);
POO - EPS - UAM 143

GridBagLayout: Ejemplo
protected void makebutton(String name, GridBagLayout gridbag, GridBagConstraints c) { Button button = new Button(name); gridbag.setConstraints(button, c); add(button); }

POO - EPS - UAM

144

72

Trabajando sin Layout Manager

Se debe utilizar un layout manager siempre que sea posible. Con ellos es ms fcil redimensionar los contenedores y ajustar la apariencia de componentes dependientes de la plataforma. Tambin es fcil reutilizarlos. Si el contenedor no ser reutilizado, no puede ser redimensionado, y controla por completo los factores que normalmente dependen de la plataforma (fuentes y aspecto de los componentes), entonces puede tener sentido un layout absoluto.
POO - EPS - UAM 145

Trabajando sin Layout Manager

public void paint(Graphics g) { if (!laidOut) { Insets insets = insets(); /* We're guaranteed that insets() will return a valid * Insets if called from paint() -- it isn't valid when * called from the constructor. */ b1.reshape(50 + insets.left, 5 + insets.top, 50, 20); b2.reshape(70 + insets.left, 35 + insets.top, 50, 20); b3.reshape(130 + insets.left, 15 + insets.top, 50, 30); laidOut = true; }
POO - EPS - UAM 146

73

Abstract Window Toolkit (AWT)

Apndice D Widgets AWT Clases predefinidas de componentes estndar

java.awt.Button
Estado y propiedades

Constructores: Button(), Button(String) Cambiar / acceder a la etiqueta: GetLabel(), SetLabel(String) Botn activo / inactivo: setEnabled(boolean) Emite un ActionEvent al ser pulsado Identificacin para el evento de accin: setActionCommand(String)

El string se utiliza como etiqueta del botn

Operacin

Asocia un string al botn (por omisin, el mismo que la etiqueta) El string formar parte de la informacin incluida en los ActionEvent's emitidos por el botn (ver getActionCommand() de ActionEvent)
POO - EPS - UAM 148

74

class ButtonDemo extends Frame implements ActionListener { Button b1, b2, b3; ButtonDemo () { setLayout (new FlowLayout ()); b1 = new Button (); b1.setLabel ("Disable middle button"); b1.setActionCommand ("Disable"); b2 = new Button ("Middle button"); b3 = new Button ("Enable middle button"); b3.setEnabled (false); b3.setActionCommand ("Enable"); add (b1); add (b2); add (b3); b1.addActionListener (this); b3.addActionListener (this); } ...
POO - EPS - UAM 149

... public void actionPerformed (ActionEvent e) { String command = e.getActionCommand(); if (command.equals ("Disable")) { b1.setEnabled (false); b2.setEnabled (false); b3.setEnabled (true); } else { b1.setEnabled (true); b2.setEnabled (true); b3.setEnabled (false); } }

POO - EPS - UAM

150

75

Widgets de seleccin
Checkbox List Choice Menu

ItemEvent lleva nmero de item Doble click Seleccin mltiple

Emiten ActionEvents

Ahorro de espacio

Emiten ItemEvents
POO - EPS - UAM 151

java.awt.Checkbox
Descripcin

Botn seleccionable con dos estados: seleccionado / deseleccionado Agrupable en grupos de botones de seleccin excluyente (radio buttons) Checkbox(), Checkbox(String), Checkbox(String,boolean) getLabel(), setLabel(String) getState(), setState(boolean)
POO - EPS - UAM 152

Estado y propiedades

76

java.awt.Checkbox (cont.)
Operacin

Emite un ItemEvent al cambiar de estado El item asociado el evento es el label del checkbox Identificacin del item desde el evento:

getItem()String (label del checkbox) getItemSelectable()Object (la componente checkbox) Crear objeto de la clase CheckboxGroup Utilizar el constructor Checkbox(String,boolean,CheckboxGroup) Los checkbox creados con el mismo grupo como argumento forman un grupo Slo un checkbox de un grupo puede estar seleccionado
POO - EPS - UAM 153

Botones excluyentes: grupos de Checkbox'es

class CheckboxDemo extends Frame { CheckboxDemo () { setLayout (new GridLayout (1, 2)); Panel p1 = new Panel (); Checkbox cb = new Checkbox (); cb.setLabel ("Checkbox 1"); cb.setState (true); p1.add (cb); p1.add (new Checkbox ("Checkbox 2")); p1.add (new Checkbox ("Checkbox 3")); add (p1); Panel p2 = new Panel (); CheckboxGroup group = new CheckboxGroup (); p2.add (new Checkbox ("Checkbox 4", group, false)); p2.add (new Checkbox ("Checkbox 5", group, false)); p2.add (new Checkbox ("Checkbox 6", group, false)); add (p2);
POO - EPS - UAM 154

77

POO - EPS - UAM

155

java.awt.Choice
Descripcin

Lista de seleccin desplegable Uno de los elementos de la lista est seleccionado

add(String), getItem(int), getItemCount() select(int), select(String), isIndexSelected(int), getSelectedItem() String, getSelectedIndex() int

Estado y propiedades

Operacin

Emite un ItemEvent al cambiar la seleccin

POO - EPS - UAM 156

El item asociado el evento es el string del item seleccionado

78

java.awt.List
Descripcin

Lista de seleccin con barras de scroll El modo de seleccin puede ser simple o mltiple
List(), List(int), List(int,boolean) add(String), add(String,int), remove(String), remove(int), getItem(int), getItems(), getItemCount(), getRows() select(int), select(String), isIndexSelected(int), getSelectedItem() String, getSelectedIndex() int, getSelectedObjects() Object[] isMultipleMode(), setMultipleMode(boolean)
POO - EPS - UAM 157

Estado y propiedades

java.awt.List (cont.)
Operacin

Seleccionar / deseleccionar item: emite ItemEvent

El item asociado al evento es el nmero de posicin del item seleccionado Doble click: emite ActionEvent con el texto del item seleccionado como action command string

POO - EPS - UAM

158

79

class ListDemo extends Frame implements ActionListener, ItemListener { TextArea output; List spanish, italian; ListDemo () { setLayout (new FlowLayout ()); spanish = new List (3, true); spanish.add ("uno"); spanish.add ("dos"); spanish.add ("tres"); spanish.add ("cuatro"); spanish.addActionListener (this); spanish.addItemListener (this); italian = new List (); italian.add ("uno"); italian.add ("due"); italian.add ("tre"); italian.add ("quattro"); italian.addActionListener (this); italian.addItemListener (this); ... POO - EPS - UAM

159

... Panel p = new Panel (); p.setLayout (new GridLayout (2, 1, 10, 10)); p.add (spanish); p.add (italian); output = new TextArea (10, 40); output.setEditable (false); add (output); add (p); } // Fin del constructor ...

POO - EPS - UAM

160

80

... public void actionPerformed (ActionEvent e) { List list = (List) (e.getSource ()); String language = (list == spanish)? "Spanish" : "Italian"; output.append ("Action event on " + list.getSelectedItem () + " in " + language + ".\n"); } public void itemStateChanged (ItemEvent e) { List list = (List) (e.getItemSelectable ()); String language = (list == spanish)? "Spanish" : "Italian"; int index = ((Integer) (e.getItem ())) .intValue (); if (e.getStateChange () == ItemEvent.SELECTED) { output.append ("Select event on item " + index + " (" + list.getItem (index) + ")" + " in " + language + ".\n"); } else output.append ("Deselect event on item " + index + " (" + list.getItem (index) + ")" + " in " + language + ".\n"); } }
POO - EPS - UAM 161

POO - EPS - UAM

162

81

java.awt.Menu
Descripcin
Conjunto de items de distintas modalidades:

MenuItem: tipo botn CheckboxMenuItem: tipo checkbox Menu: submen

MenuItem

Menu
POO - EPS - UAM

CheckBoxMenuItem
163

java.awt.Menu
Construccin
Menu(), Menu(String), MenuItem(), MenuItem(String), CheckboxMenuItem(), CheckboxMenuItem(String) Aadir items: add(String|MenuItem|CheckboxMenuItem| Menu), insert(String|MenuItem|...,int), getItem(int), addSeparator() Se requiere una barra de mens para aadir mens a una ventana:

setMenuBar(MenuBar) de Frame add(Menu), getMenu(int), getMenuCount() de MenuBar

POO - EPS - UAM

164

82

java.awt.Menu (cont.)
Estado y propiedades
getLabel(), setLabel(String)de Menu / MenuItem Activar / desactivar item: isEnabled(), setEnabled(boolean)de Menu / MenuItem Seleccin de CheckboxMenuItem: getState(), setState(boolean)
POO - EPS - UAM 165

java.awt.Menu (cont.)
Operacin
MenuItem emite slo ActionEvent como un botn, con el label del item pulsado como action command string Source del evento: el item o el Menu contenedor del item CheckboxMenuItem emite slo ItemEvent como un checkbox, con el label del item seleccionado / deseleccionado como label del evento Source del evento: el propio CheckboxMenuItem

POO - EPS - UAM

166

83

Widgets de texto
TextComponent Label TextField TextArea

POO - EPS - UAM

167

java.awt.Label
Descripcin
Texto esttico

Estado y propiedades
Label(), Label(String), Label(String,LEFT|RIGHT| CENTER) getText(), setText(String) getAlignment(), setAlignment(LEFT|RIGHT|CENTER)

Operacin
No tiene
POO - EPS - UAM 168

84

java.awt.TextComponent
Descripcin

Superclase de TextField y TextArea Texto editable, seleccionable

getText(), setText(String) isEditable(), setEditable(boolean) getCaretPosition(), setCaretPosition(int) getSelectedText(), select(int,int), selectAll(), getSelectionStart(), getSelectionEnd(), setSelectionStart(int), setSelectionEnd(int)

Estado y propiedades

POO - EPS - UAM

169

java.awt.TextField
Descripcin

Texto editable de una sola lnea

TextField(), TextField(String), TextField(String,int) getColumns(), setColumns(int) getEchoChar(), setEchoChar(char), echoCharIsSet()

Estado y propiedades (adems de las de TextComponent)

Operacin

Emite un TextEvent cuando se cambia un carcter del texto

Puede interesar procesar KeyEvent's si interesa obtener el carcter

Cuando se pulsa 'Enter' emite un ActionEvent con el texto del widget como action command string
POO - EPS - UAM 170

85

java.awt.TextArea
Descripcin

Texto editable multilnea con scrolling TextArea(), TextArea(String), TextArea(String,int,int)

Estado y propiedades (adems de las de TextComponent)

Scrollbars: TextArea(String,int,int,int),
TextArea.SCROLLBARS_NONE, SCROLLBARS_VERTICAL_ONLY... getColumns(), setColumns(int), getRows(), setRows(int) append(String), insert(String,int), replaceRange(String,int,int)

Operacin

Emite un TextEvent cuando se cambia un carcter del texto No emite ActionEvent's

POO - EPS - UAM 171

class TextDemo extends Frame implements ActionListener { TextField textField; TextArea textArea; TextDemo () { setLayout (new FlowLayout ()); textField = new TextField (20); textArea = new TextArea (5, 20); textArea.setEditable (false); add (textField); add (textArea); textField.addActionListener (this); } public void actionPerformed (ActionEvent evt) { String text = textField.getText (); textArea.append (text + "\n"); textField.selectAll (); }
POO - EPS - UAM 172

86

POO - EPS - UAM

173

java.awt.Dialog
Descripcin

Depende de otra ventana:

Se destruye cuando se destruye la ventana principal Desaparece cuando se minimiza la ventana principal

Estado y propiedades

Dialog (Frame [,String] [,boolean]) Modal / no modal: isModal(), setModal(boolean) isResizeable(), setResizeable(boolean) de Window FileDialog extends Dialog

getDirectory(), setDirectory(String) getFile(), setFile(String)

POO - EPS - UAM 174

87

class DialogWindow extends Frame implements ActionListener { private SimpleDialog dialog; private TextArea textArea; public DialogWindow () { textArea = new TextArea (5, 40); textArea.setEditable (false); add ("Center", textArea); Button button = new Button ("Click to bring up dialog"); button.addActionListener (this); Panel panel = new Panel (); panel.add (button); add ("South", panel);

} public void actionPerformed (ActionEvent event) { if (dialog == null) dialog = new SimpleDialog (this, "A Simple Dialog"); dialog.setVisible (true); } public void addLine (String text) { textArea.append(text + "\n"); }
POO - EPS - UAM 175

class SimpleDialog extends Dialog implements ActionListener { TextField field; DialogWindow parent; Button setButton; SimpleDialog (Frame w, String title) { super (w, title, false); parent = (DialogWindow) w; Panel p1 = new Panel (); p1.setLayout (new GridLayout (2, 1)); Label label = new Label ("Enter text here:"); p1.add (label); field = new TextField (40); field.addActionListener (this); p1.add (field); add ("Center", p1); ...

POO - EPS - UAM

176

88

... Panel p2 = new Panel(); p2.setLayout (new FlowLayout (FlowLayout.RIGHT)); Button b = new Button ("Cancel"); b.addActionListener (this); setButton = new Button ("Set"); setButton.addActionListener (this); p2.add (b); p2.add (setButton); add ("South", p2); pack (); } public void actionPerformed (ActionEvent event) { Object source = event.getSource(); if ((source == setButton) || (source == field)) parent.addLine (field.getText()); field.selectAll (); setVisible (false); } }
POO - EPS - UAM 177

java.awt.Dialog

POO - EPS - UAM

178

89

Widgets personalizados
class Boton extends Canvas implements MouseListener { private boolean selected = false; protected String label; public Boton (String str) { label = str; addMouseListener (this); new Mover (this); } public void paint (Graphics g) { Dimension dim = getSize (); FontMetrics metrics = g.getFontMetrics (); g.drawRect (0, 0, dim.width-1, dim.height-1); g.drawString (label, (dim.width - metrics.stringWidth (label)) / 2, (dim.height - metrics.getHeight ()) / 2 + metrics.getMaxAscent ()); } ... POO - EPS - UAM 179

Definir aspecto visual

Mtodos para negociar tamao con layout managers

... public Dimension getPreferredSize () { FontMetrics metrics = getGraphics () .getFontMetrics (); return new Dimension (metrics.stringWidth (label) + 20, metrics.getHeight () + 10); } public Dimension getMinimumSize () { Dimension dim = getPreferredSize (); return new Dimension (dim.width / 2, dim.height / 2); } public Dimension getMaximumSize () { Dimension dim = getPreferredSize (); return new Dimension (dim.width * 2, dim.height * 2); } ...
POO - EPS - UAM 180

90

... public void mouseClicked (MouseEvent e) { selected = !selected; if (selected) { setBackground (Color.black); setForeground (Color.white); } else { setBackground (Color.white); setForeground (Color.black); } } public public public public ... void void void void mousePressed (MouseEvent e) {} mouseReleased (MouseEvent e) {} mouseEntered (MouseEvent e) {} mouseExited (MouseEvent e) {}

Respuesta visual (feedback) a accin del usuario

POO - EPS - UAM

181

... public String getLabel () { return label; } public void setLabel (String str) { label = str; repaint (); } public boolean getState () { return selected; } public void setState (boolean state) { selected = state; if (selected) { setBackground (Color.black); setForeground (Color.white); } else { setBackground (Color.white); setForeground (Color.black); } } // public void mouseClicked (MouseEvent e) { // setState (!selected); // }
POO - EPS - UAM 182

Interfaz para controlar el estado del widget }

91

class Boton2 extends Boton { boolean pointedAt = false; public Boton2 (String str) { super (str); } public void paint (Graphics g) { super.paint (g); Dimension dim = getSize (); if (pointedAt) g.drawRect (4, 4, dim.width-9, dim.height-9); }

Ms feedback a acciones del usuario

public void mouseEntered (MouseEvent e) { pointedAt = true; repaint (); } public void mouseExited (MouseEvent e) { pointedAt = false; repaint (); }

}
POO - EPS - UAM 183

1. Inicio

4. Exit

2. Enter

5. Enter

3. Click

6. Drag

POO - EPS - UAM

184

92

class BotonAccion extends Boton { private ActionListener multicaster = null; public BotonAccion (String str) { super (str); } public void mouseClicked (MouseEvent e) { super.mouseClicked (e); Generacin de eventos en processEvent ( respuesta a la interaccin new ActionEvent ( this, ActionEvent.ACTION_PERFORMED, label)); } public void addActionListener (ActionListener listener) { multicaster = AWTEventMulticaster.add (multicaster, listener); } public void processEvent (AWTEvent e) { if (e.getID () == ActionEvent.ACTION_PERFORMED && multicaster != null) multicaster.actionPerformed ((ActionEvent) e); super.processEvent (e); }
POO - EPS - UAM 185

93