segunda-feira, 14 de dezembro de 2009

Flex SDK 3.5 Released

Foi liberada na Sexta, dia 11, sem muita divulgação, a versão 3.5 do SDK (software development kit) do Flex. O download pode ser feito na página oficial, ou diretamente por esse link.

Ainda não foi divulgada a lista de melhorias e correções; mas assim que ela estiver disponível, completarei esse post.

Essa versão incorpora atualizações de segurança e algumas melhorias e correções de defeitos, que podem ser encontradas aqui (é necessário fazer login). A referência de linguagem também foi atualizada para a versão 3.5.

segunda-feira, 23 de novembro de 2009

Caravana GUJavaSC '09

O Caravana GUJavaSC faz a sua terceira edição em 2009. Desta vez, trará um palestrante internacional da Sun Microsystems e renomados palestrantes locais, que irão falar sobre Java e desenvolvimento ágil.

Data: 5 de dezembro de 2009 (Sábado)

Local: Fecomércio - Rua Felipe Schmidt, 785, Centro, Florianópolis-SC.


Exibir mapa ampliado

É necessária a inscrição antecipada para garantir a vaga. Para fazer a sua inscrição, clique aqui. No dia do evento deverão ser levadas 2 caixas de bombons, que serão doadas no Natal para instituições de caridade locais.

Mais informações no site oficial do evento.

domingo, 25 de outubro de 2009

TDC – "The Developers Conference" 2009

Hoje, dia 25 de Outubro, é o último dia para inscrições com desconto para o TDC 2009. O evento, um dos maiores sobre JAVA, contará com personalidades internacionais, tais como Rod Johnson (criador do Spring Framework e fundador da SpringSource), Mike Keith (líder da especificação de EJB 3 e JPA, da Oracle), Ed Burns (líder da especificação JavaServer Faces, da Sun Microsystems) e Chris Schalk (do Google App Engine), além de palestrantes brasileiros.

O evento ocorrerá nos dias 6 e 7 de Novembro, em São Paulo (ver programação); no dia 9, em Florianópolis (ver programação); e no, dia 11 no Rio de Janeiro (ver programação).

As inscrições podem ser feitas aqui - lembrando que a partir de amanhã ficará mais cara.



quinta-feira, 15 de outubro de 2009

Flex 4 SDK, Flash Builder 4 e Adobe Flash Catalyst Beta 2 Released

Nessa Segunda, dia 12 de Outubro, foi disponibilizada a versão beta 2 do SDK do Flex 4. O download pode ser feito aqui.

O Flash Builder 4 e o Adobe Flash Catalyst também tiveram suas novas versões lançadas. O Flash Builder 4 beta 2 pode ser baixado aqui e o Catalyst beta 2 pode ser baixado aqui (é necessário fazer login).

Nesse post eu falo um pouco sobre esses produtos (o post foi referente à versão beta 1, mas continua válido). O artigo "What's new in Flex 4 beta", do Matt Chotin, citado no post, já está atualizado pra versão beta 2.

quinta-feira, 8 de outubro de 2009

Material do Adobe MAX 2009

Quer saber o que rolou essa semana, em Los Angeles, no Adobe MAX 2009? Acesse o MAX Online e o Adobe TV, que tem muito conteúdo lá.



quarta-feira, 7 de outubro de 2009

Ágiles 2009

Amanhã, dia 8 de Outubro, e Sexta, ocorre em Florianópolis a Segunda Conferência Latino-Americana sobre Metodologias Ágeis - o "Ágiles 2009". Para maiores informações, acesse o site oficial, clicando na figura abaixo.



quinta-feira, 17 de setembro de 2009

DOJO: "Criação de uma aplicação CRUD Flex respeitando melhores práticas"

Na próxima Quarta, no dia 23 de Setembro, às 19 horas, será realizada mais uma reunião do GUF FloripaFlex, na ACATE, em Florianópolis. Dessa vez não será uma palestra e sim um "coding dojo".

Os objetivos do dojo são a troca de experiências e a aprendizagem. O principio é de reunir um grupo de pessoas para desenvolver em conjunto a solução a um problema de programação especifico. O desenvolvimento é feito com apenas um computador ("group programming") e um data show. Os membros do grupo desenvolvem juntos, trocando periodicamente quem esta efetivamente escrevendo o código.

Depois de desenvolvido, o código será disponibilizado no projeto do FloripaFlex no GoogleCode.

As inscrições (gratuitas) podem ser feitas aqui.

Maiores informações aqui.

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.

domingo, 26 de julho de 2009

Como instalar o plugin do Flex Builder 3 no Eclipse 3.5 (Galileo)

E novamente aproveitando a deixa do post "Como trocar a versão do Eclipse sem ter que reinstalar o plugin do Flex Builder", vou mostrar como instalar o plugin do Flex Builder 3 no Eclipse 3.5 (codinome Galileo).

Ao seguir as etapas que coloquei no post "Preparando o ambiente", e se for utilizado o Eclipse 3.5, ao tentar instalar o plugin do Flex Builder 3, vão ser nortadas algumas coisas diferentes:
  • Ao escolher o localização do eclipse, vai aparecer um aviso de que talvez não dê certo a instalação do plugin (algo ligado ao diretório "configuration") - nesse ponto deve-se ignorar o aviso e continuar assim mesmo.
  • No final da instalação, vai aparecer um outro aviso "Product extension not established automatically" ("This installation can still be configured manually as a Product Extension...") - por hora, basta dar OK, e terminar a instalação.

Terminada a instalação do plugin, deve-se fazer os procedimentos indicados no post "Como trocar a versão do Eclipse sem ter que reinstalar o plugin do Flex Builder", para que o plugin funcione.

Como utilizar a mesma instalação do plugin do Flex Builder em diferentes instâncias do Eclipse

Aproveitando o post anterior ("Como trocar a versão do Eclipse sem ter que reinstalar o plugin do Flex Builder"), já vou aproveitar pra registrar como utilizar a mesma instalação do plugin do Flex Builder em diferentes "instalações" do Eclipse. Isso é pra quem utiliza mais de um Eclipse, seja por ter um grande número de projetos - o que deixa o Eclipse meio lento em algumas situações - ou por necessidade de ter ambientes de programação com características diferentes. As etapas são exatamente iguais ao do post anterior, com a única diferença de que será necessário repetir o processo para cada instância do Eclipse.

