quinta-feira, 27 de agosto de 2009

Como instalar o Data Visualization 3.4 no Flex Builder/ Eclipse

Para instalar a versão 3.4 do Data Visualization no Flex Builder, ou no Eclipse com Flex-Builder Plug-in, instale primeiramente o SDK 3.4 do Flex, conforme o post "Como instalar o SDK 3.4 no Flex Builder/Eclipse", e siga então os passos abaixo:
  1. Baixe o arquivo compactado através da página oficial da Adobe de downloads para Flex 3 ou diretamente do link pra download do Data Visualization 3.4.
  2. Acesse o ditetório onde está o SDK 3.4 do Flex (no Windows, ele estará provavelmente em "C:\Arquivos de programas\Adobe\Flex Builder 3\sdks\3.4.0" ou em "C:\Arquivos de programas\Adobe\Flex Builder 3 Plug-in\sdks\3.4.0").
  3. Descompacte o arquivo "datavisualization_sdk3.4.zip" dentro desse diretório - que já deve ter as pastas "framework" e "lib" (que serão acrescidas pelas classes e pela lib do Data Visualization).
  4. Pronto - se foi feito tudo certo, é só abrir novamente o Flex Builder/ Eclipse.

Como instalar o SDK 3.4 no Flex Builder/ Eclipse

Conforme anunciado no post "Flex SDK 3.4 Released", foi lançada a versão 3.4 do SDK do Flex. Para instalá-la no Flex Builder, ou no Eclipse com Flex-Builder Plug-in, siga os passos abaixo:
  1. Baixe o arquivo compactado com o SDK através das página de downloads do Flex 3 da Adobe ou da "Adobe Open Source" (que contém todas as versões do SDK).
  2. Acesse o ditetório onde estão os sdks do Flex (no Windows, ele estará provavelmente em "C:\Arquivos de programas\Adobe\Flex Builder 3\sdks" ou em "C:\Arquivos de programas\Adobe\Flex Builder 3 Plug-in\sdks").
  3. Crie então um diretório para o SDK 3.4 - por exemplo, "3.4.0".
  4. Descompacte o arquivo "flex_sdk_4.zip" dentro desse diretório.
  5. Abra o Eclipse (ou Flex Builder), clique em "Windows", "Preferences", "Flex" e em "Installed Flex SDKs".
  6. Clique em "Add", em "Browse" e informe o caminho da pasta criada (por exemplo, "C:\Arquivos de programas\Adobe\Flex Builder 3 Plug-in\sdks\3.4.0"). Depois clique em "OK".
  7. Na lista de SDKs disponíveis vai aparecer a nova versão instalada. Para deixar a versão 3.4 como padrão para todos os projetos, deselecione a outra versão do SDK, selecione a versão 3.4 e clique em "OK".

Dica: Para atualizar a versão do SDK para apenas um projeto, clique com o botão direito no projeto desejado, clique então em "Properties" e depois em "Flex Compiler". Escolha então entre a versão padrão ("Use default SDK") e as outras disponíveis ("Use a specific SDK") e depois clique em "OK".


quarta-feira, 26 de agosto de 2009

Palestra: "Empreendendo com soluções Adobe para plataforma RIA"

Amanhã, dia 27 de Agosto, às 9:30h, o Igor Costa fará a palestra on-line "Empreendendo com soluções Adobe para plataforma RIA".

Nessa palestra, que terá duração de 2 horas, vai ser abordado como as soluções Adobe para plataforma RIA podem ajudar alavancar novos negócios em sua empresa ou em sua carreira pessoal.

A palestra, que é gratuita e interativa, pode ser acessada por aqui. Futuramente será disponibilizada a sua gravação.

segunda-feira, 24 de agosto de 2009

Flex SDK 3.4 Released

Foi lançada na semana passada a versão 3.4 do Flex SDK (software development kit ou standard development kit). O SDK do Flex inclui o Flex framework (class library), os compiladores por linha-de-comando, o Flex debugger, o ASDoc e a versão debug do Flash Player.

Nessa versão, foram feitas algumas atualizações de segurança - incluindo a correção de uma vulnerabilidade a "cross-site scripting" (Security bulletin) - e algumas correções de bugs, que podem ser visualizadas aqui.

Para baixar o SDK, acesse a página "Flex 3 SDK Downloads" (do Adobe Open Source) ou o link direto para versão 3.4.

sábado, 8 de agosto de 2009

O Modelo de Eventos do Flex

Esse é um assunto básico - não no sentido de ser simples, mas sim no de que todo programador Flex deveria conhecer. O Flex possui um modelo de desenvolvimento dirigido por eventos ("event driven programming model") e quase tudo dentro do framework acontece através de eventos. Um evento pode ser gerado através de entradas externas, como a interação dos usuários (eventos de mouse, de teclado, etc) ou como o retorno de uma chamada a um serviço Web. Além disso, um evento pode ser gerado quando ocorre alguma mudança na aparência de um componente ou no seu ciclo de vida - por exemplo, quando um componente é criado, destruído ou redimensionado. Em breve, farei um post falando somente sobre o ciclo de vida dos componentes visuais do Flex (que também é um assunto bem importante).

