logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Jun 22

Integração Flex 4 & Spring 3 com Spring BlazeDS [Parte I]

Escrito por Luis Messias em .NET, 1, 2009, 3.5, 4, 6, AMF, AR, Access, Adobe, Aplicativos, BI, Blazeds, Desenvolvimento, Download, Eclipse, Eclipse 3.5, Ferramenta, Flash Builder 4, Flex, Flex 4, Galileo, Geral, Hibernate, IE, Java, MXML, Messaging, O, Plugin, RIA, Remoting, Ria’s Geral, SDK, Spring, Spring Framework, SpringFramework, Sun, TAT, TextInput, UI, XML, XP, action, apache, api, app, arte, auto, back, blog, botão, builder 4, class, classe, classes, cliente, comunidade, código, developer, dispatch, dynamic, err, flash, flash builder, for, framework, git, if, image, int, j2ee, label, layout, library, lista, lite, map, mg, on, opensource, padrão, pattern, procura, redeRIA, server, servidor, serviço, spark, spring blazeds, streaming, string, tool, try, uint, web @ 06 22nd, 2010 | via http://blog.luismessias.com | 1 comentário
Luis Messias
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »



No final de 2008, a comunidade Spring começou a trabalhar no projeto de integração Spring BlazeDS para adicionar suporte ao Flex no desenvolvimento de aplicações com Java e Spring.
O BlazeDS cria instâncias de objetos do lado do servidor Java e usa os para responder aos pedidos do remote object. A integração com Spring BlazeDS permite que você configure o Spring beans como um destino BlazeDS para utilização de remote objects no Flex.

Ferramentas necessárias:

•  Eclipse 3.5 (Galileo) para Java EE Developers – http://www.eclipse.org/downloads/
ou,  SpringSource Tool Suite : http://www.springsource.com/products/springsource-tool-suite-download/
• Flash Builder 4, plugin para instalar na distribuição do eclipse 3.5  -  http://www.adobe.com/go/try_fashbuilder
• Tomcat 6: http://tomcat.apache.org/
• BlazeDS 4 (Binary Distribution): http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/
• Spring Framework 3.0.2 (vanilla release): http://www.springsource.org/download
• Spring BlazeDS Integration 1.0.3 (vanilla release): http://www.springsource.org/spring-flex
• AOP Alliance 1.0: http://sourceforge.net/projects/aopalliance/files/
• backport-util-concurrent 3.1: http://sourceforge.net/projects/backport-jsr166/files/backport-jsr166/
• cglib 2.2 http://sourceforge.net/projects/cglib/files/
• asm 3.2 http://forge.ow2.org/projects/asm/

Como fazer:

1) Primeiro instale o Eclipse e, em seguida, instalar o Flash Builder 4 plugin para a distribuição Eclipse  que você acabou de instalar.

2) No Eclipse crie um servidor:
1. File > New > Other
2. Selecione Server > Server
3. Clique em Avançar
4. Selecione> Apache Tomcat v6.0 Server
5. Clique em Avançar
6. Especifique o local onde o Tomcat está instalado e selecione o JRE
7. Clique em Concluir

3) Criar um “Dynamic Web project”

No Eclipse, importe o arquivo blazeds.war para criar o projeto:
1. Escolha File > Import
2. Selecione  WAR file. Especifique o local do arquivo blazeds.war.
Dê um nome para o projecto web, flexcomspring
3. Clique em Concluir

Primeiro remova o arquivo xalan.jar do diretório: WebContent/WEB-INF/lib. Em seguida, vá em propriedades do projeto.   Selecione Java Build Path e em seguida, clique na guia Source. Defina o
diretório de saída: flexcomspring/WebContent/WEB-INF/classes

Isso faz com que todas as classes Java criadas no projeto serem implantadas na aplicação web.
No WebContent/WEB-INF/flex atualizar o services-config.xml para o seguinte código:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<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" />
   </channel-definition>
   <channel-definition id="my-streaming-amf"
      class="mx.messaging.channels.StreamingAMFChannel">
	  <endpoint
	  url="http://{server.name}:{server.port}/{context.root}/messagebroker/streamingamf"
	  class="flex.messaging.endpoints.StreamingAMFEndpoint" />
   </channel-definition>
   <channel-definition id="my-polling-amf"
	  class="mx.messaging.channels.AMFChannel">
	  <endpoint
	  url="http://{server.name}:{server.port}/{context.root}/messagebroker/amfpolling"
	  class="flex.messaging.endpoints.AMFEndpoint" />
   </channel-definition>
</channels>
</services-config>

Lista 1 – services-config.xml

4) Em seguida, você precisa adicionar as dependências necessárias para  a aplicação web. Copie todas as bibliotecas do Spring Framework / arquivos .JAR (localizado na pasta dist) para o seguinte diretório: WebContent/WEB-INF/lib.
Também copie as bibliotecas do Spring BlazeDS Integration (localizado na pasta dist ) para a pasta lib. Faça o mesmo para aopalliance.jar, backport-util- concurrent.jar, cglib-2.2.jar, asm-3.2.jar.

5) Para configurar o servidor para o Flex Remoting, primeiro editar o web.xml em: WebContent/WEB-INF. Substituir seu conteúdo para:

