Na prxima tela informe o caminho para o arquivo blazeds.

war (que veio no arquivo do BlazeDS que voc baixou) e informe o nome que o novo projeto vai ter. Iremos fa zer uma simples (e bonita! hehe) agenda de contatos onde guardaremos os telefone s e emails dos nossos amigos, ento irei chamar o projeto de AgendaJ. *OBS: Para o desenvolvimento Java + FLEX so criados 2 projetos: uma projeto Java e um projeto FLEX. Eu tenho o costume (e diria que uma boa prtica) de dar o mesmo nome aos dois projetos adicionando como sufixo J ou F caso o projeto seja Java ou FLEX, respectivamente. image Ok. Agora podemos dar uma espiada para ver como funciona toda a configurao da noss a aplicao Java. Vamos comear olhando para o deployment descriptor WebContent/WEB-IN F/web.xml*: *Apaguei os comentrios que vieram junto com o arquivo pois no vamos utiliz-los. <web-app> <display-name>BlazeDS</display-name> <description>BlazeDS Application</description> <!-- Http Flex Session attribute and binding listener support --> <listener> <listener-class>flex.messaging.HttpFlexSession</listener-class> </listener> <!-- MessageBroker Servlet --> <servlet> <servlet-name>MessageBrokerServlet</servlet-name> <display-name>MessageBrokerServlet</display-name> <servlet-class>flex.messaging.MessageBrokerServlet</servlet-clas s> <init-param> <param-name>services.configuration.file</param-name> <param-value>/WEB-INF/flex/services-config.xml</param-va lue> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>MessageBrokerServlet</servlet-name> <url-pattern>/messagebroker/*</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> </welcome-file-list> </web-app> Foi definido um servlet chamado MessageBrokerServlet da classe flex.messaging.Me ssageBrokerServlet que recebe o parmetro services.configuration.file indicando qu al o arquivo que contm as configuraes dos servios do FLEX. Conseguimos ver tambm que o MessageBrokerServlet recebe todas as requisies que chegam para a URL /messagebroke r/* , ou seja, sempre que o FLEX envia uma requisio para o Java j sabemos que seguind o este padro de URL (caso ainda no esteja claro j j vai ficar Alegre). Olhando o arquivo de configurao dos servios (WebContent/WEB-INF/flex/services-confi

g.xml)* podemos observar que: *Retirei alguns comentrios e fiz alguns pequenos ajustes nesse arquivo. ele inclui trs outros arquivos de configurao atravs da tag <service-include> den tro da tag <service>; diz qual classe vai ser responsvel pela segurana (autenticao e autorizao) em um se rvidor de aplicativos J2EE; define quais canais estaro disponveis para a comunicao atravs da tag <channels>. Cada canal definido dentro desta tag indica o mapeamento de um padro de URL para uma classe em especfico, por exemplo, a classe flex.messaging.endpoints.AMFEndpoi nt ir receber todas as requisies que forem para a URL /messagebroker/amf ; configura o Logging das comunicaes; configura o redeploy automtico de alguns arquivos que ele fica observando em in tervalos de tempo definidos. <services-config> <services> <service-include file-path="remoting-config.xml" /> <service-include file-path="proxy-config.xml" /> <service-include file-path="messaging-config.xml" /> </services> <security> <login-command class="flex.messaging.security.TomcatLoginCommand" server ="Tomcat"/> </security> <channels> <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel" > <endpoint url="http://{server.name}:{server.port}/{context.root}/mes sagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/> </channel-definition> <channel-definition id="my-secure-amf" class="mx.messaging.channels.Secu reAMFChannel"> <endpoint url="https://{server.name}:{server.port}/{context.root}/me ssagebroker/amfsecure" class="flex.messaging.endpoints.SecureAMFEndpoint"/> <properties> <add-no-cache-headers>false</add-no-cache-headers> </properties> </channel-definition> <channel-definition id="my-polling-amf" class="mx.messaging.channels.AMF Channel"> <endpoint url="http://{server.name}:{server.port}/{context.root}/mes sagebroker/amfpolling" 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>true</includeDate>

<includeTime>true</includeTime> <includeLevel>true</includeLevel> <includeCategory>true</includeCategory> </properties> <filters> <pattern>Endpoint.*</pattern> <pattern>Service.*</pattern> <pattern>Configuration</pattern> </filters> </target> </logging> <system> <redeploy> <enabled>true</enabled> <watch-interval>20</watch-interval> <watch-file>{context.root}/WEB-INF/flex/services-config.xml</watch-f ile> <watch-file>{context.root}/WEB-INF/flex/proxy-config.xml</watch-file > <watch-file>{context.root}/WEB-INF/flex/remoting-config.xml</watch-f ile> <watch-file>{context.root}/WEB-INF/flex/messaging-config.xml</watchfile> <touch-file>{context.root}/WEB-INF/web.xml</touch-file> </redeploy> </system> </services-config> OBS: perceba que todos os canais tem o padro de URL parecido ( /messagebroker/ ). Por i sso que o MessageBrokerServlet recebe todas as requisies para a URL /messagebroker/* , ele verifica para qual canal ela vai e encaminha para a classe correta. Smiley piscando Os outros arquivos de configurao no contm nada que precise chamar a ateno agora. Ento d pra dizer que sabemos como o Java recebe e trata as requisies do FLEX! Smiley de boca aberta Vamos preparar o backend da nossa aplicao ento: vamos criar a classe que vai repres entar um contato da nossa agenda e um servio para executar as regras de negcio da nossa aplicao: Contato.java public class Contato implements Serializable { private static final long serialVersionUID = -1549466344815889020L; private String nome; private String telefone; private String email; public String getNome() { return nome; } public void setNome(String nome) { this.nome = nome;

} public String getTelefone() { return telefone; } public void setTelefone(String telefone) { this.telefone = telefone; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } @Override public String toString() { StringBuilder sb = new StringBuilder(); sb.append("["); sb.append(this.getNome()+","); sb.append(this.getTelefone()+","); sb.append(this.getEmail()); sb.append("]"); return sb.toString(); } } A classe que representa um contato possui apenas o nome, telefone e email do con tato. Suficiente para nossa pequena agenda. Alegre OBS: essa classe implementa a interface java.io.Serializable pois ela vai trafeg ar na Web (do Java para o FLEX e vice versa). aconselhavel que todo objeto que f or ser transmitido atravs de um canal (socket, web, etc) implemente esta interfac e e tenha o serialVersionUID (que o Eclipse gerou pra mim hehe) que indica um nme ro nico para identificar aquela classe. Vamos ver agora o servio que ir tratar a insero de novos contatos na nossa agenda: ContatoService.java public class ContatoService { private static List<contato> agenda = new ArrayList<contato>(); public void salvar(Contato contato) { ContatoService.agenda.add(contato); System.out.println("Contato adicionado: " + contato); } public List<contato> getAgenda() { return ContatoService.agenda; } } Como ainda no vamos utilizar o banco de dados e o Hibernate nesta parte do tutori al vamos simular um banco de dados (est entre aspas duplas t.. hehehe) com uma lista esttica.

O mtodo salvar(Contato) simplesmente adiciona um novo contato na agenda e o mtodo getAgenda() retorna a nossa agenda com todos os contatos. Esses mtodos vo ser utilizados para o FLEX pedir para o Java salvar um novo contat o na agenda e para ele recuperar a agenda com os contatos atualizados. Para finalizar o desenvolvimento do nosso backend precisamos apenas expor nossa classe de servio para que as classes que recebem a requisio do FLEX (pacote flex.me ssaging.endpoint) consigam localiz-la em tempo de execuo. Para isso adicionaremos uma nova tag <destination> no arquivo WebContent/WEB-INF /flex/remoting-config.xml informando um ID para este novo destino e qual classe responsvel por tratar as requisies destinadas a ele. Desta maneira ns informaremos e ste mesmo ID no FLEX quando precisarmos chamar algum mtodo desta classe. <service id="remoting-service" class="flex.messaging.services.RemotingService"> <adapters> <adapter-definition id="java-object" class="flex.messaging.servi ces.remoting.adapters.JavaAdapter" default="true" /> </adapters> <default-channels> <channel ref="my-amf" /> </default-channels> <destination id="contatoService"> <properties> <source>br.blog.javasimples.agenda.service.ContatoServic e</source> </properties> </destination> </service> Agora j podemos deixar o Java um pouco de lado e ir pra parte nova: o FLEX! Smile y de boca aberta Vamos criar um novo projeto no Eclipse: Arquivo > Novo > Projeto. Na categoria F lash Builder vamos escolher um Flex Project. Na primeira tela configuramos o nom e do projeto (vou colocar AgendaF como j comentei l em cima), dizemos que ele vai rodar na Web e vai se comunicar com um servidor J2EE utilizando o BlazeDS. OBS: tenha certeza de que o checkbox st DESMARCADO. image Na prxima tela informamos algumas configuraes do servidor J2EE (no meu caso o Tomca t): Root folder > O caminho pra raiz da aplicao Java no disco; Root URL > O caminho para a raiz da aplicao Java atravs do servidor; Context Root > O contexto da aplicao no servidor; Output Folder (o Eclipse sugere) > Caminho para a pasta onde o projeto FLEX s er compilado e ficar guardado . Fica dentro da raiz da aplicao Java pra ser executada j unto com o servidor. Create combined Java/Flex project using WTP e

image Na prxima tela temos que adicionar uma pasta que ser a raz dos cdigos fonte. Na aba Source Path apenas clique em Add Folder e crie uma nova pasta com o nome src. image Aps criado o projeto temos mais um ajuste a fazer: caso o Flash Builder 4 que voc tenha baixado veio na lngua inglesa e seu sistema operacional esteja em portugus o Eclipse vai criar uma configurao em portugus (porque ele reflete o locale do SO) e o Flash Builder no vai se dar muito bem com ele no hehehe Para corrigir esse parmetro vamos nas propriedades do projeto (boto direito no pro jeto > Propriedades) e na categoria Flex Compiler existe o campo de texto Additi onal compiler arguments onde est escrito -services services-config.xml locale pt_BR . Vamos apenas trocar o parmetro -locale pt_BR por -locale en_US . image Legal, vamos comear a programar mesmo. Mude a perspectiva do Eclipe para Flash (c aso ainda no tenha o feito). Vamos entrar em outro mundo agora, vamos deixar o Ja va um pouco de lado e programar em ActionScript 3 (aka AS3), linguagem utilizada na plataforma FLEX (e outras da Adobe). OBS: eu no vou entrar em detalhes da linguagem propriamente dita, uma vez que o n ome do blog no AS3 Simples.. kkkkkkkk Mas no tem diferenas muito grandes no, uma pes soa que est acostumada com Java consegue pegar o AS3 rapidinho. Smiley de boca ab erta Vamos comear criando a classe que representa um contato da agenda. Vamos criar um pacote com o mesmo nome do pacote no Java (outra boa prtica) e criar uma ActionS cript Class com o mesmo nome (Contato.as): image package br.blog.javasimples.agenda.model { [Bindable] [RemoteClass(alias="br.blog.javasimples.agenda.model.Contato")] public class Contato { public var nome:String; public var telefone:String; public var email:String; public function Contato() { } } } A classe que representa o contato do lado do FLEX deve possuir os atributos com os mesmos nomes do nome de atributo extrado dos getters da classe Java. Estranho n heheheh Vamos ver com um pequeno exemplo: Na classe Contato.java eu tenho os getters getNome(), getTelefone() e getEmail() . Quando o BlazeDS vai enviar os dados do Java para o FLEX ele vai fazer um algo rtmo que siga uma lgica parecida com essa (no olhei no cdigo fonte pra saber se assi m mesmo, porm o resultado final algo assim):

String getterName = "getEmail"; String attributeName = getterName.replaceFirst("get",""); // attributeName == "E mail" attributeName = attributeName.substring(0,1).toUpperCase() + attributeName.subst ring(1); // // attributeName == "email" Ou seja, com os getters getNome(), getTelefone() e getEmail() o BlazeDS vai envi ar os valores para a classe Contato.as esperando que existam os atributos nome, telefone e email. O BlazeDS segue esse mesmo padro para enviar os dados do FLEX para o Java, ou sej a, os setters devem seguir esse mesmo padro de nomenclatura. Continuando com a nossa classe, algo novo para quem nunca usou AS3 so as anotaes: [ Bindable] e [RemoteClass(alias)]. Se essas anotaes fossem em Java seriam: @Bindable e @RemoteClass(alias= vista que confunde um pouco, mas a mesma coisa. Segue o significado de tais anotaes: [Bindable] algo como a implementao do design pattern Observer. Todo lugar que estiver referenciando alguma propriedade dessa classe ser imediatamente avisado a ssim que alguma delas sofrer alguma mudana; [RemoteClasse(alias)] indica para o BlazeDS qual a classe correspondente a e ssa na aplicao Java. To simples quanto fazer um POJO no Java no?! hehehe Agora vem a parte que me fascina no FLEX: layout! Smiley de boca aberta Vamos abrir o arquivo AgendaF.mxml que o Eclipse gerou para ns. Ao mudar para a a ba design ns podemos criar a nossa tela com um simples clicar e arrastar de compo nentes. Arrastei alguns componentes e mudei os labels e em menos de 10 minutos e u fiz o design da nossa aplicao de exemplo: image O cdigo do arquivo AgendaF.mxml ficou assim: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <mx:Form width="500"> <mx:FormItem label="Nome" width="100%" direction="horizontal"> <s:TextInput id="txtNome" width="220"/> <mx:Spacer width="100%" height="10"/> <mx:FormItem label="Telefone" direction="horizontal"> <s:TextInput width="100" id="txtTelefone"/> </mx:FormItem> </mx:FormItem> <mx:FormItem label="Email" width="100%" direction="horizontal"> <s:TextInput width="220" id="txtEmail"/> <mx:Spacer width="100%" height="10"/> <s:Button label="Salvar"/> </mx:FormItem> <mx:HBox width="100%"> <mx:DataGrid width="100%"> ). S a primeira

<mx:columns> <mx:DataGridColumn headerText="Nome"/> <mx:DataGridColumn headerText="Telefone"/> <mx:DataGridColumn headerText="Email"/> </mx:columns> </mx:DataGrid> </mx:HBox> </mx:Form> </s:Application> OBS: perceba que os TextInputs tem ids definidos. Isso para que possamos recuper ar os seus valores via programao logo mais. Para vermos como vai ficar esse layout no browser basta rodar o projeto AgendaJ primeiro e depois o AgendaF. AgendaJ AgendaF image Vamos fazer isso funcionar agora! Vamos comear com a funcionalidade de salvar um contato: toda vez que o boto Salvar for pressionado iremos criar um objeto Contato e enviar para o Java, mais espec ificamente para o mtodo salvar(Contato) da classe ContatoService. Para isso vamos precisar de uma rea para programar em ActionScript dentro do arqu ivo AgendaF.mxml, que como o nome indica (e conseguimos ver atravs da aba Source) um XML. Tal rea fica disponvel atravs da tag <fx:Script>. Segue o cdigo que salva um novo contato: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import br.blog.javasimples.agenda.model.Contato; import import import import import import ce"); private function salvaContato():void { var contato:Contato=new Contato(); contato.nome=txtNome.text; contato.telefone=txtTelefone.text; contato.email=txtEmail.text; // Insere esse contato na lista do Java mx.controls.Alert; mx.rpc.AsyncToken; mx.rpc.Responder; mx.rpc.events.FaultEvent; mx.rpc.events.ResultEvent; mx.rpc.remoting.RemoteObject; boto direito no projeto > Run As > Run on Server boto direito no projeto > Run As > Web Application

private var remoteObject:RemoteObject=new RemoteObject("contatoServi

var token:AsyncToken=remoteObject.salvar(contato); token.addResponder(new mx.rpc.Responder(salvarSucesso, erro)); } private function salvarSucesso(result:ResultEvent):void { Alert.show( Contato salvo com sucesso! ); } private function erro(event:FaultEvent):void { Alert.show("Ocorreu o seguinte erro: " + event.fault.faultString ); } ]]> </fx:Script> <!-- ..... --> </s:Application> Vamos comear de cima para baixo: Primeiro temos a declarao e instanciao de um objeto da classe RemoteObject. Essa cla sse a responsvel por fazer a comunicao com outra classe do lado do Java. Para criar mos esse vnculo basta passarmos o ID que definimos para a classe Java (no arquivo WebContent/WEB-INF/flex/remoting-config.xml) no construtor do RemoteObject. No nosso caso a classe ContatoService.java est vinculada dentro da tag <destinati on id= contatoService > no arquivo remoting-config.xml ento utilizamos este mesmo ID no construtor do nosso obejto. Vamos olhar agora para o mtodo salvaContato(): criado um novo objeto Contato e se us dados so preenchidos com os valores dos TextInputs. Logo depois utilizamos o R emoteObject para invocar o mtodo salvar(Contato) da classe a que ele est vinculado (ContatoService.java). Para invocar os mtodos remotos ns temos que imaginar que o RemoteObject a classe q ue queremos utilizar (neste caso ContatoService). Exemplo: na classe ContatoServ ice ns temos o mtodo salvar(Contato). Para executar esse mtodo atravs do RemoteObjec t basta executar um mtodo com o mesmo nome e com os mesmos parmetros (super usual n Alegre). Continuando, todas as chamadas a mtodos remotos so assncronas, ou seja, temos que e sperar voltar uma resposta do Java para receber o retorno do mtodo ou uma possvel falha (caso seja jogada alguma Exception). Para lidarmos com isso, todo mtodo remoto executado atravs do RemoteObject retorna um AsyncToken. Atravs deste AsyncToken ns podemos ser notificados sempre que o mto do remoto retorna algo (o retorno do mtodo ou uma exception). Para isso ns adicionamos um Responder no AsyncToken. O construtor do Responder re quer que passemos duas funes de parmetro: a primeira ser chamada quando o mtodo remot o for concludo com sucesso e a segunda ser chamada quando o mtodo remoto jogar um e rro. A funo que vai ser chamada quando o mtodo remoto for concludo vai receber um ResultE vent como parmetro (na grande maioria das vezes, porm no regra) e caso o mtodo remot o retornasse algum objeto ns conseguimos acessar esse retorno atavs do atributo re

sult do objeto ResultEvent. J no caso da funo que vai ser chamada quando o mtodo remoto jogar um erro, ela receb e um FaultEvent (na maioria dos casos, porm tambm no regra). E para acessar detalhe s sobre o erro que foi jogado utilizamos o atributo fault do objeto FaultEvent. Voltando para o nosso cdigo, quando o mtodo ContatoService.salvar(Contato) termina r de salvar o contato na lista ns exibiremos uma mensagem informando o usurio de q ue o novo contato foi salvo. Ao executarmos o projeto e inserir um novo contato acontece o seguinte: image E se observarmos o console do Eclipse tambm vamos ver: image Porm a grid ainda continua vazia Vamos configur-la ento:

Todos os registros que aparecem em uma DataGrid devem estar em um array, uma li sta ou algo parecido (por hora um Array est timo! hehehe). O Array que contm os dad os que sero mostrados na DataGrid deve alimentar o atributo dataProvider dela. Va mos ento criar um Array e alimentar a nossa grid: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import br.blog.javasimples.agenda.model.Contato; import import import import import import import ce"); [Bindable] private var agenda:ArrayCollection=new ArrayCollection(); private function salvaContato():void { var contato:Contato=new Contato(); contato.nome=txtNome.text; contato.telefone=txtTelefone.text; contato.email=txtEmail.text; // Insere esse contato na lista do Java var token:AsyncToken=remoteObject.salvar(contato); token.addResponder(new mx.rpc.Responder(salvarSucesso, erro)); } private function salvarSucesso(result:ResultEvent):void mx.collections.ArrayCollection; mx.controls.Alert; mx.rpc.AsyncToken; mx.rpc.Responder; mx.rpc.events.FaultEvent; mx.rpc.events.ResultEvent; mx.rpc.remoting.RemoteObject;

private var remoteObject:RemoteObject=new RemoteObject("contatoServi

{ Alert.show("Contato salvo com sucesso!"); } private function erro(event:FaultEvent):void { Alert.show("Ocorreu o seguinte erro: " + event.fault.faultString ); } ]]> </fx:Script> <mx:Form width="500"> <mx:FormItem label="Nome" width="100%" direction="horizontal"> <s:TextInput id="txtNome" width="220"/> <mx:Spacer width="100%" height="10"/> <mx:FormItem label="Telefone" direction="horizontal"> <s:TextInput width="100" id="txtTelefone"/> </mx:FormItem> </mx:FormItem> <mx:FormItem label="Email" width="100%" direction="horizontal"> <s:TextInput width="220" id="txtEmail"/> <mx:Spacer width="100%" height="10"/> <s:Button label="Salvar" click="this.salvaContato()"/> </mx:FormItem> <mx:HBox width="100%"> <mx:DataGrid width="100%" dataProvider="{this.agenda}"> <mx:columns> <mx:DataGridColumn headerText="Nome" dataField="nome"/> <mx:DataGridColumn headerText="Telefone" dataField="telefone "/> <mx:DataGridColumn headerText="Email" dataField="email"/> </mx:columns> </mx:DataGrid> </mx:HBox> </mx:Form> </s:Application> Foi criado um ArrayCollection chamado agenda e talvarivel foi passada para o atri buto dataProvider da DataGrid, sendo assim todos os elementos que estiverem dent ro do ArrayCollection iro aparecer na grid tambm. Indicamos tambm nas colunas qual atributo dos objetos que esto dentro do dataProvi der deve ser exibido atravs do atributo dataField. Tudo o que precisamos fazer agora adicionar os nossos contatos nesse ArrayCollec tion agora. Vamos fazer o seguinte, toda vez que um novo contato for salvo ns ire mos chamar o mtodo getAgenda() da classe ContatoService e armazenar o retorno do mtodo na varivel agenda que acabamos de criar, assim manteremos a lista sempre atu alizada e consequentemente a grid com todos os nossos contatos. <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[

import br.blog.javasimples.agenda.model.Contato; import import import import import import import ce"); [Bindable] private var agenda:ArrayCollection=new ArrayCollection(); private function salvaContato():void { var contato:Contato=new Contato(); contato.nome=txtNome.text; contato.telefone=txtTelefone.text; contato.email=txtEmail.text; // Insere esse contato na lista do Java var token:AsyncToken=remoteObject.salvar(contato); token.addResponder(new mx.rpc.Responder(salvarSucesso, erro)); } private function salvarSucesso(result:ResultEvent):void { Alert.show("Contato salvo com sucesso!"); // Recupera a lista completa var token:AsyncToken=remoteObject.getAgenda(); token.addResponder(new mx.rpc.Responder(getAgendaSucesso, erro)) ; } private function getAgendaSucesso(event:ResultEvent):void { this.agenda=event.result as ArrayCollection; } private function erro(event:FaultEvent):void { Alert.show("Ocorreu o seguinte erro: " + event.fault.faultString ); } ]]> </fx:Script> <mx:Form width="500"> <mx:FormItem label="Nome" width="100%" direction="horizontal"> <s:TextInput id="txtNome" width="220"/> <mx:Spacer width="100%" height="10"/> <mx:FormItem label="Telefone" direction="horizontal"> <s:TextInput width="100" id="txtTelefone"/> </mx:FormItem> </mx:FormItem> mx.collections.ArrayCollection; mx.controls.Alert; mx.rpc.AsyncToken; mx.rpc.Responder; mx.rpc.events.FaultEvent; mx.rpc.events.ResultEvent; mx.rpc.remoting.RemoteObject;

private var remoteObject:RemoteObject=new RemoteObject("contatoServi

<mx:FormItem label="Email" width="100%" direction="horizontal"> <s:TextInput width="220" id="txtEmail"/> <mx:Spacer width="100%" height="10"/> <s:Button label="Salvar" click="this.salvaContato()"/> </mx:FormItem> <mx:HBox width="100%"> <mx:DataGrid width="100%" dataProvider="{this.agenda}"> <mx:columns> <mx:DataGridColumn headerText="Nome" dataField="nome"/> <mx:DataGridColumn headerText="Telefone" dataField="telefone "/> <mx:DataGridColumn headerText="Email" dataField="email"/> </mx:columns> </mx:DataGrid> </mx:HBox> </mx:Form> </s:Application> Prontinho! Ao rodar a aplicao de novo e adicionar mais contatos conseguimos ver qu e agora tudo est funcionando perfeitamente! Smiley de boca aberta image Bom, confesso que este post ficou um pouco maior do que eu imaginei inicialmente hehehe Mas o importante que deu pra passar a idia sobre como funciona a integrao do Java e do FLEX e como pessoas cujo dom na rea de design no muito elevado (como eu) podem fazer aplicaes bonitas e amigveis para o usurio final! Smiley de boca aberta O cdigo fonte desses projeto est disponvel aqui. Veja a parte 2 tambm..! ;) []s e at a prxima,