Nov
06

Tutorial MVC no Flex; Entendendo a lógica.

Como parte dos meus estudos para a Certificação Flex 3, estou a rever alguns pontos em que me sinto menos à vontade dentro do maravilhoso mundo do Flex. Vou começar por um ponto que ainda hoje reserva bastantes dificuldades de compreensão. Falo do MVC – Model, View, Controller.

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




Sep
18

IDE Factory: tornando o Flex Builder mais eficiente

Que o Flex Builder é meio caminho andado para acelerar a construção das nossas RIAs todos sabemos, mas existem alguns truques a que podemos recorrer para optimizar o código como classes bem construídas e documentadas entre muitas outras coisas.

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.

IDE Factory
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.

Post publicado paralelamente no tsw e riapt



Sep
05

Weborb PHP 3.5 Beta

O Mark Piller, administrador da Weborb, lançou ontem um pedido de beta testers para a próxima versão do Weborb PHP (3.5) e ainda um vídeo a demonstrar como funcionará uma das mais importantes funcionalidades que esta versão vai ter ( Data Management ). Esta versão gerará código client-side e server-side. Aconselho a visualização do vídeo. Vale a pena ver esta funcionalidade a trabalhar e de forma tão simples.

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.




Jun
25

Meeting AUG dia 28 de Junho

No próximo dia 28 terá lugar mais um evento do Adobe User Group que terá início pelas 17 horas. O local do evento será novamente nas instalações da Flag e irá ser composto por 3 tópicos

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.




Feb
11

Videos – Aniversário RiaPT (Parte 3)

Showcase: Asko / “A minha primeira aplicação em Flex”

And Now for Something Completely Different …

Introdução ao Cairngorm



Showcase: FlexFuel

Online Videos by Veoh.com

top