Através dos eventos (objetos derivados da classe flash.events.Event), um desenvolvedor pode saber quando aconteceu alguma coisa dentro de uma aplicação e quem disparou o evento ("target"), podendo assim fazer os tratamentos necessários nessas situações. Para isso, ele poderá registrar "listeners" em diferentes locais, para interceptarem e tratarem esses eventos. Cada listener é ligado a uma função "handler" - funções que recebem um tipo de evento como parâmetro e executam um código determinado.

Segue abaixo um exemplo simples, seguido de dois trechos de código-fonte (um utilizando MXML e outro Action Script puro):

  • Se não conseguir visualizar a aplicação, clique aqui.


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

 <mx:Script><![CDATA[
  import mx.controls.Alert;

  private function btnEditClickEventHandler(event: MouseEvent): void{
   Alert.show("O botão \"Editar\" foi clicado!");
  }

 ]]></mx:Script>

 <mx:Button id="btnEdit" label="Editar" horizontalCenter="0" verticalCenter="0" click="btnEditClickEventHandler(event)"/>  

</mx:Application>

package{
 import flash.events.MouseEvent;

 import mx.controls.Alert;
 import mx.controls.Button;
 import mx.core.Application;

 public class EventListenerSimpleExampleAS extends Application{

  private var _btnEdit: Button;

  public function EventListenerSimpleExampleAS(){
   super();
  }

  protected override function createChildren(): void{
   super.createChildren();
   _btnEdit = new Button();
   _btnEdit.label = "Editar";
   _btnEdit.setStyle("horizontalCenter", 0);
   _btnEdit.setStyle("verticalCenter", 0);
   _btnEdit.addEventListener(MouseEvent.CLICK, btnEditClickEventHandler);
   this.addChild(_btnEdit);
  }

  private function btnEditClickEventHandler(event: MouseEvent): void{
   Alert.show("O botão \"Editar\" foi clicado!");
  }
  
 }
}

Os eventos podem ainda levar diversas informações para outras partes da aplicação - um evento customizado de login, por exemplo, pode ter um atributo "login", do tipo String, que informará aos componentes que estiverem ouvindo o evento qual é o login do usuário que acessou o sistema. Resumidamente, os eventos atuam como "transportadores de informação" dentro de uma aplicação Flex, se beneficiando do modelo de eventos do framework, que será apresentado abaixo.


Fluxo de Eventos do Flex ("Event propagation")

O modelo de eventos da plataforma Flash (consequentemente do Flex) é baseado atualmente na especificação "Document Object Model (DOM) Level 3 Events Specification", da W3C. Dessa forma, quando um evento é disparado, ele terá um fluxo ("event flow"), que descreve a propagação do objeto evento na estrutura de dados onde o objeto que originou o evento ("target") está inserido. No Flex, todos os componentes visuais (subclasses de DisplayObject) são inseridos em uma estrutura em forma de árvore chamada "Display List" e um evento disparado em um componente pode percorrer toda a estrutura de componentes aninhados dentro dessa árvore. O topo da "DisplayList" é chamado de "Stage" - é o container principal, onde todo restante dos componentes visuais serão inseridos (incluindo os outros containers, como o "Application", que é o primeiro a ser carregado em uma aplicação Flex).

Quando o Flash Player dispara um evento, é feita uma jornada circular desde a raiz da "Display List", passando pelo nodo onde esse evento foi gerado ("target"), e retornando para o nodo raiz - verificando em cada nodo se existem listeners registrados para o evento.

A propagação de eventos no Flex passa por três estágios: fase de captura, fase do alvo e fase de borbulhamento, conforme pode ser observado na figura abaixo, que representa o ciclo envolvido ao ser disparado um evento de clique em um botão, que está inserido em um "ControlBar, que por sua vez está inserido em um "Panel":

Flex Event Propagation(imagem cedida pelo Richard R. Manzke)


Obs.: Nos componentes não visuais, como HTTPService, não existem essas três fases e o evento é disparado diretamente no target.


1-) Fase de Captura (capture phase)
A fase de captura compreendende todos os nodos - desde o nodo raiz ("Stage"), passado pelo "Application" e pelos demais componentes aninhados, e terminando no pai ("parent") do local onde foi gerado o evento. Durante essa fase o Flash Player examina cada nodo (começando pela raiz) para verificar se ele tem um listener registrado para tratar o evento. Se tiver, o Flash Player seta valores de algumas propriedades do objeto evento (como a "currentTarget" - que tem referência para o objeto corrente do fluxo de verificação) e chama a função handler resgistrada no listener encontrado. O Flash Player continua então esse processo até o nodo parent do componente que gerou o evento ("target") - a não ser que o programador interrompa programaticamente o restante do fluxo, através do método "stopPropagation()" da classe Event.

