Tema 5: Aspectos gráficos en Programación Orientada...

1

{ MARCOS LOPEZ SANZ }{ MARCOS LOPEZ SANZ } Kybele, 2007 ©

Tema 5: Aspectos gráficos enProgramación Orientada a Objetos

Programación Orientada a ObjetosMarcos López Sanz

Máster en Informática Gráfica, Juegos y Realidad Virtual

Kybele, 2007 ©{ MARCOS LOPEZ SANZ }{ MARCOS LOPEZ SANZ }

Índice

� Introducción

� Aspectos gráficos� Interfaz de usuario

• Aplicaciones con interfaz gráfico de usuario (GUI)– AWT: desde las versiones 1.0 y 1.1

– Swing: desde la versión 1.2

• Aplicaciones Web � Applets

• Aplicaciones Mixtas

� Visualización de gráficos

• Tratamiento de imágenes escalares

• Tratamiento de información vectorial– Fuentes

– Documentos � PostScript

– Programación

» Gráficos estáticos: clases Graphics, Color, etc.

» Animaciones: clase Timer. Fractales

2


Introducción

� Herramientas para el desarrollo de interfaces� Sistemas de ventanas (dónde): MsWindows, XWindows, MAC/OS, etc.

• Sistemas operativos con interfaz gráfica

• Librerías de acceso a las capacidades gráficas del SSOO

• Bajo nivel, dificultad de utilización

� Librerías de objetos (cómo): AWT/Swing en Java, MS AFX/MFC en C++, Borland OWL en C++, etc.

• Librerías completas específicas para lenguajes OO

• Asociadas habitualmente a un entornos para construcción gráfica de interfaces

� Constructores gráficos (con qué) de interfaces:

