Sistemas de Interfaces com o Usuário

1. Sistemas de Interfaces com o Usuário

2. Proceso de Interação (Eng. Cognitiva) • Golfo de Execução: • formulação da intenção; • especificação da ação; • execução. Usuário Sistema • Golfo de Avaliação: • percepção; • interpretação; • avaliação. Norman, 1986

3. Signos (Semiótica) • Índices • Ícones • Símbolos A

4. Objetos de comuns interface

5. Modelo de Programação Toolkit de Interface (Motif, SDK, ... ) Programa Gráfico- Interativo Sistema Gráfico (Xlib, GDI, ...) Dispositivos Computador Usuário

6. inicio captura dados processa dados fim Programação Convencional Programação Convencional Os comandos são executados segundo uma ordem pré-estabelecida e sequencial.

7. Técnicas de Interação • Solicitação (Request) • Amostragem (Sample) • Eventos (Event)

8. Exemplo de Interação no Modo de Solicitação (Request) { Gqloc lc; static Gdlimit area = {0.0, 0.1, 0.0, 0.1}; static Glocrec rec = {{NULL}}; static Gloc init = {0, 0.5, 0.5}; ... Message ("Defina um ponto na tela ( ESC cancela )"); do { ginitloc (1, 1, &init, 3, &area, &rec); lc = greqloc (1, 1); if (lc.status == NONE) return; } while (lc.loc.transform != 1); /* trata as coordenadas utilizando a estrutura lc ( lc.loc.position ) */ ... } Entrada de um ponto da tela

9. Problemas com solicitação Entradas Simultâneas

10. Modelo de Eventos Processa Evento Tipo 1 Eventos Examina eventos, chama os módulos de processamento Processa Evento Tipo 2 Processa Evento Tipo 3 Programa de Aplicação Sistema Gráfico

11. Eventos típicos (WIMP) KeyPress KeyRelease ButtonPress ButtonRelease Motion LeaveNotify EnterNotify WindowExposure Resize Timer Idle Janela A Janela B Janela C

12. Xlib/ X Window XEvent report; /* Select event types wanted */ XSelectInput(display, win, ExposureMask | KeyPressMask | StructureNotifyMask); while (1) { /* get events, use first to display text and graphics */ XNextEvent(display, &report); switch (report.type) { case Expose: ... break; case ButtonPress: ... exit(1); case ConfigureNotify: ... break; default: break; } /* end switch */ } /* end while */

13. QuickDraw/Macintosh static int nextevent(EventRecord* theEvent, int* x, int* y) { while (1) { if (!WaitNextEvent (everyEvent,theEvent,0,0L)) theEvent->what=idleEvent; switch (theEvent->what) { case idleEvent: doIdle( ); return 1; case keyDown: ... return 1 ; case mouseDown: ... return 1; default: return 1; } } }

14. Janelas e tratadores de eventos Aplicação Janela A Janela B Janela A.1 Janela A.2 Geralmente um tratador de eventos por aplicação

15. Janelas e tratadores de eventos Aplicação Janela A Janela B Janela A.1 Janela A.2 Tratador de eventos I Tratador de eventos II

16. MS Windows int PASCAL WinMain (HANDLE hCopia, HANDLE hCopiaAnterior, LPSTR lpszParamCmd, int nCmdMostrar) { if (!hCopiaAnterior) { classejan.lpfnWndProc = ProcJan ; classejan.lpszClassName = szNomeAplic ; . . . RegisterClass (&classejan) ; } hjan = CreateWindow (szNomeAplic,... ) ; ShowWindow (hjan, nCmdMostrar) ; UpdateWindow (hjan) ; while (GetMessage (&msg, NULL, 0, 0)) { TranslateMessage (&msg) ; DispatchMessage (&msg) ; } return msg.wParam ; } long FAR PASCAL _export ProcJan ( HWND hjan, UINT mensagem, UINT wParam, LONG lParam) { . . . switch (mensagem) { case WM_PAINT: hdc = BeginPaint (hjan, &ps) ; DrawText (hdc, "Ola', Windows!", ... ) ; EndPaint (hjan, &ps) ; return 0 ; case WM_DESTROY: PostQuitMessage (0) ; return 0 ; } ... }

17. Modelo de Call Backs Processa Evento Tipo 1 Eventos Examina eventos, chama os módulos de processamento Processa Evento Tipo 2 Motif Visual Basic IUP ... Processa Evento Tipo 3 Programa de Aplicação

