Transcript
Page 1: Padrões Arquiteturais - MVC, MVP e MVVM

Curso: Tecnologia em Análise e Desenvolvimento de SistemasDisciplina: Arquitetura de SoftwareProf. Msc. Petrônio Cândido Lima e SilvaDupla: Aline Ferreira e Aricelio de SouzaTurma: 5º Período

Page 2: Padrões Arquiteturais - MVC, MVP e MVVM

- Histórico;

- Fundamentação Teórica;

- Exemplo de Implementação;

Padrões de Arquitetura: MVC, MVP e MVVM

Page 3: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVC

• Em 1979 Trygve Reenskaug sugeriu o padrão TMVE ( Thing–Model–View–Editor), predecessor do atual MVC,em razão da impossibilidade, de reutilização de código, na época.

Page 4: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVC

o Thing (Coisa): algo de interesse do usuário;

o Model: define a representação de uma abstração na forma de dados

o View: representações visuais de um dado Modelo

o Editor : Interface entre o usuário e a view;

Page 5: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVC

• No mesmo ano propôs uma evolução do seu até então padrão MVCE (Model- View-Controller-Editor), onde:

• Model: é definido como um objeto que representa o conhecimento;

Page 6: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVC

• View: é a representação visual de uma Model;

• Controller: conexão entre o usuário e o sistema;

• Editor: Controller que permite ao usuário alterar informações apresentadas na view;

Page 7: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVC

• Está ideia foi posteriormente implementada por Jim Althoff, com algumas modificações, sendo o atual padrão MVC ;

Page 8: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVC

• A arquitetura MVC (Model-View-Controller), consiste na divisão de uma aplicação em três camadas físicas, separando a informação de sua apresentação.

Page 9: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVC

View (Apresentação)

● Camada de interface com usuário;● Inclui os elementos de exibição no cliente : HTML, XML,

ASP, Applets.

Model (Lógica de Aplicação)

● Modela os dados e o comportamento por atrás do processo de negócios;

● Responsável pela manipulação de dados;

Controller (Controle)

● Intermediaria entre a camada de apresentação e a lógica;● Controla e mapeia as ações;

Page 10: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVC

Page 11: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVC

• É indicada para sistemas maiores;

• Torna a aplicação escalavél;

• Model, view e controller são independentes;

Page 12: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 13: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo - Sistema de Votação

Page 14: Padrões Arquiteturais - MVC, MVP e MVVM
Page 15: Padrões Arquiteturais - MVC, MVP e MVVM
Page 16: Padrões Arquiteturais - MVC, MVP e MVVM
Page 17: Padrões Arquiteturais - MVC, MVP e MVVM
Page 18: Padrões Arquiteturais - MVC, MVP e MVVM
Page 19: Padrões Arquiteturais - MVC, MVP e MVVM
Page 20: Padrões Arquiteturais - MVC, MVP e MVVM
Page 21: Padrões Arquiteturais - MVC, MVP e MVVM
Page 22: Padrões Arquiteturais - MVC, MVP e MVVM
Page 23: Padrões Arquiteturais - MVC, MVP e MVVM
Page 24: Padrões Arquiteturais - MVC, MVP e MVVM
Page 25: Padrões Arquiteturais - MVC, MVP e MVVM
Page 26: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVP

• O MVP foi visto a primeira vez na IBM, e posteriormente na Taligent, onde era utilizado para o desenvolvimento de aplicações em C++, tendo posteriormente migrado para JAVA.

Page 27: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVP

• Em 1997 Andy Bower e Blair McGlashan da Dolphin Smalltalk adaptaram o padrão MVP para formar a base para seu framework de interface de usuário.

• Em 2006 foi inserido pela Microsoft na documentação do .NET framework.

Page 28: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVP

• O padrão MVP (Model-View-Presenter) , possui como objetivo, separar a camada de apresentação das camadas de dados e regras de negócio.

Page 29: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVP

Page 30: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVP

View ● Interface com o usuário;● implementa uma interface que expõe os campos e

eventos que o Presenter necessita;

