Construccin de Interfaces a Usuario: Interaccin

1
Construcción de Interfaces a Usuario Interacción
2
Contenidos

• Modelos de input
• Modelo básico
• Eventos del usuario y del sistema de ventanas
• Representación de eventos
• Ciclo de eventos
• Cola de eventos
• Modelos OO
• Manejo y tratamiento de eventos
• Modelos avanzados de interacción

3
Modelos de Input

• Administración de los eventos producidos por el
  usuario utilizando los dispositivos de entrada
• Interacciones básicas
• Posicionamiento
• Especificación de una coordenada (x,y)
• Selección
• Eleccion de un elemento en un conjunto
• Cuantificación
• Especificación de algún valor numérico
• Ingreso de Texto

WM
Presentación
Comandos
Input
Output
Input
WS
4
Modelos de Input

• Primeros paquetes gráficos (CORE, PHIGS)
• Rutinas para solicitar el valor de algún
  dispositivo
• Request mode
• El programa solicita la entrada
• de datos utilizando un dispo-
• sitivo particular.
• Enfoque bloqueante el programa
• debe esperar la acción del usuario
• No adecuada para manipulación directa
• Sample mode
• El programa consulta el estado de
• algún dispositivo
• Pueden perderse eventos durante
• el procesamiento de un evento
• anterior

repeat enterString (string) ... processString(
string) ... until exit
repeat getMouseStatus(status) ... processStatu
s(status) ... until exit
5
Modelos de Input

• Sistemas de ventanas los eventos son dirigidos
  hacia la ventana activa
• Eventos representados por registros
• Incluyen el tipo y valor del evento
• Los eventos son encolados por el sistema de
  ventanas. Los programas deben retirarlos de dicha
  cola y procesarlos.
• Modelo más utilizado actualmente
• Nuevos modelos
• Interactors
• Comandos

6
Modelo Básico
Repeat getEvent (myEvent) case
myevent.class locator .....
choice ..... ......... end
case until (condition)
7
Modelo básico

• Las acciones del operador son traducidas en
  eventos de software
• Cada evento es enviado al proceso que controla la
  ventana asociada
• Información contenida en los eventos
• Tipo del evento
• Eventos del usuario teclado, mouse
• Eventos del sistema de ventanas manipulación de
  ventanas
• Información propia de cada tipo
• ej. eventos del mouse posición actual, estado
  botones
• ej. eventos teclado tecla presionada

8
Eventos del usuario

• Mouse botones
• mouse-up
• mouse-down
• Siempre contienen la posición del mouse
• Definición dependiente de las configuraciones de
  hardware para las que fue diseñado el sistema de
  ventanas
• Macintosh asume que existe sólo un botón
• MS Windows define eventos diferentes para los
  botones izquierdo, derecho y medio de un mouse de
  3 botones.
• X Windows define eventos button-down y
  button-up, que contienen el número de botón que
  fue presionado/liberado.

9
Eventos del usuario

• Mouse modificadores
• ej. teclas Shift, Control, Alt
• Permiten modificar el comportamiento asociado con
  los eventos de los botones del mouse
• Generalmente, se define un byte o word
  (modifiers o flags), contenida en los eventos
  de botones.
• Se asigna un bit a cada tecla modificadora
• Algunos sistemas añaden un word para indicar el
  estado de los botones del mouse.
• permite tratar eventos con varios botones
  presionados simultáneamente.

10
Eventos del usuario

• Mouse doble click
• Dos eventos button down ocurridos dentro de un
  intervalo reducido de tiempo.
• La longitud del intervalo suele ser configurable
  por el usuario.
• MS Windows
• Un evento doble-click diferente para cada uno de
  los 3 botones
• X Windows
• No provee doble click.
• Generalmente interpretado a partir de la
  comparación del tiempo (time stamp ) asociado
  con los eventos button-down
• Díficil de tratar depende del timing de los
  eventos, que puede tener deformaciones debido al
  networking y el multiprocesamiento.

