0
Utilizando o Padrão PresentationModel em Aplicações Flex<br />Eric Cavalcanti<br />ecavalcanti@gmail.com<br />@ericoc<br />
Sobre mim<br />Eric Cavalcanti<br />Mestre em Engenharia de Software pelo CESAR.EDU<br />Certificado ScrumMaster pela Scru...
O Problema<br />
O Problema<br />Geralmente uma View em um aplicação contém controles que exibem dados do domínio de sua aplicação.<br />O ...
O Problema<br />A View geralmente:<br /> recupera os dados do domínio<br /> manipula eventos dos usuários<br /> altera out...
O Problema<br />Incluir todo esse código na View pode torná-la uma classe complexa, difícil de manter e testar.<br />Ocasi...
Motivação<br />Você quer aumentar a cobertura dos seus testes unitários automáticos (Views são difíceis de testar automati...
Motivação<br />Você quer permitir que o profissional de designer possa facilmente criar e modificar o visual da interface ...
Solução<br />
PresentationModel<br />
O que é o PresentationModel?<br />
PresentationModel em uma frase!<br />	“É uma forma de mover o estado e a lógica da view para uma outra classe.”<br />
Uma imagem vale mais do que mil palavras!<br />View<br />PM<br />Model<br />ContatoDetalheView.mxml<br />ContatoDetalhePM....
Principais características<br />O estado fica no PresentationModel<br />A lógica fica no PresentationModel<br />A Viewobse...
Mais sobre o PresentationModel<br />Um PresentationModel é uma "abstração" de uma View<br />O PresentationModel representa...
ContatoDetalheView.mxml<br /><fx:Script><br /><![CDATA[<br />import br.com.flexmania.event.ContatoEvent;<br />import br.co...
ContatoDetalhePM.as<br />[Bindable]<br />publicclassContatoDetalhePMextendsAbstractPM<br />{<br />publicvarisAtualizando:B...
E como é feito esse negócio da Viewobservar e representar o PresentationModel?<br />
Simples!<br />
Utilizando Data Binding!<br />
Data Binding para o PresentationModel<br /><fx:Script><br />...<br />[Bindable]<br />publicvarpm:ContatosListaPM<br />...<...
Bidirecional (two-way) data binding do Flex 4<br /><fx:Declarations><br /><vo:ContatoVO id="contato" email="{pm.contatoAtu...
Testabilidade<br />Uma  vez que as classes PresentationModel são totalmente desacopladas da View, a lógica que elas contém...
Melhoria na separação de responsabilidades<br />Se cada PresentationModel representa uma abstração de uma View, então, pod...
Classe base do PresentationModel<br />publicclassAbstractPMextendsEventDispatcher<br />{<br />privatevarfirstShow:Boolean ...
E o quanto de estado e lógica devem ser extraídas da View?<br />
Tanto quanto possível!<br />
Exemplos<br />Dados da View (ex. uma lista de produtos filtrada)<br />O Estado da View (ex. o selectedIndex da ViewStack)<...
Mas certos tipos de lógica talvez seja melhor serem deixadas na View<br />
Comportamento fortemente acoplados a parte gráfica ou ao framework como por exemplo animações e operações de Drag-and-Drop...
Abordagens do PresentationModel<br />Hierárquica<br />Componentizada<br />
Hierárquica<br />
Componentizada<br />
Resposta à mudanças<br />Hierárquica<br />View 3 precisa ser movida para View 2<br />
Resposta à mudanças<br />Componentizada<br />View 3 precisa ser movida para View 2<br />
Arquitetura da Aplicação<br />ViewLayer<br />PresentationLayer<br />DomainLayer<br />IntegrationLayer<br />Model<br />View...
Código por favor!!<br />
Conclusão<br />O PresentationModel é um padrão útil para aplicações Flex testáveis<br />Ao mover o estado e a lógica usado...
Referências<br />Presentation Model, Martin Fowler, http://martinfowler.com/eaaDev/PresentationModel.html<br />Presentatio...
Obrigado!<br />Eric Cavalcanti<br />ecavalcanti@gmail.com<br />@ericoc<br />
Upcoming SlideShare
Loading in...5
×

Utilizando o Padrão Presentation Model em Aplicações Flex

2,928

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Grande Eric!!
    kra achei muito interessante este padrao, vou baixar para dar uma estudada melhor!
    abracao

    Sandro Marques
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,928
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
65
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Utilizando o Padrão Presentation Model em Aplicações Flex"

  1. 1. Utilizando o Padrão PresentationModel em Aplicações Flex<br />Eric Cavalcanti<br />ecavalcanti@gmail.com<br />@ericoc<br />
  2. 2. Sobre mim<br />Eric Cavalcanti<br />Mestre em Engenharia de Software pelo CESAR.EDU<br />Certificado ScrumMaster pela ScrumAlliance<br />Engenheiro de Software da ID S/A<br />Background<br />Trabalha com desenvolvimento de Software há mais de 10 anos . <br />Instrutor Adobe Flex da Imedia Brasil. <br />Professor no Curso de Especialização em Gestão Ágil de Projetos do CESAR.EDU e da Pós-Graduaçaõ em Front-EndEngineering & Design da Faculdade Marista<br />Idealizador e principal desenvolvedor do projeto FireScrum (Flex e Java) <br />Idealizador do FireKanban (Flex e Java)<br />
  3. 3. O Problema<br />
  4. 4. O Problema<br />Geralmente uma View em um aplicação contém controles que exibem dados do domínio de sua aplicação.<br />O usuário pode alterar os dados e submeter tais alterações.<br />
  5. 5. O Problema<br />A View geralmente:<br /> recupera os dados do domínio<br /> manipula eventos dos usuários<br /> altera outros controles da View em resposta a tais eventos<br />submete as alterações efetuadas nos dados do domínio.<br />
  6. 6. O Problema<br />Incluir todo esse código na View pode torná-la uma classe complexa, difícil de manter e testar.<br />Ocasionalmente, seria difícil compartilhar o código com uma outra View que necessita do mesmo comportamento.<br />
  7. 7. Motivação<br />Você quer aumentar a cobertura dos seus testes unitários automáticos (Views são difíceis de testar automaticamente).<br />Você quer compartilhar o código entre Views que necessitam do mesmo comportamento<br />Você quer separar a lógica de negócio da lógica de interface do usuário (UI) para que o código fique mais fácil de entender e manter.<br />
  8. 8. Motivação<br />Você quer permitir que o profissional de designer possa facilmente criar e modificar o visual da interface do usuário da sua aplicação.<br />Os dados que você quer exibir necessitam de alguma conversão, validação ou formatação antes de serem exibidos na interface do usuário.<br />
  9. 9. Solução<br />
  10. 10. PresentationModel<br />
  11. 11. O que é o PresentationModel?<br />
  12. 12. PresentationModel em uma frase!<br /> “É uma forma de mover o estado e a lógica da view para uma outra classe.”<br />
  13. 13. Uma imagem vale mais do que mil palavras!<br />View<br />PM<br />Model<br />ContatoDetalheView.mxml<br />ContatoDetalhePM.as<br />ContatoModel.as<br />
  14. 14. Principais características<br />O estado fica no PresentationModel<br />A lógica fica no PresentationModel<br />A Viewobserva o PresentationModel e atualiza de acordo com o mesmo<br />O PresentationModelobserva o Model<br />A View"conhece" o PresentationModel<br />O PresentationModel"não conhece" a View<br />Padrão recomendado pela Adobe com o novo Cairngorm 3.<br />Padrão recomendado pela Microsoft para aplicações WPF e Silverlight com o nome de Model-View-ViewModel (MVVM)<br />
  15. 15. Mais sobre o PresentationModel<br />Um PresentationModel é uma "abstração" de uma View<br />O PresentationModel representa o comportamento e o estado de uma View<br />A View representa a projeção ou a renderização do PresentationModel na tela<br />
  16. 16. ContatoDetalheView.mxml<br /><fx:Script><br /><![CDATA[<br />import br.com.flexmania.event.ContatoEvent;<br />import br.com.flexmania.event.ExibirTelaPrincipalEvent;<br />import br.com.flexmania.model.presentation.ContatoDetalhePM;<br />[Bindable]<br />publicvarpm:ContatoDetalhePM;<br />]]><br /></fx:Script><br />
  17. 17. ContatoDetalhePM.as<br />[Bindable]<br />publicclassContatoDetalhePMextendsAbstractPM<br />{<br />publicvarisAtualizando:Boolean;<br />publicvarcontatoAtual:ContatoVO;<br />publicfunctionmanterContato(contato:ContatoVO):void<br /> {<br />...<br /> }<br />...<br />AgendaFlexMania.mxml (Application)<br /><presentation:ContatoDetalhePM id="contatoDetalhePM" <br />contatoAtual="{_model.contatoModel.contatoAtual}"<br />isAtualizando="{_model.contatoModel.isAtualizando}"/><br />
  18. 18. E como é feito esse negócio da Viewobservar e representar o PresentationModel?<br />
  19. 19. Simples!<br />
  20. 20. Utilizando Data Binding!<br />
  21. 21. Data Binding para o PresentationModel<br /><fx:Script><br />...<br />[Bindable]<br />publicvarpm:ContatosListaPM<br />...<br /></fx:Script><br /><mx:DataGridwidth="100%" id="dgContato" dataProvider="{pm.contatos}" <br />doubleClickEnabled="true" <br />change="pm.selecionarContato(dgContato.selectedItemasContatoVO);“<br />doubleClick="pm.exibirAtualizarContato(dgContato.selectedItemasContatoVO)"><br /><mx:columns><br /><mx:DataGridColumnheaderText="Nome" dataField="nome" width="40"/><br />...<br /></mx:columns><br /></mx:DataGrid><br />
  22. 22. Bidirecional (two-way) data binding do Flex 4<br /><fx:Declarations><br /><vo:ContatoVO id="contato" email="{pm.contatoAtual.email}" <br /> nome="{pm.contatoAtual.nome}"<br /> telefone="{pm.contatoAtual.telefone}"<br />codigo="{pm.contatoAtual.codigo}"/><br /></fx:Declarations><br /><mx:Form width="100%" height="118" ><br /> <mx:FormItemlabel="Nome"><br /> <mx:TextInput width="236" id="txtNome" text="@{contato.nome}"/><br /> </mx:FormItem><br /> <mx:FormItemlabel="Telefone"><br /> <mx:TextInput width="236" id="txtTelefone" text="@{contato.telefone}"/><br /> </mx:FormItem><br /> <mx:FormItemlabel="E-mail"><br /> <mx:TextInput width="236" id="txtEmail" text="@{contato.email}"/><br /> </mx:FormItem><br /></mx:Form><br /><s:Button label="Submeter" width="93" click="pm.manterContato(contato)" /><br />
  23. 23. Testabilidade<br />Uma vez que as classes PresentationModel são totalmente desacopladas da View, a lógica que elas contém são mais facilmente testadas.<br />
  24. 24. Melhoria na separação de responsabilidades<br />Se cada PresentationModel representa uma abstração de uma View, então, podemos considerar que a união dos PresentationModel podem ser consideradas como o Modelo de toda sua User Interface.<br />Comportamentos comuns de apresentação podem ser refatorados em classes base e compartilhada por todos os PresentationModel.<br />
  25. 25. Classe base do PresentationModel<br />publicclassAbstractPMextendsEventDispatcher<br />{<br />privatevarfirstShow:Boolean = true;<br />protectedvardispatcher:IEventDispatcher = AppEventDispatcher.instance;<br />publicfunctionhandleShow():void<br /> {<br />if(firstShow)<br /> {<br />handleFirstShow();<br />firstShow = false;<br /> } else {<br />handleSubsequentShows();<br /> } <br /> }<br />publicfunctionhandleFirstShow():void<br /> {<br /> // to beoverriden<br /> }<br />publicfunctionhandleSubsequentShows():void<br /> {<br /> // to beoverriden<br /> }<br />}<br />
  26. 26. E o quanto de estado e lógica devem ser extraídas da View?<br />
  27. 27. Tanto quanto possível!<br />
  28. 28. Exemplos<br />Dados da View (ex. uma lista de produtos filtrada)<br />O Estado da View (ex. o selectedIndex da ViewStack)<br />Lógica da View (ex. determinar o estado de um botão em um form)<br />
  29. 29. Mas certos tipos de lógica talvez seja melhor serem deixadas na View<br />
  30. 30. Comportamento fortemente acoplados a parte gráfica ou ao framework como por exemplo animações e operações de Drag-and-Drop, são candidatas a ficarem na View<br />
  31. 31. Abordagens do PresentationModel<br />Hierárquica<br />Componentizada<br />
  32. 32. Hierárquica<br />
  33. 33. Componentizada<br />
  34. 34. Resposta à mudanças<br />Hierárquica<br />View 3 precisa ser movida para View 2<br />
  35. 35. Resposta à mudanças<br />Componentizada<br />View 3 precisa ser movida para View 2<br />
  36. 36. Arquitetura da Aplicação<br />ViewLayer<br />PresentationLayer<br />DomainLayer<br />IntegrationLayer<br />Model<br />View<br />Business Delegate<br />CMD<br />PM<br />Controller<br />CMD<br />Back-End<br />CMD<br />
  37. 37. Código por favor!!<br />
  38. 38. Conclusão<br />O PresentationModel é um padrão útil para aplicações Flex testáveis<br />Ao mover o estado e a lógica usados na apresentação de dados e na manipulação de eventos do usuário para o PresentationModel, ele pode ser mais facilmente testado e entendido do que colocado diretamente na View no bloco Script.<br />Como a interface com usuário é algo muito volátil é preferível utilizar a abordagem componentizada em vez da hierárquica<br />
  39. 39. Referências<br />Presentation Model, Martin Fowler, http://martinfowler.com/eaaDev/PresentationModel.html<br />Presentation Patterns - Presentation Model, Paul Williams, http://blogs.adobe.com/paulw/archives/2007/10/presentation_pa_3.html<br />Applying the Presentation Model in Flex, Tom Sugden, http://blogs.adobe.com/tomsugden/2009/08/applying_the_presentation_mode.html<br />PresentationModel, Microsoft, http://msdn.microsoft.com/en-us/library/ff647585.aspx<br />Flex Client Architecture & Best Practices, Børre Wessel - Adobe Consulting, http://blogs.adobe.com/borre/Flex_Client_Architecture_and_Best_Practices.pdf<br />Flex Development with Cairngorm, Alistair McLeod, http://blogs.adobe.com/amcleod/2008/12/max_milan_-_fle.html<br />Refatorando o ModelLocator do Cairngorm, Pablo Souza, http://blog.dclick.com.br/2008/11/16/refatorando-o-modellocator-do-cairngorm-parte-i/pt/<br />
  40. 40. Obrigado!<br />Eric Cavalcanti<br />ecavalcanti@gmail.com<br />@ericoc<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×