Como trocar a versão do Eclipse sem ter que reinstalar o plugin do Flex Builder

Essa é pra quem usa o plugin do Flex Builder para o Eclipse.

Recentemente me deparei com uma nova versão do Eclipse, a 3.5 (codinome Galileo), e resolvi atualizar meu ambiente de programação Flex. Só que eu não queria fazer todo o processo novamente (instalar o Flex Builder Plugin, inserir o serial, etc - como eu descrevi no post "Preparando o ambiente"); queria apenas e simplesmente atualizar o Eclipse.

Dei uma pesquisada e encontrei uma solução bem simples para isso. Após baixar e descompactar a nova versão do Eclipse (que pode ser encontrada aqui), basta seguir os seguintes passos
  • No diretório principal do Eclipse, onde fica o "eclipse.exe", crie uma pasta chamada "links".
  • Dentro dessa pasta, crie um arquivo chamado "com.adobe.flexbuilder.feature.core.link" (sem mais nenhuma extensão).
  • Abra esse arquivo em um editor de textos qualquer e coloque nele a localização do Flex Builder Plugin, conforme o modelo abaixo:
path=C:/Arquivos de programas/Adobe/Flex Builder 3 Plug-in
  • Salve o arquivo e, para testar se funcionou, abra o Eclipse e abra a perspectiva "Flex Development" (encontrada em Window -> Open Perspective -> Other).

Pronto, é simples assim! ;)


terça-feira, 14 de julho de 2009

Flex Mania 2009

Aconteceu na semana passada o Flex Mania 2009, um evento brasileiro totalmente on-line sobre a plataforma Flash - abordando principalmente o framework Flex. O evento se mostrou um sucesso, contando com palestrantes de alto nível e com grande participação do público. A utilização do Adobe Connect Pro tornou o evento bem interativo, disponibilizando a tela compartilhada do computador dos instrutores, o áudio deles e dos participantes, um ambiente de chat para perguntas e comentários, formulários para avaliação das palestras, dentre outros recursos.

E quem não participou pode ainda assistir as palastras, que foram todas gravadas, além de poder baixar os materiais utilizados (slides, fontes, etc). O conteúdo está disponível aqui.

Parabéns à comissão organizadora!

terça-feira, 7 de julho de 2009

Novo domínio: flexao.net

O blog, que antes era acessado através do endereço http://flexao.blogspot.com, agora pode ser acessado através do http://www.flexao.net ou, simplesmente, http://flexao.net.

segunda-feira, 6 de julho de 2009

Palestra: "Desenvolva Aplicações Ricas com o Flex Builder 3"

Será apresentada no dia 18 de Julho, das 10 às 13 horas, na Faculdade Impacta Tecnologia (SP), a palestra gratuita "Desenvolva Aplicações Ricas (RIA) com o Flex Builder 3" - ministrada por Marcos M. Alves, especialista certificado pela Adobe.

Conteúdo programático:
  • Sobre o Flex Builder 3;
  • Principais diferenças entre Flex e Flash;
  • Facilidade de integração com servidores (.NET, PHP, JSP, etc);
  • Como desenvolver aplicações para desktop utilizando o Flex com AIR;
  • Exemplos de aplicações;
  • Vantagens de utilizar o Flex Builder 3 para usuário, servidor e desenvolvedor.

As inscrições podem ser feitas aqui.

Para maiores informações, acesse o material oficial de divulgação.

segunda-feira, 29 de junho de 2009

Número serial para estender licença para o Flash Builder 4 beta

O número serial para estender uma licença do Adobe Flex Builder 3 para o Adobe Flash Builder 4 beta pode ser solicitado gratuitamente para quem tem a primeira licença - mesmo que seja uma licença educacional. Para isso, basta fazer a solicitação na página "Adobe Flash Builder 4 beta extension serial number request", informando o número da licença do Flex Builder 3.

domingo, 14 de junho de 2009

Manipulando XML no Flex com E4X

O Action Script 3 possui um conjunto de classes e funcionalidades para manipular documentos XML, baseados na especificação E4X (ECMAScript for XML) - mais precisamente na "ECMA-357 edition 2". Com isso, fica muito fácil trabalhar com XML, além do código ficar mais legível e fácil de manter.

As duas principais classes utilizadas são XML e XMLList - para utilizá-las, não é necessário importar nenhum pacote, já que elas ficam no core do framework.

Obs.: No ActionScript 2 também existia uma classe chamada XML, que foi renomeada para XMLDocument. As classes legadas do AS2 - XMLDocument, XMLNode e XMLNodeType - ficaram no pacote flash.xml.


Bom, mas em vez de explicar todas as funcionalidades do E4X, vamos diretamente a um exemplo prático comentado.

Vamos supor que temos o seguinte documento XML (XML literal) atribuído à variável "xmlProdutos":
var xmlProdutos: XML = 
 <produtos>
  <produto id="001">
   <nome>Creme Dental Happy</nome>
   <descricao>Tubo de 40g</descricao>
   <preco>3.50<preco>
   </produto>
  <produto id="002">
   <nome>Fio Dental Happy</nome>
   <descricao>50 metros</descricao>
   <preco>4.75<preco>
  </produto>
  <produto id="003">
   <nome>Escova Dental Happy</nome>
   <descricao>Escova de cerdas macias</descricao>
   <preco>3.45<preco>
  </produto>
 </produtos>;

1-) Acessando elementos do XML

Para acessar elementos ou nodos de um XML, é usada a notação "." - assim como se acessa as propriedades de um objeto qualquer. No exemplo dado, o documento "xmlProdutos" - que tem como elemento raiz "produtos" - possui uma lista de elementos filhos chamados "produto". Para retornar a lista de todos os produtos, na forma de XMLList, basta fazer da seguinte forma:
var listaDeProdutos: XMLList = xmlProdutos.produto;

Para obter um elemento específico, é só informar o seu índice (como se acessa um elemento de um array). Por exemplo, para pegar o primeiro "produto" do xmlProdutos:
var produto: XML = xmlProdutos.produto[0];

No XML de exemplo, um elemento "produto" possui três elementos filhos: "nome", "descricao" e "preco". Para obter a descrição do segundo produto, basta fazer:
var descricao: String = xmlProdutos.produto[1].descricao;