11
Eventos del usuario

• Mouse movimientos
• Generalmente, se genera un evento cada vez que el
  mouse cambia de posición (moveMouse)
• Puede proveerse un filtrado, para evitar
  tratamientos innecesarios
• en general, sólo son necesarios en operaciones
  como dragging
• Buffer de historia de movimientos agrupa
  varios eventos de movimiento, siendo reportados
  todos en un solo bloque
• Provisto por algunas versiones de X Windows
• Mouse entrada y salida de una ventana
• Mouse-Enter y Mouse-Exit

12
Eventos del usuario

• Teclado
• Cada presión de una tecla genera un evento.
• Un codigo (scan code) indicando la tecla
  presionada.
• Algunas dificultades en su tratamiento
• Los teclados no son estandar
• La disposición de las letras en Europa y USA es
  diferente.
• Las teclas suelen trabajar conjuntamente con las
  teclas modificadoras o con otras teclas
• ej. juegos
• Teclas aceleradoras
• Deben ser enviados directamente al sistema de
  menúes, no a la aplicación.

13
Eventos del sistema de ventanas

• Eventos relacionados con el manejo de ventanas
• Creación
• Destrucción
• Apertura
• Cerrado
• Iconificación/deiconificación
• Selección/deselección
• Redimensionamiento
• Generalmente, estos eventos también son colocados
  en la cola de eventos

14
Redibujo de una ventana

• Evento de redibujo (redraw)
• Indica que una región de la ventana debe ser
  redibujada.
• Denominado
• Exposure events (X)
• DrawSelf (NeXTSTEP)
• WM_PAINT (MS Windows)
• UpdateEvt (Macintosh)
• Las instrucciones de dibujo de una aplicación
  deben ser efectuadas como respuesta a un evento
  de redibujo.
• La aplicación dibuja cuando las acciones del
  usuario lo requieren, no cuando el software
  decide hacerlo

15
Representación de eventos

• Registros conteniendo toda la información acerca
  de un evento
• Creados por el WS, ante cada acción del usuario
• Colocados en una cola para cada ventana
• Identifican los distintos tipos de eventos
• ej. X define 33 tipos diferentes de eventos
• ej. buttonPress, buttonRelease, keyPress,
  expose, focusIn, ....
• Estructuras union, para considerar los
  distintos campos de cada tipo de evento

16
Ciclo de Procesamiento de Eventos
Definición de ventanas, configuración de
la aplicación, etc.

• Forma general
• Initialization
• while (not time to quit)
• get next event E
• dispatch event E
• La funcionalidad del programa está dada por el
  código que administra los eventos pasados a las
  ventanas

Condición de terminación
Obtención del evento de la cola
Tratamiento del Evento
17
Ciclo de Procesamiento de Eventos

• X Windows
• while (1)
• Xevent an_event
• XtNextEvent (an_event)
• XtDispathEvent (an_event)

18
Ciclo de Procesamiento de Eventos

• Macintosh
• while (fDonefalse)
• whichWindow frontWindow()
• SetPort(whichWindow)
• ....
• gotEvent getNextEvent (everyEvent, anEvent)
• if (gotEvent)
• switch (anEvent.what)
• case mouseDown
• .......
• case updateEvt
• .......
• default
• .......

19
Ciclo de Procesamiento de Eventos

• Los toolkits suelen proveen esta rutina en forma
  interna
• XtAppMainLoop(...) en X
• vEventProcess() en Galaxy,
• Am_Main_Event_Loop() en Amulet
• Pueden especificarse timeouts, para ser
  notificados luego de un determinado tiempo sin
  eventos.

20
Cola de Eventos

• Contiene los registros representando los eventos
  del usuario
• La rutina con el ciclo de eventos los retira de
  la cola, y los procesa
• Los sistemas de ventanas proveen una rutina para
  obtener el siguiente evento de la cola
