1 / 31

Sistemas de Interfaces com o Usuário

Sistemas de Interfaces com o Usuário. 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. Signos (Semiótica). Índices Ícones

rigel-ellis
Download Presentation

Sistemas de Interfaces com o Usuário

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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); }

More Related