• Programación visual: Visual Basic, Lenguajes .Net (VB y C#)

• Facilidad de uso


Introducción

� Las interfaces y la programación OO� Def.: Interfaz: elemento o conjunto de elementos a través del cual el usuario

interactúa con una aplicación

� Capacidades del usuario:

• Ver objetos en la pantalla

• Manipularlos, modificarlos, etc…

� Capacidades de los objetos visuales:

• Tienen un comportamiento propio

• Cada uno puede responder de una forma diferente a la interacción del usuario

• Programación basada en eventos:– Modo de operación no estrictamente secuencial � mayor grado de libertad del

usuario

– El programa se subdivide en subprogramas asociados a los componentes gráficos o ventanas

– Los componentes “esperan” las acciones del usuario

– Las acciones del usuario generan eventos que son atendidos en forma de cola

3


Introducción

� Interfaces orientadas a objetos� Interfaces gráficas con objetos:

• Estado = variables de la clase

– Propiedades visuales: color, tamaño, posición

– Valores visualizados = tipos de las variables

• Visualización en la pantalla

– Representación del objeto gráfico en la pantalla

– método paint() (generalmente)

– La apariencia se controla a través del estado

• Comportamiento: respuesta a eventos

– Resultado: cambio en la apariencia, en el estado o producción de nuevos eventos

– Ejecución de métodos (acciones) en función de solicitudes de notificaciones

– Control de la emisión de eventos


Interfaz de usuario

� Aplicaciones de interfaz vs. aplicaciones de consola

� Características genéricas (compartidas con las aplicaciones de consola)

• Su ejecución no depende de otras aplicaciones o sistemas auxiliares. En ocasiones, sólo un entorno o máquina virtual que sirva de soporte.

• Su ejecución se inicia a partir de un método específico de una clase determinada (por ejemplo: main en Java)

• Normalmente no suele tener restricciones de acceso a elementos del disco duro sobre el que se ejecuta

� Características específicas (diferencias con las aplicaciones de consola)

• La interfaz gráfica está formada por una o más ventanas en la que se muestran los elementos de interacción con el usuario y, generalmente, los resultados de la ejecución del programa

• Todos los elementos visualizados son instancias de una determinada clase que ofrece una capacidad de visualización específica

4


Interfaz de usuario

� Interfaz de usuario en Java

� Paquetes:

• AWT: Abstract Window toolkit

• Swing: resultado de la unión de IFC (Netscape) y JFC (Sun) en 1997 (java 1.2)

� Objetos gráficos:

• Componentes: cajas, checkbox, radio …

• Contenedores: frames, ventanas, container …

• Menús predefinidos: colores, ficheros, imágenes …

Sistema de

Ventanas

Sistema

AWT

Componentes

AWT

Eventos del

ratón/teclado


Construcción de la interfaz de usuario

� Elementos:

� Tipos

• Básicos: componentes predefinidos

• Agregación de componentes: contenedores

• Funciones de dibujado de componentes � librerías gráficas

� Interacción con el usuario: gestión de eventos

• Emisión de eventos

• Recepción y procesamiento de eventos

� Posicionamiento y refinamiento de los componentes gráficos

• ‘Layout’

5


Elementos de la programación de interfaces

� Componentes:� En AWT todos los elementos de la interfaz gráfica son instancias (heredan) de la clase

Component (o de una de sus subclases)

� Permiten interactuar al usuario con la aplicación

� Contenedores� Contienen, agrupan y organizan la situación de los componentes

� Son a su vez un tipo de componente por lo que pueden anidarse

� Tienen implementaciones para el control de eventos, modificar el cursor, el icono de la aplicación, etc.

� Todos los contenedores son instancias de la clase Container

� Eventos� Conjunto de clases que se corresponden con cada uno de los sucesos que pueden asociarse

con los componentes gráficos

� Listeners� Conjunto de clases que se utilizan para “capturar” los eventos que suceden en la interacción

entre el usuario y el interfaz gráfico


Contenedores

� Las interfaces se construyen por composición de componentes

� El componente raíz será una ventana (Frame o derivados) o un Applet

� Forma de agregar componentes a contenedores:

� Añadir: contenedor.add(Component)

� Eliminar: contenedor.remove(Component)

� Los contenedores no pueden añadirse a componentes predefinidos

básicos, sólo a otros contenedores

� Posicionamiento de componentes dentro de un contenedor

� Mediante posiciones predefinidas: layout

� Mediante posiciones absolutas

6


Componentes predefinidas

� Proporcionan� Un aspecto visual basado en la implementación del método paint() (de la

clase Graphics)

� Una implementación por defecto como respuesta a los eventos del usuario

� Un conjunto de métodos para controlar el estado (atributos) concretos de cada componente

� Opciones del programador� Crear instancias de clases predefinidas

� Modificar su apariencia a través de los atributos del componente

� Normalmente, no se redefine el método paint() (apariencia por defecto)

� Puede crear componentes nuevos dibujándolos dentro de un lienzo (“canvas”)


Jerarquía de componentes en AWT

• TextField

• Cursor

• Dimension

• Event

• FlowLayout

• Font

• FontMetrics

• Graphics

• GridLayout

• GridBagConstraints

• GridBagLayout

• Image

• Insets

• MediaTracker

• MenuComponent– MenuBar

– MenuItem

– CheckboxMenuItem

– Menu

» PopMenu

• MenuShorcut

• Point

• Polygon

• PrintJob

• Rectangle

• Toolkit

� Clases:� Adjustable

� BorderLayout

� CardLayout

� CheckboxGroup

� Color

� Component

• Button

• Canvas

• Checkbox

• Choice

• Container

• Panel – Applet

• ScrollPane

• Window– Dialog

– FileDialog

– Frame

• Label

• List

• Scrollbar

• TextComponent

• TextArea

� Interfaces:�

LayoutManager

� LayoutManager2

� MenuContainer

� Shape

7


Jerarquía de componentes en AWT


Java.awt.Component

� Dibujo en pantalla (heredado de Graphics): � paint(), update(), repaint()

� Control de la apariencia visual:� Color: setForeground(Color), getForeground(),

setBackground(Color), getBackground()

� Font: setFont(Font), getFont()

� Cursor: getCursor(), setCursor(Cursor)

� Tamaño y posición:� setSize(int,int), getSize()� Dimension

� getLocation()/getLocationOnScreen()� Point

� setBounds (int, int, int, int), getBounds()� Rectangle

• Los gestores de Layout pueden modificar estos valores

8


Layout

� Def.: Posicionamiento de un conjunto de componentes con respecto a su contenedor

� Gestor de layout:� Instancia de una clase que implementa el interface LayoutManager

� Controla la disposición de los componentes en un contenedor

� Establecimiento del layout de un contenedor

• setLayoutManager(LayoutManager)

� Cada clase tiene un layout por defecto

• Panel: FlowLayout

• Window: BorderLayout

� Tipos:

• Básicos: – BorderLayout: regiones predefinidas (Norte, Sur, Este, Oeste y Centro)

– FlowLayout: secuencia autoordenable

– GridLayout: tablas de componentes

• Avanzados:– CardLayout: superposición de componentes

– GridBagLayout: tablas de componentes extendidas (un componente que ocupa varias celdas)


Modelos de eventos

� Def.: Evento (gráfico): suceso que ocurre como consecuencia de una acción del usuario sobre los componentes gráficos

� Se generan eventos cuando:

� Se produce una acción del usuario (input): MouseEvent, KeyEvent

� Se acciona un componente: ActionEvent, TextEvent, etc.

� Se modifica una ventana: WindowEvent

� Otros sucesos: FocusEvent, ComponentEvent…

� Elementos que intervienen en el procesamiento de eventos

� Clase del evento que se lanza: ___Event

� “Escuchador” del evento (Receptor): ___Listener

� Una relación entre los eventos que puede lanzar cada componente

� Un registro, en la clase propia que extiende la del componente, de los eventos a los que va a atender:

• objetoQueTrataElEvento.addListener(instanciaQueProduceElEvento)

9


Componentes y eventos de AWT


Eventos generados por los componentes de AWT

10


Métodos de cada Listener


Jerarquía de Eventos de AWT

� Jerarquía de eventos de AWT:

11


Clases Adapter

� Def.: Clases que implementan todos los métodos de los interfaces Listener

� Se utilizan cuando no se quiere responder a todos los eventos que produce un componente (o implementarlos)

� Contienen definiciones vacías para todos los métodos del interfaz Listenercorrespondiente

� Hay 7 clases adaptadores:

� ComponentAdapter

� ContainerAdapter

� FocusAdapter

� KeyAdapter

� MouseAdapter

� MouseMotionAdapter

� WindowAdapter

� Para crear un objeto que responda a un evento determinado basta con crear una clase que herede de un adaptador en vez de implementar un interfaz, y redefina los métodos que le interese


Aplicación interactiva en Java

� Pasos a seguir para crear una aplicación interactiva en Java

1. Determinar qué componentes formarán parte del interfaz de usuario

2. Crear una clase que contenga la función main()

3. Crear una clase Ventana, que herede de Frame, y que responda (por lo menos) al

método WindowClosing()

1. Crear una clase que extienda el adaptador WindowAdapter e implemente el

método WindowClosing()

2. Añadir un WindowListener a la clase Ventana y que indique que el objeto

que genera el evento es de la clase anterior

4. Hacer que el método main cree el objeto Ventana con el tamaño necesario

5. Añadir los componentes y contenedores necesarios al objeto ventana

6. Definir los Listener necesarios para tratar los eventos que producen los

componentes de la Ventana

7. Implementar los métodos de los interfaces Listener

12


Modelo de eventos

� Ejemploimport java.awt.*;

import java.awt.event.*;

public class Ejemplo1 extends Frame implements MouseListener

{

public Ejemplo1 ()

{

setLayout (new FlowLayout());

Menu m = new Menu("Archivo");

MenuBar mb = new MenuBar();

mb.add(m);

setMenuBar(mb);

addMouseListener(this);

}

public void mouseClicked (MouseEvent e) {

System.out.println("clic");

}

public void mouseEntered (MouseEvent e) {}

public void mouseExited (MouseEvent e) {}

public void mousePressed (MouseEvent e) {}

public void mouseReleased (MouseEvent e) {}


Modelo de eventos

� Ejemplopublic static void main(){

Ventana v = new Ventana();

v.setTitle("ejemplo");

v.pack();

v.setVisible(true);

v.addWindowListener(new WindowAdapter() {

public void windowClosing(WindowEvent evt) {

System.exit(0);

}

}

);

}

13


Jerarquía de Swing


Applets

� Definiciones:�� AppletApplet: una pequeña aplicación accesible en un servidor Internet, que se

transporta por la red, se instala automáticamente y se ejecuta in situ como parte de un documento web

�� AppletApplet: aplicación Java que se ejecuta en la JVM instalada en el usuario

� Características� La clase principal del applet extiende java.applet.Applet o

javax.swing.JApplet

� Debe reescribir los métodos de la clase Applet

� Ejecución:• Embebidos en una página Web � Ejecutados por el navegador

– <APPLET CODE=“subclaseApplet.class" WIDTH=400 HEIGHT=250> </APPLET>

• Aislados y ejecutados por un AppletViewer

� Se trata de un componente gráfico sobre el que se puede dibujar directamente (como si fuera un componente de tipo Canvas)

14


Applets

� Métodos principales:

�� initinit():():

• Se ejecuta cada vez que el AppletViewer (o el navegador) carga la clase

• Se suele utilizar para inicializar el contenido del interfaz (gráficos) y su tamaño

• Sólo se ejecuta una vez

�� startstart():():

• Se ejecuta cada vez que el componente Applet se carga a la vista del usuario

�� stop():stop():

• Sirve para parar la ejecución del applet (del thread que visualiza el contenido del applet)

�� paintpaint ((graphicsgraphics g), g), update(graphicsupdate(graphics g) y g) y repaintrepaint():():

• Métodos de pintado y configuración del interfaz y de los componentes gráficos contenidos en el Applet


Representación de gráficos

� Tipos de gráficos:

� Gráficos orientados a objetos � vectoriales

� Gráficos de mapas de bits � escalares (raster graphics)

� Imagen: información gráfica almacenada en un ordenador

� Romper la información para su representación como números: Píoxels

� Almacenar el color asociado a cada píxel

� PIXEL

� VOXEL

� Representación en una pantalla:

� Sistema de coordenadas

• Tradicional: cartesiano

• Java: todas las coordenadas son positivas

� Representación del color

� Formatos: RGB, CMYK, YIQ, HSV, HSL, etc.

15



� Representación de objetos gráficos

� Elementos representados: arcos, líneas, polígonos, etc.

� Mediante fórmulas matemáticas

� El sistema puede manipular los objetos independientemente de su

posición o solapado

� PostScript: Formato de representación de objetos gráficos

� Tipo de PDL (lenguaje de descripción de páginas)

� Fuentes orientadas a objetos:

� Outline Fonts

� Scalable Fonts

� Vector Fonts



� Gráficos en Java:

� Clases gráficas:

• Clases Graphic/graphic2D

• Clases Color, Image, Polygon, etc.

� Técnicas

• Líneas y polígonos

• Herencia de gráficos

� Eventos y animaciones

• Clase Timer

� Recursividad de gráficos

• Alineación

• Fractales

16


Clases gráficas en Java

� Clase Graphics (y Graphics2D)

� Es una clase abstracta que proporciona el entorno de trabajo para cualquier

operación gráfica que se realice dentro del AWT

� Funcionalidades:

• Contiene la información que va a afectar a todas las operaciones gráficas:

– Colores de fondo y texto

– Fuente de caracteres

– Localización y dimensiones del rectángulo en que se va a pintar

– Destino de las operaciones gráficas (pantalla o imagen)

• Proporciona métodos que permiten:

– Dibujo de primitivas, figuras

– Manipulación de fuentes de caracteres y colores.

– También hay clases para la manipulación de imágenes, doble-buffering, etc.

� Graphics es una clase abstracta


Dibujar en Java

� Funcionamiento:� Se utilizan los métodos paint(), repaint() y update() de la clase Grapchics

� Lo que hay que hacer es redefinir los métodos de pintado asociados a un componente gráfico (AWT o Swing)

• public void paint(Graphics g)

• public void update(Graphics g)

• public void repaint()

� Los parámetros de pintado son establecidos por defecto por el componentegráfico

� Reglas de pintado y repintado (cuando sucede un evento):

• AWT sólo pinta aquellos componentes que deben ser repintados

• Si un componente se “destapa” se repinta sólo la parte que estuviera cubierta y queda al descubierto

� Las coordenadas se inician en la esquina superior izquierda

• Son siempre positivas

• Anchura máxima: 0 a tamaño-de-la-pantalla -1

17


Ejemplo

import java.awt.*;

import java.applet.Applet;

// Esta clase selecciona un color de un array predefinido

class SeleccionColor {

private int i=0;

// Array con los colores para poder manipular la zona que se repintara

private Color rgc[] = {

Color.yellow,

Color.red,

Color.pink,

Color.orange,

Color.magenta,

Color.green,Color.cyan,

Color.blue

};

public Color generaColor() {

i = i < rgc.length ? i : 0;

return( rgc[i++] );

}

}


Ejemplo

class TutPanel extends Panel {private String str;private TextArea ta;private SeleccionColor sc;

// Constructor de nuestro Panelpublic TutPanel( String str,TextArea ta ) {

super();this.str = str;this.ta = ta;sc = new SeleccionColor();}

public Insets insets() {return( new Insets( 5,5,5,5 ) );}

public void paint( Graphics g ) {// Indica el panel sobre el que se está repintandota.appendText( "Panel \""+str+"\" pintando...\n" );

// Repinta el rectángulo con el color que le corresponda// del array para la visualización y después pinta el// borde del rectángulo en negro para que se vean los// límitesg.setColor( sc.generaColor() );g.fillRect( 0,0,size().width-1,size().height-1 );g.setColor( Color.black );g.drawRect( 0,0,size().width-1,size().height-1 );}

}

18


Ejemplo

public class EjemploGraf extends Applet {

private TextArea ta;

private SeleccionColor sc;

// Creamos todos los Componentes que forman la ventana, incorporando los Paneles y botones

public void init() {ta = new TextArea();

sc = new SeleccionColor();

// Fijamos el layout que vamos a utilizar para posicionar los componentes sobre el

setLayout( new BorderLayout() );

add( "North",new Button( "Repintar Solamente el Panel" ) );

add( "Center",ta );

TutPanel p1 = new TutPanel( "1",ta );TutPanel p2 = new TutPanel( "2",ta );

p2.add( new TutPanel( "2A",ta ) );

p2.add( new TutPanel( "2B",ta ) );

p1.add( p2 );

add( "South",p1 );

}

public Dimension preferredSize() {

return( new Dimension( 400,230 ) );

}

public Insets insets() {

return( new Insets( 5,5,5,5 ) );

}


Ejemplo

// Llegue el evento que llegue, hacemos un repintado del applet

public boolean action( Event evt,Object obj) {

repaint();

return( true );

}

// Metodo correspondiente al applet en si mismo

public void paint( Graphics g ) {

ta.appendText( "Applet pintando...\n" );

// Repinta el rectángulo con el color que le corresponda del array para la visualización y después pinta el borde del rectángulo en negro para que se vean los límites

g.setColor( sc.generaColor() );

g.fillRect( 0,0,size().width-1,size().height-1 );

g.setColor( Color.black );g.drawRect( 0,0,size().width-1,size().height-1 );

}

// Metodo main() para cuando ejecutamos este código como aplicación independiente

public static void main( String args[] ) {

Frame f = new Frame( "Ejemplo de Paint" );

EjemploGraf ej = new EjemploGraf();

ej.init();

f.add( "Center",ej );f.pack();

f.show();

}

}

Ejemplo extraído del tutorial de java de Agustín Froufe

19


Primitivas de dibujo

� Cambiar el color de lo que se va a pintar a continuación:� g.setColor( Color c );

� Formas geométricas:� Líneas:

• g.drawLine( x1,y1,ancho,alto );

� Rectángulos:

• g.drawRect( 0,0,ancho-1,alto-1 ); // ocupa todo el componente, lo dibuja vacío

• g.fillRect(x,y,ancho-1,alto-1 ); //dibuja un rectángulo con relleno

� Círculos y óvalos:

• g.drawOval( xCentro,yCentro,Ancho ,Alto);

• g.fillOval( xCentro,yCentro,Ancho ,Alto);

• g.drawArc( x,y,ancho,alto,anguloInicio,anguloApertura );

� Polígonos:

• g.drawPolygon( pg );

• g.fillPolygon( pg );

• Polygon: clase que permite ir añadiendo puntos (vértices del polígono) � addPoint()

� Cadenas de caracteres� drawString(cadena,x,y )

� Imágenes:� g.drawImage( Image img,int x,int y, ImageObserver observador );

� Clase Image: Image img = getImage( getDocumentBase(),“URL” );


Ejemplo

public class Rectangulo extends Applet {

int apAncho;

int apAlto;

int x,y,ancho,alto;

public void init() {

Dimension d = size();

apAncho = d.width;

apAlto = d.height;

ancho = apAncho/3;

alto = apAlto/3;

x = (apAncho - ancho)/2;

y = (apAlto - alto)/2;

repaint();

}

public void paint( Graphics g ) {

g.drawRect( 0,0,apAncho-1,apAlto-1 );

g.fillRect( x,y,ancho-1,alto-1 ); }

}

20


Bibliografía

� Java software solutions, foundations of program design (3rd edition). J. Lewis & W. Loftus. Ed. Addison-Wesley, 2004. Cap. 8 (pp. 448-460)

� Java and Object Orientation: an introduction. J. Hunt. Ed. Springer-Verlag, 1998. Cap. 25 (pp. 319-317)

� Java threads (2nd edition). S. Oaks & H. Wong. Ed. O’Reilly, 1999.

� Big Java: programming and practice. C. Horstmann. Ed. John Wiley & Sons, 2002. Cap. 14 y 21.

� http://java.sun.com/j2se/1.4.2/docs/api/java/lang/� Throwable.html

� Exception.html

� Error.html

� Thread.html

� Tutorial de Java: http://www.cica.es/formacion/JavaTut/Intro/tabla.html

Tema 5: Aspectos gráficos en Programación Orientada...

Documents

Transcript of Tema 5: Aspectos gráficos en Programación Orientada...