O MVC é um padrão quer de desenho quer de arquitectura usando na construção de software. O uso deste padrão é muito vasto, e entende-se como o tratamento separado da lógica de programação e a interface grafica do proprio software que resulta numa enorme versatilidade da aplicação que torna muito mais facil modificar o aspecto visual da aplicação ou o código sem criar dependencias/afectação entre eles lidando facilmente com a comunicação entre utilizador, interface gráfica e o código da nossa aplicação.

Entendendo as siglas;

• Model – Representa a informação / dados da aplicação e as “regras/definições” para manipular / trabalhar com esses mesmos dados da aplicação. No flex, geralmente class pessoais ou classes de serviços para lidar com um backend.
• View – Representa os elementos gráficos da nossa aplicação, como inputText, datagrid, textArea, no flex engloba states, viewstacks, em resumo, todos os componentes gráficos.
• Controller – Representa o tipo de controlo/detalhes que envolvem a comunicação com o Model (Dados e definições) e o View (Interfaces gráficas) estes detalhes resultam da lógica de comunicação entre o Model e o View e normalmente representam também a interacção com o utilizador.

Este padrão MVC foi adaptado por centenas de frameworks, e o Flex não escapou à adaptação sendo que o principal objectivo de uso deste MVC no Flex é a simplicidade e re-utilização do código criando componentes bem definidos que permitem a obtenção de uma enorme versatilidade de todos os eles, bem como uma fácil cominicação entre os mesmo componentes, sem falar numa optimização do desempenho da nossa aplicação.

Ao criarmos um aplicação sem nos preocuparmos com este padrão teremos uma agradavel supresa no final de a termos terminado. O próprio Flex / Framework já está baseada nesta arquitectura e possui mesmo os seu proprio padrão MVC definido, como os componentes que definem a interface do utilizador, os modelos de apresentação de dados e os componentes responsaveis pelo controlo de dados como interacções com linguagens back-end.

Tentar entender este processo no ambito do flex pode ser muito complicado, mas vamos colocar um caso lógico que explica muitas das operações do flex:

Onde estruturamos devidamente os elementos e acções deste modelo:

Model:

• Usando action script, definindo como estrutura de class.
• Geralmente são usadas varias classes para simplificação de objectivos de cada uma que englobam:
• — Classes de dados nativas
• — Serviços de comunicação com back-end
• — No AIR, classes para lidar com chamadas como o SQLite

View :

• Todas as views são componentes gráficos do flex
• Tem como principal objectivo lidar com o layout da aplicação e disparar eventos para o controller
• Não acedem a dados directamente, apenas usam dados de eventos, dataProviders ou propriedades publicas / databinds
• São geralmente componentes escritos em MXML

Controller :

• Pode existir mais que um, embora apenas seja necessário em aplicações muito complexas.
• É usado como ponte entre o View e o Model visto que estes 2 não podem comunicar entre si directamente. Algumas propriedades / funções :
• — Definir dataproviders
• — Chamadas para o Model
• — Lidar com eventos do View
• — Alternar entre views
• Não são necessáriamente Action Script, no flex os arquivos MXML podem ser elementos “Controladores”

O Padrão MVC não se trata de um programa, formula ou função, trata-se sim de uma forma de organização de código permitindo esta “triologia” de funcionamento; criando uma class controlador que recebe/lida com dados de um conjunto de classes (model) e que faz a devida actualização da nossa interface grafica/componentes (view).

Claro que esta explicação pode ser mal entendida e perdoem-me os experts no padrão MVC, mas basicamente é isto que é feito claro que com alguns pontos e detalhes como vimos em cima.

Este tipo de implementações têm varias variantes, podendo nós, devidamente estruturado, criar um padrão MVC para estruturar a nossa aplicação, embora a Adobe disponibilize o Cairngorm que simplifica muito a aprendizagem pincipalmente com exemplos de muitos sites. A sua instalação é muito simples e o seu uso e aprendizagem também. Uma grande referencia em Cairngorm é o blog o David Tucker:

http://www.davidtucker.net/category/cairngorm/

Façam download dos videos e exemplos e facilmente verão do que falo.

Bem, na estrutura do exame Flex 3 este é um dos pontos: “List and describe de differences between model, view and controller in a Flex application”, que nos pede para explicar as diferenças apontadas em cima.

Bem, por agora é tudo… fiquem com alguns pontos de referencia do meu estudo sobre MVC.

