construcción de interfaces a usuario: interacción
Post on 21-Mar-2016
48 Views
Preview:
DESCRIPTION
TRANSCRIPT
Construcción de Interfaces a Usuario: Interacción
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
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
Presentación
InputOutput
Comandos WM
WSInput
Modelos de ‘Input’ Primeros paquetes gráficos (CORE, PHIGS):
Rutinas para solicitar el valor de algún dispositivo ‘Request mode’
El programa solicita la entradade 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
repeatgetMouseStatus(status);...processStatus(status); ...
until exit
repeatenterString (string);...processString(string); ...
until exit
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
Modelo Básico
Repeat getEvent (myEvent) case myevent.class locator: ..... choice: ..... ......... end case
until (condition);
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
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.
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.
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.
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’
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.
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
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
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
Ciclo de Procesamiento de Eventos 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
Definición de ventanas,configuración de laaplicación, etc.
Condición de terminación
Obtención del evento de la cola
Tratamiento del Evento
Ciclo de Procesamiento de Eventos X Windows
while (1) {Xevent an_event;XtNextEvent (&an_event);XtDispathEvent (&an_event);
}
Ciclo de Procesamiento de Eventos Macintosh
while (fDone==false) {whichWindow = frontWindow();SetPort(whichWindow);....gotEvent = getNextEvent (everyEvent, &anEvent); if (gotEvent) {
switch (anEvent.what) {case mouseDown:
.......case updateEvt:
.......default:
.......}}
}
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.
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.
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
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
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
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?
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.
Jerarquías de ventana: eventos
Titulo
x
y
Titulo
x
y
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
Jerarquías de ventana: eventos
Titulo
x
y
Titulo
x
y
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.
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.
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)
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
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.
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.
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”);
}
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).
Window-ProcWndProc (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)}
}
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 unsistema de ventanas sin características OO
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.
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
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
Modelos avanzados de interacción Proveen abstracciones de más alto nivel, para
la administración de interacciones ‘Interactors’ [Myers 90] Comandos [Myers 96a]
‘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
‘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
‘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
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’
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);
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");
Comportamiento estandar
Idle OutsideRunningStart_Action
Start_eventover object
Outside_Action
not over running_where
Abort_Actionabort event
Stop_Actionstop event
Abort_Actionabort eventStop_Action
stop eventBack_Inside_Action
Back over running_where
Running_Action
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 grupoSP_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);Grupo
Partes
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 )
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 interactorAm_Object objs_grower = Am_Move_Grow_Interactor.Create () .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
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());
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
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
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);
top related