E para pegar o "id" de um determinado produto, deve-se usar um "@" - já que o id é um atributo do elemento "produto", e não um elemento filho, como no caso anterior.
var idProduto: String = xmlProdutos.produto[0].@id;

Já para obter a "descrição" de todos os produtos, basta não informar o índice do elemento "produto". O exemplo abaixo imprime no console a descrição de todos os produtos na forma de XMLList.
trace(xmlProdutos.produto.descricao);
No console, sairia assim:
Tubo de 40g
50 metros
Escova de cerdas macias

Para imprimir só o nome dos produtos, basta usar o método "text()":
trace(xmlProdutos.produto.descricao.text());
Obs.: Quando retorna só um elemento, como no caso de "trace(xmlProdutos.produto[0].descricao)", não é necessário utilizar o método "text()".


Outra forma de se obter os elementos de um XML é través da utilização dos métodos child() e attribute() - para obter, respectivamente, um elemento filho ou um atributo. Seguem exemplos com o uso dessa sintaxe:
txtResult.text = xmlProdutos.produto.child("nome");
xmlProdutos.produto.attribute("id");
Obs.: Uma das vantagens de utilizar os métodos child() e attribute(), é que é possível passar para eles uma variável do tipo String como argumento - dessa forma, a variável irá armazenar o nome do elemento ou do atributo e o código poderá ficar mais dinâmico.


Pode-se também buscar determinado elemento em qualquer nível do XML, sem conhecer seus nodos pais, ou quando o elemento tem pais diferentes, com o uso de ".." ou do método descendants(). Por exemplo, para obter a lista dos nomes de todos os produtos, poderia ser feito dessa forma:
var nomes: XMLList = xmlProdutos.produto.nome;
Ou simplesmente assim:
var nomes: XMLList = xmlProdutos..nome;
Ou ainda assim:
xmlProdutos.descendants("nome");

E se for utilizada a sintaxe "*", como no exemplo abaixo, "nome" poderia ter um elemento pai com qualquer nome, mas teria que estar necessariamente no segundo nível (com a sintaxe "..", ou utilizando o método descendants(), o elemento poderia estar em qualquer nível e em diferentes hierarquias dentro do XML).
var nomes: XMLList = xmlProdutos.*.nome;

Pode-se também iterar sobre os elementos de um XML. Se quisermos listar no console, por exemplo, o nome e o preço de todos os produtos, pode-se fazer assim:
for each(var xmlNode: XML in xmlProdutos.produto){
 trace(xmlNode.nome + " - R$" + xmlNode.preco);
}
Nesse caso, a variável xmlNode vai representar o elemento "produto" de cada iteração.

Pode-se ainda iterar sobre os elementos de um XML sem conhecer seus nomes, através do método children(), que retorna um XMLList com os elementos filhos, ou do método attributes(), que retorna um XMLList com os atributos do elemento. No exemplo abaixo, em que foi utilizado o método children() para retornar todos os elementos filhos de cada elemento "produto", a variável "element" vai representar cada um desses filhos em cada iteração - a seguir, é verificado se esse filho é do tipo "nome" ou "preco", através do método localname(), e, em caso positivo, é feito a impressão do valor deles no console.
for each(var element: XML in xmlProdutos.produto.children()){
 if(element.localName() == "nome")
  trace("Nome: " + element);
 else if(element.localName() == "preco")
  trace("Preço: " + element);
}

2-) Pesquisando elementos do XML

Pode-se pesquisar determinados elementos no XML. Por exemplo, para obter o elemento "produto" com o atributo "id" = "001", basta fazer:
var xmlProduto001: XML = xmlProdutos.produto.(@id=="001");

E para obter o "nome" do "produto" com atributo "id" = "002", pode-se fazer:
var nomeProduto002: String = xmlProdutos.produto.(@id=="002").nome;

Já para obter a descricao do "produto" com "nome" = "Creme Dental Happy", basta fazer:
var nomeProduto002: String = xmlProdutos.produto.(nome=="Creme Dental Happy").descricao;

Pode-se também utilizar filtros múltiplos. Por exemplo, para obter os produtos com "nome" = "Creme Dental Happy" e "descricao" = "Tubo de 40g", pode-se fazer assim:
var produto: XML = xmlProdutos.produto.(nome=="Creme Dental Happy" && descricao=="Tubo de 40g");

Também é possível utilizar operadores relacionais. Por exemplo, para obter todos os produtos com o preço menor que R$3,00, pode-se fazer assim:
var xmlProdutosFiltrados: XMLList = xmlProdutos.produto.(preco<3);
E para pegar todos os produtos que contenham a palavra "Dental", pode-se usar a função nativa search. Essa função irá retornar a posição inicial do padrão informado (no caso uma String) - se retornar "-1", significa que o padrão não foi encontrado:
var xmlProdutosFiltrados: XMLList = xmlProdutos.produto.(String(nome).search("Dental")>-1);
Atenção: Se tiver mais de um elemento retornado na pesquisa, vai voltar um XMLList e não um XML (se você não tiver certeza se vai voltar um ou mais elementos, use sempre um XMLList). Pode-se então iterar sobre os elementos do XMLList, assim como se faz com um XML. Exemplo de iteração em um XMLList:
var xmlList: XMLList = xmlProdutos.produto;
for each(var xmlNode:XML in xmlList)
 trace(xmlNode.nome);


3-) Alterando, deletando e incluindo elementos no XML

a) Para alterar ou atribuir um valor:
xmlProdutos.produto[0].descricao = "nova descrição";
b) Para deletar um ou mais elementos:
delete xmlProdutos.produto[0];
c) Para incluir um novo elemento: Supondo que deseja-se incluir um novo "produto", representado pelo XML abaixo:
var novoProduto: XML = 
  <produto id="534">
   <nome>Anti-séptico bucal Happy</nome>
   <descricao>Frasco de 150mL</descricao>
   <preco>6.35</preco>
  </produto>;