2-) Fase do alvo (target phase)
A fase do alvo, apesar do nome, acontece no componente onde foi originado o evento (quem disparou). Durante essa fase, o Flash Player examina o nodo target para verificar se ele tem um listener registrado para tratar o evento. Se tiver, seta valores de algumas propriedades do objeto evento e chama a função handler resgistrada no listener encontrado.

3-) Fase de borbulhamento (bubbling phase)
A fase de borbulhamento é o contrário da fase de captura - ela compreendende todos os nodos desde o pai (parent) do local onde foi gerado o evento até o nodo raiz (Stage). Durante essa fase o Flash Player examina cada nodo a partir do nodo pai do local que gerou o evento, para verificar se ele tem um listener registrado para tratar o evento. Se tiver, o Flash Player seta valores de propriedades do objeto evento e chama a função handler resgistrada no listener encontrado. O Flash Player continua então esse processo até o nodo nodo raiz (Stage) - processo que também pode ser interrompido pelo método stopPropagation().


Dessa forma, a função handler de um listener adicionado em um componente acima do target seria acionada duas vezes em cada ciclo - uma durante a fase de captura e outra durante a fase de borbulhamento. Mas não é isso que ocorre na maioria das vezes porque, por padrão, um listener não recebe eventos durante uma fase de captura, ao menos que seja atribuído "true" para o terceiro argumento ("useCapture") do método que adiciona um listener ("addEventListener") em um componente, conforme o exemplo abaixo:
this.addEventListener(MouseEvent.CLICK, btnEditClickHandler, true);
É importante salientar que o argumento ("useCapture") é exclusivo - isso significa que se ele for utilizado, a função handler não será chamada durante a fase de alvo ou de borbulhamento. Para chamar a função em todas as fases, embora seja raro utilizar esse recurso, teria que ser adicionado dois listeners, conforme o exemplo abaixo:
this.addEventListener(MouseEvent.CLICK, btnEditClickHandler);
this.addEventListener(MouseEvent.CLICK, btnEditClickHandler, true);

Dica.: Só use a fase de captura quando for realmente necessário, porque ela é mais pesada computacionalmente que a fase de borbulhamento.


Bom, esse post já está ficando meio longo, então vou encerrá-lo por aqui e quebrar o assunto em dois. O próximo post será uma continuação desse, mas com uma abordagem bem mais prática do fluxo de eventos, dirigida a código-fonte. Para informações de como as versões mais antigas (que utilizavam até a versão 2 do Action Script) lidavam com eventos, leia esse artigo.


Referências

About Events
Event propagation
Fluxo de um Evento no Flex
How ActionScript 3.0 event handling differs from earlier versions
Introduction to event handling in ActionScript 3.0
Understanding the display architecture
Using events

domingo, 2 de agosto de 2009

Palestra: "Adobe Flex: O que é, para quem serve e porque adotá-lo"

No dia 8 de Agosto, às 14:00h, o Mário Júnior vai fazer uma palestra on-line gratuita no Treina TOM. Essa palestra tem como objetivo apresentar para os desenvolvedores Web o Adobe Flex como uma solução para desenvolvimento de RIAs e esclarecer a sua adoção frente aos seus concorrentes.

sábado, 1 de agosto de 2009

Tour da Plataforma Flash no Brasil

Ocorrerá em Agosto, em quatro capitais brasileiras, o Tour de lançamento da Plataforma Flash e do Flash Builder 4 no Brasil. O evento contará com a participação de Lee Brimelow, evangelista mundial da plataforma Flash e autor de diversos títulos e treinamentos no Lynda.com.

Dentre os assuntos que serão abordados, estarão:
  • Plataforma Flash e a integração de seus componentes;
  • Aplicações e novidades do Flash Builder 4;
  • Grandes casos de sucesso de utilização das soluções Web da Adobe.

Os horários e locais do tour são:
  • 16/08, das 14:00h às 17:30h, em Salvador, no Fiesta Bahia Hotel.
  • 18/08, das 08:30h às 12:00h, em Brasília, no Mercure Hotel Brasília Eixo Monumental.
  • 18/08, das 19:00h às 22:00h, no Rio de Janeiro, no Pestana Rio Atlântica Hotel.
  • 20/08, das 08:30h às 12:00h, em São Paulo, no Park Suites ITC.

O evento proporcionado pela Adobe é gratuito, mas tem vagas limitadas. Os participantes concorrerão a um Flash Buider 4, dentre outros brindes. As inscrições podem ser feitas aqui.