Salve pessoal,
Hojei estarei mostrando como integrar Flex com o Java, ainda vejo bastante pessoas com duvida em como realizar esta integração.
Apesar de ser bastante simples existem alguns detalhes que devem ser levados em consideração.
Para este post iremos criar dois projetos um Java_Integracao e um Flex_Integracao, lembrando que também é possivel realizar a integração utilizando apenas um projeto, no qual contém tanto os fontes Java quanto Flex.
Utilizaremos o projeto OpenSource BlazeDs licença LGPL para fazer a integração e comunicação entre o Java e o Flex. Atualmente o BlazeDs é o projeto Java sever-side mais utilizado pelas empresas e pelas comunidades.
As principais caracteristicas do Blaze são:
- Facil integração dos projeto Flex e Air com back-end Java.
- Alto desempenho em trasferências de dados.
- Free e OpenSource
No Kit de download do Blaze a adobe fornece algumas aplicações de exemplo, vale a pena dar um confirida no arquivoblazeds-samples.war.
Ao extrair o blaze para uma pasta qualquer você deve ter percebido que ele ja vem com um tomcat, contudo iremos utilizar nosso proprio tomcat. A unica diferença entre os dois é que a Adobe já fornece um tomcat com todas a libs do blaze dentro do tomcat, contudo muitas destas libs não são importantes para este exemplo de integração.
Os requisitos para que o Blaze funcione 100% são:
- JDK 1.5 or higher.
- Java Servlet Container 2.3 or higher.
- Flex SDK 3.2
- Flash Player 9
Para mais detalhes sobre o BlazeDs entre no site http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/.
Requisitos para a realização da Integração:
- Tomcat 6
- Java 6
- BlazeDs 3.x
- Sdk Flex 3.x
- Eclipse, FelxBuilder ou NetBeans. Obs: Contudo irei utilizar o Eclipse Ganymed
Neste post irei assumir que você sabe configurar Tomcat, Java e o Eclipse. Neste exemplo de integração não irei fazer o uso persistência a uma base de dados, estaremos utilizando objetos em memoria.
Para instalar o Sdk Flex é muito simples, basta apenas utilizar o padrão NNF (Next > Next > Finish) do windows.
Agora que você já está com todos os requisitos OK, vamos para a melhor parte.
Passo 1: Criação de um projeto java Dynamic Web Project.
ø Com o eclipse aberto vá em File > New > Project ou ctrl + N.
ø Selecione a pasta Web > Dynamic Web Project.
Com isso irá ser aberta um tela de configuração de seu Web Project.
1 - Em Project Name informe: Java_Integracao
2 - Em Target Runtime selecione a configuração de seu Tomcat.
Caso você não tenha um Server configurado faça o seguinte:
2.1 - Selecione New ao lado de Target Runtime, fazendo isso irá aparecer um nova tela de configuração
New Server Runtime Environment.
2.2 - Escolha Apache > Apache Tomcat 6.0 e selecione a opção Create a new local
server isso nos poupará trabalho futuro pois isso fará com que após a configuração do server o eclipse crie um
novo Project Server, agora clique em next.
2.3 - Nesta segunda você deverá escolher um nome para o seu server, informar onde o seu tomcat esta instalado e escolher a
versão JRE, clique em finish. Pronto agora você tem um Server Runtime configurado.
Após informar o Target Runtime apenas clique em finish, agorá você já tem o seu projeto Java criado e pré configurado.
Passo 2: Configurando um nome de contexto.
ø Quando você terminou de criar seu projeto Java_Integracao o eclipse automaticamente já configurou um nome de contexto, este
alias é utilizado pelo Server para poder executar sua aplicação de dentro da IDE Eclipse. Assim caso voce deseje alterar este
nome sega os seguintes passos:
2.1 - Clique com o botão direito sobre o projeto e clique em Properties.
2.2 - Selecione Web Project Settings. Nesta tela terá apenas um campo chamado Context
Root o nome default deste campo é proprio nome do projeto no nosso caso “Java_Integracao”.
Passo 3: Adicionando as lib necessárias.
ø Libs do BlazeDs
- backport-util-concurrent.jar
- commons-fileupload-1.1.jar
- commons-httpclient-3.0.1.jar
- commons-io-1.1.jar
- commons-logging.jar
- flex-bootstrap.jar
- flex-messaging-common.jar
- flex-messaging-core.jar
- flex-messaging-remoting.jar
Passo 4: Criando os arquivos de configuração do BlazeDS
ø Na pasta/WebContent/WEB-INF crie uma pasta chamada flex, nesta irtá conter todos os
arquivos que o blazeDS necessita para poder realizar a comunicação de sua aplicação Flex com Java.
Após criar a pasta flex você deve criar 2 arquivos.
1 - remoting-config.xml
O Remoting Service permite uma aplicação cliente o acesso a métodos de objetos do lado do servidor Java, sem configurar
os objetos como serviços web. Para acessar objeto do lado do servidor, o cliente Flex irá utilizar o componente RemoteObjetct
do proprio Sdk do Flex.
O RemoteObject é declatado em classes MXML ou ActionScript para se conecatar com serviços remotos. usa-se o RemoteObject
para chamar metodos em classes Java ou ColdFusion.
Mas para o RemoteObjetc saber qual classe Java buscar, você deve configurar o arquivo remoting-config.xml e incluir uma tag
chamada , esta tag contem um atributo chamado “id” isto define um alias para a sua classe Java e o
seu RemoteObject irá utilizar este alias em suas propriedades. Definido o ID você deve definir o source (caminho) de sua classe
Java.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service" class="flex.messaging.services.RemotingService">
<adapters>
<adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
</adapters>
<default-channels>
<channel ref="my-amf"/>
</default-channels>
<destination id="facadeContato">
<properties>
<source>com.fabielprestes.facade.FacadeContato</source>
</properties>
</destination>
</service> |
2 - services-config.xml
Este é considerado um arquivo de alto nivel, onde se localizam as configurações mais importantes. Neste é possivel definir
esquemas de segurança, difinir canais e outros serviços. Não estarei entrando em detalhes sobre este arquivo.
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service-include file-path="remoting-config.xml" />
<!--
Application level default channels. Application level default channels are
necessary when a dynamic destination is being used by a service component
and no ChannelSet has been defined for the service component. In that case,
application level default channels will be used to contact the destination.
-->
<default-channels>
<channel ref="my-amf"/>
</default-channels>
</services>
<channels>
<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
<properties>
<polling-enabled>false</polling-enabled>
</properties>
</channel-definition>
</channels>
<logging>
<!-- You may also use flex.messaging.log.ServletLogTarget -->
<target class="flex.messaging.log.ConsoleTarget" level="Error">
<properties>
<prefix>[BlazeDS] </prefix>
<includeDate>false</includeDate>
<includeTime>false</includeTime>
<includeLevel>true</includeLevel>
<includeCategory>false</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-file>
<watch-file>{context.root}/WEB-INF/flex/remoting-config.xml</watch-file>
<touch-file>{context.root}/WEB-INF/web.xml</touch-file>
</redeploy>
</system>
</services-config>
Pronto agora com todos os arquivos criados podemos continuar a configuração do projeto. Agora iremos alterar o arquivo web.xml de nossa aplicação.
ø web.xml
Neste arquivo você deve indicar ao container que estamos utilizando o BlazeDs. Assim você deve inserir algumas tags de configuração. Edite seu arquivo para ficar desta maneira.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>Java_Integracao</display-name>
<!-- MessageBroker Servlet -->
<servlet>
<servlet-name>MessageBrokerServlet</servlet-name>
<servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
<init-param>
<param-name>services.configuration.file</param-name>
<param-value>/WEB-INF/flex/services-config.xml</param-value>
</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>Flex_Integracao.html</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>Flex_Integracao.html</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
Ok, agora seu projeto Java_Integracao esta totalmente configurado esperando apenas para começar a implementação, mais antes disso agora iremos configurar o projeto Flex_Integracao.
Passo 1: Criando Projeto Flex_Integracao
ø Com o eclipse aberto vá em File > New > Project ou ctrl + N.
ø Selecione a pasta Web > Flex Project.
Com isso irá ser aberta um tela de configuração de seu Flex Project.
1 - Em Project Name informe: Flex_Integracao
As outras opções você pode deixar como estão, agora clique em next.
2 - Na proxima tela na opção Output folder URL http://localhost:8080/Java_Integracao
3 - Clique em finish e seu projeto estará criado com sucesso.
Passo 2: Incluindo parametro no compilador do Flex
ø Agora temos de informar ao compilador do Flex que existe um servidor de AMF levantado.
1 - Clique com botão direito no projeto Flex_Integracao > Properties > Selecione
Flex Compiler > em Additional compiler arguments
adicione a linha -services Caminho real do projeto Java_integracao+”/WebContent/WEB-INF
flex/services-config.xml”. Ex: c:/dev/Java_integracao//WebContent/WEB-INF/flex/services-config.xml
Clique em OK, prontinho agora o seu projeto Flex já esta totalmente configurado.
Passo 3: Configurando Output Folder
ø Agora temos de informar para o projeto Flex onde ele deve gerar os arquivos swf, html, history e etc, deve-se fazer isso para que consigamos rodar a aplicação de dentro da IDE de desenvolvimento, para isso faça:
1 - Clique em browser. Aqui você irá apontar para a pasta WebContent do seu projeto Java_Integracao, isso fará com que os seus arquivos html template e swf irão ser alocados em seu projeto java.
Final das configurações
Daqui em diante começa a melhor parte, a implementação.
Para este exemplo estaremos criando uma agenda telefônica, onde o usuario poderá inserir um novo contato, excluir um contato existente e alterar um contato existente.
Obs: Lembrando que nesta Agenda não irei utilizar um padrão que pode ser seguido em projetos reais e também não estarei fazendo uso de algum framework como o Carnigorn, Pure MVC etc. Este exemplo é apenas para efeito didático.
Vamos começar com as classes Java
Iremos criar os seguintes pacotes.
- com.fabielprestes.facade
- com.fabielprestes.model.entidades
No pacote com.fabielprestes.model.entidades crie as seguintes classes:
Contato.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| package com.fabielprestes.model.entidades;
public class Contato {
private String nome;
private String fone;
private String endereco;
public Contato(){
}
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
public String getFone() {
return fone;
}
public void setFone(String fone) {
this.fone = fone;
}
public String getEndereco() {
return endereco;
}
public void setEndereco(String endereco) {
this.endereco = endereco;
}
} |
RespostaRemota.java Esta será a classe responsável pelo trafego de objetos entre o Flex e o Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| package com.fabielprestes.model.entidades;
public class RespostaRemota {
private boolean status;
private Object valueObject;
public RespostaRemota(){
super();
}
public boolean isStatus() {
return status;
}
public void setStatus(boolean status) {
this.status = status;
}
public Object getValueObject() {
return valueObject;
}
public void setValueObject(Object valueObject) {
this.valueObject = valueObject;
}
public void crieRespostaErro(Object value) {
this.setStatus(false);
this.setValueObject(value);
}
public void crieRespostaSucesso(Object value) {
this.setStatus(true);
this.setValueObject(value);
}
} |
No pacote com.fabielprestes.facade crie a seguinte classe:
FacadeContato.java Esta será a classe que o RemoteObject usará para se comunicar o servidor.
Esta classe não fará nada demais, apenas irá verificar se os campos foram preenchidos caso não preenche com valores default.
No post Parte 2 iremos aplicar persistencia neste projeto.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| package com.fabielprestes.facade;
import com.fabielprestes.model.entidades.Contato;
import com.fabielprestes.model.entidades.RespostaRemota;
public class FacadeContato {
private RespostaRemota resposta;
public RespostaRemota crieNovoContato(Contato contato) throws Exception{
resposta = new RespostaRemota();
try {
if(contato == null)
throw new Exception("Contato está nulo.", null);
if(contato.getEndereco().equals(""))
contato.setEndereco("Endereço desconhecido.");
if(contato.getNome().equals(""))
contato.setNome("Nome desconhecido.");
if(contato.getFone().equals(""))
contato.setFone("Telefone desconhecido.");
resposta.crieRespostaSucesso(contato);
} catch (Exception e) {
resposta.crieRespostaErro(e.getMessage());
}
return resposta;
}
} |
OK! Todas as classes java necessárias para este post são estas acima. Agora iremos criar as classes do Flex.
Como dito anteriomente iremos criar uma agenda de contatos, onde o usuário poderá criar um novo contato inserindo o nome, telefone e seu endereço..
OBS: Nesta primeira parte do post a nossa aplicação apenas irá inserir novos contatos e lista-los em um DataGrid, já na parte back-end nós não iremos persistir este contato em um banco de dados ou algo do genero, nós apenas iremos verificar se todos os atributos foram devidamente preenchidos, caso não estejam iremos inserir dados default. Agora não se preocupem em nossa serie Integrando Flex com Java - Parte 2 iremos modificar este mesmo projeto para realizar as devidas persistencias em um banco de dados, contudo iremos por etapas para sre mais simples de entender a integração.
Agora que todo o “Bla Bla Bla” foi explicado vamos ao enteressa, as classes Flex.
Neste projeto Flex_Integracao teremos dois pacotes.
- com.fabielprestes.model - Objetos de Negócios
- com.fabielprestes.view - Objetos de Visão
- com.fabielprestes.view.ascript - Objetos de Controle da Visão
No pacote com.fabielprestes.model crie as seguintes classes:
ContatoDAO.as classe responsável por criar um objeto RemoteObject, o qual irá abir uma conexão com o servidor Java e disparar uma chamada no mesmo.
Algo a se notar, esta classe extende a classe EventDispatcher, isso foi feito com o seguinte propósito, como nós não estamos utilizando um framework como o Cairngorm o qual tem suas classes Service, Delegate, ModelLocator entre outras que ficam monitorando as respostas do server e assim avisar as classes ou objetos que estas já podem mudar seu comportamento e assim por diante. Não entrarei em discução sobre o Cairngorm neste post, pois este terá um outro post apenas para ele.
Nes post nós iremos fazer tudo o que o Cairngorm faz só que na unha mesmo.
Beleza voltando a classe EventDispatcher, a classe ContatoDAO extente ela para que quando esta receba a resposta de uma chamado do servidor o DAO seja capaz de enviar um aviso a classe controller de origem que o processamento no server foi realizado com sucesso ou não e assim realizar o comportamento configurado.
Se nós não tivessemos extendido esta classe seria impossível amarrarmos um evento a ela, ou seja, sem isso seria impossivel de a classe controler saber o resultado do processamento do server.
Iremos ver a amarração na classe Agenda.as. Mais aí segue um exemplo:
1
2
3
4
5
| var contatoDAO:ContatoDAO = new ContatoDAO();
/* O "addEventListener" só pode ser feito graças a classe EventDispatcher. */
contatoDAO.addEventListener(ContatoEvent.CONTATO_CRIADO, trateContatoCriado);
contatoDAO.crieNovoContato(crieContatoDaTela()); |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| package com.fabielprestes.model{
import flash.events.EventDispatcher;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.mxml.RemoteObject;
/**
* @author Fabiel Prestes
*/
public class ContatoDAO extends EventDispatcher{
private var _remote:RemoteObject;
protected var respostaRemota:RespostaRemota;
private var contatoEvent:ContatoEvent;
public function ContatoDAO(){
/* Criando uma instancia do objeto RemoteObject, no qual será utilizado para
* enviar uma chamada par ao Java. */
_remote = new RemoteObject();
/* Alterando o comportamento do mouse */
_remote.showBusyCursor = true;
/* Setando o alias destino que definimos no arquivo remoting-config.xml anteriormente */
_remote.destination = "facadeContato";
}
/**
* Metodo responsavel por enviar ao Servidor Java uma requisição para
* persistir um objeto Contato.
* @param Doenca
*/
public function crieNovoContato(contato:ContatoVO):void{
this._remote.addEventListener(ResultEvent.RESULT, trateContatoCriadoSucesso);
this._remote.addEventListener(FaultEvent.FAULT, trateErroDAO);
this._remote.crieNovoContato(contato);
}
/**
* @private
* Trate a resposta que o servidor enviou da chamada <b>crieNovoContato</b>
*/
private function trateContatoCriadoSucesso(evt:ResultEvent):void{
respostaRemota = evt.result as RespostaRemota;
/* Caso o Status seja TRUE isso indica que não houve nenhuma Exception disparada
* no processamento do metodo 'crieNovoContato' */
if(respostaRemota.status){
contatoEvent = new ContatoEvent(ContatoEvent.CONTATO_CRIADO);
contatoEvent.valueObject = respostaRemota.valueObject as ContatoVO;
}else{
contatoEvent = new ContatoEvent(ContatoEvent.CONTATO_ERRO);
contatoEvent.valueObject = respostaRemota.valueObject.toString();
}
/* Dispara o nosso evento personalizado */
this.dispatchEvent(contatoEvent);
}
/**
* @private
* Metodo responsavel por escutar a resposta de todos os metodos do DAO
* que o servidor retornou e depois mostar um alerta com o erro.
* @eventType FaultEvent
*/
protected function trateErroDAO(evt:FaultEvent):void{
Alert.show(evt.fault.toString());
}
}
} |
ContatoEvent.as Classe que contém eventos personalizados (não entrarei em detalher sobre eventos personalizados.) e que serão disparados a cada resposta do servidor.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| package com.fabielprestes.model{
import flash.events.Event;
public class ContatoEvent extends Event{
public static const CONTATO_CRIADO:String = "contatoCriado";
public static const CONTATO_ERRO:String = "contatoErro";
public var valueObject:Object;
public function ContatoEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
super(type, bubbles, cancelable);
}
}
} |
ContatoVO.as Esta classe é exatamente o espelho da classe Contato no projeto Java_Integracao, apenas lembrando esta classe ContatoVO não precisa ter exatamente os mesmos atributos que a classe java.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| package com.fabielprestes.model{
import flash.events.Event;
/**
* @author Fabiel Prestes
*/
public class ContatoEvent extends Event{
public static const CONTATO_ALTERADO:String = "contatoAlterado";
public static const CONTATO_CRIADO:String = "contatoCriado";
public static const CONTATO_DELETADO:String = "contatoDeletado";
public static const CONTATO_ERRO:String = "contatoErro";
public var valueObject:Object;
public function ContatoEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
super(type, bubbles, cancelable);
}
}
} |
RespostaRemota.as Esta classe serve apenas para trafegar os objetos entre o Java e o Flex nós poderiamos trafegar o objeto Contato diretamente entre as aplicações, contudo uma classe de transporte pode deixar mais flexível a camada de DAO.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| package com.fabielprestes.model {
/**
* @author Fabiel Prestes
*/
[RemoteClass(alias="com.fabielprestes.model.entidades.RespostaRemota")]
public class RespostaRemota {
private var _status:Boolean;
private var _valueObject:Object;
public function RespostaRemota() {
}
public function get status():Boolean{
return _status;
}
public function set status(value:Boolean):void{
_status = value;
}
public function get valueObject():Object{
return _valueObject;
}
public function set valueObject(value:Object):void{
_valueObject = value;
}
}
} |
No pacote com.fabielprestes.view crie a seguinte classe:
AgendaUI.mxml Esta classe terá apenas os componentes gráficos do Flex como DataGrid, Botões e etc. Contudo estes componentes não terão nenhum comportamento, esta caracteristica ficará a cargo da classe Agenda.as, já que esta será o controller.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" backgroundColor="#B4D0ED">
<mx:DataGrid width="100%" height="80%" id="dgContato">
<mx:columns>
<mx:DataGridColumn headerText="Nome" dataField="nome"/>
<mx:DataGridColumn headerText="Telefone" dataField="fone"/>
<mx:DataGridColumn headerText="Endereço" dataField="endereco"/>
</mx:columns>
</mx:DataGrid>
<mx:ApplicationControlBar width="100%" height="20%">
<mx:Form width="50%" height="50%">
<mx:FormItem label="Nome">
<mx:TextInput id="tiNome"/>
</mx:FormItem>
<mx:FormItem label="Telefone">
<mx:TextInput id="tiFone"/>
</mx:FormItem>
<mx:FormItem label="Endereco">
<mx:TextInput id="tiEnd"/>
</mx:FormItem>
</mx:Form>
<mx:VBox height="50%" width="50%" horizontalAlign="right">
<mx:Button label="Inserir" width="70" id="btInserir"/>
<mx:Button label="Limpar" width="70" id="btLimpar"/>
</mx:VBox>
</mx:ApplicationControlBar>
</mx:VBox> |
No pacote com.fabielprestes.view.ascript crie a seguinte classe:
Agenda.as Nesta classe serão realizados e definidos todos os comportamentos da nossa agenda.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| package com.fabielprestes.view.ascript{
import com.fabielprestes.model.ContatoDAO;
import com.fabielprestes.model.ContatoEvent;
import com.fabielprestes.model.ContatoVO;
import com.fabielprestes.view.AgendaUI;
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.ListEvent;
/**
* @author Fabiel Prestes
*/
public class Agenda extends AgendaUI{
private var contatoDAO:ContatoDAO;
[Bindable]
private var arrayContato:ArrayCollection = new ArrayCollection();
public function Agenda(){
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, init);
}
/**
* @private
*/
private function init(evt:FlexEvent):void{
this.btLimpar.addEventListener(MouseEvent.CLICK, trateLimpar);
this.btInserir.addEventListener(MouseEvent.CLICK, trateInserir);
this.dgContato.dataProvider = arrayContato;
}
/**
* @private
*/
private function trateLimpar(evt:MouseEvent):void{
limpeForm();
}
/**
* @private
* Disparado no clique do botao inserir.
* Dispara uma chamada de criar novo contato ao model DAO e amarra um evento de resposta.
*/
private function trateInserir(evt:MouseEvent):void{
contatoDAO = new ContatoDAO();
contatoDAO.addEventListener(ContatoEvent.CONTATO_CRIADO, trateContatoCriado);
contatoDAO.crieNovoContato(crieContatoDaTela());
limpeForm();
}
/**
* @private
* Trata a resposta que o model recebeu do servidor.
*/
private function trateContatoCriado(evt:ContatoEvent):void{
if(evt.valueObject is ContatoVO){
arrayContato.addItem(evt.valueObject as ContatoVO);
Alert.show("Contato criado com sucesso.","Informação");
}else{
Alert.show(evt.valueObject.toString(),"Informação");
}
}
/**
* @private
* Cria um objeto Contato baseado no formulario.
*/
private function crieContatoDaTela():ContatoVO{
var contato:ContatoVO = new ContatoVO();
contato.nome = this.tiNome.text;
contato.fone = this.tiFone.text;
contato.endereco = this.tiEnd.text;
return contato;
}
/**
* Limpa todos os campos do formulario.
*/
public function limpeForm():void{
this.tiEnd.text = "";
this.tiFone.text = "";
this.tiNome.text = "";
}
}
} |
Beleza pessoal agora tando o projet Java_Integracao quanto o Flex_Integracao estão com todas as classes criadas, basta apenas executar a aplicação.
Passos para a execução da aplicação.
- Start o servidor TomCat
- Clique com o botão direito em cima do Projeto Flex > Run As > Flex Application
Pronto isso fará o seu browser padrãos ser iniciado com a aplicação rodando e agora e só diversão.
Então é isso pessoal, espero ter ajudado a todos e qualquer dúvida ou sugestão entrem em contato. Estarei prontamente para atende-los.
Aqui está o link para baixar os dois projetos.
E fiquem atentos estarei lançando um screencast deste post.
E também logo estarei lançando a segunda parte da serie de “Integrando Flex com Java Parte 2 - Agora fazendo uso de persistencia dos objetos”