<?xml version="1.0" encoding="UTF-8"?>
<web-app 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	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"
	version="2.5">
	<listener>
		<listener-class>
			org.springframework.web.context.ContextLoaderListener
		</listener-class>
	</listener>
	<listener>
		<listener-class>flex.messaging.HttpFlexSession</listener-class>
	</listener>
	<servlet>
		<servlet-name>flexcomspring</servlet-name>
		<servlet-class>
			org.springframework.web.servlet.DispatcherServlet
		</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value></param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>flexcomspring</servlet-name>
		<url-pattern>/messagebroker/*</url-pattern>
	</servlet-mapping>
</web-app>

Lista 2 – web.xml

O Spring irá agora tratar os pedidos para o messagebroker / url.

6) Agora configure o Spring criando um arquivo applicationContext.xml em WebContent/WEB-INF com o seguinte código:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:flex="http://www.springframework.org/schema/flex"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/flex 
        http://www.springframework.org/schema/flex/spring-flex-1.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-3.0.xsd">
 
 	<flex:message-broker>
        <flex:remoting-service default-channels="my-amf" />
    </flex:message-broker>
 
    <context:component-scan base-package="com.luis.flex" />
</beans>

Lista 3 – applicationContext.xml

Na lista 3 cria-se o Flex message-broker, que permitirá ao Flex habilitar o remoting-service, utilizando o canal my-amf. O  component-scan vai encontrar classes no pacote “com.luis.flex” que foram anotados para Remoting.

7) Agora crie uma classe Java simples que será exposta através do AMF channel para uma aplicação Flex. Na pasta src criar uma nova classe no pacote criado anteriormente com o nome “OlaMundoService”. Definir com o seguinte código  em OlaMundoService.java para:

package com.luis.flex;
 
import org.springframework.flex.remoting.RemotingDestination;
import org.springframework.flex.remoting.RemotingInclude;
import org.springframework.stereotype.Service;
 
@Service
@RemotingDestination
public class OlaMundoService {
    @RemotingInclude
    public String olaUser(String name) {
        return "Olá, " + name;
    }
}

Lista 4 – OlaMundoService.java

Na classe OlaMundoService você vai notar duas anotações. O @Service annotation diz ao Spring qual classe é um serviço e @RemotingDestination expõe a classe como um remoting endpoint para o Flex. Esta classe também contém um único método chamado olaUser, que simplesmente recebe uma string. Por padrão, todos os métodos públicos de uma classe estão disponíveis para remoting. Você pode ocultar um método público de ser exposto como um endpoint remoto usando o @RemotingExclude.

?8 ) Agora crie uma aplicação Flex que vai chamar o método olaUser em OlaMundoService. Para começar a construir a aplicação Flex, basta criar um novo projeto Flex. No assistente para Novo projeto Flex de o nome: “olaMundo”, selecione Web como o tipo de aplicação, e definir o Flex SDK versão para Flex 4.0 (geralmente o padrão). Também escolha J2EE como o tipo de servidor de aplicativos, habilite Use Remote Object Access Service, e selecione BlazeDS. Certifique-se que Create Combined Java/Flex Project Using WTP não está marcada e clique em Avançar. Agora insira as informações para o projeto flexcomspring. A pasta raiz é a pasta WebContent no projeto flexcomspring. A URL raiz deve ser http://localhost:8080/flexcomspring /. A raiz de contexto deve ser /flexcomspring.


Clique em Concluir para criar o projeto. Agora você deve ver o código da aplicação. Substitua o código pelo seguinte:

<?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:Declarations>
		<s:RemoteObject id="ro" destination="olaMundoService" 
		endpoint="http://localhost:8080/flexcomspring/messagebroker/amf"/>
	</fx:Declarations>
 
	<s:layout><s:VerticalLayout/></s:layout>
 
	<s:TextInput id="txt"/>
 
	<s:Button label="Enviar" click="ro.olaUser(txt.text)"/>
 
	<s:Label id="lbl" text="{ro.olaUser.lastResult}"/>
 
</s:Application>

Lista 5 – olaMundo.mxml

Agora, execute a aplicação olaMundo (uma maneira é clicar com o botão direito no olaMundo. mxml, selecione Executar como e, em seguida, selecione Web Application). Digite seu nome no TextInput Clique no botão Enviar. Isto irá iniciar um pedido Flex Remoting para o servidor Tomcat chamando o Spring DispatcherServlet, que então procura o serviço OlaMundoService. Este destino é automaticamente mapeado para o Spring OlaMundoService Bean. Em seguida, o método olaUser será chamado no bean, passando para a chamada  do RemoteObject no cliente. O método retorna uma nova String, que é então serializado em AMF, inserido no corpo da resposta HTTP, e enviados de volta para o cliente. Você acabou de concluir uma aplicação web com Flex  para comunicar através de aplicações com Spring BlazeDS usando o Spring BlazeDS Integration!

Mai 13

Um pouco sobre “Inversão de Controle” e “Injeção de Dependência”

Escrito por Ved em 1, 2009, AR, Artigo, Design, Design Pattern, Flex, Frameworks, Java, Mercado, O, Ria’s Geral, Spring, UI, Vários, app, control, framework, on, pattern @ 05 13th, 2010 | via http://www.vedovelli.com.br | Sem comentários
Ved
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Este artigo não é meu. É a tradução do artigo de Joel Hooks, cujo original encontra-se aqui: http://joelhooks.com/2009/07/12/inversion-of-control-and-dependency-injection-in-flex-using-the-parsley-application-framework-part-1/
O princípio de projeto Inversão de Controle (IoC) e o design pattern Injeção de Dependência (DI) estão no mercado já há vários anos. No mundo Java, frameworks populares como o Spring fazem grande uso destes conceitos. Com a [...]

Mar 25

Flex 4 + BlazeDS 4 + Java + DataWizards

Escrito por Stefan Horochovec em 1, 2009, 4, 6, AMF, AR, Actionscript, Adobe, Artigo, BI, Beta, Blazeds, Controls, Curso, Cursos, DataGrid, DataProvider, Download, Eclipse, Evento, Ferramenta, Flash Builder 4, Flex, Flex 4, FlexDuck, Formulário, Galileo, Google, IE, Java, MXML, Messaging, Number, O, PHP, Pessoal, Plugin, RIA, Remoting, Ria’s Geral, SDK, Serviços, Spring, SpringFramework, Sun, TAT, Tech, Tema, TextInput, Tutorial, UI, Vídeo, Wordpress, XML, XP, action, apache, app, auto, blog, botão, builder 4, camp, class, comunicação, conferência, configuração, control, código, código fonte, demo, dispatch, dynamic, email, err, event, events, exemplo, filter, flash, flash builder, fonte, for, framework, free, frontend, function, handle, html, ide, if, image, imagens, instalação, int, internet, label, library, lista, map, menu, mg, on, painel, pattern, pt, server, servidor, serviço, spark, string, tag, uint, web, window, zend @ 03 25th, 2010 | via http://www.horochovec.com.br/blog | Sem comentários
Stefan Horochovec
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Ouvir com webReader

Olá pessoal

A grande sensação ontem (23/03) foi a publicação pelo guru Christophe Coenraets demonstrando um vídeo aonde através do Flash Builder ele consumiu recursos de um projeto Java sem codificação no ambiente Flex. Nesse artigo vou demonstrar como trabalhar com esse recurso passo-a-passo.

Bom, primeiro passo é você ter em seu computador todas as ferramentas necessárias. Neste caso, você irá utilizar o Eclipse Galileu JEE, Flash Builder (stand-alone ou plugin) e do BlazeDS 4 Beta.

A aplicação que desenvolveremos nesse tutorial é a mesma desenvolvida no post anterior, com a diferença que aonde foi feito codificação manual no ambiente Flex, agora, iremos utilizar o Flash Builder para a geração do código fonte.

Bom, no Eclipse Galileo para iniciar um projeto, eu escolhi a opção File -> New -> Web -> Dynamic Web Project, conforme abaixo:

E depois configurei o projeto da seguinte maneira:

Bom, depois de configurar o projeto, iremos criar um Bean para serializarmos algumas informações que serão enviadas para o Flex. A idéia é bastante simples, irei criar um model para uma simples agenda de contato.

?Download 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
33
34
35
36
package br.com.horochovec.model;
 
import java.io.Serializable;
 
/**
 * Modelo para agenda de contato
 * @author Stefan Horochovec
 */
public class Contato implements Serializable {
 
	/**
	 *
	 */
	private static final long serialVersionUID = 1L;
 
	private String nome;
 
	private String email;
 
	public String getNome() {
		return nome;
	}
 
	public void setNome(String nome) {
		this.nome = nome;
	}
 
	public String getEmail() {
		return email;
	}
 
	public void setEmail(String email) {
		this.email = email;
	}
 
}

E em seguida, criarei um serviço que irá adicionar em um ArrayList os contatos que serão enviados do Flex para o Java.

?Download ContatoService.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
package br.com.horochovec.service;
 
import java.util.ArrayList;
 
import br.com.horochovec.model.Contato;
 
/**
 * Serviço para manutenção dos contatos
 * @author Stefan Horochovec
 */
public class ContatoService {
 
	private static ArrayList listContato = new ArrayList();
 
	/**
	 * Adiciona um contato a lista
	 * @param contato
	 */
	public void addContato(Contato contato) {
		listContato.add(contato);
	}
 
	/**
	 * Retorna a lista de contatos
	 * @return
	 */
	public ArrayList getListContato() {
		return listContato;
	}
 
}

Após isso, já temos uma simples aplicação pronta para trabalhar com o Flex, basta apenas configurar os arquivos .XML para que o BlazeDS possa funcionar.

A partir de agora é necessário que você já tenha descompactado o arquivo blazeds-bin-4.0.0.14910.zip. Após descompactá-lo, você terá que descompactar o arquivo blazeds.war que surgiu da descompactação anterior. Como resultado, obterá o seguinte:

Bom, podemos copiar para o diretório WebContent/WEB-INF de nosso projeto Java, os diretórios: flex/, lib/, spring/ e os arquivos: flex-servlet.xml e web.xml. Após copiar esse conteúdo, o primeiro arquivo que iremos configurar, é o arquivo web.xml que fica dentro da pasta WebContent/WEB-INF/.

Para essa configuração, iremos alterar o conteúdo do arquivo web.xml que veio dentro do arquivo blazeds.war que foi previamente descompactado.

Perceba que os parametros da aplicação foram alterados e também foi alterado o valor da propriedade useAppserverSecurity para false. O resultado será:

?Download web.xml
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
96
97
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
 
    <display-name>FlexDuck</display-name>
    <description>FlexDuck</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-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>
        <servlet-name>RDSDispatchServlet</servlet-name>
		<display-name>RDSDispatchServlet</display-name>
        <servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
		<init-param>
			<param-name>useAppserverSecurity</param-name>
			<param-value>false</param-value>
		</init-param>
        <load-on-startup>10</load-on-startup>
    </servlet>
 
    <servlet-mapping id="RDS_DISPATCH_MAPPING">
        <servlet-name>RDSDispatchServlet</servlet-name>
        <url-pattern>/CFIDE/main/ide.cfm</url-pattern>
    </servlet-mapping>
 
    <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>
 
    <!-- for WebSphere deployment, please uncomment -->
    <!--
    <resource-ref>
        <description>Flex Messaging WorkManager</description>
        <res-ref-name>wm/MessagingWorkManager</res-ref-name>
        <res-type>com.ibm.websphere.asynchbeans.WorkManager</res-type>
        <res-auth>Container</res-auth>
        <res-sharing-scope>Shareable</res-sharing-scope>
    </resource-ref>
    -->
 