• Sistemas multitarea (X, NeXTSTEP)
• Una cola para cada proceso.
• Macintosh, X
• Toda la comunicación proceso- ventanas debe
  realizarse a través de la cola, utilizando
  eventos.
• MS Windows, NeXTSTEP
• Proveen mecanismos que permiten la distribución
  de eventos sin utilizar la cola.
• Invocando directamente el mecanismo de
  dispatching.

21
Filtrado de eventos

• Permite descartar aquellos eventos que no son de
  interés para el procesamiento
• Enmascaramiento de eventos
• Modificación del ciclo de eventos
• Initialization
• while (not time to quit)
• get next event E
• if (not Filtered Event (E))
• Dispatch event E
• Reduce el tráfico en la red, y el procesamiento
  innecesario

Condición de filtrado
22
Evento de terminación (Quit)

• Variable global
• En el ciclo de eventos
• Eventos de terminación y cerrado de ventanas
• En aplicaciones complejas
• Permite a las ventanas tomar las acciones
  correspondientes
• MS Windows rutina PostQuitMessage

23
Modelos OO

• Los toolkits OO suelen proveer una Application
  class
• Contiene métodos de inicialización para
  configurar la aplicación
• Provee un método run, conteniendo el ciclo de
  eventos.
• Application myApp
• Inicializar ventanas y estructuras de datos
• Colocar las máscaras de eventos
• myApp.Run()
• Un método Quit controla la terminación del ciclo
  de eventos
• Provee métodos que permiten controlar todos los
  casos especiales de manejo de eventos.
• Es posible especializar esta clase para
  implementar procesamientos especiales

24
Manejo y tratamiento de eventos

• Como son despachados los eventos?
• Como escribir código para la aplicación,
  asociarlo a una ventana y tratar los eventos
  recibidos por la ventana?

25
Despacho de eventos

• Modelos generalmente basados en la jerarquía de
  ventanas
• Modelo bottom-first
• Se selecciona la ventana hoja (colocada al
  frente de la presentación) que contiene al mouse.
  
• El evento es enviado al código que controla esta
  ventana.
• Los objetos que controlan la ventana sólo
  necesitan considerar sus eventos.

26
Jerarquías de ventana eventos
27
Despacho de eventos

• Modelo top-down
• Se selecciona una ventana raíz de una jerarquia
  (colocada al frente de la presentación) que
  contiene el mouse
• Ventana contenedora
• La ventana contenedora posee un código especial
  para despachar el evento a una o más de sus
  subventanas

28
Jerarquías de ventana eventos
29
Despacho de eventos de teclado

• Eventos de teclado
• No poseen una posición inherente
• Mouse-based
• Se agrega la localización del mouse a los eventos
  de teclado,
• Click-to-type
• Enviará los eventos de teclado a la última
  ventana donde ha ocurrido un evento mouse-down.
• Key focus
• Una ventana informa al sistema de ventanas que
  desea recibir todos los eventos de teclado
  futuros.

30
Despacho de eventos

• Mouse focus
• Similar al key focus.
• Produce que todos los eventos del mouse sean
  enviados a una ventana particular,
  independientemente de la localización real del
  mouse.
• Ej. dragging en una barra de desplazamiento.
• Al presionarse el mouse dentro de la barra, ésta
  puede requerir el mouse focus.
• El foco es retenido hasta recibir un button up
  (aunque el mouse no esté dentro de la barra de
  desplazamiento).
• Al liberarse el botón, la barra libera el foco,
  que restablece el algoritmo de despacho estandar.
  

31
Tratamiento de eventos

• Formas de asociar el código de la aplicación con
  los eventos
• Tabla de Eventos
• Modelo de Callbacks (Xtk/Motif)
• Tratamiento de eventos con procedimientos
  (WindowProc)

32
Tabla de Eventos

• Cada ventana posee asociada una tabla de eventos
• Contiene las direcciones de procedimientos C, que
  tratarán los distintos tipos de eventos.