http://cristobal.baray.com/indiana/projects/mvc.html (recomendo vivamente)

http://www.wonderhowto.com

http://livedocs.adobe.com/

http://www.iteratif.fr/blog/

Abraço e pelo menos espero ter esclarecido alguém, e já agora, alguém com uma opinião ??

Post originalmente colocado em: http://www.msdevstudio.com

Vou ser sincero e dizer que apenas recentemente me comecei a preocupar mais com isso, simplesmente porque as aplicações que desenvolvia em Flex eram necessariamente pequenas em termos de complexidade. Mas as coisas alteraram-se no desenvolver de um frontend para uma imobiliaria onde tenho um uso acrescido de base de dados bem como a necessidade de uma resposta rápida quer das classes, quer do backend. Estando quase no final deste projecto analisei todo o código e percebi que tinha algum lixo e muitos comentários e foi então que decidi dar uma limpeza e optimizar as suas classes… aqui chega a questão: como o fazer ??

Foi na minha procura por uma solução que tropecei com o IDE Factory e posso afirmar que, apesar de não usar metade das suas funções, encontrei uma pérola. Vamos à explicação…

O IDE Factory é um plugin para o Eclipse / Flex Builder, que lhe acrescenta um menu com uma dezena de opções que são um “must have” para todos os “programadores” Flex. De entre muitas opções existem algumas que me pouparam bastante tempo, das quais destaco uma que ilustra perfeitamente o que de melhor esta IDE Factory pode fazer por nós. Depois de instalada, mudei para a view Enterprise IDE e aí foi ver melhoramentos atrás de melhoramentos, além do Flex Package Explorer, Hierarchy Explorer e do Cairngorm Service Explorer no introduz um novo conceito de criar serviços, packages ou componentes, clicando no botão new aparece o agradável menu ao lado onde podem ver uma lista do que a IDE têm para oferecer. Além dos conhecidos ActionScript Class e MXML Component aparecem algumas novidades, como Action Script Interface, Model Locator, Service Locator, Responder, etc… Uma lista de coisas que se devem ter sempre à mão.

Clicando no Action Script Class é-nos apresentado o mesmo wizard que pela via normal, mas com algumas opções extra, que estão dentro do menu intitulado Code generation (Humm… como gosto desta palavra..) como podem ver pela imagem ao lado.

Alem desta novidade o melhor está para vir, cliquem em “Next” e agora é que começa o divertimento, como podem ver o wizard apresenta-se com 2 secções, a das Propertys e das Functions, no meu exemplo (org.riapt.teste) vou criar algumas variaveis e uma função, esperimentem fazer como no ecra seguinte, colocando os mesmos valores ou os vossos proprios valores. Como podem ver, este ecra permite criar variaveis na nossa class bem como definir o seu tipo, sedesejamos getter’s ou setter’s, bem como inserir funções. Isto resume em muito o nosso trabalho, não agora que perdemos algum tempo mas vão reparar na verdadeira utilidade clicando em “Finish”, agurardem uns segundos e vejam a vossa class que se irá abrir, além das nossas variaveis devidamente colocadas, temos já as funções get e set da variavel input bem como as funções da instancia e a nossa função str64encode devidamente definida, ora temos a nossa class devidamente estruturada, com comentários e espaços já definidos para a documentação da nossa class…

E agora é só preocupar-mo-nos com o que realmente interessa: a nossa programação.

Além destas novidades existem muita outras por explorar neste fantástico IDE Factory, como a criação automática de expressões e4x para lidar com um xml, bastando indicar o xml e o wizard faz o resto mostrando a expressão que deve ser usada para aceder a qualquer elemento do nosso xml, bem como o resultado em tempo real. Temos ainda o “Format Project Source Files” que nos altera (cria um back automatico) as nossas classes optimizando o código para os standards AS3 ou o Generate Java Classes from AS Value Objects que num instante cria as nossas classes.

Posso adiantar que esta IDE está cheia de surpresas muito agradáveis e que além de seguirmos os parâmetros de programação ideais nos simplifica muito o trabalho. Experimentem, usem e abusem.

A instalaçâo deste plugin é muito simples, bastando no Flex Builder / Eclipse irem ao menu:

Help->Software Updates->Find and install -> Search for new features for install -> New Remote Site e coloquem Enterprise IDE e no link: http://www.idefactory.com/update -> ok.