<!--
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>
			/WEB-INF/spring/*-config.xml
		</param-value>
	</context-param>
 
    <filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    </filter>
 
    <filter-mapping>
      <filter-name>springSecurityFilterChain</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>
 
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
 
	<servlet>
		<servlet-name>flex</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
 
	<servlet-mapping>
    	<servlet-name>flex</servlet-name>
    	<url-pattern>/messagebroker/*</url-pattern>
 	</servlet-mapping>
 
-->
 
</web-app>

Feito isso, iremos adicionar dentro da pasta WebContent a pasta flex que foi previamente descompactada do arquivo blazeds.war, e também todo o conteúdo da pasta lib para dentro do diretório WebContent/WEB-INF/lib , obtendo o seguinte resultado:

Feito isso, iremos configurar o único arquivo .xml do BlazeDS para que esse exemplo funcione. O arquivo WEB-INF/flex/remoting-config.xml. Iremos adicionar uma configuração para informar ao BlazeDS sobre o serviço ContatoService que foi criado anteriormente, conforme abaixo:

?Download remoting-config.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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="ContatoService">
    	<properties>
    		<source>br.com.horochovec.service.ContatoService</source>
    	</properties>
    </destination>
 
</service>

Após essa última configuração, podemos exportar o nosso projeto para um servidor web. Nesse caso, utilizaremos o Tomcat 6.x. Neste artigo não entrarei em detalhes de sua instalação e configuração.

Bom, as configurações no projeto Java já foram finalizadas, e considerando que o deploy da aplicação dentro do Tomcat já foi realizado, a partir deste momento iremos trabalhar diretamente com o Flash Builder.

Neste artigo irei demonstrar a comunicação utilizando o Flash Builder e a versão do Flex 4. Você pode fazer o download da versão 4.0 do Flash Builder e do Flex 4 SDK aqui.

Após instalado e iniciado o Flash Builder, iremos criar um projeto no seguinte molde:

As configurações feitas na segunda tela de configuração são bastante importantes. Fazendo elas da forma correta, você estará apto a iniciar o projeto sem fazer novas configurações.

Na primeira linha, em Root Folder, foi apontado o diretório de deploy da minha aplicação dentro do meu servidor de aplicação.

Na segunda linha, em Root URL, foi apontado o caminho da URL para abertura da aplicação em meu navegador de internet.

Na terceira linha, em ContextRoot, apontamos o nome da nossa aplicação.

Na quarta e ultima linha, em Output folder, apontamos o diretório de onde deve ser exportados os arquivos quando compilados. Para esse tutorial, foi apontado diretamente o diretório de minha aplicação dentro do meu servidor Tomcat.

Como resultado, o Flash Builder irá criar e disponibilizar no workspace um projeto da seguinte forma:

É muito importante fazer a conferência de uma configuração gerada automaticamente pelo Flash Builder em cima dos parametros informados na segunda etapa da criação do projeto. No menu ‘Project’ vá na opção ‘Properties’ e confira as propriedades de acordo com a imagem abaixo:

Iremos criar uma tela no Flash Builder que contenha dois campos text input para preencher as informações do nome e email do contato, e também um grid para conter a lista dos contatos que serão adicionados no Java e retornarão ao Flex através do BlazeDS.

Segue sua implementação

?Download FlexDuck.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<?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" height="419">
 
 
	<fx:Declarations>
 
	</fx:Declarations>
 
 
	<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
 
	</s:Panel>
 
	<s:Panel x="12" y="166" width="400" height="227" title="Pesquisa" left="10">
		<mx:DataGrid x="10" y="10" bottom="30" left="5" right="5" top="5" id="grid">
		</mx:DataGrid>
		<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5" id="button"/>
	</s:Panel>
</s:Application>

A partir deste momento, usaremos os recursos de Data/Services presentes no Flash Builder 4 para a geração da comunicação com o Java.

Primeiro, iremos conectar o Flash Builder com o BlazeDS. Para isso, na aba “Data/Services” clique na opção “Connect to Data/Service”. Caso ela não esteja disponivel em seu workspace, vá ao menu “Window” e marque a opção “Data/Services”.

Feito isso, na próxima tela, marque a opção “BlazeDS”, clique em Next e marque a opção para não utilizar controle de acesso. Conforme as telas abaixo:

Na última tela, você deve marcar os serviços que deseja adicionar a aplicação, com opção de definição de endereços de pacotes e depois finalizar a criação do Objeto, conforme:

Após finalizar a configuração do serviço remoto, obtemos o seguinte resultado no Flash Builder.

Agora, iremos definir que no momento do click no botão logo abaixo do DataGrid, a aplicação deverá invocar o método getListContato().

O primeiro passo para isso, é clicar com o botão direito sobre o botão com do painel que contem o DataGrid e marcar a opção “Generate Service Call“. Feito isso configure a tela do serviço conforme apresentado abaixo:

Feito isso, selecione o DataGrid e clicando com o botão direito dentro dele, selecione a opção “Bind to Data” e configure a tela conforme informado abaixo:

Nesse momento, o painel responsável por listar as informações da nossa agenda de contato já está finalizado.

Agora, clicando novamente com o botão direito em cima do DataGrid, clique na opção “Generate Details Form” e configure a tela conforme abaixo:

O formulário gerado será adicionado no mesmo container que estiver o DataGrid, portanto, será necessário reposicioná-lo dentro do Panel já criado, conforme imagem abaixo:

Ok, agora basta configurarmos o clique do botão de salvar para que adicione novos contatos.

O primeiro passo é alterar o label do botão para “Cadastrar“.

O segundo passo é clicar com o botão direito sobre o botão de cadastro e selecionar a opção “Generate Service Call” e configure a opção da seguinte forma:

Ao terminar essa configuração, você será direcionado diretamente para a implementação do click do botão com a chamada do serviço remoto. A implementação gerada do método será a seguinte:

?Download FlexDuck.mxml
1
2
3
4
5
6
protected function button2_clickHandler(event:MouseEvent):void
{
	contato.email = emailTextInput.text;
	contato.nome = nomeTextInput.text;
	addContatoResult.token = contatoService.addContato(/*Enter value(s) for */ arg0);
}

E você deverá fazer a seguinte alteração. Adicionar o parametro a ser enviado no método addContato() e inicializar o objeto contato, da seguinte forma:

?Download FlexDuck.mxml
1
2
3
4
5
6
7
protected function button2_clickHandler(event:MouseEvent):void
{
	contato = new Contato();
	contato.email = emailTextInput.text;
	contato.nome = nomeTextInput.text;
	addContatoResult.token = contatoService.addContato(contato);
}

Com isso, nosso projeto estará enviado as informações para o Java. Agora, para finalizar, iremos adicionar um evento para disparar um método quando tivermos o resultado do serviço remoto.

No CallResponder com o id “addContatoResult” pressione o CTRL + SPACE para acionar o code complete e acione o event “result“, e em seguida, solicite para que seja adicionado o ResultHandler para o event adicionado, conforme imagens abaixo:

E na função adicionada no código devemos fazer a seguinte implementação:

?Download FlexDuck.mxml
1
2
3
4
5
protected function addContatoResult_resultHandler(event:ResultEvent):void
{
	contato = new Contato();
	getListContatoResult.token = contatoService.getListContato();
}

Rodando a aplicação, teremos como resultado no navegador o seguinte:

E como resultado final no código fonte:

?Download FlexDuck.mxml
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
<?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" height="419" xmlns:services="services.*" xmlns:valueObjects="valueObjects.*">
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
 
			protected function button_clickHandler(event:MouseEvent):void
			{
				getListContatoResult.token = contatoService.getListContato();
			}
 
 
			protected function button2_clickHandler(event:MouseEvent):void
			{
				var contato : Contato = new Contato();
				contato.email = emailTextInput.text;
				contato.nome = nomeTextInput.text;
				addContatoResult.token = contatoService.addContato(contato);
			}
 
 
			protected function addContatoResult_resultHandler(event:ResultEvent):void
			{
				contato = new Contato();
				getListContatoResult.token = contatoService.getListContato();
			}
 
		]]>
	</fx:Script>
 
 
	<fx:Declarations>
		<s:CallResponder id="getListContatoResult"/>
		<services:ContatoService id="contatoService" fault="Alert.show(event.fault.faultString + 'n' + event.fault.faultDetail)" showBusyCursor="true"/>
		<valueObjects:Contato id="contato"/>
		<s:CallResponder id="addContatoResult" result="addContatoResult_resultHandler(event)"/>
	</fx:Declarations>
 
	<fx:Binding source="grid.selectedItem as Contato" destination="contato"/>
 
	<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
		<mx:Form defaultButton="{button2}" x="1" y="-4" bottom="0" left="0" right="0" top="0">
			<mx:FormItem label="Email">
				<s:TextInput id="emailTextInput" text="{contato.email}"/>
			</mx:FormItem>
			<mx:FormItem label="Nome">
				<s:TextInput id="nomeTextInput" text="{contato.nome}"/>
			</mx:FormItem>
			<s:Button id="button2" label="Cadastrar" click="button2_clickHandler(event)"/>
		</mx:Form>
 
	</s:Panel>
 
	<s:Panel x="12" y="166" width="400" height="227" title="Pesquisa" left="10">
		<mx:DataGrid x="10" y="10" bottom="30" left="5" right="5" top="5" id="grid" dataProvider="{getListContatoResult.lastResult}">
			<mx:columns>
				<mx:DataGridColumn headerText="email" dataField="email"/>
				<mx:DataGridColumn headerText="nome" dataField="nome"/>
			</mx:columns>
		</mx:DataGrid>
		<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5" id="button" click="button_clickHandler(event)"/>
	</s:Panel>
</s:Application>

Para fazer o download do projeto clique aqui.

Espero ter ajudado, um abraço :)

Nov 12

The Developers Conference 2009 – Florianópolis

Escrito por Stefan Horochovec em Globalcode, JSF, Java, Java EE 6, Oracle, Spring, Sun, TDC @ 11 12th, 2009 | via http://www.horochovec.com.br/blog | 1 comentário
Stefan Horochovec
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Ola pessoal, segunda (dia 9) tive a oportunidade de participar do TDC 2009 organizado pela Globalcode. Assistimos duas palestras do Rod Johnson – criador do Spring Framework, Mike Keith – Líder das especificações EJB 3 e JPA e trabalha na Oracle, Ed Burns – Líder do Expert Group JSF 2.0, e mais 4 Lightning Talks do pessoal da Globalcode e V.Office.