• Utilizado en Notifier (SunView)
• Algoritmo
• Selección de una ventana
• Localizar su tabla de eventos
• Hallar la entrada de la tabla correspondiente al
  tipo de evento (indicado por un valor entero)
• Recuperar el procedimiento asociado

33
Tabla de Eventos

• Características
• Se provee una tabla de eventos por omisión
• Rutinas estandard, que redireccionan el evento a
  la ventana padre.
• El programador puede definir nuevos eventos
• Pseudoevents.
• Es necesario ser cuidadoso en la construcción de
  la tabla
• Una entrada errónea puede ser muy dificil de
  depurar.

34
Modelo Callbacks Xtk/Motif

• Callback procedimiento asociado con un evento
  dado sobre un widget (Motif)
• Al recibir un evento, el widget invoca el
  procedimiento callback asociado a tal evento
• Forma general
• void callback(w, client_d, class_c)
• Widget w //widget originador del callback
• XtPointer client_d //datos de la aplic.
• XtPointer class_d //datos de la clase del
  widget
• Ocultan al programador el mecanismo de despacho
  de eventos.

35
Modelo Callbacks Xtk/Motif

• Asociación de callbacks con un widget
• XtAddCallback
• void XtAddCallback(w, cb_name, cb_proc, client_d)
• Widget w // widget al que se asocia el
  callback
• String cb_name // nombre del callback
• XtCallbackProc cb_proc // procedimiento
  callback
• XtPointer client_d // los datos cliente
• ej.
• XtAddCallback(hello_button, XtNActivateCallback,
  (XtCallbackProc) do_hello_button,
  (XtPointer)ibuf)
• void do_hello_button (Widget w,int data1,int
  data2)
• printf(hello\n)

36
Window-Proc

• MS Windows las ventanas pertenecen a
  determinadas window classes
• Cada clase define un procedimiento WindowProc que
  procesa todos los eventos
• Algoritmo
• Identificación de la ventana asociada
• Invocar el WindowProc asociado con esta ventana
• Un WindowProc generalmente consiste de un switch
  para el tratamiento de los distintos tipos de
  eventos.
• WindowProc trata sólo una fracción de los eventos
  posibles
• Los eventos no tratados son delegados a otras
  ventanas (invocando DefWindowProc).

37
Window-Proc

• WndProc (HWND hWnd, WORD iMessage, WORD wParam,
  LONG lParam)
• switch (iMessage)
• case WM_CREATE
• .........
• case WM_PAINT
• .........
• case WM_LBUTTONDOWN
• .........
• case WM_MOUSEMOVE
• .........
• case WM_DESTROY
• .........
• default
• DefWindowProc (hWnd, iMessage, wParam, lParam)

38
Tratamiento de eventos OO

• Los lenguajes OO proveen mecanismos más naturales
  para el tratamiento de eventos
• No requieren sentencias case o switch explícitas,
  o el registro de registrar las rutinas de
  tratamiento de los eventos.
• Algunos sistemas con características OO
• NeXTSTEP
• MacApp
• Visual C
• Interviews
• Java

Construidas sobre un sistema de ventanas sin
características OO
39
Tratamiento de eventos OO

• Una clase abstracta (WindowEventHandler) define
  el comportamiento estandar de los mecanismos de
  tratamientos de eventos
• MouseDown(Button, Location, Modifiers)
• MouseUp(Location, Modifiers)
• KeyPress(Key, Modifiers)
• MouseEnter(Location, Modifiers)
• MouseExit(Location, Modifiers)
• Redraw(DamagedRegion)
• SetCanvas (Canvas)
• SetBounds(BoundsRect)
• Rectangle GetBounds()
• En la mayoría de estos métodos, la implementación
  por omisión no realiza ninguna acción.

40
Inconvenientes modelos actuales

• No suele existir un mecanismo distinto para
  algunos eventos especiales