Devem então ter o novo remote site, clicam em finish e depois irá aparecer o Enterprise IDE. Seleccionem-no, façam o download e prossigam com a instalação. No final reiniciem o Flex Builder / Eclipse e vejam o novo menu no topo “Enteprise IDE” e uma nova view “Enterprise IDE”.

Garanto que vale bem a pena, apesar de ser mais orientado para programadores com alguma experiencia também é de facil compreensão por parte dos mais novatos.

Site Oficial: http://www.idefactory.com

Deixem as vossas impressões e primeiras experiências.

Além desta funcionalidade a actual versão (3.0), já gera código para as variadas Frameworks como Cairngorm, PureMVC, ARP.

A nível de velocidade ainda não tive oportunidade de testar as diferenças entre o Weborb e o amfphp, mas assim que tiver tempo irei fazer alguns testes a ambos e publicarei os resultados com os respectivos screenshots.

Quem quiser fazer parte da equipa de beta testers pode começar por ler o tópico criado pelo Mark Piller no fórum e falar directamente com ele via PM.

• MDM Zinc em 20 minutos por Paulo Moreira
• SVN e Flex pelo novo evangelista da Adobe, Mihai Corlan
• Construção de uma aplicação com Cairngorm por João Fernandes

A apresentação do Mihai será assistido no local através de uma sessão de connect.
No final do evento, será sorteado uma licença de um software da Adobe.
As inscrições para participar deverão ser feitas aqui.

And Now for Something Completely Different …

Introdução ao Cairngorm

Showcase: FlexFuel

Online Videos by Veoh.com

Queria dizer que fiquei surpreso com o número de inscrições no evento, e algo que seria supostamente um encontro entre “geeks” maluquinhos das RIAs a apresentarem coisas “geeks” para “geeks”, acabou por se tornar num conjunto de apresentações, que embora não tenham tido a qualidade de um Adobe Max, até foram bastante interessantes considerando que não houve qualquer tipo de organização/preparação.

Estão de parabéns os que foram assistir, estão de parabéns os que apresentaram, e se houve desilusões, digam o que não gostaram (e o que gostaram) para corrigirmos num futuro evento.

Este tipo de eventos não é suposto que seja perfeito – era supostamente um “encontro informal” -, mas de qualquer forma existem alguns pontos menos positivos a corrigir num próximo:

• O nível técnico na generalidade talvez tenha sido demasiado alto. A grande maioria das pessoas está ainda a conhecer estes mundos, e talvez tivesse sido mais proveitoso se as apresentações tivessem sido mais introdutórias. Ou pelo menos que a primeira apresentação tivesse sido de introdução às RIAs, e respectivas tecnologias tal como aconteceu no seminário no ISCTE (apresentação disponível aqui)
• A minha entrada (boas vindas) não correu particularmente bem, estava demasiado “speedado”, muito ausente e talvez devesse ter perdido um pouco mais de tempo com alguns conceitos de base.
• Ainda não foi hoje que o Silverlight me surpreendeu. Queria ver algo prático, algo demonstrativo do desenvolvimento em Silverlight e mais uma vez fiquei sem conhecer a plataforma.
• Talvez tivesse sido preferível ter havido uma apresentação mais introdutória sobre Cairngorm, com um conjunto de motivações e razões para a sua aprendizagem antes da apresentação do João Fernandes. Embora seja muito fácil utilizar a framework, para a perceber é preciso dominar conceitos muito técnicos e difíceis de interiorizar. Tirando isso, o João Fernandes esteve muito bem, visto que não é nada fácil explicar Cairngorm ainda mais em tão pouco tempo.
• As strippers mais uma vez não apareceram. O que, é no mínimo chato…
• E, aquele que considerei o ponto menos positivo: para um encontro informal, foi demasiado formal! Os objectivos principais do encontro eram mesmo promover o conhecimento entre as pessoas, e as apresentações eram “apenas” um extra para criar um precedente. Vim-me embora sem ter nomes associados a caras, o que é algo que não poderá acontecer num próximo evento, até porque vai completamente contra os objectivos da comunidade. Num próximo evento, terá que haver um intervalo de pelo menos hora e meia, com comida à mistura, para que as pessoas possam falar livremente. E no final, voltamos à comida e à conversa, mas ficarmos sem confraternizar é algo que não pode voltar a acontecer!