Rod Johnson (Spring) abriu o evento com uma palestra sobre as tendências Java EE, aonde fez uma abordagem sobre como ele vê o desenvolvimento Java EE nos próximos 5 anos. Falou muito sobre cloud computing, data centers e sobre o quanto ainda aumentará a complexidade da arquitetura de uma aplicação Java EE e as responsabilidades do arquiteto Java por mais facilidades que irão surgir no Java EE 6.  Foi excelente e nos primeiros 30 minutos todos já puderam ter idéia sobre como seria o evento.

Em seguida, uma palestra excepcional. Mike Keith (Oracle) fez um overview sobre a nova versão do Java EE 6 que será lançada no dia 10 de dezembro.  Demonstrou (através de slides) boa parte do novo suporte de annotations para auxiliar a produtividade do desenvolvedor. Demonstrou também todo o trabalho que tiveram para evoluir e facilitar ainda mais o uso de EJBs e todas as inovações da nova JPA (agora com Criteria). Comentou bastante sobre a fragmentação de XMLs em JARs e sobre os namespaces dos XMLs para configuração de projetos.

Logo após a palestra do Mike, o pessoal da Globalcode aproveitou a onda dos EJBs e fez um Lightning Talk sobre EBJ 3.1. Comentando sobre o projeto deles: “EJB 3.1 Code Samples” que está hospedado hoje no Kenai e tem como objetivo ensinar a galera como utilizar o EJB 3.1 – Nota 10 pra equipe da Globalcode.

Logo após o almoço, tivemos mais um Lightning Talk, agora com o Vinicius Senger aonde ele fez uma abordagem muito divertida sobre o Arduino.

A tarde, teriamos uma palestra com Chris Schalk do Google, porem, por motivos de visto ele não pode permanecer no Brasil e Rod Johnson fez uma outra palestra, a palestra sem slides, que foi ótima. Ele sentou na frente de um notebook e se matou programando e explicando o Spring ROO para que você possa ter produtividade ao máximo em Java. O Spring ROO é um framework muito parecido com o Rails para o Ruby. Muito interessante. Nessa palestra ele também demonstrou diversas funcionalidades da Spring IDE.

Por padrão, a cada palestra dos gurus, uma intervenção com um Lightning Talk pelo pessoal da Globalcode ou V.Ofiice. Dessa vez a bola ficou com o pessoal da V.Office que demonstrou uma ótima solução para celulares e telefonia VoIP utilizando o Asterisk.

E a ultima palestra dos gurus, ficou para o Ed Burns (Sun). Ele fez uma abordagem completa do JSF 2.0. Teve alguns problemas com os exemplos dele mas no mais foi tranquilo. Confesso que não fiquei surpreso com absolutamente nada que ele demonstrou, mas o JSF também está evoluindo a largos passos.

E para finalizar o ciclo de palestras antes das perguntas aos gurus, o pessoal da Globalcode preparou mais um Lightning Talk com o Vinicius Nunes aonde foi feito uma abordagem do ScrumToys. Um projeto muito legal que está disponivel nos exemplos do Netbeans (parabens a iniciativa do projeto ao pessoal da Globalcode). O projeto é bastante simples mas demonstra o uso de EJBs e do JSF 2.0.

E para finalizar o dia com chave de ouro, um painel de perguntas aos palestrantes. Eu tive a oportunidade de fazer 2 perguntas (quem me conhece sabe que eu não deixaria essa oportunidade passar em branco). A primeira foi destinada ao Ed Burns para que fizesse um comparativo do JSF 2.0 entre o Adobe Flex (claro), Silverlight e JavaFX para desenvolvimento de RIAs. Ele respondeu que depende muito do que se quer da aplicação, por isso existe espaço para todas essas tecnologias no mercado. (PS: ele fez uma cara meio feia quando recebeu a pergunta).

E outra pergunta foi para o Rod Johnson sobre a entrevista dele no Mundo Java aonde ele não pode comparar Adobe Flex X JavaFX alegando não ter conhecimento a fundo do JavaFX (na epoca), então, aproveitei para perguntar se agora era possivel fazer esse comparativo. Ele deu muitas voltas e disse o que já tinha dito, que o Adobe Flex está a todo vapor, tem uma boa IDE e de fato, as outras tecnologias precisam se esforçar para alcança-lo e tomar um pouco do mercado que ele já adquiriu.

Não fiz perguntas direcionadas ao Mike devido a sua palestra ter sido tão boa, que realmente não vi necessidade de perguntar nada, apenas aguardar anciosamente a versão do Java EE 6 para download.

Nota do evento: Dez, simplesmente dez. Ótima organização, ótimos palestrantes, tanto internacionais como nacionais. Só resta parabenizar a Globalcode pela iniciativa do TDC. Apenas achei que tinha pouca gente para ouvir quem estava palestrando. Acredito que perto de 300 pessoas acompanharam o evento. Se tratando de Rod Johnson, Mike Keith e Ed Burns, eu particularmente esperava muito mais.

Abaixo, fotos do evento e da tietagem, é obvio. Não perderia a oportunidade de registrar minha presença ao lado dos palestrantes, que tiveram a maior paciencia do mundo em tirar fotos com todos que quiseram. E ainda ganhei um capitulo no novo livro que vai ser publicado no próximo ano do Ed Burns sobre JSF. :D

Ano que vem? Estarei lá com certeza!

 

Ed Burns, Rod Johnson e Mike Keith no Painel de Perguntas coordenado pela Yara (Globalcode)

Ed Burns, Rod Johnson e Mike Keith no Painel de Perguntas coordenado pela Yara (Globalcode)

Mauri (IDS), Mike Keith (Oracle), Rod Johnson (Spring) e eu (IDS)

Mauri (IDS), Mike Keith (Oracle), Rod Johnson (Spring) e eu (IDS)

Marcos (Banco do Brasil), Mauri (IDS), Ed Burns (Sun) e eu (IDS)

Marcos (Banco do Brasil), Mauri (IDS), Ed Burns (Sun) e eu (IDS)

Jul 20

TUTORIAL JAVA + FLEX NA PRÁTICA 7/6 – Bônus

Escrito por Janderson Cardoso em Action Script 3.0, Adobe Flex, Blazeds, Código Fonte java, DomainDriveDesign, Hibernate, Indico a Leitura, Java, SPRING ANNOTATIONS, Spring, Swiz Framework, TUTORIAL FLEX, TUTORIAL JAVA, Tutorial, código fonte Flex, hibernate Annotations, mvc, pratica java flex @ 07 20th, 2009 | via http://www.jandersonfc.com/ | Sem comentários
Janderson Cardoso
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Esse artigo é continuação do
TUTORIAL JAVA + FLEX NA PRÁTICA 1/6
TUTORIAL JAVA + FLEX NA PRÁTICA 2/6
TUTORIAL JAVA + FLEX NA PRÁTICA 3/6
TUTORIAL JAVA + FLEX NA PRÁTICA 4/6
TUTORIAL JAVA + FLEX NA PRÁTICA 5/6
TUTORIAL JAVA + FLEX NA PRÁTICA 6/6

Não definitivamente você não está delirando e nem eu esqueci conceitos simples da matemática, realmente criei mais um tutorial, a 7/6, o que estou considerando Bônus, para fazer algumas modificações e implementar algumas funcionalidades.

Antes gostaria de agradecer pela participação do pessoal, muitos entenderam o objetivo do tutorial e com certeza fizeram bom proveito, fiquei sabendo este mês de julho que alguns mudaram a forma de trabalhar com Java + flex através deste tutorial :P . Através do mesmo recebi ótimos contatos e oportunidades profissionais, porém, como sempre há alguém que quer mais e gostaria de mais um empurram, então vamos direto ao assunto que tempo é dinheiro.

Essa parte vamos tratar mais de relacionamentos entre tabelas, como tratar esses relacionamentos no Flex e como mostrar mais de um objeto no datagrid… vamos a prática.

Implementação no Java

Assim como fizemos na nossa classe Estado vamos criar nossa Classe Cidade, classe essa que fará o relacionamento mais comum e a dúvida mais comum depois que você começa a programar, vamos ao código:

Cidade.java

PLAIN TEXT
JAVA:

  1. @Entity
  2. @Table(name=“cidade”)
  3. public class Cidade {
  4.  
  5. @Id @GeneratedValue(strategy = GenerationType.AUTO)
  6. private long idCidade;
  7.  
  8. @ManyToOne(fetch = FetchType.EAGER)
  9. @JoinColumn(name=“codEstado”,insertable=true,updatable=true)
  10. @Fetch(FetchMode.JOIN)
  11. @Cascade(CascadeType.SAVE_UPDATE)
  12. private Estado estado;
  13.  
  14. private String nome;
  15.  
  16. private String sigla;
  17.  
  18. public String getSigla() {
  19. return sigla;
  20. }
  21.  
  22. public void setSigla(String sigla) {
  23. this.sigla = sigla;
  24. }
  25.  
  26. public long getIdCidade() {
  27. return idCidade;
  28. }
  29.  
  30. public void setIdCidade(long idCidade) {
  31. this.idCidade = idCidade;
  32. }
  33.  
  34. public Estado getEstado() {
  35. return estado;
  36. }
  37.  
  38. public void setEstado(Estado estado) {
  39. this.estado = estado;
  40. }
  41.  
  42. public String getNome() {
  43. return nome;
  44. }
  45.  
  46. public void setNome(String nome) {
  47. this.nome = nome;
  48. }
  49.  
  50. }

