VII Desenvolvimento e Toolkits Developing User Interfaces, Cap. 5, Dan Olsen Melhor e Pior? 2 IPM 2007/2008 1
Melhor e Pior? 3 Melhor e Pior? 4 IPM 2007/2008 2
Resumo da Aula Anterior de Acontecimentos Acontecimentos de entrada tais como... teclado, localizador(rato), janela, etc. Sistemas de Gestão de Janelas Malha principal de acontecimentos serve para Encaminhar (despachar) acontecimentos Árvores de interacção servem para Descobrir quem recebe que acontecimentos Encaminhar acontecimentos Duas abordagens principais + Abaixo e + à frente / top-down Comunicação entre Widgets Directamente ou através do pai 5 Sumário Definição de MVC Porque precisamos de modelos? Alterando o ecrã Fluxo de acontecimentos Arrastar em cadências interactivas 6 IPM 2007/2008 3
Introdução Separação entre semântica da aplicação e apresentação (na fase de codificacao) Vantagens Portabilidade mesma aplicação em 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 7 Model-View-Controller Arquitectura para aplicações interactivas desenvolvida pela equipa Smalltalk no Xerox PARC Estrutura a aplicação para facilitar escalabilidade manutenção 8 IPM 2007/2008 4
Model-View-Controller Estado lógico interno da aplicação O modo como os dados são apresentados no ecrã Processa as entradas do utilizador 9 Aplicação Exemplo Círculos Azuis: 4 Quadrados Vermelhos: 2 10 IPM 2007/2008 5
Informação manipulada pela aplicaçã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 11 Concretiza representação visual do modelo Podem existir múltiplas vistas Por ex. vista de formas & vista numérica 12 IPM 2007/2008 6
Múltiplas s formas Círculos Azuis: 4 Quadrados Vermelhos: 2 Numérica 13 s Quando modelo alterado notifica vistas Para que vista possa mudar mais tarde (p.ex. acrescentar item) 14 IPM 2007/2008 7
Recebe todos os acontecimentos de entrada do utilizador Ex. Mouse-Down, Key-Press, etc. Decide sobre significado e acção a efectuar 15 Círculos Azuis: 0 Quadrados Vermelhos: 0 16 IPM 2007/2008 8
Círculos Azuis: 0 Quadrados Vermelhos: 0 17 Comunicação Círculos Azuis: 0 Quadrados Vermelhos: 0 Comunica com vista Determina quais os objectos a manipular Por ex. que objecto seleccionado com rato Chama métodos do modelo para fazer alterações efectua alteração + notifica vistas que devem actualizar-se 18 IPM 2007/2008 9
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 19 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 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 20 IPM 2007/2008 10
Acrescentar novas vistas Círculos Azuis: 4 Quadrados Vermelhos: 2 21 Alterar a Visualização Como redesenhar o ecrã quando uma forma se desloca? (Relação entre e Sistema de Gestão de Janelas) 22 IPM 2007/2008 11
Como deslocar quadrado? Ideias? Círculos Azuis: 4 Quadrados Vermelhos: 2 23 Pintar com cor fundo e redesenhar Círculos Azuis: 4 Quadrados Vermelhos: 2 Funciona bem neste caso 24 IPM 2007/2008 12
Mover quadrado vermelho Círculos Azuis: 4 Quadrados Vermelhos: 2 25 Apagar c/cor de fundo e redesenhar Buraco aqui! Quadrado sobreposto ao círculo! Círculos Azuis: 4 Quadrados Vermelhos: 2 26 IPM 2007/2008 13
Alterar o ecrã Apagar & redesenhar não funciona Pintar com cor do fundo para apagar deixa buracos Desenhar a forma na nova posição ignora prioridades Como fazer correctamente? Mover no modelo & depois redesenhar vista Alterar posição das formas no modelo preserva formas com prioridade desejada Instruir todas as vistas para se redesenharem por ordem Limitações? Lento para desenhos grandes / complexos -> tremor solução? 27 Método Danos / Redesenho informa SG janelas dos danos Áreas que necessitam de actualização não as redesenha por agora SG janelas Agrupa actualizações Recorta-as contra a porção visível da janela Na próxima vez que estiver a aguardar entrada SG janelas chama método de Redesenho da janela Passa info da região que necessita de ser actualizada 28 IPM 2007/2008 14
Aplicação do Método Dano prévio Altera posição no Dano novo Círculos Azuis: 4 Quadrados Vermelhos: 2 Redesenho 29 Fluxo de acontecimentos Comunicação entre componentes do MVC Processamento dos acontecimentos de entrada Alteração do modelo Actualização das vistas Exemplo: Criar uma nova forma 30 IPM 2007/2008 15
Fluxo de acontecimentos (cont.) Círculos Azuis: 0 Quadrados Vermelhos: 0 Assumam círculo azul seleccionado ( informa vista para realçar círculo) 31 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 32 IPM 2007/2008 16
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 33 Fluxo de acontecimentos (cont.) Círculos Azuis : 0 Quadrados Vermelhos: 0 s devolvem controlo ao modelo retorna ao controlador 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 34 IPM 2007/2008 17
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 35 Arrasto a velocidades interactivas Método Óbvio Danifica prévio, desloca alguns pixeis, danifica novo, actualiza vista Problemas? Pode ser demasiado lento Qual a velocidade a que devemos fazêlo para parecer contínuo? 200 ms ou menos 36 IPM 2007/2008 18
Arrasto a velocidades interactivas Soluções? Não desenhar objecto, usar contorno (ou rectângulo a tracejado) usar XOR para apagar rapidamente P = XOR (D,P) P = XOR (D,P ) XOR+XOR = complemento (problemas com a cor - contraste) save under guardar zona da memória de visualização antes de mover Repõe a seguir para apagar objecto Menos problemático hoje devido às placas gráficas RÁPIDAS 37 Resumo 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 Dois componentes frequentemente combinados & controlador ocorrem sempre aos pares MVC estrutura uma aplicação de modo a ser Fácil de escalar podem existir múltiplas vistas para um modelo Fácil de manter é fácil acrescentar vistas a posteriori 38 IPM 2007/2008 19