Para inserir um elemento no final do documento XML, pode-se utilizar o método appendChild:
xmlProdutos.appendChild(novoProduto);
Para inserir um elemento no final do início do XML, pode-se utilizar o método prependChild:
xmlProdutos.prependChild(novoProduto);
Pode-se ainda passar como parâmetro dos métodos appendChild ou prependChild um XMLList ou até mesmo um XML literal, como no exemplo abaixo:
xmlProdutos.appendChild(<produto id="534"><nome>Anti-séptico Happy</nome><descricao>Anti-séptico bucal Happy - frasco de 150mL</descricao><preco>6.35</preco></produto>);
Na utilização de um XML literal, pode-se também usar binding, através do uso de "{" e "}":
var id: String = "534";
var nome: String = "Anti-séptico Happy";
var descricao: String = "Anti-séptico bucal Happy - frasco de 150mL";
var nome: String = "Anti-séptico Happy";
var preco: Number = 6.35;

xmlProdutos.appendChild(<produto id={id}><nome>{nome}</nome><descricao>{descricao}</descricao><preco>{preco}</preco></produto>);
Pode-se ainda inserir o elemento em uma posição específica do XML. Por exemplo, para inserir o novo produto antes do produto que está na posição 2, pode-se usar o método insertChildBefore:
xmlProdutos.insertChildBefore(xmlProdutos.produto[2], novoProduto);
E para inserir depois do produto que está na posição 1, pode-se usar o método insertChildAfter:
xmlProdutos.insertChildAfter(xmlProdutos.produto[1], novoProduto);

4-) Carregando um arquivo XML Para carregar um arquivo XML externo, pode-se utilizar as classes URLLoader e URLRequest, conforme o exemplo abaixo:
import flash.net.URLLoader
   
private var xmlProdutos: XML;
private var urlLoader: URLLoader;
   
private function carregaXML(): void{
 urlLoader = new URLLoader();
 urlLoader.addEventListener(Event.COMPLETE, onComplete);
 //carrega o arquivo "produtos.xml" de uma url qualquer 
 urlLoader.load(new URLRequest("http://www.inf.ufsc.br/~feco/blog/data/produtos.xml"));
 //ou carrega o arquivo "produtos.xml" presente no diretório dados do mesmo contexto da aplicação (local dos fontes)
 urlLoader.load(new URLRequest("dados/produtos.xml"));
}
   
private function onComplete(evt:Event):void{
 xmlProdutos = new XML(urlLoader.data);
}
Já no MXML, basta utilizar o atributo source:
<mx:XML id="xmlProdutos" source="dados/produtos.xml"/>
Pode-se também utilizar o HTTPService, em vez do URLRequest. No exemplo abaixo, é utilizado o HTTPService do MXML:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="dataService.send()">

 <mx:Script><![CDATA[
  import mx.rpc.events.ResultEvent;
   
  var xmlProdutos: XML;
   
  private function onResult(event: ResultEvent): void{
   xmlProdutos = XML(event.result);
  }
 ]]></mx:Script>
 
 <mx:HTTPService id="dataService" url="http://www.inf.ufsc.br/~feco/blog/data/produtos.xml" resultFormat="e4x" result="onResult(event)"/>

</mx:Application>

Referências:
AS3 E4X Rundown
Adobe Flex 3.3 Language Reference
Flex Quick Starts: Handling data - Accessing XML data
Ways to use E4X to filter data in ActionScript 3
Working with XML Working with XML, E4X and ActionScript 3


segunda-feira, 1 de junho de 2009

Lançados os betas do Adobe Flash Builder 4 e do Adobe Flash Catalyst

Foi lançada a versão beta do Adobe Flash Builder 4, que substituirá o Adobe Flex Builder 3. Apesar do nome da IDE ter mudado, o nome do framework continua sendo Adobe Flex - a intenção da Adobe foi de criar uma clara distinção entre a a IDE, que é paga, e o framework, que é free.

Dentre as melhorias na IDE, estão:
  1. Melhorias no refactoring, no debugger e no profiler.
  2. Geração automática de getters e setters.
  3. Package Explorer.
  4. Network Monitor (mede tráfego entre o cliente e o servidor).
  5. Suporte a Flex Unit (testes unitários) .

*Mais detalhes em: "What's new in Flash Builder 4 beta".


Vale lembrar que a versão beta do Adobe Flash Builder 4 já trás consigo a nova versão do framework Flex, o Flex 4 SDK (codinome "Gumbo"), que também ainda está em versão beta (a versão final está prevista para o quarto trimestre do ano). Deixarei para abordar as mudanças da nova versão do framework em um post futuro.

Também foi lançada a versão beta do Adobe Flash Catalyst. Com essa ferramenta, que pode trabalhar em conjunto com o Flash Builder, será possível fazer a prototipação e criação de interfaces visuais funcionais (incluindo eventos e efeitos), sem nenhuma codificação. Será possível também fazer a exportação de projetos do Adobe Photoshop® e do Adobe Illustrator®, para serem manipulados e integrados com a codificação da aplicação. Assim, os designers podem trabalhar em conjunto com os desenvolvedores, disponibilizando toda parte visual da aplicação e permitindo que eles se preocupem apenas com o código de negócio.

Dica: nesse link se encontram alguns vídeos com demonstrações do Flash Builder, do Flash Catalyst e do Flex SDK 4.

domingo, 31 de maio de 2009

Como selecionar registros relacionados de diferentes Datagrids

Segue um exemplo simples em que, após o usuário clicar em um registro da primeira grid, é selecionado programaticamente um registro relacionado de uma segunda grid.


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


O código que faz a seleção na segunda grid ("gridCategorias"), após o clique na primeira grid ("gridProdutos"), está abaixo:
private function selecionaCategoria(event: MouseEvent): void{
 if(gridProdutos.selectedItem){
  var id_cat: String = gridProdutos.selectedItem.id_categoria;
  trace(id_cat);
  var i: uint;
  for(i=0; i<myData2.length;i++){
   if(id_cat == myData2[i].id){
    gridCategorias.selectedItem = myData2[i];
    //se tiver scroll na grid, ele terá que ser rolado até o ponto da seleção.
    gridCategorias.scrollToIndex(i);
   }
  }
 }
}


sexta-feira, 15 de maio de 2009

Palestra: "Integrando Flex e PHP"

Na próxima Quarta-feira (dia 20), das 19:00h às 20:00h, acontece mais um evento do grupo de usuários FloripaFlex. Será apresentada uma palestra com o foco na integração entre Flex e PHP.

