Tutorial - Ui

  • View
    769

  • Download
    3

Embed Size (px)

Transcript

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

Interfaces grficas de usuario

Desarrollo de interfaces de usuarioGeneralizacin 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 Tpicamente del orden de un 50% del esfuerzo de desarrollo se dedica a la interfaz

Libreras y herramientas que ayudan al desarrollo de interfaces

2

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

Apunte histrico1981 Xerox Star (ventanas y 1 aparicin del ratn) 1 1984 Apple Macintosh, X Windows (popularizacin del ratn)There is no evidence that people want to use these things

1985 MS Windows Finales de los 90 Interfaces Web

3

Software para el desarrollo de interfaces de usuario (I)Basado en una comprensin de alto nivel de las interfaces de usuario Ventanas, botones, mens, campos de texto, etc., ms que pixels Acciones de usuario, comportamiento de la interfaz, etc., ms que la seal de los dispositivos de entrada

Desarrollo ms fcil de la interfaz, reduccin del coste Proporcionar parte del cdigo Ayudar a organizar y estructurar el cdigo escrito por el programador

Consistencia de las interfaces a travs de distintas aplicaciones Contrapartida: limitaciones expresivas (posibilidad de programacin complementaria a bajo nivel) Sin toolkits: dibujar y redibujar pixels en la pantalla, seguir coordenadas del ratn, comprobar regiones de la pantalla, gestionar seal de entrada4

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

Software para el desarrollo de interfaces de usuario (II)Sistemas de ventanas / toolkits: MS Windows, X + Motif, Mac/OS, etc. Interfaz al sistema de mensajes del SO Libreras para desarrollo de interfaces de usuario Bajo nivel, alto poder expresivo, difcil de usar

Libreras de objetos: Java Swing/AWT, MS MFC, VB, .NET, etc. Cdigo ms fcil de producir y mantener IDEs con editores interactivos de interfaz

Editores interactivos de interfaces: NetBeans Jcreator Visual Studio etc NetBeans, Jcreator, Studio, etc. Programacin visual Alta facilidad de uso, alcance limitado

La construccin de herramientas ms avanzadas es un campo abierto de investigacin5

Qu tienen que ver las interfaces de usuario con POO?El usuario ve objetos en la pantalla, puede manipularlos Los objetos tienen comportamiento propio: distintas formas de responder a una accin del usuario: Ejemplo: pulsar el ratn sobre un objeto grfico

No existe una funcin pulsar ratn que sepa qu 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)6

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

Un nuevo modelo de programacin: programacin basada en eventosLa ejecucin de una interfaz de usuario no sigue un control de flujo estrictamente secuencial El usuario tiene un alto grado de libertad en todo momento: amplio conjunto de acciones posibles Sera muy difcil representar todos los caminos p y p posibles con un modelo de programacin tradicional

7

Programacin basada en eventosModelo utilizado en las interfaces de usuario basadas en ventanas El usuario toma la iniciativa, no el programa 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 eventos8

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

La base: el sistema de ventanasFunciones 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 reacciona al mensaje de modo distinto segn el tipo de mensaje

La ventana recibe eventos sin diferenciar Respuesta de ventanas a eventos: Repintarse Cambiar apariencia (y repintarse) Ejecutar una funcin (accin)

9

En Windows no hay objetosNo existe el concepto de objeto grfico pero est implcito Clase de ventana Clase Sentencias case del procedimiento de ventana mtodos Proceso que ejecuta el procedimiento de ventana objeto de la clase

10

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

Toolkit Java para interfaz de usuario (JFC/Swing/AWT)Usuario Accin del usuario Sistema de ventanas Mensaje Sistema Swing/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 Swing/AWT11

Toolkit Java para interfaces de usuarioIntroduccin

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

La librera JFC/Swing/AWT javax.swing, java.awt.event, java.awtComponentes Componentes predefinidas Agregacin de componentes Las interfaces se dibujan a s mismas: funciones de dibujo Creacin de nuevas componentes

Interaccin con el usuario: gestin de eventos Emisin de eventos Recepcin y procesamiento de eventos

Layout de componentes13

Construccin de una interfaz de usuarioComponer interfaces con las clases predefinidas La clase Container adicin de subcomponentes Container, Control de la apariencia de las componentes manipulando su estado

Definir la disposicin de las partes de un contenedor Posiciones absolutas Layout managers

Gestionar los eventos: modelo emisor / receptor Eventos de accin generados p las clases p g por predefinidas Gestin directa del input del usuario

Definir componentes personalizadas La clase Graphics Utilizacin de las funciones de dibujo14

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

Ejemplo: un editor de texto bsico

15

Componentes predefinidasJLabel JTextField JButton

JTextArea

JFrame

16

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

Disposicin de las componentesAncho ocupa todo el ancho de la ventana Ancho fijo, centrado Llenar espacio disponible hasta di ibl h t borde inferior de la ventana

Alto fijo

Ancho ocupa todo el ancho de la ventana

17

Aspectos interactivosEscribir string del rea de texto en el fichero indicado en el campo de texto

Editar texto del campo Salir de la aplicacin

Leer el fichero indicado en el campo de texto, asignar como string del rea de texto

Editar texto multilnea

18

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

import javax.swing.*; import java.awt.event.*; import java.io.*; public class Editor extends JFrame implements ActionListener { JTextField fileName; JTextArea editArea; JButton load, save, quit; Editor () { setBounds (100, 100, 335, 325); java.awt.Container p = getContentPane (); p.setLayout (null); JLabel label = new JLabel ("File Name: "); label.setBounds (10 0 300 20) l b l d (10, 0, 300, 20); p.add (label); fileName = new JTextField (); fileName.setBounds (10, 20, 300, 20); p.add (fileName); ...19

... load = new JButton ("Load"); load.setBounds (30, 50, 70, 20); p.add (load); save = new JButton ("Save"); save.setBounds (120, 50, 70, 20); p.add (save); quit = new JButton ("Quit"); quit.setBounds (210, 50, 70, 20); p.add (quit); editArea = new JTextArea (); editArea.setBounds (10, 80, 300, 200); p.add (editArea); load.addActionListener (this); save.addActionListener (this); quit.addActionListener (this); setVisible (true); } // Fin constructor ...

20

Pablo Castells

Escuela Politcnica Superior Universidad Autnoma de Madrid

Programacin Orientada a Objetos (3er curso, grupo 31) 6. Interfaces grficas de usuario

03.03.11

... public void actionPerformed (ActionEvent e) { String command = e.getActionCommand (); if (command.equals ("Quit")) System.exit (0); else if (command.equals ("Load")) load (); else if (command.equals ("Save")) save (); } ...

21

... void load () { try { RandomAccessFile input = new RandomAccessFile (fileName.getText (), "r"); byte buffer[] = new byte [(int) input.length ()]; input.read (b ff ) i d (buffer); input.close