VII Desenvolvimento e Toolkits o Developing User Interfaces, Cap. 4 e 5, o Dan Olsen 1 Melhor e Pior? 2 1
Melhor e Pior? 3 Melhor e Pior? 4 2
Resumo Aula Anterior Padrões de desenho Web 6 Regras para uma boa Home Page Carrinho de Compras Personalização de Home Pages Acessibilidade Alguém se lembra: Guias de Acessibilidade? 5 Sumário Introdução ao de Acontecimentos Acontecimentos associados a Janelas Comunicação entre widgets Definição de MVC Fluxo de acontecimentos 6 3
Introdução Antes das aplicações interactivas de manipulação directa Arquitecturas de interacção muito simples Programas sequenciais Interpretadores linha de comandos (DOS, UNIX) Programa controla e pede entradas Utilizadores esperam pelo programa Utilizadores introduzem informação 7 Programas Sequenciais Arquitectura Loop (forever) Programa lê linha de texto Programa analisa entrada Programa avalia o resultado Possivelmente gera saídas End (loop) 8 4
Programas Sequenciais Problema: Como modelar múltiplas acções dos utilizadores? Por exemplo processador de texto? Precisa de imprimir, editar, inserir, quando o utilizador quiser 9 Programas Sequenciais (cont.) Geralmente conduz a muitos modos montes de variáveis de estado Exemplos de modos 10 5
Programas Sequenciais (cont.) Geralmente conduz a muitos modos montes de variáveis de estado Exemplos de modos Programas de pintura (linha, bucket-fill, rectângulo, etc) 11 Programas Sequenciais (cont.) Geralmente conduz a muitos modos montes de variáveis de estado Exemplos de modos Programas de pintura (linha, bucket-fill, rectângulo, etc) Controlos remotos universais com modo TV / VCR 12 6
Programas Sequenciais (cont.) Geralmente conduz a muitos modos montes de variáveis de estado Exemplos de modos Programas de pintura (linha, bucket-fill, rectângulo, etc) Controlos remotos universais com modo TV / VCR Modos de comando e edição do vi 13 Programas Sequenciais (cont.) Geralmente conduz a muitos modos montes de variáveis de estado Exemplos de modos Programas de pintura (linha, bucket-fill, rectângulo, etc) Controlos remotos universais com modo TV / VCR Modos de comando e edição do vi BONS MODOS E MAUS MODOS? 14 7
Programas Sequenciais (cont.) Problemas com modos? Demasiados modos confundem utilizadores Provocam erros (modo errado) Como alternar entre modos? Indicação clara sobre modo corrente (qual a heurística?) 15 Programas Sequenciais (cont.) Precisamos de modelo mais sofisticado para simplificar programação de Sistemas Interactivos 16 8
de Acontecimentos desenvolvido para suportar Interfaces de Manipulação directa Permite comunicação entre objectos interactivos e sistema de entradas/ saídas Programa espera pelo utilizador (controlo externo) 17 de Acontecimentos o Comunicação via Acontecimentos (Event) 18 9
de Acontecimentos o Comunicação via Acontecimentos (Event) o Um acontecimento é qualquer coisa de interessante que ocorre no sistema Botão do rato premido, Objecto arrastado, Teclado accionado, etc. 19 de Acontecimentos o Comunicação via Acontecimentos (Event) o Um acontecimento é qualquer coisa de interessante que ocorre no sistema Botão do rato premido, Objecto arrastado, Teclado accionado, etc. o Acontecimentos têm: Tipo de acontecimento Posição do cursor ou tecla + modificador Janela à qual se destina o acontecimento 20 10
de Acontecimentos o Todos os acontecimentos gerados vão para lista de espera Fornecida pelo sistema operativo Acontecimentos tratados pela ordem de geração Mouse Software Event Queue Keyboard Software 21 Exemplo de Acontecimentos Barra título Cx fechar Pasta Barra enrolamento Controlo tamanho 22 11
Questões Tratamento Acontecimentos o Tipos de Acontecimentos que janela pode receber o Decompor IU em objectos de interacção (widgets / controlos) o Distribuir acontecimentos pelos objectos de Interacção o de comunicação entre objectos 23 Árvore de Interactores o Decompor objectos interactivos em árvore Objectos interactivos tb designados por widgets Rectângulos aninhados 24 12
Árvore de Interactores o Decompor objectos interactivos em árvore Objectos interactivos tb designados por widgets Rectângulos aninhados o Utilizada para distribuir acontecimentos Acontecimentos despachados (enviados) para rotinas nos widgets Estas rotinas (event handlers) processam o acontecimento 25 Ex. Árvore de Interactores Ecrã Janela D:\ipm-slides0203 Janela Interior Menu Bar barra localização barra desenr. vertical área de conteúdo pasta antigas pasta cartoons controlo tamanho Status Bar 26 13
Ex. Árvore de Interactores 93.54 7 8 9 4 5 6 1 2 3 0 + - = ENT Ecrã Janela Exterior [amarelo] Janela Interior [verde] Resultados [rosa] Texto resultado Teclado [verdeescuro] Botão = Botão Botão + Botão 0 27 Widgets / Controlos Objectos interactivos reutilizáveis 28 14
Widgets / Controlos Objectos interactivos reutilizáveis Tratam determinados acontecimentos Dizem em que acontecimentos estão interessados 29 Widgets / Controlos Objectos interactivos reutilizáveis Tratam determinados acontecimentos Dizem em que acontecimentos estão interessados A fila de espera envia acontecimentos para o widget correcto 30 15
Widgets / Controlos Objectos interactivos reutilizáveis Tratam determinados acontecimentos Dizem em que acontecimentos estão interessados A fila de espera envia acontecimentos para o widget correcto Mudam de aparência ex. Button up / Button down 31 Acontecimentos de Entrada o Botões de localizador (rato / caneta) Premido / libertado (Down / Up) modificadores (teclas shift, control, Alt, etc.) duplo click o Acontecimentos de deslocamento Permitem desenhar com rato/caneta Arrastar objectos com rato o Acontecimentos de entrada/saída e.g., se entra / sai de uma região / botão 32 16
(. cont ) Acontecimentos o Teclado transforma códigos de tecla em ASCII/Latin 1 KeyDown, KeyUp 33 (. cont ) Acontecimentos o Teclado transforma códigos de tecla em ASCII/Latin 1 KeyDown, KeyUp o Acontecimentos específicos de janelas criar / destruir iconificar / restaurar seleccionar / desseleccionar Modificar tamanho redesenhar (. rect ) desenhar porções recém-expostas janela 34 17
Ciclo de Acontecimentos o Como são processados os acontecimentos? o Event loop Inicialização While (continuar) { obtém acontecimento A Processa acontecimento A } o A substância do programa reside no código que processa os acontecimentos 35 Processar acontecimentos 7 8 9 4 5 6 1 2 3 Prime tecla 5 0 + - = 0 ENT Despacha (acontecimento A) { switch (A.window) {... case TECLA-CINCO: if (A.type == left-down){ quant = 5 + 10*quant; }... display (quant); last-op = NUMBER; 36 18
Processar acontecimentos Despacha (acontecimento A) { 5 switch (A.window) { 7 8 9... case TECLA-DOIS: 4 5 6 if (A.type == left-down) { quant = 2 + 10*quant; 1 2 3 display (quant); 0 + - last-op = NUMBER; Prime tecla 2 = ENT }... 37 Processar acontecimentos Despacha (acontecimento A) { 52 switch (A.window) { 7 8 9... case TECLA-MAIS : 4 5 6 if (A.type == left-down){ push (quant); 1 2 3 quant = 0; 0 + - last-op = COM; = ENT } Prime tecla +... 38 19
Processar acontecimentos 7 8 9 4 5 6 1 2 3 0 Prime + - tecla 6 = 0 ENT Despacha (acontecimento A) { switch (A.window) {... case TECLA_SEIS: if (A.type == left-down) { quant = 6 + 10*quant; }... display (quant); last-op = NUMBER; 39 Processar acontecimentos Despacha (acontecimento A) { switch (A.window) { 6... case TECLA-ENTER: 7 8 9 if (A.type == left-down){ ( NUMBER if (last-op == 4 5 6 push (quant); 1 2 3 result = pop() + pop(); 0 + - push (result); display (result); = ENT quant = 0; last-op = COM; } Prime tecla enter 40 20
Processar acontecimentos 58 7 8 9 4 5 6 1 2 3 0 + - = ENT 41 Processamento de Acontecimentos 42 21
Processamento de Acontecimentos Se utilizador desenrola texto o sistema DEVE: 1. Encaminhar acontecimentos rato para barra de enrolamento 43 Processamento de Acontecimentos Se utilizador desenrola texto o sistema DEVE: 1. Encaminhar acontecimentos rato para barra de enrolamento 2. Actualizar representação barra durante arrasto 44 22
Processamento de Acontecimentos Se utilizador desenrola texto o sistema DEVE: 1. Encaminhar acontecimentos rato para barra de enrolamento 2. Actualizar representação barra durante arrasto 3. Notificar janela de texto : precisa desenrolar-se para parecer que texto se deslocou 45 Comunicação Entre Widgets Como comunicam e interactuam Widgets entre si? 46 23
Comunicação Entre Widgets Como comunicam e interactuam Widgets entre si? Usando Pseudo-acontecimentos 47 Comunicação Entre Widgets Como comunicam e interactuam Widgets entre si? Usando Pseudo-acontecimentos Pseudo não correspondem a entradas reais, mas sim geradas 48 24
Comunicação Entre Widgets Como comunicam e interactuam Widgets entre si? Usando Pseudo-acontecimentos Pseudo não correspondem a entradas reais, mas sim geradas Criam novos acontecimentos para comunicação entre widgets 49 Comunicação Entre Widgets Como comunicam e interactuam Widgets entre si? Usando Pseudo-acontecimentos Pseudo não correspondem a entradas reais, mas sim geradas Criam novos acontecimentos para comunicação entre widgets Sistema envia pseudo-acontecimento para widget apropriado 50 25
Comunicação Entre Widgets o Acesso directo a irmãos Indicar janela irmã como propriedade (Tk) Especificar irmã no código (AWT) o Notificar pai Cada widget tem identificador único Notificam pai widget sobre alterações ocorridas Pai efectua a acção apropriada 51 MODEL-VIEW- CONTROLLER 52 26
Model-View-Controller Arquitectura para aplicações interactivas Desenvolvida pela equipa Smalltalk no Xerox PARC 53 Model-View-Controller o Estrutura a aplicação para facilitar escalabilidade manutenção 54 27
Model View Controller o Separa semântica da aplicação da apresentação (na fase de codificação) 55 Model View Controller o Vantagens Portabilidade mesma aplicação, diferentes sistemas 56 28
Model View Controller o Vantagens Portabilidade mesma aplicação, diferentes sistemas Reutilização componentes reutilizados reduz custos 57 Model View Controller o Vantagens Portabilidade mesma aplicação, diferentes sistemas Reutilização componentes reutilizados reduz custos Múltiplas Interfaces várias formas de aceder à mesma funcionalidade 58 29
Model View Controller o Vantagens Portabilidade mesma aplicação, diferentes sistemas Reutilização componentes reutilizados reduz custos Múltiplas Interfaces várias formas de aceder à mesma funcionalidade Configuração pelo designer e/ou pelo utilizador o Subjacente à (esmagadora) maioria aplicações desktop 59 Model-View-Controller o Estado lógico interno da aplicação 60 30
Model-View-Controller o Estado lógico interno da aplicação o O modo como os dados são apresentados no ecrã 61 Model-View-Controller o Estado lógico interno da aplicação o O modo como os dados são apresentados no ecrã o Processa as entradas do utilizador 62 31
Aplicação Exemplo Círculos Azuis: 4 Quadrados Vermelhos: 2 63 o Informação manipulada pela aplicação o Dados repr. objectos do mundo real circuito para um programa de CAD Portas lógicas & ligações entre estas Formas num programa de modelação geométrica Geometria e cor 64 32
o Concretiza representação visual do modelo o Podem existir múltiplas vistas Por ex. vista de formas & vista numérica 65 Múltiplas s formas Círculos Azuis: 4 Quadrados Vermelhos: 2 Numérica 66 33
s Quando Alterado notifica vistas 67 s Quando Alterado notifica vistas Para que vista possa mudar mais tarde (p.ex. acrescentar item) 68 34
Recebe todos os acontecimentos de entrada do utilizador 69 Recebe todos os acontecimentos de entrada do utilizador Ex. Mouse-Down, Key-Press, etc. 70 35
Recebe todos os acontecimentos de entrada do utilizador Ex. Mouse-Down, Key-Press, etc. Decide sobre significado e acção a efectuar 71 Círculos Azuis: 0 Quadrados Vermelhos: 0 72 36
Círculos Azuis: 0 Quadrados Vermelhos: 0 73 Comunicação Círculos Azuis: 0 Quadrados Vermelhos: 0 Como se processa? 74 37
Comunicação Círculos Azuis: 0 Quadrados Vermelhos: 0 Comunica com vista 75 Comunicação Círculos Azuis: 0 Quadrados Vermelhos: 0 Comunica com vista Determina quais os objectos a manipular 76 38
Comunicação Círculos Azuis: 0 Quadrados Vermelhos: 0 Comunica com vista Determina quais os objectos a manipular Por ex. qual objecto seleccionado com rato 77 Comunicação Círculos Azuis: 0 Quadrados Vermelhos: 0 Comunica com vista Determina quais os objectos a manipular Por ex. qual objecto seleccionado com rato Chama métodos do modelo p/ fazer alterações 78 39
Comunicação Círculos Azuis: 0 Quadrados Vermelhos: 0 Comunica com vista Determina quais os objectos a manipular Por ex. qual objecto seleccionado com rato Chama métodos do modelo p/ fazer alterações efectua alteração e notifica vistas que devem actualizar-se 79 Combinar e e controlador fortemente acopladas Comunicação intensa entre os dois 80 40
Combinar e e controlador fortemente acopladas Comunicação intensa entre os dois Geralmente ocorrem aos pares i.e., cada vista precisa de um controlador dedicado 81 Combinar e e controlador fortemente acopladas Comunicação intensa entre os dois Geralmente ocorrem aos pares i.e., cada vista precisa de um controlador dedicado Muitas arquitecturas combinam os dois numa só classe 82 41
Porquê MVC? Combinar M+V+C numa só classe ou usar variáveis globais não escala. pode ter mais que uma vista Todas diferentes & precisam de ser actualizadas quando modelo é alterado 83 Porquê MVC? Separação simplifica a manutenção. Simples acrescentar uma nova vista mais tarde Pode ser necessária mais info no modelo, mas vistas antigas continuam a funcionar 84 42
Porquê MVC? Separação simplifica a manutenção. Simples acrescentar uma nova vista mais tarde Pode ser necessária mais info no modelo, mas vistas antigas continuam a funcionar Possível alterar uma vista mais tarde Por ex. desenhar formas em 3D Lembrem-se que cada vista processa selecção 85 Fluxo de acontecimentos o Comunicação entre componentes do MVC o Processamento dos acontecimentos de entrada Alteração do modelo Actualização das vistas o Exemplo: Criar uma nova forma 86 43
Fluxo de acontecimentos (cont.) Círculos Azuis: 0 Quadrados Vermelhos: 0 Assumam círculo azul seleccionado ( informa vista para realçar círculo) 87 Fluxo de acontecimentos (cont.) Premir botão do rato na posição desejada Círculos Azuis: 0 Quadrados Vermelhos: 0 88 44
Fluxo de acontecimentos (cont.) Premir botão do rato na posição desejada SG janelas identifica janela associada ao acontecimento Círculos Azuis: 0 Quadrados Vermelhos: 0 89 Fluxo de acontecimentos (cont.) Círculos Azuis: 0 Quadrados Vermelhos: 0 Premir botão do rato na posição desejada SG janelas identifica janela associada ao acontecimento da área de desenho recebe evento de click do rato 90 45
Fluxo de acontecimentos (cont.) Círculos Azuis: 0 Quadrados Vermelhos: 0 Verifica modo & vê círculo Premir botão do rato na posição desejada SG janelas identifica janela associada ao acontecimento da área de desenho recebe evento de click do rato 91 Fluxo de acontecimentos (cont.) Círculos Azuis: 0 Quadrados Vermelhos: 0 Verifica modo & vê círculo Premir botão do rato na posição desejada SG janelas identifica janela associada ao acontecimento da área de desenho recebe evento de click do rato Chama método CriaCirculo (no modelo) com argumentos posição (x,y) relativos à janela 92 46
Fluxo de acontecimentos (cont.) CriaCirculo acrescenta novo obj. à lista do modelo Círculos Azuis: 0 Quadrados Vermelhos: 0 93 Fluxo de acontecimentos (cont.) CriaCirculo acrescenta novo obj. à lista do modelo notifica lista de vistas da alteração de área de desenho Círculos Azuis: 0 Quadrados Vermelhos: 0 de contadores 94 47
Fluxo de acontecimentos (cont.) Círculos Azuis: 0 Quadrados Vermelhos: 0 CriaCirculo acrescenta novo obj. à lista do modelo notifica lista de vistas da alteração de área de desenho de contadores s notificam SG janelas dos danos 95 Fluxo de acontecimentos (cont.) Círculos Azuis: 0 Quadrados Vermelhos: 0 CriaCirculo acrescenta novo obj. à lista do modelo notifica lista de vistas da alteração de área de desenho de contadores s notificam SG janelas dos danos Mas não fazem alterações por agora 96 48
Fluxo de acontecimentos (cont.) s devolvem controlo ao modelo Círculos Azuis : 0 Quadrados Vermelhos: 0 97 Fluxo de acontecimentos (cont.) s devolvem controlo ao modelo retorna a controlador Círculos Azuis : 0 Quadrados Vermelhos: 0 98 49
Fluxo de acontecimentos (cont.) s devolvem controlo ao modelo retorna a controlador Círculos Azuis : 0 Quadrados Vermelhos: 0 retorna ao gestor de acontecimentos (event handler) 99 Fluxo de acontecimentos (cont.) s devolvem controlo ao modelo retorna a controlador Círculos Azuis : 0 Quadrados Vermelhos: 0 retorna ao gestor de acontecimentos (event handler) Gestor de acontecimentos descobre pedidos de reparação de danos pendentes & responde-lhes Se uma das vistas estiver oculta, pedidos de actualização desta serão ignorados 100 50
Fluxo de acontecimentos (cont.) Círculos Azuis: 1 Quadrados Vermelhos: 0 Gestor acontecimentos chama método de Redesenho da vista com área danificada 101 Fluxo de acontecimentos (cont.) Círculos Azuis: 1 Quadrados Vermelhos: 0 Gestor acontecimentos chama método de Redesenho da vista com área danificada redesenha todos os objectos do modelo dentro da área danificada 102 51
Resumo de Acontecimentos Acontecimentos de entrada tais como... teclado, localizador(rato), janela, etc. Árvores de interacção Quem recebe que acontecimentos Comunicação entre Widgets Directamente ou através do pai Três componentes do MVC Informação subjacente manipulada pela aplicação Representação visual da informação contida no modelo Processa interacção com utilizador e decide o que fazer 103 52