Segundo o post no site do GUF, "A palestra tem por objetivo apresentar o Flex aos programadores PHP e a facilidade em trabalhar com RemoteObject. Demonstar a integração do Flex com PHP e PHP+MySql utilizando AMFPHP e uma comparação com as três formas de integração. Uma breve abordagem do AMFPHP e suas configurações. E, finalizando, falar sobre segurança do Flex com PHP via AMFPHP".

As inscrições (gratuitas) para o evento podem ser feitas por aqui.

sábado, 25 de abril de 2009

Como utilizar o PopUpManager

O PopUpManager é uma classe Singleton - padrão de projeto que garante que vai existir apenas uma única instância da classe a qualquer instante e em qualquer ponto de um sistema. Ela é responsável por mostrar janelas "pop-ups" na camada mais superior da aplicação, sobre todos os outros componentes visuais. Essas janelas podem ser, por exemplo, alertas, menus de contexto, pequenos formulários para inserção de dados, ou até a lista mostrada ao clicar em um combobox.

O PopUpManager também possui a capacidade de deixar a janela mostrada como sendo do tipo modal, ou seja, os componentes visuais que se encontram abaixo do pop-up não poderão receber eventos de mouse. De qualquer forma, ainda será possível detectar eventos de clique fora do pop-up - dessa forma o desenvolvedor pode optar, por exemplo, por fechar a janela popup ou mostrar algum alerta pro usuário quando isso ocorrer.

Bom, mas vamos a um exemplo simples, onde é mostrada e centralizada uma janela pop-up após o clique no botão "Mostrar Pop-up". A janela pop-up, representada pela classe PopUpPanel.as e que pode ser visualizada abaixo, nada mais é do que um Panel comum, que será aberto pela classe PopUpManager através do método estático "addPopUp" (ver linha 14 da classe Main.mxml) e centralizado através do método estático "centerPopUp" (ver linha 15 da classe Main.mxml).


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


Seguem os códigos-fonte:

Main.mxml
<mx:application mx="http://www.adobe.com/2006/mxml" layout="absolute" creationcomplete="createPopUpWindow()">
 <mx:script>
  <!--[CDATA[
   import flexao.popups.PopUpPanel;
   import mx.managers.PopUpManager;

   private var _popUpWindow: PopUpPanel;
   
   private function createPopUpWindow(): void{
    _popUpWindow = new PopUpPanel();
   }

   private function showPopUp(event: MouseEvent): void{
    PopUpManager.addPopUp(_popUpWindow, this, true);
    PopUpManager.centerPopUp(_popUpWindow);
   }
  ]]-->
 </mx:script>

 <mx:button label="Mostrar Pop-Up" click="showPopUp(event)" horizontalcenter="0" verticalcenter="0"/>
</mx:application>

Como pode-se observar, foram passados três parâmetros para o método "addPopUp":
 PopUpManager.addPopUp(_popUpWindow, this, true);
  1. No primeiro, que é do tipo IFlexDisplayObject, deve-se passar a referência do container que representa a janela pop-up (no exemplo, foi utilizada a variável _popUpWindow);
  2. No segundo, que é do tipo IFlexDisplayObject, deve-se passar a referência do container que representa o contaner que será o pai ("parent") da janela pop-up, servindo como referência para a sua centralização (no exemplo, foi passado "this", representando a própria aplicação);
  3. O terceiro, que é do tipo booleano, definirá se a janela pop-up será modal ou não (passar "true" ou "false", respectivamente) - esse argumento é opcional e se não for passado nada, terá o valor "false" como padrão.

PopUpPanel.as
package flexao.popups{
 import flash.events.MouseEvent;

 import mx.containers.Canvas;
 import mx.containers.ControlBar;
 import mx.containers.Panel;
 import mx.controls.Button;
 import mx.controls.Label;
 import mx.controls.Spacer;
 import mx.controls.TextInput;
 import mx.managers.PopUpManager;

 public class PopUpPanel extends Panel{

  public function PopUpPanel(){
   super();
  }

  protected override function createChildren(): void{
   super.createChildren();

   var contMain: Canvas = new Canvas();
   contMain.percentWidth = 100;
   contMain.percentHeight = 100;

   var label: Label = new Label();
   label.text = "Digite a palavra-secreta:";
   label.setStyle("top", 5);
   label.setStyle("left", 5);
   var txtSecretWord: TextInput = new TextInput();
   txtSecretWord.setStyle("top", 25);
   txtSecretWord.setStyle("left", 5);

   var controlBar: ControlBar = new ControlBar();

   var btnOK: Button = new Button();
   btnOK.label = "OK";
   btnOK.addEventListener(MouseEvent.CLICK, closePopUp);
   controlBar.addChild(btnOK);

   var btnCancel: Button = new Button();
   btnCancel.label = "Cancelar";
   btnCancel.addEventListener(MouseEvent.CLICK, closePopUp);
   controlBar.addChild(btnCancel);

   contMain.addChild(label);
   contMain.addChild(txtSecretWord);

   this.title = "Janela Pop-up";
   this.width = 250;
   this.height = 200;
   this.addChild(contMain);

   this.addChild(controlBar);
  }

  private function closePopUp(event: MouseEvent): void{
   PopUpManager.removePopUp(this);
  }
 }
}

Para fechar a janela, basta utilizar o método estático "removePopUp", passando como parâmetro a referência da instância do container que representa a janela pop-up (ver linha 58 da classe PopUpPanel.as) - no exemplo, foi passado "this", pois o método foi chamado da própria janela pop-up.

quinta-feira, 2 de abril de 2009

Palestra: "Architecting performant Flex/Java applications"

Aconteceu na última terça (31 de Março), na ACATE, em Florianópolis, mais um evento do grupo de usuários FloripaFlex. Desta vez, contamos com a presença internacional de Stephane Rondal - Head Architect da empresa ClearPriority, com sede na Bélgica - que falou principalmente de questões relacionadas à performance de aplicações que utilizam as tecnologias java e flex.

O material da presentação está disponível aqui.

segunda-feira, 30 de março de 2009

Tour de Flex 1.2 e versão Web lançados

Foi lançada a versão 1.2 da versão desktop Tour de Flex (feita com o Adobe AIR), com algumas melhorias em relação à versão anterior. O arquivo de instalação pode ser baixado aqui.