• Los eventos stop, abort, etc. son colocados en la
  cola conjuntamente con los demás tipos de eventos
• La aplicación debe estar siempre esperando nuevos
  eventos, para procesar interrupciones (aborts) y
  redibujos.
• Si no fuera así, las operaciones largas no
  podrían ser abortadas, y podrían existir lapsos
  de tiempo con la ventana conteniendo áreas en
  blanco

41
Inconvenientes modelos actuales

• Modelo dependiente del dispositivo
• La representación de los eventos (registros)
  posee campos fijos.
• Es dificil incluir nuevos dispositivos (ej.
  apuntadores 3D)
• Tratamiento asincrónico de los eventos
• Puede producirse una desincronización entre los
  programas y el sistema de ventanas
• ej. si existe una solicitud del sistema de
  ventanas para redibujar un área, pero el programa
  está cambiando los contenidos de la ventana,
  puede producirse un redibujo erróneo

42
(No Transcript)
43
Modelos avanzados de interacción

• Proveen abstracciones de más alto nivel, para la
  administración de interacciones
• Interactors Myers 90
• Comandos Myers 96a

44
Interactors

• Objetivo proveer mayor soporte para la
  programación del manejo de eventos
• Foco interfaces de manipulación directa
• Identifica 6 tipos de interacciones básicas
• move
• grow
• rotate
• text edit
• gesture
• select (pick)
• Garnet, Amulet, UGA

45
Interactors

• Características
• Identificación de un conjunto de interactores
  primitivos y sus parámetros correspondientes
• Las interfaces de manipulación directa pueden ser
  constuidas directamente reutilizando estos
  interactores
• Sólo se proveen unos pocos tipos de
  comportamientos, y parámetros estandares
• Separación real entre el manejo de inputs y
  outputs
• Encapsula toda la administración de eventos
  correspondiente a un determinado objeto gráfico
• Fácil de implementar
• Alta reusabilidad
• Provee soporte para operaciones difíciles como el
  dragging

46
Interactors

• Idea general asociar interactores a un objeto
  gráfico (o varios), para administrar sus inputs
• Los objetos gráficos no necesitan ser conscientes
  de sus inputs
• no existen métodos para el tratamiento de eventos
  en los objetos gráficos
• Los interactores son invisibles para los
  objetos gráficos
• Pueden asociarse múltiples interactores a un
  objeto
• Un mismo tipo de interactor puede operar sobre
  múltiples objetos
• Estrategia
• Seleccionar el tipo correcto de interactor
• Crear una instancia de ese interactor
• Colocar los valores para sus parámetros (slots)
• Asociarlo con el objeto gráfico

47
Tipos de interactores

• Am_Choice_Interactor (interactor de selección)
• Selecciona uno o más objetos de un conjunto
• Am_One_Shot_Interactor (interactor de acción
  simple)
• Efectúa una acción simple
• Am_Move_Grow_Interactor (interactor de
  movimiento)
• Efectúa un movimiento o grow de objetos con el
  mouse
• Am_New_Points_Interactor (interactor de puntos)
• Creación de nuevos objetos por medio de la
  entrada de puntos, con rubberbanding como
  feedback
• Am_Text_Edit_Interactor (interactor de edición)
• Edición con teclado y mouse de texto
• Am_Gesture_Interactor (interactor de gestos)
• Interpreta gestos freehand

48
Ejemplo simple

• Para posibilitar el movimiento de un objeto
• Am_Interactor interactor
• Am_Move_Grow_Interactor.Create()
• Am_Object rect Am_Rectangle.Create()
• .Set(Am_LEFT, 40)
• .Set(Am_TOP, 50)
• .Set(Am_FILL_STYLE, Am_Red)
• .Add_Part(interactor)

49
Parámetros comunes de los interactuadores

• Activación
• Un interactor se activa cuando su objeto gráfico
  asociado es colocado en una presentación
• Am_ACTIVE determina si el interactor procesa o
  no eventos