18. Motif static void repaint(Widget widget, char* client, XmDrawingAreaCallbackStruct *data) { ...} void main(int argc, char *argv[]) { static char *vec[] = {"canvas.uid"}; static MrmRegisterArg regvec[] = { {"a_repaint",(caddr_t)repaint} }; MrmInitialize (); // init UIL toplevel = XtAppInitialize(NULL, "hello", NULL, 0, &argc, argv, NULL, NULL, 0); // init Motif MrmOpenHierarchy (1, vec, NULL, &hier); // load arq MrmRegisterNames (regvec, regnum); // reg callbacks MrmFetchWidget (hier, "main", toplevel, &mainwidget, &class); XtManageChild(mainwidget); // manage main XtRealizeWidget(toplevel); // realize managed child XtAppMainLoop(XtWidgetToApplicationContext(toplevel)); }

19. UIL/Motif module canvasuil procedure a_repaint(); object main : XmBulletinBoard { controls { XmDrawingArea canvas; }; }; object canvas : XmDrawingArea { arguments { XmNx = 15; XmNy = 60; }; callbacks { XmNexposeCallback = procedure a_repaint(); }; }; end module;

20. IUP/LED static int repaint (Ihandle *self) { ... } void main (void) { IupOpen( ); IupLoad ("canvas.led"); IupSetFunction ("a_repaint", (Icallback)repaint); IupShow (IupGetHandle("main")); IupMainLoop( ); IupClose( ); } canvas.led main = dialog[TITLE=“IUP Canvas”] (canvas(a_repaint) )

21. Visual Basic

22. ToolBook

23. Nível de abstração e escopo ESCOPO MENOR O ToolBook à F A C I L I D A D E Ç VisualBasic A R EDG/vix T S B IUP/lua SDK Motif A ESCOPO MAIOR

24. Modelo do IUP/LED • Aplicação = conjunto de diálogos • Diálogos = hierarquia de elementos de interface • Especificação de layout • Concreto X Abstrato • Atributos definem a aparência

25. Elementos de Interface • Primitivos • Button, Canvas, Frame, Image, Item, Label, List, Submenu, Text, Toggle,Matrix,Multiline • Agrupamento • Dialog, Radio, Menu • Composição • Hbox, Vbox, Zbox • Preenchimento • Fill

26. DIALOG HBOX FILL LABEL FILL Teste Texto Centralizado Horizontalmente Teste Texto Centralizado Horizontalmente Composição do layout

27. DIALOG VBOX HBOX FILL FILL FILL LABEL FILL Centralizando elementos Teste Texto Centralizado

28. Vbox Fill Fill Canvas Fill HBox Fill Layout abstrato the_menu = ... the_canvas = CANVAS[ BUTTON_CB = button_cb, MOTION_CB = motion_cb](repaint_cb) the_dialog = DIALOG[ MENU=the_menu ] ( VBOX( FILL(), HBOX( FILL(), the_canvas, FILL() ), FILL() ) )

29. Esqueleto da aplicação void carrega_leds(void) { IupLoad(“triang.led”); } int main(void) { IupOpen(); carrega_leds(); registra_callbacks(); mostra_dialogo(); IupMainLoop(); IupClose(); return 0; } void registra_callbacks(void) { IupSetFunction(“button_cb”, button_cb); ... IupSetFunction(“repaint_cb”, repaint_cb); } void mostra_dialogo(void) { IupShow( IupGetHandle(“the_dialog”) ); }

30. OpenGL/GLUT #include <glut.h> void main(int argc, char** argv) { /* Standard GLUT initialization */ glutInit(&argc,argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); /* default, not needed */ glutInitWindowSize(500,500); /* 500 x 500 pixel window */ glutInitWindowPosition(0,0); /* place window top left on display */ glutCreateWindow("Sierpinski Gasket"); /* window title */ glutDisplayFunc(display); /* display callback invoked when window opened */ myinit(); /* set attributes */ glutMainLoop(); /* enter event loop */ }

31. Exemplo simples da GLUT void myinit(void) { /* attributes */ glClearColor(1.0, 1.0, 1.0, 1.0); /* white background */ /* set up viewing w/ 500 x 500 window with origin lower left */ glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 500.0, 0.0, 500.0); glMatrixMode(GL_MODELVIEW); } void display(void) { glClear(GL_COLOR_BUFFER_BIT); /*clear the window */ glColor3f(1.0, 0.0, 0.0); /* draw in red */ glRectf(0.0,0.0, 500.0, 500.0); }