Pra quem não conhece, o Tour de Flex é uma aplicação desenvolvida para exploração dos recursos do Flex, incluindo os componentes core, componentes do Data Visualization, componentes de terceiros, integração de dados, efeitos, skins, entre outras coisas. O mais interessante é que pode-se visualizar um exemplo de cada unidade - incluindo o código fonte utilizado - de uma maneira simples e de fácil acesso. O Tour de Flex pode ser utilizado como showcase (para visualizar as capacidades do Flex) das capacidades da plataforma e como exemplo de código para os desenvolvedores.


The web version of Tour de Flex

De quebra, também foi lançada uma versão web do Tour de Flex, que pode ser acessada aqui. Essa versão é muito semelhante à versão desktop; mas, como é de se esperar, não possui os exemplos que utilizam o AIR.



domingo, 15 de março de 2009

Como instalar o Data Visualization 3.3 no Flex Builder/ Eclipse

Para instalar a versão 3.3 do Data Visualization no Flex Builder, ou no Eclipse com Flex-Builder Plug-in, instale primeiramente o SDK 3.3 do Flex, conforme o post "Como instalar o SDK 3.3 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.3.
  2. Acesse o ditetório onde está o SDK 3.3 do Flex (no Windows, ele estará provavelmente em "C:\Arquivos de programas\Adobe\Flex Builder 3\sdks\3.3.0" ou em "C:\Arquivos de programas\Adobe\Flex Builder 3 Plug-in\sdks\3.3.0").
  3. Descompacte o arquivo "datavisualization_sdk3.3.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.3 no Flex Builder/ Eclipse

Conforme anunciado no post anterior, foi lançada a versão 3.3 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 da página oficial da Adobe de downloads para Flex 3 ou diretamente do link para download do SDK 3.3.
  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.3 - por exemplo, "3.3.0".
  4. Descompacte o arquivo "flex_sdk_3.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.3.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.3 como padrão para todos os projetos, deselecione a outra versão do SDK, selecione a versão 3.3 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".


terça-feira, 10 de março de 2009

Flex SDK 3.3 Released

Foi lançada ontem a versão 3.3 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 correções de bugs, que podem ser visualizadas aqui.

Para baixar o SDK, acesse a página oficial de downloads para Flex ou diretamente a página pra downlaod do SDK 3.3. Lá, também pode ser baixado a versão 3.3 do Data Visualization.

sexta-feira, 6 de março de 2009

Palestra: "Integração Flex/Java: arquiteturas e frameworks"

Hoje acontecerá a segunda palestra promovida pelo recém-criado grupo de usuários "FloripaFlex" na ACATE, em Florianópolis. A palestra irá apresentar os principais elementos de como integrar Java e Flex.

Maiores informações em:
http://groups.adobe.com/posts/013217452f

Inscrições (gratuitas) em:
https://spreadsheets.google.com/viewform?hl=en&formkey=cG02WXk3Rk5oejk5UTV5UVpmRHdoV1E6MA

terça-feira, 17 de fevereiro de 2009

Adobe abrirá especificação do "Real-Time Messaging Protocol" (RTMP)

A Adobe anunciou no final de Janeiro que publicará no Adobe Developer Connection, ainda durante esse semestre, a especificação do "Real-Time Messaging Protocol" (ou "Protocolo de Mensagens em Tempo Real"). O RTMP foi projetado para transmissão com alta performance de conteúdo rico (como áudio e vídeo) e streaming de dados, não importando que tipo de dispositivo o usuário está utilizando (pc, dispositivos móiveis, etc) ou a origem do conteúdo. Com essa iniciativa, pode surgir uma nova geração de aplicativos baseados na web.

A especificação será disponibilizada no endereço:
http://www.adobe.com/devnet/rtmp/ Maiores informações diretamente na fonte. ;)

domingo, 8 de fevereiro de 2009

Flex - Por onde começar?

Bom, antes de começar os estudos, sempre é bom dar uma olhada em algumas aplicações prontas, pra ter noção do que se pode fazer. No post "Demonstração", separei alguns links bem interessantes, demonstrando um pouco do potencial do Flex.

Feito isso, vamos ao que interessa! Aprender Flex vai exigir inicialmente um pouco leitura de teoria e de estudo de exemplos, para pegar um certo embasamento e observar algumas boas práticas e peculiaridades do framework - para isso basta só vontade, já que existe uma vasta quantidade de material disponível na Web.

Além disso, como já é de se esperar, vai ser importante colocar em prática os novos aprendizados ("se aprende a programar programando"). Para isso, basta instalar o SDK do Flex (software development kit ou standard development kit) , programar em qualquer editor de texto e compilar o código através de linha de comando. Mas como essa não é a forma mais amigável e rápida de se programar, isso poderia ser um obstáculo a mais para os iniciantes. Dessa forma, utilizar uma boa IDE, como o Flex Builder, ajudará bastante. No post "Preparando o ambiente", é mostrado como instalar essa ferramenta da Adobe.

Com o ambiente disponível, é hora de começar os estudos. Existe muito material sobre Flex na Web, então é bom começar com fontes mais formais, como livros ou os materiais oficiais da Adobe, para pegar uma boa base e aprender as melhores práticas (depois que se aprende a programar de forma errada, é muito difícil mudar alguns vícios... digo isso por experiência própria!).


Materiais para Estudo

Um material oficial, de excelente qualidade, que serve como referência geral para os desenvolvedores, é o Flex 3 Developer's Guide (a versão em pdf pode ser baixada aqui). No Adobe Flex Resources estão esse e muitos outros materiais oficiais da Adobe - vale a pena dar uma olhada.

Para quem tem dificuldades com a língua inglesa, uma boa opção é o livro digital "Adobe Flex a Partir do Zero" (escrito em português de portugal).

Além disso, um link interessante pra se ter em mãos, principalmente pra quem está começando, é o Adobe Flex 3 Component Explorer. Ao selecionar um componente na árvore do lado esquerdo, é possível visualizar um exemplo funcional e o código correspondente.

Outra página muito útil é o Flex Examples. Como o próprio nome já diz, é um site repleto de exemplos de código Flex - incluindo desde coisas simples, como mudar a cor de fundo de um componente, ou mudar as características da sua borda, à coisas mais complexas.

