Criando aplicações ricas com Adobe Flex 3.4 e Java

Transcrição

1 a r t i g o Gilberto Santos (contato@gilbertosantos.com) é graduando do curso de Análise e Desenvolvimento de Software pela PUC- GO, trabalha com Java desde 2005, possui certificação SCJP5 e Adobe Certifield Expert, entusiasta opensource. Trabalha como desenvolvedor sênior no Centro de Excelência da Politec Goiânia e mantém um blog em Criando aplicações ricas com Adobe Flex 3.4 e Java Entenda a arquitetura deste framework MVC e aprenda a disponibilizar serviços para o Flex que vem ganhando espaço no mundo Java Ganhos efetivos As aplicações RIA (Rich Internet Applications aplicações ricas em internet) estão a cada dia ganhando mais mercado. Diversos aplicativos, tais como planilhas eletrônicas e gerenciadores de conteúdo, já abordam conceitos de RIA e estão cada vez mais semelhantes aos softwares no ambiente desktop. 40

2 É um framework de desenvolvimento criado pela Adobe que dá suporte a criação de componentes ricos visíveis ao Flash Player baseados em ActionScript 3 (linguagem orientada a eventos da antiga Macromedia). O Adobe Flex 3 foi desenvolvido com esse propósito, por meio de componentes reutilizáveis e ricos em interface. Recursos como transições, efeitos, arrastar e soltar, entre outros desejos do desenvolvedor web que eram barrados por incompatibilidade dentre os browsers e suas versões, são simplificados em componentes com o uso da linguagem ActionScript 3. Por serem componentes visuais, a Adobe desenvolveu uma interface para a linguagem ActionScript 3, o MXML, que é uma marcação XML comum que mapeia instâncias de AC3. Ambos contam com uma IDE (Flex Builder 3) baseada em Eclipse como ferramenta. Antigamente, só era possível fazer isso com uma linguagem interpretada de comportamento de tela orientada a eventos, baseada no modelo HTML + JavaScript, onde era preciso programar bastante para alcançar algum efeito RIA. Todas as fábricas de software já possuem know-how suficiente para construir sistemas ERP, CMS ou Mapas. As regras passam a ser comuns e, hoje, os ganhos efetivos ficam no diferencial das interfaces desses softwares que mais amigavelmente legíveis se oferecem ao usuário, lembrando do efeito que o IPhone trouxe para o mercado de telefonia móvel. A grande mudança fez com que as instituições concorrentes tivessem que adotar o mesmo conceito RIA para não perder mercado. Agora, com o desenvolvimento web não é diferente, este segue a mesma tendência. Porém, existem algumas alternativas de soluções RIA para web. Neste artigo, vamos focar no Adobe Flex, por ser open-source e pelo fato de o plugin do Adobe Flash Player estar presente em mais de 80% dos browsers no mundo. Por enquanto, falamos somente de interfaces ricas, mas a Adobe não se preocupou só com esse detalhe. Onde ficam as regras de negócio? Pensando também na segurança das informações, a Adobe criou o AMF (protocolo binário de comunicação) e o RPC (Remote Procedure Call), que permitem que a aplicação interaja com servidores e forneça acesso local ou remoto a um server-side. O Flex é projetado para interagir com vários tipos de serviços de RPC, alguns desse são: WebService: fornece acesso SOA baseado em serviços da web (trafega XML); HTTPService: fornece acesso a HTTP/S URLs que retornam dados (trafega XML); RemoteObject: fornece acesso a objetos no servidor usando protocolo de AMF (trafegam dados binários). Mais detalhes sobre como o Spring trata o gerenciamento de transações com Hibernate podem ser vistos no projeto disponibilizado para download. O papel do BlazeDs O Adobe Flash Player suporta serialização do tipo AMF, e o BlazeDs é um simples provedor de comunicação do tipo two-way. O framework é feito em Java, disponibilizado em pacotes jars, e é apenas um conversor de Destinos Remotos para o AMF3, que são disponibilizados em um descritor services-config.xml. Por definição, o BlazeDs cria instâncias completas de objetos no serverside Java. A integração com o Spring faz a injeção desses objetos como beans e sejam disponibilizados como Destinos Remotos para o Flex. O BlazeDs vem como um projeto web empacotado em um.war. Para utilizá-lo, descompacte-o e atente-se às suas dependências, e também ao diretório /WEB-INF/flex e seus arquivos *.xml. Configuração dos projetos O objetivo deste artigo é usar essa nova tecnologia de aplicações Rich como uma camada de visão aos recursos de aplicações Java, separando-a das regras de negócio, e criando assim dois projetos distintos. Para esse efeito, vamos começar a trabalhar com a IDE Adobe Flex Builder 3 e com suas perspectivas para cada tipo de desenvolvimento. Crie um projeto para cada: Flex Development aplicacao_flex (Front-end) Java EE aplicacao_java (back-end) Essa separação garante que o seu software seja também independente de um front-end. Isso porque obrigatoriamente os recursos Java serão agora disponibilizados por e o seu front-end deverá conhecer somente essa classe, que será unicamente responsável por conceber os serviços de negócio. Para este artigo, vamos usar da força de alguns frameworks de modo a garantir que os serviços transacionais e a comunicação do Adobe Flex para o Java sejam garantidos. Para isso, vamos trabalhar com o Spring e o BlazeDs. O papel do Spring Como um excelente fornecedor de beans para aplicações enterprise serverside, o framework possui um módulo específico para que o Java se comunique diretamente com o AMF3 do Flex. Uma camada de controle MVC do Spring será disponibilizada como Destino Remoto. Figura 1. Caminho para publicação do template de aplicação do Adobe Flex. 41