Vale comentar algumas anotações que usei aqui:

@ManyToOne(fetch = FetchType.EAGER) -> como o relacionamento é de “N para 1”, uma Cidade pertence a um Estado e o Estado pode ter várias Cidade, usamos a anotação @ManyToOne e também usamos o FethType:

EAGER -> Sempre que o Objeto pai for trazido o atributo mapeado também será trazido) cuidado ao usar pois se for relacionamentos mais complexo, ou melhor, que contém muitos objetos dentro do outro pode ficar muito lento, no nosso exemplo não temos que ser preocupar com isso.

LAZY -> Sempre que o objeto pai for trazido o atributo mapeado só será trazido quando acessado pela primeira vez(muito usado quando é List, Collection para evitar o que citei logo acima).

@JoinColumn(name=”codEstado”,insertable=true,updatable=true) -> informamos qual é o campo é a chave estrangeira, no caso da Cidade a chave estrangeira é o codEstado. O insertable e o updatable quando indicados como true significa que esse objeto tem que ser inserido ou atualizado quando o objeto pai é inserido ou atualizado, resumindo, Toda vez que for inserir e atualizar um Cidade também será inserido ou atualizado um Estado.

@Fetch(FetchMode.JOIN) -> informamos que estamos juntando as duas tabelas, melhor dizendo, como se estivesse usando o Inner Join na injeção de SQL.

@Cascade(CascadeType.SAVE_UPDATE)-> por ultimo a permissão que esse atributo pode interferir na Classe ao qual está fazendo o relaciomento. Explico, ao colocar SAVE_UPDATE se caso você esteja inserindo uma cidade e o estado ainda não foi inserido, ele automaticamente vai adicionar esse Estado, pegar o id do mesmo e gravar na tabela cidade no campo codEstado, Hibernate é Kara ;) .

Depois de explicado as anotações as outras classes que ficam no Java já foram explicadas e só serão adicionadas logo abaixo:

CidadeRepository.java

PLAIN TEXT
JAVA:

  1. public interface CidadeRepository {
  2.    
  3.     public void save(Cidade cidade);
  4.     public void remove(Cidade cidade);
  5.    
  6.     public List<Cidade> findAll();
  7.     public List<Cidade> findByName(String nome);
  8.    
  9. }

CidadeService.java

PLAIN TEXT
JAVA:

  1. @Service(value=“CidadeService”)
  2. public class CidadeService {
  3.    
  4.     CidadeRepository cidadeRepository;
  5.    
  6.     @Autowired
  7.     public void setCidadeRepository(CidadeRepository cidadeRepository) {
  8.         this.cidadeRepository = cidadeRepository;
  9.     }
  10.    
  11.     public void save(Cidade cidade){
  12.         cidadeRepository.save(cidade);
  13.     }
  14.    
  15.     public void remove(Cidade cidade){
  16.         cidadeRepository.remove(cidade);
  17.     }
  18.    
  19.     public List<Cidade> findAll(){
  20.         return cidadeRepository.findAll();
  21.     }
  22.    
  23.     public List<Cidade> findByName(String nome){
  24.         return cidadeRepository.findByName(nome);
  25.     }
  26.    
  27. }

CidadeDao.java

PLAIN TEXT
JAVA:

  1. @Repository(value=“CidadeRepository”)
  2. public class CidadeDao extends HibernateDaoSupport
  3.     implements CidadeRepository {
  4.    
  5.     @Autowired
  6.     public CidadeDao(@Qualifier(“sessionFactory”) SessionFactory sessionFactory) {
  7.         // TODO Auto-generated constructor stub
  8.         super.setSessionFactory(sessionFactory);
  9.     }
  10.  
  11.     @Override
  12.     public void remove(Cidade cidade) {
  13.         // TODO Auto-generated method stub
  14.         getHibernateTemplate().delete(cidade);
  15.     }
  16.  
  17.     @SuppressWarnings(“unchecked”)
  18.     @Override
  19.     public List<Cidade> findAll() {
  20.         // TODO Auto-generated method stub
  21.         return getHibernateTemplate().loadAll(Cidade.class);
  22.     }
  23.    
  24.     @SuppressWarnings(“unchecked”)
  25.     @Override
  26.     public List<Cidade> findByName(String nome) {
  27.         // TODO Auto-generated method stub
  28.         return getHibernateTemplate().find(“from Cidade” +
  29.                 ” where nome like ‘%” + nome + “%’”);
  30.     }
  31.  
  32.     @Override
  33.     public void save(Cidade cidade) {
  34.         // TODO Auto-generated method stub
  35.         getHibernateTemplate().saveOrUpdate(cidade);
  36.     }
  37.    
  38.  
  39. }

Agora é só adicionar o serviço no blazeds e ir para a parte flex.

remoting-config.xml

PLAIN TEXT
XML:

  1. <destination id=“CidadeService”>
  2.         <properties>
  3.             <factory>spring</factory>
  4.             <source>CidadeService</source>
  5.         </properties>
  6.     </destination>

OBS. Aqui já começa uma pequena discussão, se você perceber os Repository, Service e Dao de Cidade e Estado são praticamente idênticos, e muitos vão optar por trabalhar com classes Genéricas, tipo RepositoryGeneric, DaoGeneric. Nada contra, só que eu prefiro deixar separado,  se você usar genérico tome muito cuidado, uma vez tomei o genérico de novalgina e fiquei uma semana mal, acabou o genérico comprei novalgina e a dor de cabeça passou em 30 minutos, hehe.

Outra coisa aí sim eu recomendo é o seguinte, de vez de ter um Service para a cidade e outra para estado criar um tipo addresService, cuja esse serviço manipularia o estado, a cidade o bairro… enfim, tudo que tem haver com endereço, isso é normal, o service na verdade é isso, mais como nos exemplos fica tudo separado as pessoas colocam separado, então, mesmo não fazendo assim neste exemplo recomendo a todos depois fazer isso neste exemplo, considere dever de casa  :) .

Implementação no Flex

No flex a implementação é mais simples ainda, a base de ctrl+c ctrl+v, vamos ao código:

Cidade.as

PLAIN TEXT
ACTIONSCRIPT:

  1. [RemoteClass(alias=“com.saberprogramar.business.entitys.Cidade”)]
  2.     [Bindable]
  3.     public class Cidade
  4.     {
  5.        
  6.         public var idCidade:Number;
  7.        
  8.         public var estado:Estado;
  9.        
  10.         public var nome:String;
  11.        
  12.         public var sigla:String;
  13.        
  14.        
  15.  
  16.     }

A única coisa que Vale lembrar aqui é que como no Java você usa o relacionamento com a classe Estado, no Action script tem que acontecer a mesma coisa, se não você não relaciona objetos, tipo, ao invés de colocar “estado:Estado” colocar “idEstado:Number” vc não está programando orientado a objeto, você na verdade está criando classes que sejam clone das suas tabelas do banco de dados, fazendo isso você está perdendo o melhor que o mundo OO pode te oferecer. É aqui que vejo uma constante dúvida que tenho recebido por contato aqui no Blog, então aí vai:

  • Não! de maneira nenhuma deixe de fazer os relacionamentos dos seus objetos, uma cidade faz parte de um Estado e não de um código do estado, então… tanto no Java, como no Action Script, quanto no php e outra qualquer linguagem não considere seus objetos uma cópia de suas tabelas do banco de dados.
  • Se no Java você tem um atributo “Estado estado” no actionScript você vai ter um ”estado:Estado”. Quando usamos RemoteObject o action script tem que ser igual ao Java ou ao php, é um clone, não pode ter um “Estado estado” no Java e um “idEstado:Number” no Action Script, não vai funcionar e você vai ter aquela sensação, é alguma bobeira que eu não estou vendo.


CidadeDelegate.as

PLAIN TEXT
ACTIONSCRIPT:

  1. public class CidadeDelegate extends AbstractDelegate
  2.     {
  3.        
  4.         [Autowire(bean=“cidadeService”)]
  5.         public var cidadeService:RemoteObject;   
  6.        
  7.         public function CidadeDelegate()
  8.         {
  9.             super();
  10.         }      
  11.        
  12.            
  13.         //AS OPERAÇÕES CRUD
  14.         public function findAll():AsyncToken{         
  15.             return cidadeService.findAll();  
  16.         }      
  17.        
  18.         public function findByName(nome:String):AsyncToken{   
  19.             return cidadeService.findByName(nome);     
  20.         }      
  21.        
  22.         public function save(cidade:Cidade):AsyncToken{
  23.             return cidadeService.save(cidade);   
  24.         }
  25.        
  26.         public function remove(cidade:Cidade):AsyncToken{
  27.             return cidadeService.remove(cidade);           
  28.         }   
  29.        
  30.        
  31.     }