Dica: Outros materiais, também em português, que vale a pena dar uma olhada, são alguns tutoriais do Mário Júnior sobre Action Script 3 (a linguagem de programação utilizada no Flex): "Tutorial Action Script 3 Parte I - O Livro" (o pdf pode ser baixado aqui); "Tutorial Action Script 3 Parte 2 - O que foi feito" (o pdf de uma versão resumida pode ser baixado aqui); "Tutorial Classes AS3"; "Tutorial - AS3 Interfaces"; "Tutorial MVC no Flex; Entendendo a lógica".

Além desses materiais, uma fonte fundamental pra consulta por parte de qualquer desenvolvedor é o Adobe Flex Language Reference - que contém a documentação de todas as classes do framework (localização da classe dentro dos pacotes, herança, descrição da classe, propriedades, métodos, estilos, eventos, etc).


E se você tem uma boa compreensão auditiva do inglês, vale a pena dar uma olhada na série de vídeos do curso "Flex in a Week".

Também vale a pena dar uma olhada no "Flex Learning Paths", que contém material para o aprendizado de Flex dividido em quatro categorias, baseando-se no perfil do interessado: Designer/Web Developer, Programmer, Manager e Architect.

E, pra finalizar, vale também ficar atento nos artigos e tutoriais que aparecem no "Flex Developer Center" e nas dicas rápidas que aparecem no "Flex cookbook".

Dica: É interessante também participar das listas de discussão sobre Flex - flexdev e Flex-Brasil (em português); flexcoders (em inglês) - e do Forum FlexBrasil.

Quanto a este blog, marcarei com a tag "flex-basics" as teorias de base do framework - aquelas que todo desenvolvedor Flex deveria conhecer.

É isso! Com certeza muitas dúvidas vão surgir - a maioria se consegue resolver através de uma pesquisa básica no Google... ;). Mas, com o tempo, vai se pegando os macetes do framework e a quantidade de dúvidas tende a diminuir - a maioria vai se resumir a questões específicas de alguns componentes.

Now, the sky is the limit... Bons estudos! =)

sábado, 31 de janeiro de 2009

Preparando o ambiente

O Flex Builder é uma ferramenta da Adobe para desenvolvimento Flex/AIR. Ele é construído sobre o Eclipse, uma IDE de código aberto que já é utilizada amplamente - principalmente pela comunidade de desenvolvedores Java. O FlexBuilder inclui editores para ActionScript, MXML e CSS, além de ferramentas para debug e um editor "WYSIWYG" (what you see is what you get), em que basta arrastar e soltar os componentes na tela, para depois definir apenas as suas características e comportamentos.

O Flex Builder pode ser encontrado em duas versões "Standard" e "Professional". Na versão professional, estão presentes também os componentes da biblioteca "data visualization" - que inclui o componente "Charting" (para geração de gráficos), o "AdvancedDataGrid", o "OLAPDataGrid" e componentes para automação de testes. Outro diferencial da versão profissional são as ferramentas do "Flex Profiling" - utilizadas para monitoramento de consumo de memória e uso de ciclos da CPU.

Além disso, o Flex Builder está disponível em duas distribuições: "Flex Builder 3" e "Flex Builder 3 Eclipse Plug-in" - enquanto que a primeira é um ambiente de desenvolvimento completo, a segunda depende da existência de uma versão do Eclipse na máquina. Como desenvolvedor Java/Flex, particularmente eu prefiro a opção do plug-in, pois posso também criar projetos java dentro do mesmo Eclipse (mas nada impede de se trabalhar com dois Eclipse abertos, embora hajam algumas desvantagens).

Apesar do SDK do Flex ser gratuito, e ter-se a opção de escrever o código em qualquer editor de texto e compilá-lo via linha de comando, o Flex Builder é pago. De qualquer forma, pode-se baixar aqui um trial da versão Professional nas duas distribuições. A versão trial, válida por 60 dias, tem todas as ferramentas e funcionalidades da versão ativada; a única diferença é que na versão para avaliação, os componentes do "data visualization", como os gráficos, serão compilados com uma marca d'água no fundo, informando se tratar de uma versão trial.

Existem também algumas alternativas gratuitas, como o FlashDevelop e o Amethyst, mas elas não ofereçem todos os benefícios encontrados no Flex Builder (falerei sobre elas em um post futuro).

Dica: A Adobe oferece uma licença educacional para estudantes, professores ou instituições de ensino. Acesse este site, e, aceitando os termos e condições, preencha o formulário com seus dados pessoais e faça o upload de um comprovante estudantil ou de trabalho em uma instituição de ensino (PDF ou imagem escaneada no formato GIF). Após alguns dias, será enviado por e-mail um número serial para ativação do Flex Builder Professional (incluindo a utilização do data visualization).

Os requisitos para utilização do Flex Builder podem ser encontrados aqui. Como o Flex Builder é um pouco pesado, se o computador tem bastante memória RAM, sempre é bom aumentar um pouco a memória disponibilizada para uso da IDE - para isso, basta editar o arquivo "FlexBuilder.ini" (presente no diretório de instalação do Flex Bulder) ou, para o caso da utilização do plug-in, o arquivo "eclipse.ini" (disponível no diretório do eclipse).


Instalando o Flex Builder e o Flex Builder Eclipse Plug-in

Vou mostrar agora como instalar as versões do "Flex Builder Professional 3" e "Flex Builder Professional 3 Eclipse Plug-in" (versões trial, que estão disponíveis para download no site da Adobe e que podem ser ativadas através de um número serial, como informado anteriormente).

Dica: Caso você opte pela versão plug-in e não tenha o Eclipse na máquina, ou sua versão seja inferior a 3.3, poderá baixá-lo aqui. Escolha a distribuição desejada e, no lado direito da tela, escolha o sistema operacional (atualmente só estão disponíveis plugins do Flex Builder para Windows e Mac) - costumo utilizar a distribuição "for Java Developers" para Windows 32bits. Escolha então um mirror e realize o download. Após seu término, descompacte o arquivo zip no local desejado (não é necessária uma instalação).

Bom, as instalações tanto do Flex Builder como do Flex Builder Eclipse Plug-in são muito simples: basta executar os arquivos de instalação correspondentes (FB3_win.exe ou FB3_WWEJ_Plugin.exe) e seguir os passos do wizard.

