Programación Orientada a Objetos Facultad de Informática

Transcripción

1 Tipos de programas en Java Interfaces gráficas de usuario (1): Abstract Windowing Toolkit (AWT) Programación Orientada a Objetos Facultad de Informática Dep. Sistemas Informáticos y Programación Universidad Complutense Madrid! Aplicaciones! Se pueden ejecutar directamente en un entorno Java! Tipos Modo de consola Interacción mediante teclado Interfaz basado en texto Aplicaciones con interfaz gráfica (GUI) Ventanas graficas para entrada y salida de datos Iconos Dispositivos de entrada (e.g. ratón, teclado) Interacción directa! Applets! Pequeñas aplicaciones que se ejecutan dentro de un navegador (o en el visualizador de applets - Appletviewer) Interfaz gráfica Limitaciones por motivos de seguridad Facultad de Informática UCM, 2004 Java AWT 2 Bibliotecas de componentes para GUI Elementos básicos del AWT! Abstract Windowing Toolkit (AWT)! Look & Feel dependiente de la plataforma La apariencia de ventanas, menúes, etc. es distinta en Windows, Mac, Motif, y otros sistemas! Funcionalidad independiente de la plataforma! Básico y experimental! Estándar hasta la versión JDK 1.1.5! Swing / Java Foundation Classes ( desde JDK 1.1.5)! Look & Feel y funcionalidad independiente de la plataforma! Desarrollado 100% en Java! Portable: si se elige un look&feel soportado por Swing (o se programa uno) puede asegurarse que la GUI se verá igual en cualquier plataforma! Mucho más completo que AWT (pero también mas complejo de usar: aprender bien Swing es mucho más difícil que aprender el lenguaje Java en sí) Facultad de Informática UCM, 2004 Java AWT 3! Componentes GUI (widgets)! Objetos visuales del interfaz! Un programa gráfico es un conjunto de componentes anidados ventanas, contenedores, menús, barras, botones, campos de texto, etc.! Administradores de diseño o disposición (layout managers)! Gestionan la organización de los componentes gráficos de la interfaz! Creación de gráficos y texto - Clase Graphics Define fuentes, pinta textos, Para dibujo de líneas, figuras, coloreado,...! Interactividad: manejo de eventos Ratón Teclado Facultad de Informática UCM, 2004 Java AWT 4

