1.
Utilizando o Padrão PresentationModel em Aplicações Flex<br />Eric Cavalcanti<br />ecavalcanti@gmail.com<br />@ericoc<br />

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.
O Problema<br />

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.
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.
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.
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.
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.
Solução<br />

10.
PresentationModel<br />

11.
O que é o PresentationModel?<br />

12.
PresentationModel em uma frase!<br /> “É uma forma de mover o estado e a lógica da view para uma outra classe.”<br />

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.
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.
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.
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.
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.
E como é feito esse negócio da Viewobservar e representar o PresentationModel?<br />

19.
Simples!<br />

20.
Utilizando Data Binding!<br />

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.
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.
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.
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.
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.
E o quanto de estado e lógica devem ser extraídas da View?<br />

27.
Tanto quanto possível!<br />

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.
Mas certos tipos de lógica talvez seja melhor serem deixadas na View<br />

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.
Abordagens do PresentationModel<br />Hierárquica<br />Componentizada<br />

32.
Hierárquica<br />

33.
Componentizada<br />

34.
Resposta à mudanças<br />Hierárquica<br />View 3 precisa ser movida para View 2<br />

35.
Resposta à mudanças<br />Componentizada<br />View 3 precisa ser movida para View 2<br />

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.
Código por favor!!<br />

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.
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.
Obrigado!<br />Eric Cavalcanti<br />ecavalcanti@gmail.com<br />@ericoc<br />