Model ● São os objetos que serão manipulados;● Um objeto Model implementa uma interface que expõe

os campos que o Presenter irá atualizar quando sofrer alguma alteração na View.

Presenter ● É a ligação entre a Model e a view;● Ele é encarregado de atualizar a View quando o Model é

alterado e de sincronizar o Model em relação ao View.

Page 31: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVP

• O MVP diferencia- se do MVC no conceito, pois as funções do Presenter são semelhantes a do Controller.

• A manutenção do sistema é muito mais simples, já que, as responsabilidades estão divididas em classes distintas.

Page 32: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 33: Padrões Arquiteturais - MVC, MVP e MVVM
Page 34: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 35: Padrões Arquiteturais - MVC, MVP e MVVM
Page 36: Padrões Arquiteturais - MVC, MVP e MVVM
Page 37: Padrões Arquiteturais - MVC, MVP e MVVM
Page 38: Padrões Arquiteturais - MVC, MVP e MVVM
Page 39: Padrões Arquiteturais - MVC, MVP e MVVM
Page 40: Padrões Arquiteturais - MVC, MVP e MVVM
Page 41: Padrões Arquiteturais - MVC, MVP e MVVM
Page 42: Padrões Arquiteturais - MVC, MVP e MVVM
Page 43: Padrões Arquiteturais - MVC, MVP e MVVM
Page 44: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 45: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 46: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 47: Padrões Arquiteturais - MVC, MVP e MVVM
Page 48: Padrões Arquiteturais - MVC, MVP e MVVM
Page 49: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 50: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 51: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 52: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVVM

• O MVVM (Model-View-ViewModel) é um padrão criado em 2005 por John Gossman, um dos arquitetos do WPF e Silverlight na Microsoft.

• Este padrão é identico ao MVP e é específico para a arquitetura do WPF e Silverligh.

Page 53: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVVM

• Também é uma especialização do padrão PM (Presentation-Model), introduzido por Martin Fowler em 2004.

Page 54: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVVM

Page 55: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVVM

Model ● Representa o conceito do negócio;

View

● Controle gráfico responsável pela apresentação de dados ao usuário;

● Uma view pode ser uma janela WPF, uma página do Silverlight, ou apenas um modelo de controle de dados XAML.

View- Model

● Contém a lógica de interface com o usuário, os comandos, os eventos e uma referência ao modelo;

● A atualização de dados na interface é feita por um componente fornecido pelo WPF e Silverligh;

Page 56: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVVM

• A comunicação entre as camadas view e view- model é feita por um mecanismo denominado binding;

Page 57: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVVM

Page 58: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVVM

• A utilização da arquitetura MVVM requer a divisão, do código da aplicação em diferentes blocos denominados camadas;

• Código mais flexível, e fácil de testar;

Page 59: Padrões Arquiteturais - MVC, MVP e MVVM

Padrão MVVM

Page 60: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 61: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 62: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 63: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 64: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo<UserControl x:Class="Aplicando_MVVM.View.ClienteView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"> <Grid> <StackPanel HorizontalAlignment="Left"> <ItemsControl ItemsSource="{Binding Path=Clientes}"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal"> <TextBox Text="{Binding Path=Nome, Mode=TwoWay}" Width="100" /> <TextBox Text="{Binding Path=Email, Mode=TwoWay}" Width="150" /> </StackPanel> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> </Grid> </UserControl>

Page 65: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 66: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 67: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 68: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo<Window x:Class="Aplicando_MVVM.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:view="clr-namespace:Aplicando_MVVM.View" Title="Usando o Padrão MVVM" Height="350" Width="525" Loaded="Window_Loaded"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="460*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="40"/> <RowDefinition Height="80*"/> </Grid.RowDefinitions> <Border CornerRadius="5" BorderBrush="SteelBlue" BorderThickness="2" Grid.Row="0"> <Label Height="30" Width="400" Content="Exemplo de utilização do Padrão MVVM - WPF" Background="Aqua"/> </Border> <Border CornerRadius="5" BorderBrush="SteelBlue" BorderThickness="2" Grid.Row="1" Margin="0,5,0,0" Background="Beige"> <view:ClienteView x:Name="ClienteView"/> </Border> </Grid> </Window>