CidadeEvent.as

PLAIN TEXT
ACTIONSCRIPT:

  1. public class CidadeEvent extends Event
  2.     {      
  3.        
  4.         public static const SAVE:String = “saveCidade”;
  5.         public static const REMOVE:String = “removeCidade”;
  6.        
  7.        
  8.         public function CidadeEvent(type:String)
  9.         {
  10.             super(type);
  11.         }
  12.        
  13.        
  14.     }

ICidadeController.as

PLAIN TEXT
ACTIONSCRIPT:

  1. public interface ICidadeController
  2.     {
  3.        
  4.         function get cidadeList():ArrayCollection;
  5.        
  6.         function findAll():void;
  7.        
  8.         function findByName(nome:String):void;
  9.        
  10.         function save(cidade:Cidade):void;
  11.        
  12.         function remove(cidade:Cidade):void;        
  13.        
  14.     }

CidadeController.as

PLAIN TEXT
ACTIONSCRIPT:

  1. public class CidadeController extends AbstractController
  2.         implements ICidadeController{
  3.        
  4.         [Bindable]
  5.         public var cidadeList:ArrayCollection;
  6.        
  7.         [Autowire(bean=“cidadeDelegate”)]
  8.         public var cidadeDelegate:CidadeDelegate;
  9.        
  10.         public function CidadeController()
  11.         {
  12.             super();
  13.         }
  14.        
  15.         public function findAll():void{   
  16.             executeServiceCall(cidadeDelegate.findAll(),onFindAll,onError);   
  17.         }
  18.        
  19.         public function findByName(nome:String):void{
  20.             executeServiceCall(cidadeDelegate.findByName(nome),onFindByName,onError);
  21.         }   
  22.        
  23.         public function save(cidade:Cidade):void{
  24.             executeServiceCall(cidadeDelegate.save(cidade),onSave,onError);
  25.         }
  26.        
  27.         public function remove(cidade:Cidade):void{
  28.             executeServiceCall(cidadeDelegate.remove(cidade),onRemove,onError);
  29.         }
  30.        
  31.         //*************** Handle Results ************************//  
  32.        
  33.         public function onFindAll(event:ResultEvent):void{     
  34.             cidadeList = ArrayCollection(event.result);
  35.         }
  36.        
  37.         public function onFindByName(event:ResultEvent):void{
  38.             cidadeList = event.result as ArrayCollection;
  39.         }
  40.        
  41.         public function onSave(event:ResultEvent):void{
  42.             Swiz.dispatchEvent(new CidadeEvent(CidadeEvent.SAVE));     
  43.         }
  44.        
  45.         public function onRemove(event:ResultEvent):void{
  46.             Swiz.dispatchEvent(new CidadeEvent(CidadeEvent.REMOVE));
  47.         }      
  48.        
  49.         private function onError(event:FaultEvent):void{                               
  50.             Alert.show(event.fault.message,“ERROR”);
  51.         }
  52.        
  53.        
  54.        
  55.        
  56.     }

Adicionados estas classes é só adicionar o mapeamento dos mesmos e o RemoteObjetct no nosso Beans.mxml.

PLAIN TEXT
XML:

  1. <!– cidade service –>
  2.     <mx:RemoteObject id=“cidadeService”
  3.                      destination=“CidadeService”
  4.                      channelSet=“{myAmfChannel}”/>
  5.                     
  6.     <!– delegate for the cidade controller –>
  7.     <delegates:CidadeDelegate id=“cidadeDelegate”/>
  8.    
  9.     <!– cidade controller –>
  10.     <controllers:CidadeController id=“cidadeController”/>

Agora vamos a interface(view) com algumas explicações:

CidadeView.mxml

PLAIN TEXT
XML:

  1. <?xml version=“1.0″ encoding=“utf-8″?>
  2.  
  3. <mx:TitleWindow xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute” width=“518″ height=“422″
  4.      title=“Cadastro de Cidades” fontSize=“10″ xmlns=“flexmdi.containers.*”
  5.      xmlns:controls=“com.flexpernambuco.controls.*”
  6.      creationComplete=“{init()}” showCloseButton=“true” close=“{exit()}”>
  7.    
  8.     <mx:ViewStack x=“10″ y=“10″ id=“stack” width=“486″ height=“362″>
  9.        
  10.         <mx:Canvas label=“View 1″ width=“100%” height=“100%” id=“canvasDefault”>
  11.             <mx:Button x=“138″ y=“330″ label=“Incluir” id=“btnIncluir” click=“{save()}”/>
  12.             <mx:Button x=“209″ y=“330″ label=“Alterar” id=“btnAlterar” click=“{update()}”/>
  13.             <mx:Button x=“284″ y=“330″ label=“Excluir” id=“btnExcluir” click=“{remove()}”/>
  14.             <mx :D ataGrid x=“10″ y=“40″ width=“466″ height=“282″ dataProvider=“{controller.cidadeList}” id=“dgCidade”>
  15.                 <mx:columns>
  16.                     <mx :D ataGridColumn headerText=“ID” dataField=“idCidade” width=“70″/>
  17.                     <mx :D ataGridColumn headerText=“Nome da Cidade” dataField=“nome”/>
  18.                     <mx :D ataGridColumn headerText=“Sigla” dataField=“sigla” width=“70″/>
  19.                     <mx :D ataGridColumn headerText=“UF” labelFunction=“colEstado” width=“70″/>
  20.                 </mx:columns>
  21.             </mx :D ataGrid>
  22.             <mx:TextInput x=“273″ y=“10″ id=“txtFind”/>
  23.             <mx:Button x=“441″ y=“10″ width=“35″ icon=“@Embed(source=’com/saberprogramar/assets/images/find-16×16.png’)” id=“btnFind” click=“{find()}”/>
  24.         </mx:Canvas>
  25.        
  26.         <mx:Canvas label=“” width=“100%” height=“100%” id=“canvasForm”>
  27.             <mx:Form x=“10″ y=“67″ width=“466″ height=“146″>
  28.                 <mx:FormItem label=“ID:”>
  29.                     <mx:TextInput width=“72″ id=“txtIdCidade” editable=“false” tabIndex=“0″
  30.                         toolTip=“Código Gerado Automático” text=“{cidade.idCidade.toString()}”/>
  31.                 </mx:FormItem>
  32.                 <mx:FormItem label=“Estado” required=“true”>
  33.                     <mx:ComboBox id=“cmbEstado” dataProvider=“{controllerEstado.estadoList}”
  34.                         labelField=“nome” prompt=“Selecione um Estado” tabIndex=“1″>
  35.                     </mx:ComboBox>
  36.                 </mx:FormItem>
  37.                 <mx:FormItem label=“Nome:” required=“true”>
  38.                     <mx:TextInput width=“339″ id=“txtNome” text=“{cidade.nome}” tabIndex=“2″/>
  39.                 </mx:FormItem>
  40.                 <mx:FormItem label=“Sigla:” required=“true”>
  41.                     <mx:TextInput width=“43″ id=“txtSigla” maxChars=“2″ text=“{cidade.sigla}”   tabIndex=“3″ />
  42.                 </mx:FormItem>
  43.             </mx:Form>
  44.             <mx:FormHeading x=“157.5″ y=“21″ label=“Formulário de Estado” width=“171″/>
  45.             <mx:Button x=“160″ y=“221″ label=“Cancelar” id=“btnCancelar” click=“{cancel()}” tabIndex=“6″/>
  46.             <mx:Button x=“243″ y=“221″ label=“Confirmar” id=“btnConfirmar” click=“{confirm()}” tabIndex=“5″/>
  47.         </mx:Canvas>
  48.     </mx:ViewStack>
  49.    
  50.     <mx:Script source=“actions/CidadeAction.as”/>   
  51.    
  52. </mx:TitleWindow>

Agora vamos mostrar sua action:

CidadeAction.as

