O texto a seguir é parte de um e-mail que eu enviei para o time da DClick explicando sobre o projeto Tamarin, no dia seguinte ao seu lançamento.

A Adobe recentemente liberou a ActionScript Virtual Machine como open source sob o projeto Tamarin da Mozilla. Isso causou uma certa confusão e logo notícias como “Flash Open Source”, “Maior integração entre Flash e Firefox” entre outras começaram a ser divulgadas, inclusive por agências de nome.

Vamos esclarecer o que isso significa. As aplicações feitas com o Flash e Flex no fundo são aplicações em uma linguagem chamada ActionScript, atualmente na versão 3. Aliás, essa versão 3 do ActionScript foi lançada recentemente e é base para o Flex 2. A principal vantagem do ActionScript 3 em relação à versão anterior é a performance, que tem uma ganho estrondoso. Algumas tarefas ficaram 1000% mais velozes.

O ActionScript é baseado em uma especificação chamada ECMAScript, que também é base do JavaScript, linguagem utilizada em aplicações web em conjunto com HTML para dar dinamicidade e interação à aplicativos web tradicionais. Aplicações em AJAX, por exemplo, dependem completamente do JavaScript.

O que a Adobe fez foi liberar como open source um pedaço do Flash Player, a ActionScript Virtual Machine, que é responsável por interpretar código ActionScript e transformar em instruções de máquina (JIT, Just In Time Compiler). E como de certa forma o ActionScript e o JavaScript tem suas semelhanças (ambos baseados no ECMAScript), a Mozilla pode utilizar o Tamarin para melhorar a performance do interpretador de JavaScript de seus produtos, como o Firefox.

Assim, sucintamente, em breve teremos um Firefox muito mais ágil para interpretar códigos JavaScript, ou seja, poderemos ter aplicações em AJAX muito mais velozes que as de hoje em dia. Inclusive partes do Firefox e suas extensões são muito dependentes do JavaScript terão ganhos de performance. A Adobe e Mozilla agora também trabalharão em conjunto para o desenvolvimento da próxima especificação do ECMAScript.

Relatório feito pela Forrester Research aponta que uma empresa que domina o Flex pode tirar melhor proveito das RIAs do que qualquer outra que adote um Ajax Framework. Em outras palavras somente o Flex é capaz de mudar completamente as experiências Web desde que se domine a tecnologia.

O conceituado relatório pode ser lido pela bagatela de US$379.00. Isto me faz pensar se eu e o Fábio não estamos perdendo dinheiro ao fazer alguns posts de graça sobre o assunto.

Brincadeiras a parte é possível ter uma idéia sobre o conteúdo do relatório neste post do Ryan Stewart.

De certa forma no meu post eu dizia que o Flex não deveria ser comparado com o Ajax em si, mas sim com um dos seus Frameworks pagos. Tanto o relatório da Forrester quando o post do Ryan Stewart parecem corroborar a minha tese.

O Spry é uma framework para AJAX da Adobe.
Com ele é possível criar páginas dinâmicas incorporando dados de arquivos XML nos seus HTMLS sem a necessidade de refresh da mesma forma que acontece no Flex. O Spry também conta com uma API de efeitos bem grande que permite de uma maneira fácil usando JavaScript aplicar efeitos nos elementos HTML da sua página. O Spry possui outras facilidades como criar Tabs, Accordions e também possui ferramentas para validação de formulário (esse pode ser o meu próximo post).

Para visualizar a versão completa do exemplo clique aqui

Neste tutorial irei criar um simples exemplo de Master Detail usando Spry 1.4 com as informações do XML abaixo.

Antes de começar você precisa baixar a última versão do Spry clicando aqui.

O primeiro passo a seguir é incluir o Spry que é o arquivo SpryData.js (ele está na pasta includes do download feito) ele é o coração do Spry, também preciso incluir o arquivo Xpath.js pois o Spry utiliza o XPath parar procurar itens a partir da sua fonte de dados XML. XPath é uma linguagem baseada na árvore do arquivo XML e provê uma forma simples de selecionar os nós usando diversos critérios de busca. Para conhecer mais sobre XPath clique aqui.
Também iremos usar a bibliteca de efeitos do Spry que é a SpryEffects.js também na pasta includes do download.