Page 69: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 70: Padrões Arquiteturais - MVC, MVP e MVVM

Exemplo

Page 71: Padrões Arquiteturais - MVC, MVP e MVVM

[1] de Souza, Carlos Eduardo Ferreira. Entendendo o Pattern Model-View-ViewModel (MVVM). Nov 2010. Disponível em: <http://imasters.com.br/artigo/18900/desenvolvimento/entendendo-o-pattern-model-view-viewmodel-mvvm/>. Acesso em: 26 Abr. 2014.

[2] LUCIANO, Josué; ALVES, Wallison Joel Barabará. Padrão de Arquitetura MVC: Model-View-Controller. 2011, Disponível em: <http://www.unifafibe.com.br/revistasonline/arquivos/revistaepeqfafibe/sumario/20/16112011142249.pdf>. Acesso em: 26 Abr. 2014.

[3] Macoratti, José Carlos. Padrões de Projeto : O modelo MVC - Model View Controller. Disponível em: <http://www.macoratti.net/vbn_mvc.htm>. Acesso em: 26 Abr. 2014.

[4] Macoratti, José Carlos. ASP.NET - MVC - Model-View-Controller – Introdução. Disponível em: <http://www.macoratti.net/08/06/asp_mvc1.htm>. Acesso em: 26 Abr. 2014.

[5] Quicoli, Paulo. O Padrão MVP (Model-View-Presenter). Disponível em: <http://www.devmedia.com.br/o-padrao-mvp-model-view-presenter/3043>. Acesso em: 26 Abr. 2014.

Referências

Page 72: Padrões Arquiteturais - MVC, MVP e MVVM

[6] ODISI, Francis Benito. Geração de código para acesso a dados utilizando os padrões MVC e DAO. Nov 2008. Disponível em: <http://siaibib01.univali.br/pdf/Francis%20Benito%20Odisi.pdf>. Acesso em: 26 Abr. 2014.

[7] MAGELA, R. Engenharia de software aplicada: fundamentos. Rio de Janeiro: Alta Books, 2006.

[8] DE ALMEIDA, Rodrigo Rebouças. Model-View-Controller (MVC). Disponível em: <http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/arqu/mvc/mvc.htm>. Acesso em: 26 Abr. 2014.

[9] FOWLER, Martin. GUI Arquitectures. JUL 2006. Disponível em: <http://www.martinfowler.com/eaaDev/uiArchs.html>. Acesso em: 27 Abr. 2014.

[10] POTEL, Mike. MVP: Model-View-Presenter - The Taligent Programming Model for C++ and Java. 1996. Disponível em: <http://www.wildcrest.com/Potel/Portfolio/mvp.pdf>. Acesso em: 27 Abr. 2014.

[11] MARTINS, Daniel Fernandes .Apresentando Model-View-Presenter, o MVC focado na visualização. Out 2012. Disponível em: <http://javafree.uol.com.br/artigo/871446/Apresentando-ModelViewPresenter-o-MVC-focado-na-visualizacao.html>. Acesso em: 28 Abr. 2014.

Referências

Page 73: Padrões Arquiteturais - MVC, MVP e MVVM

[12] C.M., Kelson. MVP (Model-View-Presenter/Modelo-Visão-Apresentador). Mai 2012. Disponível em: <http://kelsoncm.com/tic/mvp-model-view-presentermodelo-visao-apresentador/>. Acesso em: 28 Abr. 2014.

[13] Macoratti, José Carlos. NET - Apresentando o padrão Model View ViewModel. Disponível em: <http://www.macoratti.net/11/06/pp_mvvm1.htm>. Acesso em: 28 Abr. 2014.

[14] Balivo, Jefferson. Desvendando o padrão MVVM. Set 2012. Disponível em: <http://www.balivo.com.br/desvendando-o-padrao-mvvm/>. Acesso em: 28 Abr. 2014.

Referências

Page 74: Padrões Arquiteturais - MVC, MVP e MVVM

Obrigado


Recommended