O Padrão Observer foi desenvolvido para suprir a dependência um-para-muitos entre objetos de modo que quando acontece algo, todos os dependentes de um certo objeto são notificados do ocorrido. Suponha que temos um sistema de gerenciamento de um supermercado e existe vários sub-gerenciamentos, como estoque, preferências dos clientes, etc.

Quando é efetuado uma compra, o sistema de gerenciamento principal dispara um evento “avisando” que foi efetuado uma compra. Os ouvintes, vulgo listeners, que são os pequenos sistemas de sub-gerenciamento, recebem esse aviso e a informação é processada de acordo com os interesses de cada dependente.

A fim de resolver esse problema de forma limpa utilizando as boas práticas de programção orientada a objetos, usa-se o Padrão Observer. Vamos lá por a mão na massa!

Bem, a imagem representa a UML de como o sistema em si funcionará. Temos um despachador de eventos (Event dispatcher), objetos resultantes dos eventos (Event object) e por último os ouvintes (Listeners) que são os objetos que escutarão o despachador. A estrutura é fácil de ser interpretada como vocês veêm. Vamos construir então os objetos.

Dispatcher:

// DispatcherObject.as
 
package net.vitoravelino.observer {
    import flash.events.EventDispatcher;
    import flash.events.Event;
 
    public class DispatcherObject extends EventDispatcher {
        public function DispatcherObject() {
        }
 
        public function dispatch():void {
            this.dispatchEvent(new Event("testEvent"));
        }
    }
}

Código que representa o objeto que vai ser responsável por despachar o evento para todos os listeners cadastrados no mesmo. A função do DispatcherObject é observar o que acontece ao seu redor e caso aconteça algo, ele despache para quem o escuta (listeners).

Listener:

// ListenerObject.as
 
package net.vitoravelino.observer {
    import flash.events.IEventDispatcher;
    import flash.events.Event;
 
    public class ListenerObject {
        public function ListenerObject(dispatcher:IEventDispatcher) {
            this.addDispatcher(dispatcher);
        }
 
        private function addDispatcher(dispatcher:IEventDispatcher):void {
            dispatcher.addEventListener("testEvent", testEventHandler);
        }
 
        private function testEventHandler(evt:Event):void {
            trace("Event arrived from " + evt.target.toString());
        }
    }
}

Código que representa o objeto que vai ser responsável por receber os eventos vindo do DispatcherObject. No método construtor é passado o dispatcher, nesse caso DispatcherObject, e o listener já irá cadastrar-se nele chamando o método addDispatcher.

Observe que só é utilizado nas classes acima um só evento, porém é possível disparar vários eventos no método dispatch de DispatcherObject e existirem vários listeners que também podem escutar a vários eventos distintos. Como uma boa prática de programação é recomendado que crie-se uma interface para os listeners e daí cada um implementa-a do seu modo.

Para uma melhor compreensão de como isso ocorre, abaixo temos um exemplo simples de como tudo isso funciona:

Main:

// Main.as
 
package net.vitoravelino {
    import net.vitoravelino.observer.DispatcherObject;
    import net.vitoravelino.observer.ListenerObject;
 
    public class Main {
        public function Main() {
            var dispatcher:DispatcherObject = new DispatcherObject();
            var listener1:ListenerObject = new ListenerObject(dispatcher);
            var listener2:ListenerObject = new ListenerObject(dispatcher);
 
            dispatcher.dispatch();
        }
    }
}

O que acontece acima é o seguinte: é instanciado um dispatcher (observer) e dois listeners; os dois listeners cadastram-se no dispatcher; e em seguida o dispatcher dispara o evento que será capturados pelos listeners cadastrados no mesmo.

Espero que tenha conseguido deixar claro como funciona o Padrão Observer em ActionScript 3. Como diria meu colega Vedovelli, ActionScript é também uma linguagem orientada a eventos e se soubermos tirar proveito disso, o código ficará mais limpo e desacoplado. Quem não entendeu muito bem como funciona o sistema de disparo e captura de eventos, recomendo o screencast feito pelo Vedovelli.