Positivamente, tenho a realçar:

• O número de pessoas que foi ao evento, que superou de longe as expectativas!
• O facto de, não tendo havido nenhuma organização em específico e preparação prévia, as apresentações até terem corrido bem.
• A apresentação do Asko/”A minha primeira aplicação em Flex”, pelo Luís Costa, foi bem feita e deviam ter havido mais apresentações do género, de pessoas que entraram à pouco tempo nesta área, com as respectivas dificuldades e sucessos. Mas continuo a achar que a aplicação precisa de um novo interface gráfico. Algum designer se oferece para fazer um novo layout para a aplicação?
• Fiquei completamente estupefacto com a apresentação do Paulo Moreira, “And now for something completely different”. É realmente fantástica a utilização que ele faz do Flash, e é algo que eu gostaria imenso de ver ao vivo. Ainda estou pasmado, e espero vir a voltar a ver mais coisas do género. Acima de tudo, também fiquei extremamente contente por ver alguém que puxa o Flash aos limites, e sabe o que faz e do que fala. Paulo Moreira, por favor, estou ansioso pela tua próxima apresentação!!
• Julgo que a minha apresentação de integração do Flash CS3 com o Flex 2 foi muito útil, até porque vai ajudar muitos dos que usam Flash CS3 a arriscar-se um pouco mais a entrar no Flex, pois agora têm a opção de escolher a ferramenta certa para cada caso. Enquanto esperamos pelo Thermo…
• Deu para perceber que, apesar do Flex ser algo ainda novo para muitos dos presentes, valeu muito a pena apresentar Cairngorm pois o problema da organização do código, não só em Flex mas noutras linguagens, é um problema sentido por muitos dos que tiveram presentes que perceberam o objectivo da framework.
• Também gostei bastante da última apresentação, do Alexandre Xavier, mostrando o Flash a ser usado no contexto que menos esperaríamos: na área da engenharia industrial. Colocar o Flash a comunicar com aplicações como o Autodesk Inventor, ainda mais da forma como foi feita e com a utilidade prática que tem, é algo simplesmente fabuloso!
• Termos terminado o ciclo de apresentações ainda com 20 pessoas na sala, é algo extremamente positivo, e que não esperava ainda mais quando foram 4 horas seguidas de injecção!
• O anúncio do Adobe Flex Camp em Portugal com Serge Jespers e Ryan Stewart! Mais tarde teremos mais notícias…

Espero não me ter esquecido de nada… O João Fernandes filmou as apresentações, e julgo que as colocará online em breve.

Para quem ficou curioso com a integração de Flash com Flex, pode visitar este link, e este. Relativamente ao Cairngorm, podem visitar este link. O FlexFuel, por sua vez, pode ser consultado aqui. Houve quem tivesse à espera de ter visto uma apresentação sobre ligação de Flex a um backend PHP usando AMFPHP, mas não foi possível prepará-la. No entanto, podem consultar este link, e este, ou todos os posts que já fizemos sobre AMFPHP.

Gostaria de saber a vossa opinião: o que gostaram, e o que não gostaram para que possâmos melhorar da próxima vez.

Parabéns a todos nós! E que se voltem a repetir eventos do género várias vezes ao longo do ano!

 [Update]

Os comentários ao evento estão a ser feitos sobretudo na Mailing List.

As inscrições devem ser efectuadas deixando um comentário no post anterior, estando actualmente 31 pessoas inscritas. Aconselho também a leitura do post anterior que possui mais informação para complementar este.

Infelizmente já sei que não poderemos contar com o Kim Hansen nem com o José Luís Gouveia que não estarão em Portugal na altura. Lá teremos que fazer outro evento lá para finais de Fevereiro …. ; )

O encontro será marcado por curtas apresentações de 10 a 20 minutos, e poderemos contar também com a presença de uma equipa da 4inWeb que irá apresentar o Microsoft Silverlight.

Assim sendo, aqui fica o índice de apresentações que me chegaram às mãos até ao momento, sem nenhuma ordem em específico. Irei actualizando este post à medida que mais pessoas se forem oferecendo para fazer apresentações.

Índice de apresentações