• Eventos de comienzo, terminación e interrupción
  (start, stop, abort)
• Asociados a una tecla, botón del mouse,
  modificadores, doble click, etc.
• select_it Am_Choice_Interactor.Create("Select
  It")
• .Set(Am_START_WHEN, "MIDDLE_DOWN")

50
Comportamiento estandar
Idle
Outside
Running
51
Parámetros comunes de los interactuadores

• Objeto sobre el que opera
• Por omisión, opera sobre el objeto que tiene
  asociado
• Es posible operar sobre algun miembro de un grupo
• SP_Ship_Mover Am_Move_Grow_Interactor.Create("
  SP_Ship_Mover")
• .Set (Am_START_WHEN, "LEFT_DOWN")
• .Set (Am_START_WHERE_TEST, Am_Inter_In_Part)
• ship_group.Add_Part(SP_Ship_Mover)

52
Parámetros para tipos específicos de interactores

• Ej. Botones (interactores de selección)
• Tipo de selección (Am_HOW_SET)
• set (radio buttons, Am_CHOICE_SET )
• toggle (check buttons, Am_CHOICE_TOGGLE)
• list-toggle (selecciones múltiples,
  Am_CHOICE_LIST_TOGGLE )

53
Parámetros para tipos específicos de interactores

• Ej. Movimientos, grow
• Objeto para representar el feedback intermedio
• Am_Object feedback_circle moving_circle.Create()
  
• .Set (Am_LINE_STYLE, Am_Dashed_Line)
• my_win.Add_Part (feedback_circle)
• // The definition of the interactor
• Am_Object objs_grower Am_Move_Grow_Interactor.Cr
  eate ()
• .Set (Am_START_WHEN, LEFT_DOWN)
• .Set (Am_GROWING, true) // grow instead of
  move
• .Set (Am_FEEDBACK_OBJECT, feedback_circle)
• objs_group.Add_Part (objs_grower)
• otros parámetros
• gridding
• where_attach
• tamaño mínimo

54
Relación Interactor - Objeto Gráfico

• Los interactores suelen modificar el valor de
  algunos slots de sus objetos gráficos asociados
• Ej. Interactor de selección
• El interactor coloca el valor del slot
  Am_SELECTED del objeto gráfico asociado
• La presentación del objeto gráfico puede verse
  modificada
• ej. utilizando restricciones (fórmulas)
• Am_Define_Formula (line_selected)
• if (self.Get(Am_SELECTED)) return Am_Red
• else return Am_Black
• Am_Object my_line Am_Line.Create()
• .Set(Am_LINE_STYLE, line_selected)
• .Add_Part(Am_Choice_Interactor.Create())

55
Prioridades

• Si dos interactores desean ejecutarse
  conjuntamente, se utilizan prioridades para
  determinar cuál es el que se ejecutará
• slot Am_PRIORITY
• Valor por omisión 1
• Cuando está ejecutándose, se agrega un valor de
  100

56
Objetos Comando

• Cada interactuador puede poseer asociado un
  objeto comando
• Contiene las funciones que determinarán el
  comportamiento del interactor
• slot Am_COMMAND
• Al finalizar su operación, el interactor ejecuta
  el método Do de su objeto comando
• Los objetos comando permiten la incorporación
  de funciones para (entre otras)
• undo (UNDO_METHOD)
• redo (REDO_METHOD)
• help (HELP)
• Reusabilidad
• Biblioteca de comandos generales

57
Objetos Comando

• Am_Object change_setting_command
  Am_Command.Create()
• .Set(Am_DO_METHOD, do_change_setting)
• .Set(Am_UNDO_METHOD, undo_change_setting)
• Am_Object inter
• Am_One_Shot_Interactor.Create("change_settings")
• .Set(Am_START_WHEN, "ANY_KEYBOARD")
• .Set_Part(Am_COMMAND, change_setting_command)
• window.Add_Part (how_set_inter)