O documento discute o framework Flex da Adobe para desenvolvimento de aplicações web ricas. Aborda o que é Flex, sua história, capacidades, diferenças em relação ao Flash, integração com servidores, arquitetura MVC, ambientes de trabalho e exemplos de aplicações como BIM. A segunda parte apresenta exercícios práticos com imagens e integração Flex-Java via BlazeDS.

1. Descobrindo o Potencial do
Flex para a Criação de
Aplicações Ricas para a WEB
Jorge Carvalho
Vagner Machado
Fabsoft - 2008

2. Agenda
• Primeira Parte: Teoria
o O que é Flex?
o Histórico
o O que o Flex pode fazer?
o Diferenças entre Flex e Flash
o Integração com o servidor
o Flex no MVC (Arquitetura)
o Ambiente de Trabalho Flex
o Concorrência
o BIM - Banco de Imagens Médicas
o Links Úteis
• Segunda Parte: Prática
o Primeiros Passos: Brincando com Imagens
o FlickrFlex
o BlazeDS

3. Primeira Parte: Teoria

4. O que é Flex? - RIA's
Rich Internet Applications (RIA's)
São aplicações Web que contêm características e
funcionalidades de uma aplicação desktop tradicional.
Características:
• roda em um navegador e não requer a instalação de
programas adicionais;
• parte do processamento executado no navegador;
• maior parte do processamento e dos dados no servidor.

5. O que é Flex? - Adobe Flex
"É um framework multi-plataforma para desenvolvimento de aplicações RIA,
levando um modelo de programação padrão e conhecido por profissionais
e desenvolvedores. Nele usamos uma linguagem de marcação (MXML) que é
baseada no XML para definir a interface da aplicação e o Actionscript 3.0 para a
parte lógica. As aplicações Flex levam a extensão .mxml e podem ser criadas
em qualquer editor de texto comum, como por exemplo o Bloco de Notas."
Fonte: E-genial

6. Histórico
• Criado em Março de 2004 pela Macromedia;
• Sem grande aceitação inicial;
• Macromedia adquirida pela Adobe em Abril de 2005;
• Grandes investimentos da Adobe na tecnologia;
• Open-source desde Abril de 2007 sob a MPL (Mozilla Public
License);
• Versão atual lançada em Fevereiro de 2008.

7. O que o Flex pode fazer?
E-commerce
http://www.voelkl-snowboards.com/index.cfm/EN/352
Aplicações On-line
http://a.viary.com
Multimídia
http://www.robots.com/movies.php?tag=40
Plugins e Widgets
http://www.yourminis.com/minis
Dashboards
http://www.intelisea.com/demo/demo.htm
Aplicações Desktop
Pownce - http://pownce.com/
eBay Desktop - http://desktop.ebay.com/

8. Diferenças entre Flex e Flash
• Flash mais apropriado para fazer animações
• Flex utilizado na confecção de RIA's
• Flash voltado para profissionais da área de design
• Flex voltado para desenvolvedores
• Ambos fazem uso do ActionScript

9. Concorrência

10. Ambiente de trabalho

12. Requisitos para integração
Java/Flex:
Servidor de Aplicação:
- GlassFish V2UR2
https://glassfish.dev.java.net/downloads/v2ur2-b04.html
Plugins:
- Plugin GlassFish
com.sun.enterprise.jst.server.sunappsrv_1.0.3
- WTP (Web Tools Plataform)
JavaEE

13. Integração Flex/Java
BlazeDS Server
- OpenSource
- Suporte Remoting
- Permite conexão entre a
camada de visualização e o
back-end (modelo e controle)
- Transferência de informações
em tempo real entre as
camadas
- Utilização do protocolo AMF3

14. AMF3 - Census
http://www.jamesward.com/census

15. AMF3 - Action MessageFormat
- Aplicações atuais utilizam XML(eXtensible Markup Language)
sobre o protocolo HTTP.
- A algum tempo o FlashPlayer dá suporte a um protocolo de
transporte chamado AMF3.

16. AMF3 - Action MessageFormat
AMF3:
- Formato Binário
- Compactação de dados
- Elimina a camada de abstração de dados
- Maior performance no Servidor e Cliente, resultando em
comunicação mais eficiente entre ambos.

17. MVC - Model View Controller
Padrão de arquitetura de software
- Modelo: Acesso aos dados.
- Controle: Lógica de Negócios.
- Visualização: Lógica de apresentação e interação com o
utilizador.

18. MVC e o Flex

19. BIM - Banco de Imagens
Médicas
Proposta
"Este projeto tem como objetivo atender uma necessidade presente na medicina atual:
uma ferramenta robusta e adaptada para a realidade de hospitais e cursos da área de
saúde, em que têm-se a necessidade de organizar um acervo de imagens
concernentes a pacientes e respectivos tratamentos ministrados, para posterior consulta
e auxílio, bem como para fins didáticos e possíveis diagnósticos."

20. BIM - Banco de Imagens
Médicas
Tecnologias:
- Spring Framework
- Hibernate
- Flex
- JavaEE
- BlazeDS Server
- AMF3
- MySQL

21. Arquitetura BIM

22. MVC e o Flex

23. Links Úteis
Web Log's
http://www.vedovelli.com.br/
http://msdevstudio.com/blog/
http://www.flexdev.com.br/home/
Vídeo Aulas em Inglês
http://www.adobe.com/devnet/flex/videotraining/
Download do FlexBuilder Grátis para Estudantes
https://freeriatools.adobe.com/flex/
Visão Geral dos Recursos
http://learn.adobe.com/wiki/display/Flex/Animated+overview
Site Oficial do Flex
http://www.adobe.com/products/flex/
Mais Exemplos de Aplicações em Flex
http://flex.org/showcase/
Inúmeros Exemplos de Códigos-Fonte
http://www.adobe.comcfusioncommunityengineindex.cfm?productId=2

24. Segunda Parte: Prática
Primeiros Passos: Brincando com Imagens
FlickrFlex: Pesquisa em imagens públicas do Flickr
Integração Java + Flex com BlazeDS