VII Desenvolvimento e Toolkits. VII.2-Model View Controller

(1)

VII – Desenvolvimento e Toolkits

VII.2-Model View Controller

Developing User Interfaces, Cap. 5,

Dan Olsen

2 VII.2-Model View Controller

(2)

Melhor e Pior?

(3)

Resumo da Aula Anterior

• Modelo 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

Sumário

• Definição de MVC

• Porque precisamos de modelos?

• Alterando o ecrã

• Fluxo de acontecimentos

(4)

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

Modelo

Vista

Controlador

Model-View-Controller

• Arquitectura para aplicações interactivas

– desenvolvida pela equipa Smalltalk no Xerox PARC

• Estrutura a aplicação para facilitar

– escalabilidade – manutenção

(5)

Model-View-Controller

• Modelo

– Estado lógico interno da aplicação

• Vista

– O modo como os dados são

apresentados no ecrã

• Controlador

– Processa as entradas do utilizador

Aplicação Exemplo

Círculos Azuis: 4

(6)

Modelo

Vista Controlador

Modelo

• 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

Vista

• Concretiza representação visual do modelo

• Podem existir múltiplas vistas

– Por ex. vista de formas & vista numérica

Modelo

Vista

(7)

Múltiplas Vistas

Vis

ta

for

ma

s

Vista

Numér

_ica

Círculos Azuis: 4

Quadrados Vermelhos: 2

Vistas

• Quando modelo alterado notifica

vistas

– Para que vista possa mudar mais tarde

(p.ex. acrescentar item)

Modelo

Vista

(8)

Controlador

• Recebe todos os acontecimentos de

entrada do utilizador

– Ex. Mouse-Down, Key-Press, etc.

• Decide sobre significado e acção a efectuar

Modelo Vista Controlador

Controlador

Círculos Azuis: 0

Quadrados Vermelhos: 0

(9)

Controlador

Círculos Azuis: 0

Quadrados Vermelhos: 0

Comunicação Controlador

• 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

– Modelo efectua alteração + notifica vistas que devem actualizar-se Modelo Vista Controlador Círculos Azuis: 0 Quadrados Vermelhos: 0

(10)

Modelo

Vista

Controlador

Combinar Vista e Controlador

• Vista 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

Porquê MVC?

• Combinar M+V+C numa só classe ou usar

variáveis globais não

escala.

– Modelo 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

(11)

Acrescentar novas vistas

Círculos Azuis: 4

Quadrados Vermelhos: 2

Alterar a Visualização

• Como redesenhar o ecrã quando

uma forma se desloca?

(Relação entre Vista e Sistema de

Gestão de Janelas)

(12)

Como deslocar quadrado?

Círculos Azuis: 4

Quadrados Vermelhos: 2

Ideias…?

Pintar com cor fundo e redesenhar

Círculos Azuis: 4

(13)

Mover quadrado vermelho

Círculos Azuis: 4

Quadrados Vermelhos: 2

Apagar c/cor de fundo e redesenhar

Círculos Azuis: 4

Quadrados Vermelhos: 2

Quadrado sobreposto ao círculo! Buraco aqui!

(14)

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

– 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?

Método Danos / Redesenho

• Vista informa SG janelas dos danos

– Áreas que necessitam de actualização – Vista 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

(15)

Círculos Azuis: 4

Quadrados Vermelhos: 2

Aplicação do Método

• Dano prévio • Altera posição no Modelo • Dano novo • Redesenho 30 VII.2-Model View Controller

Fluxo de acontecimentos

• Comunicação entre componentes do MVC

• Processamento dos acontecimentos de

entrada

– Alteração do modelo

– Actualização das vistas

(16)

Fluxo de acontecimentos (cont.)

• Assumam círculo azul seleccionado

(Controlador informa vista para realçar círculo)

Círculos Azuis: 0

Quadrados Vermelhos: 0

Fluxo de acontecimentos (cont.)

• Premir botão do rato na posição desejada

• SG janelas identifica janela associada ao acontecimento

• Controlador da área de desenho recebe evento de click do rato

Círculos Azuis: 0

• Verifica modo & vê “círculo”

• Chama método CriaCirculo (no modelo) com

Modelo

Vista

(17)

Fluxo de acontecimentos (cont.)

• Vistas notificam SG janelas dos danos

–Mas não fazem alterações por agora

• CriaCirculo acrescenta

novo obj. à lista do modelo

• Modelo notifica lista de vistas da alteração

– Vista de área de desenho

– Vista de “contadores” Círculos Azuis: 0 Quadrados Vermelhos: 0 Modelo Vista Controlador 34 VII.2-Model View Controller

Fluxo de acontecimentos (cont.)

• Vistas devolvem controlo ao modelo • Modelo retorna ao controlador • Controlador retorna ao gestor de acontecimentos (event handler) Círculos Azuis : 0 Quadrados Vermelhos: 0

• 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

(18)

Fluxo de acontecimentos (cont.)

• Gestor acontecimentos

chama método de

Redesenho da vista com

área danificada

• Vista redesenha todos

os objectos do modelo

dentro da área

danificada

Círculos Azuis: 1

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?

(19)

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

Resumo

• Três componentes do MVC – Modelo

• Informação subjacente manipulada pela aplicação

– Vista

• Representação visual da informação contida no modelo

– Controlador

• Processa interacção com utilizador e decide o que fazer

• Dois componentes frequentemente combinados – Vista & 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