Após isso vamos criar o XML Data Set:

Agora vamos criar uma lista a partir do XML e a área de detalhe.

Explicando:

• spry:region - Indica uma região dinâmica do data set
• spry:detailregion - é a região de detalhe para o data set indicado
• spry:state - Indica qual o estado da requisição
  • loading - esta div contêm o conteúdo que deve ser mostrado quando o Spry estiver carregando os dados
  • error - esta div contêm o conteúdo que deve ser mostrado caso aconteça um erro no GET
  • ready - quando tudo estiver ok esta div entra em ação
• spry:repeat - faz um loop dos resultados do data set
• onclick - chamo a função que irá executar a transição
• {dsEstados::nome} - Esta é a representação dos campos do dataset que aparecem na tela. Note que a variável é Bindable, ou seja ela fica sempre "escutando" o data set. existem 2 formas de utilização {dataset::nome_do_campo} ou {nome_do_campo} eu prefiro usar a primeira opção pra facilitar a manutenção no código.

O próximo passo é criarmos uma função que ira fazer a transição e adicionarmos um Observer na div.

Explicando:

• fadeInContent - função Observer que irá fazer um "fade" escondendo o conteúdo da div sempre que o detailRegion for atualizado. Obs: Observe que eu tenho um style definindo opacidade 0 (zero) para minha div. Isto serve para previnir bugs entre navegadores na hora do Fade inicial.
• Spry.Effect.AppearFade - Função que executa o efeito de Fade.
• Spry.Data.Region.addObserver - onde eu indico que a função observer "fadeInContent" está relacionada a minha div "descricao"

Agora só nos resta criar a função de fade-out:

Explicando:

• fadeOutContentThenSetRow - Irá mostrar o conteúdo da div quando algum ítem da lista é clicado
• setCurrentRow - Defino qual a linha atual no DataSet

O código final ficará assim:

Bom é isso aí um "SIMPLES" tutorial de como fazer um master detail no Spry usando transições.

Mais informações sobre o Spry você encontra em:

• Adobe Labs
• Agregador de RSS sobre Spry
• Charlie Arehart's Compendium of Spry Resources
• Google

O sneak peek era relativo ao Flex Data Services e ao Ajax Bridge. Mostraram um recurso realmente muito legal, um componente chamado FDSDataSet para ser utilizado em conjunto com o Spry. Assim que eu vi isso logo imaginei o que poderia ser, e realmente é o que imaginei: fazer push de dados para o Spry, que é um framework para Ajax utilizando o Flex Data Services! Na demonstração a facilidade com que foi feito e o resultado do push foram realmente impressionantes.

Em relação ao Flash 9 o foco foi em relação ao debugging que finalmente chega em plena forma para a tecnologia Flash. A IDE do Flex hoje já tem um debugging efetivo. Foi mostrado o debug workspace, os breakpoints e algumas outras funcionalidades, como editar o valor de variáveis durante o debug, alterando o resultado.

PS: Ed Sullivan, que coordena o programa de grupo de usuários da Adobe acabou de passar por aqui enquanto escrevo este post e mandou um abraço para a comunidade brasileira e para o pessoal do AUG-SP (o que inclui eu, mas como ele estava falando comigo.. bem, vocês entenderam).

Debates sobre qual é a melhor tecnologia são comuns. Alguns destes debates são debates genuínos, outros, um tanto dissimulados. Em outras palavras, é preciso tomar cuidado para não comparar laranjas com bananas: ambas são frutas, porém, a primeira é rica em vitamina C e a segunda em potássio. Mas o problema é que em tecnologia as comparações são bem complicadas.

Uma discussão recente no mundo virtual envolve o Flex e o Ajax. Ambas são tecnologias para desenvolver Rich Internet Applications. Mas será mesmo que podemos compará-las a ponto de afirmar qual é a melhor?

Este texto complementa e é complementado pelo do Fábio Terracini publicado no CF Gigolô, e é fruto de uma troca de idéias que tivemos recentemente.

Leia o artigo completo »