PLAIN TEXT
ACTIONSCRIPT:

  1. // ActionScript file
  2. import com.saberprogramar.controllers.ICidadeController;
  3. import com.saberprogramar.controllers.IEstadoController;
  4. import com.saberprogramar.events.CidadeEvent;
  5. import com.saberprogramar.models.entitys.Cidade;
  6. import com.saberprogramar.models.entitys.Estado;
  7.  
  8. import mx.controls.dataGridClasses.DataGridColumn;
  9. import mx.managers.PopUpManager;
  10.  
  11. import org.swizframework.Swiz;
  12.  
  13. [Bindable]
  14. private var cidade:Cidade;
  15.  
  16. [Bindable]
  17. [Autowire(bean=“estadoController”)]
  18. public var controllerEstado:IEstadoController;
  19.  
  20. [Bindable]
  21. [Autowire(bean=“cidadeController”)]
  22. public var controller:ICidadeController;
  23.  
  24. private function init():void{
  25.    
  26.     PopUpManager.centerPopUp(this);
  27.    
  28.     Swiz.addEventListener(CidadeEvent.SAVE,onSaveComplete);
  29.     Swiz.addEventListener(CidadeEvent.REMOVE,onRemoveComplete);
  30.    
  31.     findAll();
  32. }
  33.  
  34. private function findAll():void{   
  35.     controller.findAll();
  36.     controllerEstado.findAll();
  37. }
  38.  
  39. private function save():void{
  40.     cidade = new Cidade();
  41.     stack.selectedChild = canvasForm;
  42. }
  43.  
  44. private function update():void{
  45.    
  46.     if (dgCidade.selectedItem != null){
  47.        
  48.         dgCidade.setStyle(“bordercolor”,‘black’);
  49.         dgCidade.errorString = “”;
  50.        
  51.         cidade = dgCidade.selectedItem as Cidade;
  52.         stack.selectedChild = canvasForm;
  53.        
  54.     }else {
  55.         dgCidade.setStyle(“bordercolor”,‘red’);
  56.         dgCidade.errorString = “Selecione uma Cidade para alterar”;
  57.     }
  58.    
  59. }
  60.  
  61. private function remove():void{
  62.    
  63.     if (dgCidade.selectedItem != null){
  64.        
  65.         dgCidade.setStyle(“bordercolor”,‘black’);
  66.         dgCidade.errorString = “”;
  67.        
  68.         cidade = dgCidade.selectedItem as Cidade;
  69.        
  70.         controller.remove(cidade);
  71.        
  72.        
  73.     }else {
  74.         dgCidade.setStyle(“bordercolor”,‘red’);
  75.         dgCidade.errorString = “Selecione uma Cidade para excluir”;
  76.     }
  77.    
  78. }
  79.  
  80. private function confirm():void{   
  81.    
  82.     cidade.idCidade = new Number(txtIdCidade.text);
  83.     cidade.estado = cmbEstado.selectedItem as Estado;
  84.     cidade.nome = txtNome.text;
  85.     cidade.sigla = txtSigla.text;
  86.    
  87.     controller.save(cidade);   
  88.    
  89. }
  90.  
  91. private function cancel():void{
  92.     cidade = new Cidade();
  93.     stack.selectedChild = canvasDefault;
  94. }
  95.  
  96. private function find():void{
  97.    
  98.     if (txtFind.text != null){
  99.         controller.findByName(txtFind.text);   
  100.     }
  101.    
  102. }
  103.  
  104. private function onSaveComplete(event:CidadeEvent):void{   
  105.     stack.selectedChild = canvasDefault;
  106.     findAll();
  107. }
  108.  
  109. private function onRemoveComplete(event:CidadeEvent):void{
  110.     stack.selectedChild = canvasDefault;
  111.     findAll();
  112. }
  113.  
  114. private function colEstado(objCidade:Cidade, col:DataGridColumn):String{
  115.     return objCidade.estado.uf;
  116. }
  117.  
  118. private function exit():void{
  119.     PopUpManager.removePopUp(this);
  120. }

Como Pode perceber existe algumas novidades comparado ao código do estado, uma é a combo que carrega todos os estados:

PLAIN TEXT
XML:

  1. <mx:ComboBox id=“cmbEstado” dataProvider=“{controllerEstado.estadoList}”
  2.                         labelField=“nome” prompt=“Selecione um Estado” tabIndex=“1″>
  3.                     </mx:ComboBox>
  1. O DataProvider da combo é o estadoList da nossa controllerEstado.
  2. o label Field é o “nome”(atributo da classe estado).
  3. prompt é o texto inicial da combo.

A parte mais interessante neste caso é o grid, usamos a função labelFunction:

PLAIN TEXT
XML:

  1. <mx :D ataGridColumn headerText=“UF” labelFunction=“colEstado” width=“70″/>

Neste caso indicamos que o label desta coluna vem do retorno de uma função chamada colEstado:

PLAIN TEXT
ACTIONSCRIPT:

  1. private function colEstado(objCidade:Cidade, col:DataGridColumn):String{
  2.     return objCidade.estado.uf;
  3. }

Se você perceber temos uma função que espera como retorno uma String, e aqui podemos ver já uma vantagem de usar os relacionamentos de objetos de maneira correta, uma cidade contém um estado, então ao fazer o que fizemos acima conseguimos pegar qualquer atributo da nossa classe Estado e mostrar no grid sem a necessidade de fazer um FindById ou algo parecido.

Bem, é isso, atualizei o código fonte, caso queiram podem baixar nos links logo abaixo, qualquer dúvida pode entrar em contato, ou se preferir postar um comentário.

Até a Próx.

Caso queira o projeto em java é só baixar aqui (sem as libs).

Caso queira o projeto em flex é só baixar aqui.


Mai 28

TUTORIAL JAVA + FLEX NA PRÁTICA 6/6

Escrito por Janderson Cardoso em Action Script 3.0, Adobe Flex, Blazeds, Código Fonte java, Data Service, DomainDriveDesign, Frameworks, Hibernate, Indico a Leitura, Java, SPRING ANNOTATIONS, Spring, Swiz Framework, TUTORIAL FLEX, TUTORIAL JAVA, Tutorial, código fonte Flex, hibernate Annotations, mvc, pratica java flex @ 05 28th, 2009 | via http://www.jandersonfc.com/ | Sem comentários
Janderson Cardoso
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Esse artigo é continuação do
TUTORIAL JAVA + FLEX NA PRÁTICA 1/6
TUTORIAL JAVA + FLEX NA PRÁTICA 2/6
TUTORIAL JAVA + FLEX NA PRÁTICA 3/6
TUTORIAL JAVA + FLEX NA PRÁTICA 4/6
TUTORIAL JAVA + FLEX NA PRÁTICA 5/6

Na última parte do nosso tutorial vamos fazer a V(View) do nosso MVC, no caso são 2 tipos de arquivo, a interface em si e a Ação da mesma, lembrando que essa separação não é necessária, eu faço porque gosto de tudo bem dividido, isso ajuda e muito na manutenção ou até mesmo na alteração do Layout, uma vez eu já expliquei o porque disso no artigo Separando MXML do Action Script.

Para terminar com chave de ouro vamos ao código:

EstadoView.mxml

PLAIN TEXT
XML:

  1. <?xml version=“1.0″ encoding=“utf-8″?>
  2.  
  3. <mx:TitleWindow xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute” width=“518″ height=“422″
  4.      title=“Cadastro de Estados” fontSize=“10″ xmlns=“flexmdi.containers.*”
  5.      xmlns:controls=“com.flexpernambuco.controls.*”
  6.      creationComplete=“{init()}”>
  7.    
  8.     <mx:ViewStack x=“10″ y=“10″ id=“stack” width=“486″ height=“362″>
  9.        
  10.         <mx:Canvas label=“View 1″ width=“100%” height=“100%” id=“canvasDefault”>
  11.             <mx:Button x=“138″ y=“330″ label=“Incluir” id=“btnIncluir” click=“{save()}”/>
  12.             <mx:Button x=“209″ y=“330″ label=“Alterar” id=“btnAlterar” click=“{update()}”/>
  13.             <mx:Button x=“284″ y=“330″ label=“Excluir” id=“btnExcluir” click=“{remove()}”/>
  14.             <mx :D ataGrid x=“10″ y=“40″ width=“466″ height=“282″ dataProvider=“{controller.estadoList}” id=“dgEstado”>
  15.                 <mx:columns>
  16.                     <mx :D ataGridColumn headerText=“ID” dataField=“codEstado” width=“70″/>
  17.                     <mx :D ataGridColumn headerText=“Nome do Estado” dataField=“nome”/>
  18.                     <mx :D ataGridColumn headerText=“UF” dataField=“uf” width=“70″/>
  19.                 </mx:columns>
  20.             </mx :D ataGrid>
  21.             <mx:TextInput x=“273″ y=“10″ id=“txtFind”/>
  22.             <mx:Button x=“441″ y=“10″ width=“35″ icon=“@Embed(source=’com/saberprogramar/assets/images/find-16×16.png’)” id=“btnFind” click=“{find()}”/>
  23.         </mx:Canvas>
  24.        
  25.         <mx:Canvas label=“” width=“100%” height=“100%” id=“canvasForm”>
  26.             <mx:Form x=“10″ y=“67″ width=“466″ height=“131″>
  27.                 <mx:FormItem label=“ID:”>
  28.                     <mx:TextInput width=“72″ id=“txtIdEstado” editable=“false” tabIndex=“0″
  29.                         toolTip=“Código Gerado Automático” text=“{estado.idEstado.toString()}”/>
  30.                 </mx:FormItem>
  31.                 <mx:FormItem label=“Nome:” required=“true”>
  32.                     <mx:TextInput width=“339″ id=“txtNome” text=“{estado.nome}” tabIndex=“1″/>
  33.                 </mx:FormItem>
  34.                 <mx:FormItem label=“UF:” required=“true”>
  35.                     <mx:TextInput width=“43″ id=“txtUF” maxChars=“2″ text=“{estado.uf}” tabIndex=“2″ />
  36.                 </mx:FormItem>
  37.             </mx:Form>
  38.             <mx:FormHeading x=“157.5″ y=“21″ label=“Formulário de Estado” width=“171″/>
  39.             <mx:Button x=“160″ y=“206″ label=“Cancelar” id=“btnCancelar” click=“{cancel()}” tabIndex=“5″/>
  40.             <mx:Button x=“243″ y=“206″ label=“Confirmar” id=“btnConfirmar” click=“{confirm()}” tabIndex=“4″/>
  41.         </mx:Canvas>
  42.     </mx:ViewStack>
  43.    
  44.     <mx:Script source=“actions/EstadoAction.as”/>   
  45.    
  46. </mx:TitleWindow>