3 Dentro de um projeto Flex estão recursos *.xml, *.as e imagens, e tudo isso será compilado pelo SDK do Flex, que irá gerar arquivos *.swf. A IDE facilita o trabalho de criação de um projeto Flex, criando o template necessário para carregar o *.swf no browser. É necessário que esse arquivo gerado pelo SDK faça parte de um mesmo contexto Java EE quando se utiliza o BlazeDs como fornecedor AMF, conforme a figura 1. Para tanto, vá em propriedades do projeto aplicacao_flex, Flex Built Path e altere a Output Folder para: ${DOCUMENTS\aplicacao_java\web\flex como serviço AMF para invocações do RPC do Flex. É necessário que as dependências do BlazeDs estejam no diretório lib da sua aplicacao_java e também que o diretório /flex esteja dentro de WEB-INF. Modelo de Arquitetura Flex com Java É justamente no momento da compilação que é necessário passar alguns argumentos para o SDK, para que sua aplicacao_flex conheça os serviços AMF que estão disponíveis para o RPC do Flex. Vá em propriedades do projeto em aplicacao_flex, vá para Flex Compiler e adicione os parâmetros conforme a figura 2. - locale en_us //define o Locale da aplicação, por default en_us - compiler.services //define o caminho fisico dos serviços AMF disponíveis para o RPC Flex - compiler.root //define para qual context essa aplicação pode ser invocada Figura 3. Modelo de arquitetura Flex com Java. No momento da compilação para geração de arquivos *.swf, o Flex precisa mapear onde estarão os Destinos Remotos disponíveis sob o protocolo AMF. Neste nosso cenário, o desenvolvedor gera e compila os fontes, realizando em um mesmo deploy no container arquivos *.swf e *.class. O cliente (browser) carrega o *.swf, que deve estar pronto para fazer as chamadas remotas às classes Java que foram disponibilizadas pelo Spring como Destino Remoto. Figura 1.1. Argumentos adicionais ao SDK do Flex, para a localização de serviços disponíveis em AMF. Feito isso, o Flex irá tentar localizar um descritor services-config.xml de serviços disponíveis no lado Java, e provavelmente a IDE irá acusar um erro porque ainda não concluímos esta etapa. Este descritor vem junto com o BlazeDs. Criando o serviço back-end O serviço back-end Java para aplicações Flex, é uma implementação J2EE comum, ou seja, trata-se de uma aplicação Java para web JSP/Servlet. Neste caso, vamos adicionar um gerenciador de beans enterprise, o Spring Para essa adição, é necessário um descritor applicationcontext.xml e suas dependências. As configurações desse podem ser melhor detalhadas no projeto disponível para download. Configurando os serviços java O Projeto aplicacao_java é um projeto Java EE comum, e aqui vamos permitir a adição do Spring para o tratamento do MVC, que disponibilizará uma camada de controle como Destino Remoto e do BlazeDs que fará com que o mesmo Destino Remoto seja disponibilizado Após a chamada remota do Flex, a execução passa a estar disponível no server-side. Isso, às vezes, fica um pouco confuso para o desenvolvedor Java. Para esse efeito, vamos lembrar que Java é executado top-down e left right, e essa execução não é interrompida, a não ser que ocorra alguma exceção. No Flex, pode-se programar assim também, entretanto, a forma mais correta é a programação orientada a eventos. As classes Java estarão disponíveis para execução após o evento de invocação de chamada remota do Flex, podendo a partir desse ponto ter um comportamento comum ao Java, ou seja, a execução do código volta a ser top-down e left right para atender as regras de negócio. Se tudo ocorreu bem, seu ambiente de desenvolvimento deve estar bem parecido com a figura 4. Aqui nos podemos perceber que o Flex já gerou alguns arquivos necessários para uma aplicação web Flex. Não convém mexer nesses arquivos porque eles vão ser sobrescritos todas as vezes que o Adobe Flex Builder compilar o seu projeto. No projeto aplicacao_java, dentro de WEB-INF, temos alguns arquivos *.xml de configuração, e esses arquivos vão dizer ao BlazeDs qual é a forma de comunicação, canal e o cast de classe com o Flex (embora neste artigo utiliza-se o AMF3, existem também outros formatos). Quem irá de fato distribuir a sua aplicação e disponibilizar os serviços para o Flex é o Spring, portanto, vamos falar de cada arquivo separadamente, e dar uma atenção especial ao services-config.xml 42

4 Listagem 1 services-config.xml. <?xml version= 1.0 encoding= UTF-8?> <services-config> <services> <service-include file-path= remoting-config.xml /> <service-include file-path= messaging-config.xml /> <service-include file-path= proxy-config.xml /> <default-channels> <channel ref= my-amf /> </default-channels> </services> Figura 4. Configuração do workspace. Os códigos desses arquivos podem ser encontrados na Seção de downloads no site da revista Mundoj. Existem outras formas de disponibilizá-los, caso não se esteja usando Spring. Procure pela marcação destination em /flex/remoting-config.xml. Esta tag pode disponibilizar uma classe Java como Destino Remoto. Quase pronto! Falta pouco para os projetos configurados conversarem entre si e, a partir daqui, o desenvolvedor pode tranquilamente criar e testar os métodos do lado Java para garantir que as regras de negócio sejam atendidas com testes unitários. No Flex, preocupe-se somente com os componentes de visualização. Para os desenvolvedores que não conhecem bem o Flex, recomendo alguma literatura focada no assunto. Configuração dos canais de comunicação Dentro de /WEB-INF/flex em aplicação_java vamos encontrar os arquivos *.xml do BlazeDs necessários para conseguir fazer a ligação com o Adobe Flex. Desses arquivos, somente precisamos nos atentar para o servicesconfig.xml. Agora como utilizamos o Spring como framework MVC, então, precisamos informar ao BlazeDs que essa comunicação agora é gerenciada pelo Spring. Mudando o path original do endpoint do descritor services-config.xml. Na descrição services-config.xml, existem algumas tags, que referenciam os canais de comunicação. <channels> <channel-definition id= my-amf class= mx.messaging.channels.amfchannel > <endpoint url= spring/messagebroker/amf class= flex.messaging.endpoints.amfendpoint /> <properties> <polling-enabled>false</polling-enabled> </properties> </channel-definition> <channel-definition id= my-polling-amf class= mx.messaging.channels.amfchannel > <endpoint url= class= flex.messaging.endpoints.amfendpoint /> <properties> <polling-enabled>true</polling-enabled> <polling-interval-seconds>4</polling-interval-seconds> </properties> </channel-definition> </channels> <logging> <target class= flex.messaging.log.consoletarget level= Error > <properties> <prefix>[blazeds] </prefix> <includedate>false</includedate> <includetime>false</includetime> <includelevel>false</includelevel> <includecategory>false</includecategory> </properties> <filters> <pattern>endpoint.*</pattern> <pattern>service.*</pattern> <pattern>configuration</pattern> </filters> </target> </logging> <system> <redeploy> <enabled>false</enabled> </redeploy> </system> </services-config> O próximo passo, é configurar o MVC do Spring. A Listagem 2 mostra como deve ficar o seu web.xml 43

5 Listagem 2. web.xml aplicação_java. <?xml version= 1.0 encoding= UTF-8?> <web-app xmlns:xsi= xmlns= xmlns:web= com/xml/ns/javaee/web-app_2_5.xsd xsi:schemalocation= com/xml/ns/javaee id= WebApp_ID version= 2.5 > <display-name>aplicacao_java</display-name> <listener> <listener-class> org.springframework.web.context.request.requestcontextlistener </listener-class> </listener> <listener> <listener-class>org.springframework.web.context.contextloaderlistener </listener-class> </listener> Listagem 3. ( flex-servlet.xml). <?xml version= 1.0 encoding= UTF-8?> <beans xmlns= xmlns:flex= xmlns:xsi= xmlns:context= xsi:schemalocation= > <listener> <listener-class>flex.messaging.httpflexsession</listener-class> </listener> <!-- The front controller of this Spring Web application, responsible for handling all application requests--> <servlet> <servlet-name>spring MVC Dispatcher Servlet</servlet-name> <servlet-class>org.springframework.web.servlet.dispatcherservlet </servlet-class> <init-param> <param-name>contextconfiglocation</param-name> <param-value>/web-inf/flex-servlet.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>spring MVC Dispatcher Servlet</servlet-name> <url-pattern>/spring/*</url-pattern> </servlet-mapping> <session-config> <session-timeout>20</session-timeout> </session-config> <bean class= org.springframework.web.servlet.mvc.annotation.defaultannotationhandlermapping /> <bean class= org.springframework.web.servlet.mvc.annotation.annotationmethodhandleradapter /> <context:annotation-config /> <!-- procura por controladores anotados para flex --> <context:component-scan base-package= com.aula.flex annotation-config= true /> <flex:message-broker services-config-path= WEB-INF/flex/services-config.xml > <flex:mapping pattern= /messagebroker/* /> </flex:message-broker> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app> Um novo arquivo do Spring precisa ser adicionado, é um descritor exclusivamente para o MVC do Spring. A Listagem 3 mostra como deve ser: </beans> Implementações No arquivo Index.mxml (main da aplicacao_flex), vamos declarar alguns componentes que fazem o RPC e outros componentes visuais para entrada e exibição de dados. 44

6 Listagem 4. ( Main da aplicacao_flex Index.mxml). <?xml version= 1.0 encoding= utf-8?> <mx:application horizontalalign= center verticalalign= middle layout= horizontal xmlns:mx= > <mx:script> <![CDATA[ import models.pessoa; import mx.rpc.events.resultevent; import mx.controls.alert; import mx.rpc.events.faultevent; public function submit():void{ var pessoa:pessoa = new Pessoa; pessoa.nome = txtnome.text; pessoa.dtnascimento = txtdtnascimento.selecteddate; pessoa. = txt .text; servicojava.getoperation( submit ).send(pessoa); public function aconteceufalha(evento:faultevent):void{ Alert.show(evento.fault.faultString); public function aconteceusucesso(evento:resultevent):void{ Alert.show( objeto: \n + ObjectUtil.toString(evento.result) ); ]]> </mx:script> <mx:remoteobject id= servicojava destination= servicojavactrl > <mx:method name= submit fault= {aconteceufalha(event) result= {aconteceusucesso(event) /> </mx:remoteobject> <mx:panel width= 467 > <mx:form width= 100% > <mx:formitem label= Entre com seu nome: width= 100% > <mx:textinput id= txtnome width= 100% /> </mx:formitem> <mx:formitem width= 100% > <mx:datefield id= txtdtnascimento /> </mx:formitem> <mx:formitem width= 100% label= Entre com seu > <mx:textinput id= txt width= 100% /> </mx:formitem> </mx:form> <mx:controlbar> <mx:button label= enviar click= {submit() /> </mx:controlbar> </mx:panel> </mx:application> Note que, nessa marcação MXML, temos alguns componentes instanciados que são representações literais de classes AS3. Também há um corpo de códigos em AS3 dentro da tag mx:script (essa tag define um escopo AS3 dentro de um MXML). Agora, vamos explicar um pouco sobre o que cada componente faz, para ficar mais claro o entendimento deste artigo. Esse componente é similar ao método main() de uma aplicação Java. A partir desse ponto é que todas as classes AS3 deverão ser instanciadas. Um projeto Flex deve conter apenas um Application. Esse componente é responsável por fazer as invocações das classes remotas disponíveis em algum do servidor back-end. Neste caso, esperando por classes java. Atributo id nome da instância do componente Atributo destination nome da instância do destino remoto Esse componente é filho de RemoteObject e apenas serve para mapear os métodos assinados que estarão disponíveis na classe destination. Para cada instância de mx:method, é requerido dois outros métodos em AS3 que vão receber dois tipos de eventos: evento:faultevent Quando acontece alguma falha no servidor evento:resultevent Quando o serviço executou a operação Esse componente simplesmente exibe uma janela. Esse componente organiza elementos de formulários. Simplesmente exibe um item para o formulário. Exibe um item de entrada de texto. Exibe um botão. Isso é bem básico, mas vamos entrar com valores simples, construir um objeto e passar esse objeto como argumento para um método de uma classe Java que esteja disponibilizada como Destino Remoto e, a partir daí, o desenvolvedor pode executar operações, como fazer a persistência com o banco de dados. Provavelmente, o desenvolvedor vai perceber que as classes persistentes ficam do lado Java. Agora é necessário espelhar as entidades para o Flex, e assim, trabalharemos com os mesmos objetos dos dois lados. Isso caracteriza o CAST de AMF para Java, feito pelo BlazeDs. No Projeto aplicacao_flex, clique com o botão direito do mouse, New / ActionScript Class e crie uma classe Pessoa, que contenha os mesmos atributos e seja similar a entidade Pessoa.java, conforme a Listagem 2. Listagem 5. Representação AS3 da modelo Pessoa.java. Figura 5. Resultado dessa marcação mxml, compilada para *.swf. package models { [RemoteClass(alias= com.aula.flex.models.pessoa )] [Bindable] public class Pessoa { // construtor public function Pessoa(){ public var id:number; public var nome:string; public var dtnascimento:date; public var string; 45

7 É importante observar a anotação do Flex [RemoteClass(alias="com. javaflex.models.pessoa")]. Ela é responsável por fazer a amarração entre a classe Pessoa.as e a entidade persistente Pessoa.java. Note que as duas classes devem ter os mesmos atributos, seguindo as suas normas declarativas de cada linguagem. Agora vamos à classe que somente o Flex deve conhecer. No seu projeto aplicacao_java, crie uma classe com o mesmo nome do destination que você colocou na sua invocação RPC, conforme a Listagem 3. Listagem 6. Modelo Pessoa.java. package com.aula.flex.models.pessoa; public class Pessoa{ private Integer id; private String nome; private Date dtnascimento; private String ; // getters and setters omitidos Listagem 7. Interface de Serviços de Pessoa. package com.aula.flex.dao.ui; import anotação do Spring public interface PessoaDaoUI { public Pessoa add(pessoa pessoa) throws Exception; O Spring vai usar IoC para garantir que os serviços de persistência estejam disponíveis nos métodos que o Flex irá invocar através dos Esta classe Java recebe duas anotações: O MVC do Spring define que essa classe é um controlador (um bean que pode ser acessado a partir de uma visão qualquer). Essa anotação do pacote Spring-Flex determina que essa classe é um Destino Remoto e que será disponibilizada para invocações RPC. A possui um parâmetro que o desenvolvedor pode definir qual será o nome do destino remoto. Este nome é o mesmo na construção do objeto para o RPC do Flex: <mx:remoteobject id="servicojava" destination="servicojavactrl"> Se não fornecer nenhum nome, o próprio nome da classe será o nome do destino remoto. Repare que o nome do método na aplicação Java (submit) deve ser exatamente o mesmo nome do método que está descrito no MXML da aplicacao_flex, e obrigatoriamente os métodos devem possuir a mesma assinatura. Para rodar a sua aplicação, inicie a aplicacao_java no servidor Tomcat. Depois, volte ao projeto aplicacao_flex e clique com botão direito no main (Index.mxml ) / Run Application. Listagem 8. Implementação do Serviço de Pessoa. package com.aula.flex.dao.ui; import // anotação do Spring public class PessoaDaoImp implements PessoaDaoUI { public Pessoa add(pessoa pessoa) throws Exception { System.out.println( Persistencia com Hibernate ); System.out.println( persistiu Pessoa: + pessoa.getnome() ); return pessoa; Listagem 9. Classe disponibilizada como Destino Remoto para o flex. package com.aula.flex.ctrls; import org.springframework.context.applicationcontext; import org.springframework.flex.remoting.remotingdestination; import org.springframework.stereotype.controller; import org.springframework.web.context.support.webapplicationcontextutils; import com.javaflex.dao.ui.pessoadaoui; import com.javaflex.models.pessoa; public class ServicoJavaCtrl { /* * O AMF do Flex só deve conhecer essa camada de classe * a partir daqui, é puramente codigo java. * */ public Pessoa submit(pessoa pessoa) throws Exception{ // procura o contexto Flex dentro do spring ApplicationContext ctx = WebApplicationContextUtils. getwebapplicationcontext( FlexContext.getServletContext() ); // injeção de dependencia do spring final PessoaDaoUI pessoadao = (PessoaDaoUI) ctx.getbean( pessoadaoimp ); // chamada a persistencia com o hibernate return pessoadao.doregrasalvar(pessoa); Conclusão O objetivo deste artigo é mostrar como é feita a comunicação do Adobe Flex para o Java e vice-versa. A base dessa comunicação é o AMF, formato disponibilizado pela própria Adobe. Mais especificamente para um formato Java EE, utilizamos o framework BlazeDs. Sua configuração 46

8 é bem básica, mas usamos aqui o auxílio do Spring, para disponibilizar classes como destinos remotos com a ajuda das suas anotações fugindo um pouco de marcações xml. Dessa forma, é dever do desenvolvedor implementar os seus casos de uso, e buscar aprender um pouco mais sobre as tecnologias abordadas aqui. Fora mais conhecimento da linguagem, ainda falta abordar assuntos como transações, segurança, e falar mais sobre o próprio modelo MVC da camada Flex. Com esse exemplo, foi mostrado um pouco sobre o comportamento do Adobe Flex e como são suas formas de comunicação, sobretudo com a linguagem Java, o que é meramente um trabalho de configuração. Obviamente, estes passos poderiam ser explorados com a ausência das IDE, mas acredito ser um passo desnecessário. Agradecimentos A minha querida Renata de Paula, por revisar este artigo e por compreender o tempo gasto necessário para realização dele. Referências 47