Como este é um dos primeiros tutoriais, estou aceitando sugestões para melhorias futuras nos próximos que estão por vir.

[]’s
Vítor Avelino

Base para o tutorial: http://www.communitymx.com/content/article.cfm?page=2&cid=76FDB

Ainda não tive tempo de parar um pouco e pensar em algo concreto para desenvolver no meu tempo livre, mas já ocorre-me algumas idéias interessantes. Pelo que já pesquisei na web, é desenvolvido muitas aplicações AIR como widgets para o desktop, mas tenho pensado em algo maior.

O que atrapalha a mim e a todos os desenvolvedores da área são as limitações que o ActionScript possui em relação a outras linguagens como Java, C++, .NET, etc. Mas sempre existe aquele jeitinho de resolver os mais desafiadores problemas. Espero que o AS4 venha com tudo para resolver tais problemas.

Esperem por novidades!

[]’s
Vìtor Avelino

Obs: Para quem utiliza o Flex Builder 3 Standalone ou o Eclipse Classic, é necessário instalar o WTP que capacita o Eclipse/Flex Builder a suportar ferramentas J2EE.

Criamos um Flex Project:

Na primeira combobox selecione J2EE; e determine o diretorio onde ficarão os sources do Java.

Continuando…

Em Target rutime, você selecionará o Tomcat como servidor; em Flex WAR file você terá que selecionar o .war do BlazeDS que você pode baixar aqui. Em Content folder, repita o mesmo nome do projeto para que não haja complicações na hora da comunicação através do BlazeDS. Lembrando que é a partir do BlazeDS que haverá a comunicação Flex/Java.

Após ter criado o Flex Project, a visão é essa; para mudar a perspectiva para Java, basta ir no catinho superior direito e selecionar Java/Java EE.

Criamos uma classe Java normalmente.

Startamos o Tomcat pelo próprio Eclipse.

Clicamos com o botão direito no arquivo principal .mxml > Run as > Flex Application. Após isso, o browser padrão irá aparecer com a aplicação flex rodando em seu servidor web.

Creio que ficou claro como criar um projeto Flex/Java + BlazeDS no Eclipse. Futuramente irei postar um outro tutorial ou screencast com um exemplo de comunicação Flex/Java. Este tutorial foi feito baseado nesse post.

[]’s
Vítor Avelino

Este da imagem é o Ceó Pontual, um verdadeiro artista. Há algum tempo descobri seu blog e fiquei fascinado com sua arte. Ele consegue combinar frases muito bacanas com seus desenhos descontraídos. Vale a pena assinar seu feed, você não vai se arrepender.

[]’s
Vítor Avelino

Vocês talvez já tenham visto essa imagem em algum blog por aí, mas eu gostaria de bater novamente nesta tecla. Presencio testemunhos que descrevem isso , o cliente explica o que quer, o líder de projeto entende de uma maneira e o peão entende de outra forma. Isso decorre, muitas vezes, da inexperiência do líder de projeto no momento de sondar e filtrar o que o cliente necessita.

Cuidado! É o que deixo para os líderes de projeto, já que não é muito agradável tanto para ele quanto para os peões produzirem algo e no final não é nada do que foi requerido.

[]’s
Vítor Avelino

Atualmente possuo experiência em Java, Servlets, JSP/JSTL, (X)HTML, CSS, Flex/AIR, Actionscript 3.0, Eclipse IDE e adoro desenvolver aplicações para WEB, principlamente RIAs.

A partir deste blog, irei expor textos sobre RIA e tecnologia. Não creio que suprirei muito bem os desenvolvedores da área, porém um ou outro irá sair daqui feliz um dia, assim espero.

Sem mais delongas, estou a disposição de todos para dúvidas, conversas, debates.

[]’s
Vìtor Avelino

Que venha AS4 + Flex 4!

[]’s
Vítor Avelino

Abaixo segue a lista das IDEs que encontrei:

• Flex Builder (Pago/Grátis para estudantes);
• FlashDevelop (Grátis);
• Aptana Studio (Grátis/Pago);
• IntelliJIDEA (Pago).

Espero que tenha dado um pouco de esperança aos desenvolvedores que ficaram preocupados em relação a qual IDE eles iriam utilizar para desenvolver suas aplicações Flex.

[]’s
Vítor Avelino

http://www.infoq.com/news/2008/07/javafx-preview

[]’s
Vítor Avelino

No post passado, comentei por cima como foi meu primeiro contato com RIA utilizando o Flex. Neste falarei mais especificamente do Flex.

O Flex é uma estrutura de código aberto altamente produtiva e gratuita para a criação e manutenção de aplicativos Web expressivos implantados de maneira consistente nos principais navegadores, desktops e sistemas operacionais. Oferece um modelo moderno de linguagem e programação baseado em padrões que suporta modelos comuns de design. MXML, uma linguagem declarativa baseada em XML, é usada para descrever comportamentos e layout de interface de usuário, e ActionScript 3, uma linguagem de programação avançada, é usada para criar a lógica de cliente. O Flex inclui também uma biblioteca de componentes com mais de 100 componentes de interface de usuário para criar RIAs, além de um depurador interativo de aplicativos Flex.

Para desenvolver em Flex é necessário apenas o SDK e um editor de texto. Porém essa forma não é muito utilizada porque a produtividade é muito baixa, já que o desenvolvedor terá que ir ao console (ou prompt de comando) chamar o compilador para geração do SWF e então ver o resultado. Visando isso, a Adobe lançou o Flex Builder que é uma IDE para desenvolvimento exclusivo Flex.

O Adobe Flex Builder acelera o desenvolvimento de aplicativos Flex. É uma ferramenta de desenvolvimento baseada no Eclipse que permite uma codificação inteligente, uma depuração interativa por etapas e um design visual de layout de interface de usuário, aparência e comportamento de aplicações ricas para internet. O Flex Builder inclui a estrutura completa do Flex com compiladores, biblioteca de componentes e depuradores. Porém sua licença não é gratuita como o SDK, o desenvolvedor pode usá-lo por até 105 dias de forma trial, mas terá que pagar por uma licença após esse período para que continue seu desenvolvimento com a ferramenta. Para quem é estudante como eu, existe a licença estudantil que é gratuita e não tem período de expiração.

Vale a pena você, desenvolvedor, ter uma ferramenta como o Flex Builder para o desenvolvimento de aplicações Flex. Voltando a comentar um pouco sobre minha experiência com Flex, no início tive que desenvolver apenas com o SDK. Era muito ruim porque a produtividade não existia, já que a aplicação possuía vários módulos e o deployment demorava cerca de 8 minutos em um super desktop (c2d 3ghz 6mb, 4gb ddr2) quando a aplicação não estava ainda com todos os módulos. Após a aquisição do Flex Builder, a produtividade aumentou absurdamente facilitando o andamento do software.

O Flex tem como função ser a camada de visualização da sua aplicação, existem projetos que permitem Flex Remoting e Messaging a todos os desenvolvedores. O Flex Remoting oferece um formato de dados binários em série chamado ActionScript Message Format (AMF) para garantir um meio rápido e eficiente de transporte de dados para a RIA, acelerando o desempenho do aplicativo. Além disso, o Flex Remoting facilita e agiliza a conexão dos desenvolvedores com dados e lógica de negócios back-end. Abaixo as principais linguagens de acesso a camada de negócios e seus respectivos projetos que permitem o Flex Remoting e Messaging:

• Java - BlazeDS, GraniteDS, LCDS;
• Ruby on Rails - RubyAMF;
• .NET - Weborb for .NET;
• PHP - AMFPHP, Weborb for PHP.

Até aqui, muito texto e teoria, está na hora de mostrar do que o Flex é capaz. Abaixo uma lista de exemplos de aplicações Flex:

• ILOG Elixir advanced data visualization for RIAs;
• Live help/call center application with Flex and BlazeDS;
• Flex 3 Dashboard;
• Flex Store;
• Flex 3 Component Explorer;
• Entre outros.

Para maiores informações, visite o site do Adobe Flex.

Já para deixar os desenvolvedores informados, a SDK do Flex 4 “Gumbo” foi lançada mês passado e já está disponível para downoload.

[]’s
Vítor Avelino