PLAIN TEXT
CODE:

  1. <mx:Script source=“actions/EstadoAction.as”/>

Nesta linha é que dizemos onde está as ações desta View, então vamos criar este arquivo:

EstadoAction.as

PLAIN TEXT
ACTIONSCRIPT:

  1. // ActionScript file
  2. import com.saberprogramar.controllers.IEstadoController;
  3. import com.saberprogramar.events.EstadoEvent;
  4. import com.saberprogramar.models.entitys.Estado;
  5.  
  6. import org.swizframework.Swiz;
  7.  
  8. [Bindable]
  9. private var estado:Estado;
  10.  
  11. [Bindable]
  12. [Autowire(bean=“estadoController”)]
  13. public var controller:IEstadoController;
  14.  
  15. private function init():void{
  16.    
  17.     Swiz.addEventListener(EstadoEvent.SAVE,onSaveComplete);
  18.     Swiz.addEventListener(EstadoEvent.REMOVE,onRemoveComplete);
  19.    
  20.     findAll();
  21. }
  22.  
  23. private function findAll():void{   
  24.     controller.findAll();
  25. }
  26.  
  27. private function save():void{
  28.     estado = new Estado();
  29.     stack.selectedChild = canvasForm;
  30. }
  31.  
  32. private function update():void{
  33.    
  34.     if (dgEstado.selectedItem != null){
  35.        
  36.         dgEstado.setStyle(“bordercolor”,‘black’);
  37.         dgEstado.errorString = “”;
  38.        
  39.         estado = dgEstado.selectedItem as Estado;
  40.         stack.selectedChild = canvasForm;
  41.        
  42.     }else {
  43.         dgEstado.setStyle(“bordercolor”,‘red’);
  44.         dgEstado.errorString = “Selecione um Estado para alterar”;
  45.     }
  46.    
  47. }
  48.  
  49. private function remove():void{
  50.    
  51.     if (dgEstado.selectedItem != null){
  52.        
  53.         dgEstado.setStyle(“bordercolor”,‘black’);
  54.         dgEstado.errorString = “”;
  55.        
  56.         estado = dgEstado.selectedItem as Estado;
  57.        
  58.         controller.remove(estado);
  59.        
  60.        
  61.     }else {
  62.         dgEstado.setStyle(“bordercolor”,‘red’);
  63.         dgEstado.errorString = “Selecione um Estado para excluir”;
  64.     }
  65.    
  66. }
  67.  
  68. private function confirm():void{   
  69.    
  70.     estado.idEstado = new Number(txtIdEstado.text);
  71.     estado.nome = txtNome.text;
  72.     estado.uf = txtUF.text;
  73.    
  74.     controller.save(estado);   
  75.    
  76. }
  77.  
  78. private function cancel():void{
  79.     estado = new Estado();
  80.     stack.selectedChild = canvasDefault;
  81. }
  82.  
  83. private function find():void{
  84.    
  85.     if (txtFind.text != null){
  86.         controller.findByName(txtFind.text);   
  87.     }
  88.    
  89. }
  90.  
  91. private function onSaveComplete(event:EstadoEvent):void{   
  92.     stack.selectedChild = canvasDefault;
  93.     findAll();
  94. }
  95.  
  96. private function onRemoveComplete(event:EstadoEvent):void{
  97.     stack.selectedChild = canvasDefault;
  98.     findAll();
  99. }

Algumas explicações:

PLAIN TEXT
ACTIONSCRIPT:

  1. [Bindable]
  2. [Autowire(bean=“estadoController”)]
  3. public var controller:IEstadoController;

nesta parte do código estamos fazendo a escuta da nossa controladora, repare que me refiro a interface e não a que implementa a mesma, isso é o que muitos chamam de Programação Orientado a Interface,  como essa escuta vai lá no nosso Bean.mxml e procura um bean com nome de “estadoController”, lembrando:

PLAIN TEXT
XML:

  1. <controllers:EstadoController id=“estadoController”/>

e como o nosso bean está mensionando a implementação e não a interface, ele instancia a implementação, é ou não é inteligente o Swiz :)

outra coisa que vale a pena explicar e somente isso a mais é a escuta que adicionamos aos nossos eventos no método init:

PLAIN TEXT
ACTIONSCRIPT:

  1. Swiz.addEventListener(EstadoEvent.SAVE,onSaveComplete);
  2. Swiz.addEventListener(EstadoEvent.REMOVE,onRemoveComplete);

quando fazemos esse comando acima estamos dizendo para nosso view ficar esperta, ou seja, ficar escutando qualquer disparo desses eventos, quando for disparado um dos eventos ele executa o método que se encontra no segundo parametro, exemplo o onSaveComplete que, por sua vez recebe como parametro um EstadoEvent. Lembra que no controller tem um método que dispara os nossos eventos, não lembra né, também teria esquecido :) , lembrando:

PLAIN TEXT
ACTIONSCRIPT:

  1. public function onSave(event:ResultEvent):void{
  2. Swiz.dispatchEvent(new EstadoEvent(EstadoEvent.SAVE));
  3. }

ou seja, quando é feito esse disparo é executado o nosso onSaveComplete, para quem já conhece de eventos em Flex nenhuma surpresa, somente o fato de estar usando o dispatchEvent e addEventListener do swiz e não os do SDK do próprio flex, isso tem uma explicação, o famoso Mediate do Swiz, que não vamos entrar no mérito neste tutorial, ok!

Agora como respiro final deste tutorial o Index.mxml modificado para chamar a view que acabamos de criar

index.mxml

PLAIN TEXT
XML:

  1. <?xml version=“1.0″ encoding=“utf-8″?>
  2. <mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute”
  3.     preinitialize=“{iniciar(event)}”>
  4.    
  5.     <mx:Script>
  6.         <![CDATA[
  7.             import com.saberprogramar.views.EstadoView;
  8.             import mx.managers.PopUpManager;
  9.             import org.swizframework.Swiz;     
  10.             import mx.events.FlexEvent;   
  11.            
  12.             private function iniciar(event:FlexEvent):void{    
  13.                 Swiz.setStrict(false).loadBeans( [Beans] ); 
  14.                 chamarView();                     
  15.             }
  16.            
  17.             private function chamarView():void{
  18.                 PopUpManager.createPopUp(this,EstadoView,false);
  19.             }
  20.            
  21.         ]]>
  22.     </mx:Script>
  23.    
  24. </mx:Application>

Como minha hospedagem não suporta java não tem como mostrar o resultado final :( mais….

Caso queira o projeto em java é só baixar aqui (sem as libs).

Caso queira o projeto em flex é só baixar aqui.

Bem, é isso, uffa, nunca imaginei que criar um tutorial fosse  tão dificil e demorado :( espero que o resultado tenha sido bom :)

Considerações:

Antes de mais nada peço desculpas se o tutorial não foi muito bem explicado, se dei importância demais onde não era para dar e o que era importante não comentei, sei lá, esse tipo de coisas que pecamos por falta de experiência como blogueiro ;) mais podem ter certeza que o intuito foi o dos melhores e espero que ajude alguém, principalmente a usar MVC no flex, coisa que é muito falada mais tem poucos exemplos, principalmente na língua portuguesa.

Objetivo:

Mostrar que realmente sei o que falo que sei em meu currículo, mesmo não tendo nenhum portfólio, já que não considero meu portfólio o que faço na empresa onde trabalho, o portfólio é da empresa. Procuro contatos profissionais e serviços no que envolve desenvolvimento de sites e sistemas, quem tiver interessado é só entrar em Contato, Obrigado.

Não posso deixar de falar da minha Gata, Fernanda minha Esposa EU TE AMO MUITO, obrigado pela paciência com o seu Geek, hehhe!

Vlw, até a próx. Bons estudos para Todos e um Abraço. FIM.

Mai 25

TUTORIAL JAVA + FLEX NA PRÁTICA 5/6

Escrito por Janderson Cardoso em Action Script 3.0, Adobe Flex, Blazeds, Código Fonte java, Data Service, DomainDriveDesign, Frameworks, Hibernate, Indico a Leitura, Java, SPRING ANNOTATIONS, Spring, Swiz Framework, TUTORIAL FLEX, TUTORIAL JAVA, Tutorial, código fonte Flex, hibernate Annotations, mvc, pratica java flex @ 05 25th, 2009 | via http://www.jandersonfc.com/ | Sem comentários
Janderson Cardoso
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »