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

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.

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.

Ao percorrer a documentação da Adobe, reparei num resumo bastante interessante que fala do ciclo de execução/criação de cada componente da nossa aplicação. É incrível como cada simples botão ao ser adicionado a um container tem uma dezena de procedimentos até que seja disparado o evento creationComplete. Para quem já criou/estendeu um componente via ActionScript sabe bem do que falo, mas aqui vai a explicação.

Vou falar apenas do processo que acontece por detrás de um adicionar um botão como child a um container (Box) com o simples código:

O Flex, procederá da seguinte forma:

1. É chamado o componente construtor (new Box e depois new Button)

2. Chamado o setter (b.label=) e actualizado todo o componente ( muitas das vezes são chamados métodos de actualização para definirem todo o layout: invalidateProperties(), invalidateSize(), ou invalidateDisplayList() )

3. Adiciona como child (filho) do box. Aqui o Flex faz a maior parte do trabalho, executando-se a  seguinte ordem:

4. Define a propriedade parent do componente para fazer referencia ao seu “container”.

5. Calcula e define o estilo/”style” de todo o componente.

6. Dispara o evento preinitialize do componente.

7. Chama o método createChildren() do componente.

8. Chama os métodos invalidateProperties(), invalidateSize(),  e invalidateDisplayList() para obrigar a serem disparadas/chamadas os métodos commitProperties(), measure(), ou updateDisplayList() no próximo evento render. A única excepção a estes acontecimentos, é que o flex não chama o método measure()  quando o “user/programador” define a altura e largura do componente.

9. Dispara o evento initialize no componente. Nesta altura todos os childs (childrens) no componente são inicializados, mas o componente ainda não foi correctamente definido no seu tamanho, nem processado o seu layout. Este evento pode ser usado para definir /executar procedimentos extra no componente antes que seja completamente processado.

10. Dispara o evento childAdd no componente “pai” / “parent”.

11. Dispara o evento initialize do seu componente “pai” / “parent”.

12. Durante o próximo evento render o flex faz as seguinte acções:

• Chama o métodos pela seguinte ordem:

1. commitProperties();
2. measure();
3. layoutChrome();
4. updateDisplayList();

• Finalmente é disparado o evento updateComplete no componente.

13. O Flex, depois deste processo ainda poderá disparar eventos de renderização ( render ) se os métodos commitProperties(), measure(), ou updateDisplayList() forem executados/chamados através dos métodos invalidateProperties(), invalidateSize(), ou invalidateDisplayList().

14. Depois do ultimo evento render ser chamado, o flex executa as seguintes acções:

• Coloca o componente visível ( .visible=true; ).
• Dispara o evento creationComplete no componente. O componente é dimensionado e processado para o layout. Este evento é apenas disparado uma única vez e só quando o componente é criado.
• Dispara o evento updateComplete no componente, este evento também é disparado quando são alteradas quaisquer definições do componente, como layout, posição, tamanho ou qualquer alteração das características visuais.

A maior parte do trabalho de configuração, definição, e renderização de um componente acontece que este é adicionado a um container ( método addChild() ), isto porque enquanto o componente não for adicionado a um container, o Flex não consegue saber o seu tamanho, definir as propriedade “in-line”/”inheriting” ou desenha-lo no ecrã.

Perceber estes passos é essencial para conhecer  as propriedades e as operações que são executadas aquando da criação de um componente. Ajuda-nos também a perceber melhor porque é que às vezes temos certos erros no nosso código bem como a entender o processo de criação de um componente, o que se torna muito útil para criarmos o nosso próprio componente.

Artigo original aqui (EN)

Este artigo está disponivel em pdf para download. (link externo – www.msdevstudio.com)

Todos sabemos que por vezes torna-se bastante difícil encontrar artigos e suporte em português, e embora o flex esteja já instalado no mercado, continua-se a encontrar pouca informação composta em algum lado, contando apenas com alguns (bons) blog’s, e algumas poucas (listas/grupos) onde podemos tirar as nossas duvidas.

Foi basicamente por isso que decidi criar um pequeno tutorial de instalação e como criar um exemplo “Olá Mundo”  (parte I), mas como tive bastante “feedback” das pessoas, acabei por continuar o tutorial, estando neste momento na parte 5 (inacabada e não publicada) que brevemente será aqui colocada também.

Venho então dar a conhecer o tutorial Adobe flex a partir do zero que oficialmente coloquei no meu blog, e que agora partilho com o riaPT visto ser a maior referência nacional em ria’s (pelo menos não conheço outra). Neste momento o tutorial vai a meio mas deixo já o download das primeiras quatro partes compiladas num ficheiro e deixo também o index  do que já foi feito mas melhor identificação, passo então a citar:

1. Observações iniciais. Pag. 4- 5
2. Instalando, configurando e fazendo o típico teste “hello world”. Pag. 5-6
2.1. Criando um novo Projecto. Pag. 6-7
2.2. Entendendo o espaço de Trabalho do Flex Builder. Pag. 7-10
2.3. Criando o primeiro exemplo “hello world”. Pag. 10-11
2.3.1. Criando um script (AS3). Pag. 12-14
3. Entendendo a ordenação e estruturação do código.Pag. 14-16
3.1. Criação de um ficheiro action script externo para uso no flex. Pag. 16-18
4. Entendendo os componentes internos, states e transições/efeitos. Pag. 18-20
4.1. States, entendendo a sua disposição. Pag. 21-22
4.2. Transições e seus efeitos. Pag. 23-24
5. Programação do exemplo “olá mundo” em Action Script. Pag. 25-27
6. Efeitos e eventListners. Pag. 27-32
7. Componentes e Módulos.Pag. 33
7.1. As diferenças entre componentes e módulos. Pag. 33
7.2. Criando um componente e trabalhando com ele. Pag. 34-36
7.3. Enviando e recebendo dados de/para um componente. Pag. 37-38
7.4. Criando um módulo e trabalhando com ele. Pag. 38-41
8. Entendendo a comunicação com Objectos Remotos.Pag. 42
8.1. Instalação do amfPHP e servidor Wamp. Pag. 42-43
8.2. Criando o primeiro serviço no amfPHP. Pag. 43-44
8.3. Configurando o Flex Builder para trabalhar com o amfPHP. Pag. 44
8.4. Criando o primeiro Remote Object no Flex. Pag. 45-46

Podem fazer o download do pdf aqui ou ver a versão online nas publicações http://issuu.com acedendo aqui

Espero que seja útil, e qualquer critica ou correcção estejam à vontade para me informar.

EDIT: A parte 5 já está disponivel para download aqui

Depois de muito procurar e virar de “ponta-cabeça” o site da Adobe não consegui encontrar os downloads dos seminários que foram aqui notificados coisa que achei bem estranha já que na altura da subscrição desses mesmos seminários era-nos dito que seriam gravados e disponibilizados para download.

Depois de recorrer a vários motores de busca lá consegui começar a colher informações de onde se encontravam estes seminários… ainda não estão propriamente disponíveis para download, mas já podem ser vistos no “centro multimédia” Adobe Acrobat Connect.

Apenas não consegui encontrar 3 destes seminários, mas em contrapartida encontrei alguns também bem interessantes. Então deixo aqui a lista:

• Flex Architecture – http://seminars.adobe.acrobat.com/p13859376/
• AIR Native Drag and Drop – http://seminars.adobe.acrobat.com/p48733864/
• ILOG Elixir: Your Remedy for Vibrant Data Visualization – http://seminars.adobe.acrobat.com/p97866770/
• The Essential Guide to Dreamweaver CS3 with CSS, Ajax, and PHP – http://seminars.adobe.acrobat.com/p67172044/
• Flex Visual Data & Charting – http://seminars.adobe.acrobat.com/p29446240/
• Adding Live Chat with ColdFusion & Adobe Blaze DS – https://admin.adobe.acrobat.com/_a227210/p41591416/
• Flex Data Services - http://seminars.adobe.acrobat.com/p41615224/
• Flex and Java – https://admin.adobe.acrobat.com/_a227210/p87391680/ & http://seminars.adobe.acrobat.com/p60809699/
• ColdFusion Powered Rich Applications for the Internet and Desktop – http://seminars.adobe.acrobat.com/p71068630/
• Flash Lite and Flex for Tourism – http://seminars.adobe.acrobat.com/p45858446/
• Adobe AIR Local Data Storage Options With Emphasis on Using Embedded SQL Databases – http://seminars.adobe.acrobat.com/p78202681/
• Dreamweaver: Effective Standards-based Workflows for Ajax -http://seminars.adobe.acrobat.com/p31899782/
• Building AIR Applications with Flash CS3 - http://seminars.adobe.acrobat.com/p69012000/
• Integrating Salesforce.com and Flex – http://eminars.adobe.acrobat.com/p59832774/
• Building Rich Internet Applications with Flex 3 – http://seminars.adobe.acrobat.com/p34983052/
• What’s New in ColdFusion 8 – http://seminars.adobe.acrobat.com/p91837280/
• Extending Web to the Desktop with AIR - http://seminars.adobe.acrobat.com/p36566625/

Extras:

• Introduction to Flex Data Services – http://seminars.adobe.acrobat.com/p41615224/
• AIR applications with ColdFusion and Flex 3 - http://adobechats.adobe.acrobat.com/p12001735/
• BlazeDS Revealed – http://experts.acrobat.com/p90783934/
• Debugging Flex Applications – Atl Flash/Flex UG – http://adobechats.adobe.acrobat.com/p91186888/
• Introduction to Ant – http://experts.acrobat.com/p53858056/
• Flex Application Frameworks – https://admin.adobe.acrobat.com/_a200985228/p12266504/
• Load Testing Flex Applications with WebLOAD – https://admin.adobe.acrobat.com/_a227210/p18269627/
• ColdFusion 8 and Flex 3: RIAs development just got easier – https://admin.adobe.acrobat.com/_a227210/p73818848/
• Flex for .NET – https://admin.adobe.acrobat.com/_a227210/p78614671/

Bem, já está aqui uma grande lista, mas com certeza que terá muita utilidade.