O wizard para a versão plug-in vai ter uma pequena diferença: a tela observada abaixo, onde deverá ser selecionado o diretório onde foi colocado o Eclipse.

Uma outra tela que vai aparecer, para os dois tipos de instalação, é a que está abaixo. Desmarque as opções de instalação da versão debug do Flash Player 9 (depois iremos instalar a versão 10, que é a mais atual).

No mais, dê continuidade nas etapas do wizard, até acabar o processo de instalação.


Procedimentos pós-instalação do Flex Builder ou do Flex Builder Eclipse Plug-in

Após o fim da instalação, vamos instalar a versão para debug do Flash Player 10. O download pode ser feito aqui - escolha a versão compatível com seu sistema operacional e com seu navegador dentre as disponíveis na seção "Adobe Flash Player 10 - Debugger Versions" (para o Firefox, utilize a versão "for Netscape-compatible browsers"). Execute então o instalador (é necessário fechar o browser antes).

Obs.: Caso a versão de debug do Flash Player não esteja instalada, não será possível debugar a aplicação - irá aparecer um erro como "Flex Builder cannot locate the required debugger version of flash Player...".


O próximo passo é iniciar o Flex Builder ou o Eclipse (no caso da versão plug-in). Com o uso do Eclipse, pode ser solicitado que você escolha um local para armazenar seus projetos (workspace); para a versão Flex Builder, não será feito esse questionamento. De qualquer forma, pra ambos os casos, pode-se alterar posteriormente o diretório de trabalho através do menu "File", clicando em "Switch Workspace", em "Other" e escolhendo o diretório desejado.

Após abrir o Flex Builder, será solicitado o número de licença (com a opção de continuar a utilizar a versão como trial). Se estiver sendo utilizada a versão do Eclipse com o plug-in, será necessário ir no menu "Window", clicar em "Open Perspective" e em "Other", como pode ser observado na tela abaixo. Escolha então a opção "Flex Development" e clique em "OK".

Vai abrir então a mesma tela de ativação citada anteriormente. Se você já possui um número serial, cole-o no espaço determinado e clique em "OK"; caso contrário, escolha a opção pra continuar utilizando a versão trial.

Obs: Em qualquer momento, pode-se ativar o Flex Builder, informando o número serial através do menu "Help" e "Manage Flex Licenses".


Após fechar a tela de ativação do Flex Builder, se o Flash Player não estiver devidamente instalado, vai aparecer uma mensagem solicitando que isso seja feito.

Dica: O navegador padrão costuma ser o Internet Explorer. Se a versão instalada da versão debug do Flash Player 10 foi para outro navegador, pode aparecer essa mesma mensagem. Para trocar versão do navegador no Eclipse, clique no menu "Window", depois em "Preferences". Abra então a seção "General" e clique em "Web Browser". Clique em "Search" e selecione o diretório onde o navegador está instalado. Selecione o navegador recém adicionado e clique em "OK".


Bom, o ambiente para desenvolvimento Flex já está instalado e devidamente configurado. Nos próximos posts poderemos começar com a diversão... =)

terça-feira, 20 de janeiro de 2009

Palestra "Flex: o que pode fazer para nós"

Amanhã, dia 21, às 19:00h, haverá uma palestra sobre Flex na ACATE, em Florianópolis. Será a primeira palestra promovida pelo recém-criado grupo de usuários FloripaFlex. A mesma palestra será repetida na Quinta, dia 22, no mesmo horário.

Maiores informações em:
http://groups.adobe.com/posts/266d98c09e

Inscrições (gratuitas) em:
https://spreadsheets.google.com/viewform?key=pm6Yy7FNhz98d-TLYBjPkMw

segunda-feira, 19 de janeiro de 2009

Demonstração

Antes de começarmos a fazer alguma coisa nova, como um esporte, costumamos observar alguém as fazendo, para então começarmos a nos aventurar aos poucos. Quanto mais essa nova atividade nos chama a atenção, quanto mais desperta o nosso interesse, maior tende ser a energia que iremos dispender para aprender a fazê-la da melhor forma possível.

Com o Flex não deve ser diferente, por isso separei alguns links de aplicações que demonstram um pouco do poder visual e do potencial dessa plataforma.

Que tal essa loja de carros? Não se esqueça de dar uma olhada nos vídeos dos comerciais de cada carro.
E agora um caso real: compare os celulares da Sony Ericsson aqui.
E que tal saber mais sobre 195 países? Dê uma olhada no Country Finder.
Ache a casa dos seus sonhos no HomeLocator.
E quer saber como está a previsão do tempo para a sua cidade? Dê uma conferida no WaetherFleks.
Nesta aplicação, clique no botão de play para visualizar a evolução das vendas de cada vendedor.
Nesta outra, também clicando no botão de play, acompanhe o crescimento do Wall Mart nos EUA.
E mais uma aplicação com um mapa geográfico - dessa vez um dashboard empresarial.
Dê uma olhada nos gráficos e gauges desse outro dashboard. Arraste novos itens para os gráficos e alterne o radio button entre "Sales" e "Gross Profit" observando os gauges.
E que tal acompanhar a NASDAQ por esse aplicativo no estilo "GoogleFinance"?
Um gráfico em 3D pode ser bem útil na visualização de algumas informações.
Esse organograma com os cartões pessoais é muito interessante.
Vale a pena dar uma olhada também nesse efeito "fisheye".
Esse livro on-line é muito legal, é totalmente interativo e pode incluir até recursos multimidia.
E que tal o GoogleDesktop? Ainda está em desenvolvimento, mas já dá pra dar uma brincada.
Vale a pena também dar uma olhada no Jooce - é praticamente um desktop completo via web. É necessário realizar um cadastro antes.
E que tal um jogo on-line feito todo em Flex/Flash? Smallworld é um mundo virtual onde cada jogador controla um avatar, que pode explorar todo o cenário, comprar e vender coisas, interagir com outros jogadores e até jogar outros games em fliperamas virtuais. Na tela principal, clique em "join now", crie um avatar, preencha um pequeno cadastro e divirta-se.

Dica: Na seção showcase do site Flex.org existem diversas aplicações disponíveis, vale a pena dar uma olhada por lá.