2 Componentes del AWT Jerarquía de componentes del AWT! Contenedores! Contienen otros componentes (u otros contenedores) Estos componentes se tienen que añadir al contenedor y para ciertas operaciones se pueden tratar como un todo Mediante un gestor de diseño controlan la disposición (layout) de estos componentes en la pantalla Ejemplo: Panel, Frame, Applet! Lienzo (clase Canvas)! Superficie simple de dibujo! Componentes de interfaz de usuario! botones, listas, menús, casillas de verificación, campos de texto, etc.! Componentes de construcción de ventanas! ventanas, marcos, barras de menús, cuadros de diálogo Graphics TextComponent TextField TextArea ScrollPane Object Component Container Window Frame Dialog FileDialog Panel java.applet. Applet Button Canvas Checkbox Choice Label List Scrollbar Facultad de Informática UCM, 2004 Java AWT 5 Facultad de Informática UCM, 2004 Java AWT 6 Contenedores! Panel! Sirve para colocar botones, etiquetas, etc.! No existe sin una ventana que lo albergue! Un applet es un panel! Window! Sirve para crear nuevas ventanas independientes! Ventanas gestionadas por el administrador de ventanas de la plataforma (Windows, Motif, Mac, etc.)! Normalmente se usan dos tipos de ventanas: Frame: ventana donde se pueden colocar menús Dialog: ventana para comunicarse con el usuario Se usan para colocar botones, etiquetas, etc. Cumple la misma función que un panel, pero en una ventana independiente Ejemplo - GUI simple con un frame import java.awt.*; public class GUISimple extends Frame { public GUISimple (){ setsize(200, 100); public static void main(string args[]) { GUISimple ventana = new GUISimple(); ventana.settitle("ventana tipo frame"); Facultad de Informática UCM, 2004 Java AWT 7 Facultad de Informática UCM, 2004 Java AWT 8

3 Componentes: Etiquetas, Botones, Campos! Botón - Clase Button! Botón de interacción que puede tener una etiqueta! Etiqueta - Clase Label! Muestra una cadena de sólo lectura Normalmente para asociar el texto con otro componente! Campo de texto - Clase TextField! Campo de una línea que permite introducir y editar texto! Area de texto - Clase TextArea! Campo de texto de varias líneas! Mayor funcionalidad Añadir, reemplazar e insertar texto Barras de desplazamiento Uso de componentes! 1) Crear el componente! usando new: Button b = new Button( Correcto );! 2) Añadirlo al contenedor! usando add: add(b); // añadir en el contenedor actual // crear y añadir el componente en una sóla operación add(new Label( Etiqueta 1 )); add(new Label( Etiqueta 2 ));! Si luego se quiere quitar, usar remove(componente)! 3) Invocar métodos sobre el componente y manejar eventos System.out.println(b.getLabel()); b.setlabel( etiqueta modificada ); Facultad de Informática UCM, 2004 Java AWT 9 Facultad de Informática UCM, 2004 Java AWT 10 Ejemplo - Paneles, etiquetas y botones import importjava.awt.*; public publicclass classguisimple GUISimpleextends extendsframe {{ public publicguisimple (){ (){ setsize(200, setsize(200, 100); 100); Panel Panel panel; panel; // // contenedor contenedor que que no no crea crea una una ventana ventana separada separada panel panel = new newpanel(); Label Labeletiqueta etiqueta = new newlabel("etiqueta 1"); 1"); panel.add(etiqueta); panel.add(etiqueta); Button Buttonboton= new newbutton( Correcto"); panel.add(boton); panel.add(boton); panel.add(new panel.add(newlabel( Etiqueta 2 )); 2 )); add(panel); add(panel); // // añade añade el el panel panel al al frame frame public publicstatic staticvoid voidmain(string main(stringargs[]) args[]) {{ GUISimple GUISimpleventana = new newguisimple(); ventana.settitle("ventana tipo tipo frame"); frame"); Ejemplo - Campos y áreas de texto import importjava.awt.*; public publicclass classguisimple GUISimpleextends extendsframe {{ public publicguisimple (){ (){ setsize(350, setsize(350, 200); 200); Panel Panel panel panel = new newpanel(); panel.add(new panel.add(newlabel("campo Texto: Texto: ")); ")); TextField TextFieldcampo = new newtextfield("texto inicial", inicial", 25); 25); panel.add(campo); panel.add(campo); panel.add(new panel.add(newlabel("area Label("AreaTexto: ")); ")); TextArea TextAreaarea area = new newtextarea("area TextArea("areaeditable", editable", 4, 4, 20); 20); panel.add(area); panel.add(area); add(panel); add(panel); // // añade añade el el panel panel al al frame frame public publicstatic staticvoid voidmain(string main(stringargs[]) args[]) {{ GUISimple GUISimpleventana = new newguisimple(); ventana.settitle("ventana tipo tipo frame"); frame"); Facultad de Informática UCM, 2004 Java AWT 11 Facultad de Informática UCM, 2004 Java AWT 12

4 Cuadros de comprobación y botones radio! Cuadro de comprobación - Clase Checkbox! Casilla que permite realizar una elección simple (si-no) Incluye una etiqueta y una pequeña casilla a marcar Tiene un campo booleano estado (true - marcado)! Botones de radio - Clase CheckboxGroup! Proporciona una elección única y excluyente entre un grupo de cuadros de comprobación! Agrupa a un conjunto de cuadros de comprobación Cambia su aspecto y comportamiento Ejemplo - Cuadro de comprobación y radio import importjava.awt.*; public publicclass classguisimple2 GUISimple2extends extendsframe {{ public publicguisimple2 (){ (){ setsize(200, setsize(200, 100); 100); Panel Panel panel panel = new newpanel(); panel.add(new panel.add(newcheckbox ("Seleccionar")); ("Seleccionar")); CheckboxGroup CheckboxGroupradio radio = new newcheckboxgroup(); Checkbox CheckboxbotonR1 botonr1 = new newcheckbox("uno", radio, radio, false); false); Checkbox CheckboxbotonR2 botonr2 = new newcheckbox("dos", radio, radio, true); true); Checkbox CheckboxbotonR3 botonr3 = new newcheckbox("tres", radio, radio, false); false); panel.add(botonr1); panel.add(botonr1); panel.add(botonr2); panel.add(botonr2); panel.add(botonr3); panel.add(botonr3); add(panel);// add(panel);// añade añade el el panel panel al al frame frame // // Facultad de Informática UCM, 2004 Java AWT 13 Cuadro de comprobación marcado Botón de radio seleccionado Facultad de Informática UCM, 2004 Java AWT 14 Listas y alternativas! Alternativas o listas desplegables - Clase Choice! Permite seleccionar sólo un elemento de la lista desplegable! La etiqueta muestra la selección actual! Listas de elección - Clase List! Ocupa un número fijo de líneas! Permite la selección de una o múltiples opciones Ejemplo - listas y alternativas public publicclass classguisimple2 GUISimple2extends extendsframe {{ public publicguisimple2 (){ (){ setsize(200, setsize(200, 100); 100); Panel Panel panel= panel= new newpanel(); panel.add(new panel.add(newlabel("lista de de alternativas: alternativas: ")); ")); Choice Choicealternativa= new newchoice();;// crea crea una una lista lista de de alternativas alternativas alternativa.additem("blanco"); alternativa.additem("rojo"); alternativa.additem("amarillo"); panel.add(alternativa); panel.add(alternativa); panel.add(new panel.add(newlabel("lista de de seleccion seleccionmultiple: ")); ")); List Listlista = new newlist(4, true); true); lista.add lista.add ("White"); ("White"); lista.add("red"); lista.add("red"); lista.add("yellow"); lista.add("yellow"); panel.add(lista); panel.add(lista); add(panel); add(panel); // // Facultad de Informática UCM, 2004 Java AWT 15 Facultad de Informática UCM, 2004 Java AWT 16

5 Ventanas y menús Ejemplos - Dialog y Menu! Cuadro de diálogo - Clase Dialog Produce una nueva ventana que normalmente se utiliza para obtener entradas del usuario Si es modal bloquea el resto de ventanas (para exigir una respuesta) No pueden existir de forma independiente sino asociadas a un frame! Ventana de selección de fichero - Clase FileDialog Ventana desde la cual el usuario puede seleccionar un fichero Hay dos opciones: abrir y guardar el fichero! Barra de menú - Clase MenuBar Encapsula el concepto de barra de menú asociada a un frame! Componente desplegable del menú - Clase Menu Componente desplegable de una barra de menú! Elemento de un menú - Clase MenuItem Cada uno de los elementos de un componente desplegable de menú Otros elementos: Submenús, Separadores y Elementos marcables Facultad de Informática UCM, 2004 Java AWT 17 Barra de menú (Asociada al frame) Ventana Dialog Componente desplegable del menú Elemento del menú Separador Elemento marcable Facultad de Informática UCM, 2004 Java AWT 18 Componentes gráficos en applets Disposición de los componentes (layout manager) import java.awt.*; import java.applet.applet; public class AppletConGUI extends Applet { Button boton; Choice alternativa; TextField texto; Checkbox checkbox; CheckboxGroup grupo; Label etiqueta; public void init() { // crea una lista de alternativas alternativa = new Choice(); alternativa.additem("blanco"); alternativa.additem("colorado"); alternativa.additem("amarillo"); add(alternativa); // crea un campo de texto texto = new TextField(10); add(texto); // crea un botón boton = new Button("Púlsame"); add(boton); // crea una etiqueta etiqueta = new Label( Una etiqueta"); add(etiqueta); // crea 3 cajas de elección exclusiva grupo = new CheckboxGroup(); checkbox = new Checkbox("Sí", grupo, false); add(checkbox); checkbox = new Checkbox("No", grupo, false); add(checkbox); checkbox = new Checkbox("Tal vez", grupo, false); add(checkbox);! Cómo se colocan los componentes (usando el método add) depende del gestor de disposición del contenedor (layout manager)! Tipos de disposiciones:! FlowLayout Los componentes se ponen de izquierda a derecha hasta llenar la línea, y se pasa a la siguiente. Cada línea se centra Por defecto, en paneles y applets! BorderLayout Se ponen los componentes en un lateral o en el centro se indica con una dirección: East, West, North, South, Center Por defecto, en marcos! GridLayout Se colocan los componentes en una rejilla rectangular (filas x cols) Se añaden en orden izquierda-derecha y arriba-abajo! Para poner una disposición se utiliza el método setlayout(): GridLayout nuevolayout = new GridLayout(3,2); setlayout(nuevolayout); Facultad de Informática UCM, 2004 Java AWT 19 Facultad de Informática UCM, 2004 Java AWT 20

6 Disposición de los componentes (layout manager) Disposición de componentes en un applet contenedor componente1 componente2 componente3 componente4 componente5 componente6 FlowLayout! Un applet puede tener varios contenedores, cada uno con su propia gestión de disposición applet contenedor componente1 componente2 contenedor componente1 componente2 componente3 componente4 GridLayout(3,2) contenedor componente3 componente4 componente5 componente5 componente6 Facultad de Informática UCM, 2004 Java AWT 21 Facultad de Informática UCM, 2004 Java AWT 22 Disposición de los componentes (layout manager) Administradores de diseño! GridBagLayout! Similar al GridLayout pero mas versátil! Presenta los componentes en una rejilla, pero: Un componente puede ocupar más de una fila y más de una columna Las filas y las columnas pueden tener tamaños diferentes No se tiene que rellenar en un orden predeterminado! Utiliza GridBagConstraints para especificar como deben colocarse, distribuirse, alinearse, etc., los componentes Facultad de Informática UCM, 2004 Java AWT 23 Facultad de Informática UCM, 2004 Java AWT 24

7 La clase Graphics! Clase abstracta que es la base para los contextos gráficos que permiten a una aplicación dibujar los componentes independientemente del dispositivo de salida! Un contexto gráfico es un objeto que funciona junto con las ventanas para mostrar los objetos gráficos! Habitualmente no hay que crear ningún contexto gráfico ya que esto es parte del framework de AWT Se obtiene mediante el método getgraphics()! Mediante el método paint(graphics contexto) se determina que es lo que se debe mostrar en dicho contexto La clase Graphics! Proporciona métodos para dibujar, rellenar, pintar imágenes, copiar áreas y pegar gráficos en pantalla! drawline! drawrect y fillrect! drawpolygon (0,0) x (100,0)! drawpolyline! drawoval y filloval! drawarc y fillarc! y para escribir texto! drawstring! setfont y (0,100) (width-1,height-1) Facultad de Informática UCM, 2004 Java AWT 25 Facultad de Informática UCM, 2004 Java AWT 26 Ejemplo gráfico con Canvas Ejemplo gráfico con un applet public publicclass classejemplocanvas EjemploCanvasextends extendscanvas {{ // // se se puede puede añadir añadir a a un un frame framepara para visualizarlo visualizarlo String Stringcad cad = "Escrito "Escrito en en canvas"; canvas"; // // este este metodo metodose se ejecuta ejecuta automaticamente automaticamentecuando cuando Java Java necesita necesita mostrar mostrar la la ventana ventana public publicvoid voidpaint(graphics paint(graphicsg) g) {{ // // obtener obtener el el color color original original Color Color colororiginal colororiginal = g.getcolor(); g.getcolor(); // // escribir escribir texto texto grafico grafico en en la la ventana ventana y y recuadrarlo recuadrarlo g.drawstring(cad, g.drawstring(cad, 40, 40, 20); 20); g.drawrect(35, g.drawrect(35, 8, 8, (cad.length()*7), (cad.length()*7), 14); 14); // // dibujo dibujo de de algunas algunas lineas lineas for for (int (inti=20; i=20; i< i< 50; 50; i= i= i+3) i+3) {{ if if ((i ((i% 2) 2) == == 0) 0) g.setcolor(color.blue); else else g.setcolor(color.red); g.setcolor(color.red); g.drawline(40, g.drawline(40, (90-i), (90-i), 120, 120, 25+i); 25+i); // // dibujo dibujo y y relleno relleno de de un un óvalo óvalo g.drawoval(40, g.drawoval(40, 95, 95, 120, 120, 20); 20); g.filloval(40, g.filloval(40, 95, 95, 120, 120, 20); 20); g.setcolor(colororiginal); Facultad de Informática UCM, 2004 Java AWT 27 import java.awt.*; public class Lámpara extends java.applet.applet { public void paint(graphics g) { g.fillrect(0,250,290,290); // la mesa donde se pone la lámpara g.drawline(125,250,125,160); // la base de la lámpara g.drawline(175,250,175,160); g.drawarc(85,157,130,50,-65,312); // parte superior e inferior g.drawarc(85,87,130,50,62,58); g.drawline(85,177,119,89); // laterales g.drawline(215,177,181,89); g.fillarc(78,120,40,40,63,-174); // adornos g.filloval(120,96,40,40); g.fillarc(173,100,40,40,110,180); Facultad de Informática UCM, 2004 Java AWT 28

8 Eventos en AWT! Las acciones de usuario en un componente disparan eventos! Un evento es un objeto de la clase AWTEvent que indica:! El tipo de evento, por ejemplo, pulsar el ratón! El objeto sobre el que se produjo el evento, con el método getsource(), por ejemplo, un botón! Dependiendo del tipo, información adicional: La posición (x, y) donde se produjo el evento La tecla que se pulsó (para eventos de teclado) El estado de las teclas modificadoras (CTRL, SHIFT,...) presionadas o no por el usuario cuando sucedió el evento...! Al llegar un evento, un componente puede:! Ignorarlo y pasárselo al componente que le contiene! Modificar el evento antes de pasárselo al contenedor superior Por ejemplo, un componente TextField podría convertir el texto introducido por el usuario a mayúsculas antes de pasarlo! Tratar el evento Al pulsar RETURN el usuario se puede procesar el texto! Interrumpir el proceso del evento Si se considerara el texto inválido no se procesaría ni se pasaría el evento a contenedores superiores! NOTA: La clase AWTEvent ha reemplazado la clase Event (desde 1.1)! Ambas están definidas en el paquete java.awt! De AWTEvent hay especializaciones: WindowEvent, FocusEvent, InputEvent (KeyEvent y MouseEvent), etc. Facultad de Informática UCM, 2004 Java AWT 29 Facultad de Informática UCM, 2004 Java AWT 30! El mecanismo de tratamiento de eventos en Swing/AWT se basa en delegación:! Para tratar un evento hay que registrar un oyente de tipo adecuado en el componente que genera dicho evento)! Más flexible que el modelo basado en herencia presente en el antiguo Java 1.0! Pueden tenerse múltiples oyentes para un mismo evento, cambiar dinámicamente de oyentes según convenga, o tener un mismo oyente para tratar eventos semánticamente relacionados: p.ej. un item de menú y un botón que permite invocar la misma acción pueden tener asociado el mismo actionlistener! Se sigue un patrón de nombrado común, que facilita el uso del modelo:! Si un componente c notifica un evento XXXEvent, existirá una clase para los oyentes de este evento llamada XXXListener, y en c existirá un método addxxxlistener, que permite registrar oyentes de dicha clase para tratar el evento! Dos categorías de eventos:! Eventos de bajo nivel Están relacionados con la interacción física con la interfaz (por ejemplo, qué botón del ratón se ha pulsado?) Ejemplos: MouseInputEvent, WindowEvent y KeyEvent! Eventos de alto nivel, o semánticos Representan operaciones lógicas realizadas sobre los elementos (por ejemplo, se ha pulsado el botón Salir en la interfaz) ActionEvent Facultad de Informática UCM, 2004 Java AWT 31 Facultad de Informática UCM, 2004 Java AWT 32

9 ! Un evento se puede procesar:! En el marco (Frame) o panel (Applet): Por medio del método handleevent(event), para cualquier evento, por ejemplo para gestionar el evento de destrucción de ventana Por medio del método action(event, Object), orientado a gestionar eventos de los componentes Button, Checkbox, Choice, List, MenuItem, y TextField Por medio de métodos específicos para elementos de entrada específicos como el teclado o el ratón mousedown, mousedrag, keydown, keyup,...! En la componente particular Redefiniendo el método action(event, Object)! La clase Component define los siguientes métodos para tratar distintos tipos de eventos (ComponentEvent): action() (Evento ACTION_EVENT) mouseenter() (Evento MOUSE_ENTER) mouseexit() (Evento MOUSE_EXIT) mousemove() (Evento MOUSE_MOVE) mousedown() (Evento MOUSE_DOWN) mousedrag() (Evento MOUSE_DRAG) mouseup() (Evento MOUSE_UP) keydown() (Evento KEY_PRESS o Event.KEY_ACTION) keyup() (Evento KEY_RELEASE o Evento KEY_ACTION_RELEASE) gotfocus() (Evento GOT_FOCUS) lostfocus() (Evento LOST_FOCUS) handleevent() (todo tipo de eventos) Facultad de Informática UCM, 2004 Java AWT 33 Facultad de Informática UCM, 2004 Java AWT 34 Eventos! Cuando ocurre un evento se llama al método de gestión del evento correspondiente:! Primero se pasa a handleevent() que en su implementación por defecto llama al método apropiado al tipo de evento! En general utilizaremos los métodos de eventos particulares: mousedown, action, keydown,...! Es importante que el tratamiento de un evento sea rápido para evitar la degradación de la eficiencia del sistema! Ejemplo: Gestión del uso de botones con action() import java.awt.*; public class DemoBotón extends java.applet.applet { Button b1, b2, b3; public void init() { b1 = new Button(); b1.setlabel("inhibe el botón central"); b2 = new Button("Botón central"); b3 = new Button("Activa botón central"); b3.setenabled(false); add(b1); add(b2); add(b3); // Para añadir componentes a un contenedor ya visible hay que hacer: validate(); //... Facultad de Informática UCM, 2004 Java AWT 35 Facultad de Informática UCM, 2004 Java AWT 36

10 Eventos //... public boolean action(event e, Object arg) { Object target = e.target; if (target == b1) { //Se pulsó Inhibir botón central b2.setenabled(false); b1.setenabled(false); b3.setenabled(true); return true; if (target == b3) { // Se pulsó Activar botón central b2.setenabled(true); b1.setenabled(true); b3.setenabled(false); return true; return false;! El método que procesa un evento devuelve:! true: si el evento ha sido gestionado El evento no se propaga! false: el evento no ha sido gestionado Se propaga al contendor del componente actual Por ejemplo, un botón puede delegar en el panel que lo contiene el procesamiento de un evento! Lo normal es que si se trata el evento se devuelva true, a menos que se quiera hacer un tratamiento adicional en algún contenedor de nivel superior Facultad de Informática UCM, 2004 Java AWT 37 Facultad de Informática UCM, 2004 Java AWT 38