1. Boas Vindas
2. Apresentação do Microsoft Silverlight – 4InWeb
3. Display List em AS3 - João Gonçalves
4. Integração de Flash Cs3 com Flex 2 – João Saleiro
5. Showcase: Asko / “A minha primeira aplicação em Flex” - Luís Costa
6. Introdução ao Cairngorm – João Fernandes
7. Showcase: FlexFuel – João Saleiro
8. And Now for Something Completely Different … – Paulo Moreira
9. Showcase: Configurador de Regras - Alexandre Xavier

Se houverem interessados, posso ainda apresentar “Interligação entre Flex e PHP utilizando AMFPHP”. Não incluí na lista para não terem que me aturar demasiadas vezes, mas se houver muitos interessados posso por exemplo substituir uma das minhas sessões por esta.

Antes das “palestras” teremos um fase de apresentações para que as pessoas se conheçam. No final, voltamos todos a sentar-nos e falamos livremente.

Temos tudo montado para um grande primeiro aniversário! Ok, falta o bolo… alguém se oferece para fazer um bolo?

O Model-View-Controller consiste num conjunto de padrões de desenho que nos ajudam a diminuir a complexidade de projectos de grandes dimensões, a organizar melhor o nosso código, a facilitar o trabalho em equipa, a incentivar o fraco acoplamento entre módulos, a tornar o nosso trabalho em algo mais “metódico” ajudando-nos a que nos preocupemos mais a resolver os problemas dos nossos clientes (as regras de negócio), e menos a decidir como organizar o nosso código.

A framework Cairngorm é uma framework MVC oficialmente suportada pela Adobe, e talvez a mais popular no mundo de desenvolvimento em Flex. Não quer dizer que não existam outras “melhores” ou “piores”, como a Guasax, a PureMVC, a Prana ou a ARP, cuja escolha depende mais das características do projecto do que da “qualidade” da framework.

Embora seja muito fácil utilizar uma framework MVC, normalmente é bastante complicado perceber os conceitos por detrás das mesmas, até porque implicam conhecimentos avançados de Programação Orientada ao Objecto. Porém, posso dizer que lendo alguns recursos na net comecei a sentir-me à vontade com Cairngorm ao fim de uma semana e meia. Deixo por isso, aqui os recursos que li e a minha opinião sobre os mesmos.

Recursos da Adobe

São bastante completos, mas demasiado informativos. Pecam falta de componente prática.

• http://www.adobe.com/devnet/flex/articles/cairngorm_pt1.html
• http://www.adobe.com/devnet/flex/articles/cairngorm_pt2.html
• http://www.adobe.com/devnet/flex/articles/cairngorm_pt3.html
• http://www.adobe.com/devnet/flex/articles/cairngorm_pt4.html
• http://www.adobe.com/devnet/flex/articles/cairngorm_pt5.html
• http://www.adobe.com/devnet/flex/articles/cairngorm_pt6.html

Recursos do David Tucker

Aconselho vivamente estes tutoriais pois estão muito bem estruturados, têm vídeos explicativos bastante fáceis de serem acompanhados e bons exemplos de código ao longo dos posts. Esta foi a principal fonte que me ajudou a compreender Cairngorm.

• http://www.davidtucker.net/2007/10/07/getting-started-with-cairngorm-%e2%80%93-part-1/
• http://www.davidtucker.net/2007/10/18/cairngorm-part-2/
• http://www.davidtucker.net/2007/10/29/cairngorm-part-3/
• http://www.davidtucker.net/2007/11/07/cairngorm-part-4/
• http://www.davidtucker.net/2007/11/30/getting-started-with-cairngorm-%e2%80%93-part-5/

Recursos do Jeffry Houser

Estes não tive oportunidade de ler, mas ficam aqui a título de registo:

• http://www.jeffryhouser.com/index.cfm/2007/2/15/How-do-you-learn-Cairngorm
• http://www.jeffryhouser.com/index.cfm/2007/2/16/Learning-Cairngorm-Part-2
• http://www.jeffryhouser.com/index.cfm/2007/2/19/Learning-Cairngorm-Part-3
• http://www.jeffryhouser.com/index.cfm/2007/10/25/learning-Cairngorm-Part-4
• http://www.jeffryhouser.com/index.cfm/2007/11/1/Learning-Cairngorm–Part-5

Outros recursos complementares

Antes de se aventurarem a ler sobre Cairngorm, aconselho primeiro a ler alguns conceitos complementares que serão úteis para se perceber MVC:

• Client-Server architecture
• Multi-tier architecture
• Service Oriented Architecture
• Remote Procedure Call
• Design Patterns