Pois bem, fiquei um tempo fora do blog devido a uma série de compromissos na empresa aonde trabalho e de compromissos de ordem pessoal também, um deles foi o FlexMania 2010.

Durante os dias 8, 9 e 10 de julho tivemos o prazer de acompanhar o FlexMania 2010, organizado pelo Igor Costa, de forma gratuita através da excelente ferramenta da Adobe, o Adobe Connect.

O FlexMania é um evento gratuito, idealizado e organizado por Igor Costa – Adobe Community Professional. Tive o enorme prazer em palestrar no FlexMania 2009 (clique aqui para assistir a gravação da minha palestra sobre “Flex, Java e BlazeDS – Integração com alta produtividade e desempenho“) e confesso que fiquei muito feliz e muito empolgado com o convite para o evento em 2010.

Foram dois meses de muita ansiedade. Para quem não sabe como funciona o processo do convite ao evento, os palestrantes recebem os convites, entretanto não sabem quais serão seus companheiros de “palco”, dessa forma, cria-se um grande mistério entre todos. Após um certo tempo, somos apresentados uns aos outros e logo em seguida o site do evento é publicado.

Esse ano recebi (e todos os outros palestrantes) da PowerFlasher uma licença do seu editor, o FDT. E não só nós, diversas licenças foram sorteadas durante o evento além de todos os outros produtos, em uma soma de mais de R$ 30.000,00 em prêmios. É muita coisa quando falamos de um evento on-line que você não paga absolutamente nada para participar.

A grande sensação do evento foi as reações do twitter a cada palestra, principalmente pela galera do #soudev. Imagino que muitos novos colegas da madrugada irão surgir com posts #soudev depois do FlexMania.

Esse ano eu abordei um assunto que a cada dia ganha mais espaço no mundo da TI e agora os grandes data centers do país começaram a disponibilizar esse serviço, o Cloud Computing.

Minha abordagem teve inicio sobre os tipos de cloud-computing, vantagens e suas desvantagens (nem tudo é um mar de rosas). Em seguida, entrei no assunto do Google App Engine, o serviço do Google gratuito (até um certo ponto) para cloud computing, contanto com recursos de Java e armazenamento de dados.

Mostrei suas vantagens, formas de utilização, plugins e ferramentas disponíveis e finalmente entrei no assunto Adobe Flex, demonstrando o que deve ser alterado nas configurações padrões do Adobe Flex com Java para que possamos utilizar o BlazeDS dentro da estrutura do Google.

Conforme prometido ao final da palestra, estou disponibilizando para download os projetos (Java e Flex) e os slides utilizados na apresentação.

Slides:

Projeto Java: clique aqui para download

Projeto AIR: clique aqui para download

Agradecimentos:

• Igor Costa – Adobe Community Professional pelo convite e por todo suporte antes e durante o evento;
• IDS – Software e Consultoria LTDA por permitir minha participação;
• Patrocinadores:
• Adobe System
• RIACycle (pela camiseta e pelo boné)
• PowerFlasher (em especial pela licença do FDT cedida cordialmente a todos os palestrantes do evento)
• Mundo Livre Tecnologia
• Oreilly
• ElementRiver

Espero ter contruído e despertado o interesse dos desenvolvedores a conhecer um pouco mais sobre a estrutura do Google App Engine integrando Flex e Java nessa estrutura incrível que o Google dispõe para nós.

Um forte abraço ao Igor Costa, a todos os palestrantes e patrocinadores e a todos que participaram do evento.

Agora é esperar pelo FlexMania 2011. Mas antes ainda temos pela frente a BRConferente, organizada pelo Pedro Claudio – Adobe Community Professional, e também o Flash Camp Brasil, organizado pelo Demian Borba – Adobe Community Professional.

Como é bom ver a quantia de eventos que estão surgindo no Brasil.

Recentemente (dia 07 de junho) tive o prazer de estar novamente em Dois Vizinhos – Paraná (já estive em outra oportunidade ministrando um curso de Adobe Flex 3 em parceria com a Sudotec), mais precisamente na Faculdade Vizivali para uma palestra sobre a Adobe Flash Plataform.

O convite foi feito pelo coordenador do curso de Sistemas de Informação para Internet, o professor e mestre Lucas Sandini. Tive a oportunidade de durante uma hora e meia explicar e demonstrar as ferramentas e recursos que a Adobe disponibiliza para o desenvolvimento de soluções RIA.

Também aproveitei a oportunidade para efetuar um sorteio de uma vaga no curso de Adobe Flex 4 e Java que será ministrado no dia 03 de julho em parceria com a RIACycle.

Foi muito bacana estar presente no evento, agradeço novamente o convite e podem contar comigo sempre que for preciso na instituição.

Um abraço a todos os docentes da Vizivali, que me receberam muito bem e a todos os acadêmicos presentes na semana acadêmica.

Sobre a semana acadêmica, clique aqui.

Abaixo algumas fotos:

Neste post irei comentar um pouco sobre a grande evolução que os States sofreram no Adobe Flex 4 em relação as versões 2 e 3 do Flex SDK. Com novos recursos, realmente agora ficou muito fácil sua implementação em nossos projetos.

Na versão 3 do Flex SDK, era muito difícil a utilização de States em nossas aplicações. Sua implementação era muito complexa e ao invés de facilitar a vida do desenvolvedor na verdade ela criava mais uma barreira para o desenvolvimento, ou seja, muito pouco material você irá encontrar na internet caso pesquise, encorajando a sua utilização.

Entretanto, no Flex 4 SDK, os States foram reformulados. Sua implementação ficou muito mais fácil e agora sim, vale a pena utilizar esse recurso em seus projetos.

Para exemplificar a utilização do State, iremos criar um projeto em nosso Adobe Flash Builder, conforme imagem abaixo:

Feito isso, iremos criar um layout que contemple essas duas situações:

O detalhe é que esse layout irá conter um único TitleWindow, e não iremos utilizar nenhum ViewStack para fazer as telas de login e cadastro. Iremos apenas usar os novos conceitos de States para mostrar e ocultar informações.

Primeiro passo será criar a tela de Login, conforme imagem e código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:TitleWindow width="384" height="200" horizontalCenter="0" verticalCenter="0" title="Login">
		<s:layout>
			<s:BasicLayout/>
		</s:layout>
		<s:Label text="Olá, Seja bem vindo(a)!" left="10" top="15"/>
		<s:Label text="Email:&#xd;" top="52" left="25"/>
		<s:TextInput left="65" top="47" right="15"/>
		<s:Label text="Senha:" left="20" top="82"/>
		<s:TextInput x="65" y="77" width="148" displayAsPassword="true"/>
		<s:Button label="Entrar" left="65" top="107"/>
		<s:Button label="Limpar" top="107" left="143"/>
		<s:Button label="Não sou cadastrado" top="107" left="221"/>
	</s:TitleWindow>
</s:Application>

Podemos observar que todos os objetos contidos no TitleWindow foram posicionados através de posicionamento relativo, utilizando valores para “left, right, top” e não valores para “x e y”. Até então tudo normal, sem nenhuma implementação nova.

Agora, iremos adicionar um novo State para nossa aplicação para o formulário de cadastro, conforme imagem abaixo. Caso seu Adobe Flash Builder não esteja com o painel para States habilitado. Utilize a opção “Window -> States“.

No campo Name, informamos o nome de nosso State, Cadastro, e na opção “Create as” iremos deixar marcada a opção para que o State a ser criado seja uma duplicação do State1, que é o nome padrão do State inicial dentro do Adobe Flash Builder.

Agora iremos alterar o nome do nosso primeiro State em nossa aplicação. Para isso, iremos clicar em cima do nome State1, e solicitar sua alteração, conforme imagem abaixo:

Feito isso, podemos verificar quais alterações ocorreram em nosso código-fonte e em nosso ambiente visual. Nosso layout não sofreu nenhuma alteração, surgindo apenas um bloco de códigos com as definições dos States.

1
2
3
4

<s:states>
	<s:State name="Login"/>
	<s:State name="Cadastro"/>
</s:states>

Agora, podemos dar inicio a construção de nossa tela de cadastro. Iremos então selecionar nosso State Cadastro, da seguinte forma:

Feito isso, iremos iniciar as alterações em nossa janela, sem se preocupar com o State anterior. Obteremos então o seguinte resultado:

Para o desenvolvimento desse layout, eu dupliquei o campo e o label do campo email para que eu pudesse armazenar o nome do usuário do sistema que fosse efetuar seu cadastro, e também dupliquei o campo e label senha, conforme a sugestão do layout.

Em seguida, alterei o label dos botões, e alterei o titulo de meu TitleWindow.

Entrando em modo de Design, obtemos o seguinte código:

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

<?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">
	<s:states>
		<s:State name="Login"/>
		<s:State name="Cadastro"/>
	</s:states>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:TitleWindow width="384" height="200" horizontalCenter="0" verticalCenter="0" title="Login" title.Cadastro="Cadastro" height.Cadastro="250" horizontalCenter.Cadastro="0" verticalCenter.Cadastro="0">
		<s:layout>
			<s:BasicLayout/>
		</s:layout>
		<s:Label text="Olá, Seja bem vindo(a)!" left="10" top="15" text.Cadastro="Informe seus dados para o cadastro&#xd;"/>
		<s:Label text="Email:&#xd;" top="52" left="25" top.Cadastro="82" left.Cadastro="26"/>
		<s:Label text="Nome:" top="53" left="23" includeIn="Cadastro"/>
		<s:TextInput top="77" left="66" right="14" includeIn="Cadastro"/>
		<s:TextInput left="65" top="47" right="15" top.Cadastro="47" left.Cadastro="66" right.Cadastro="14"/>
		<s:Label text="Senha:" left="20" top="82" top.Cadastro="112" left.Cadastro="21"/>
		<s:TextInput x="65" y="77" width="148" displayAsPassword="true" x.Cadastro="66" y.Cadastro="107"/>
		<s:Label text="Senha:" left="21" top="142" includeIn="Cadastro"/>
		<s:TextInput x="66" y="137" width="148" displayAsPassword="true" includeIn="Cadastro"/>
		<s:Button label="Entrar" left="65" top="107" top.Cadastro="167" left.Cadastro="66" label.Cadastro="Cadastrar"/>
		<s:Button label="Limpar" top="107" left="143" top.Cadastro="167" left.Cadastro="148"/>
		<s:Button label="Não sou cadastrado" top="107" left="221" top.Cadastro="167" left.Cadastro="222" label.Cadastro="Efetuar Login"/>
	</s:TitleWindow>
</s:Application>

Nesse momento, fica fácil perceber como o Flex 4 SDK trabalha com os States. A cada propriedade comum de um objeto em mais de um State, é adicionado ao fim da propriedade, o nome do State correspondente. Para exemplificar, usaremos a declaração do TitleWindow:

1

<s:TitleWindow width="384" height="200" horizontalCenter="0" verticalCenter="0" title="Login" title.Cadastro="Cadastro" height.Cadastro="250" horizontalCenter.Cadastro="0" verticalCenter.Cadastro="0">

A primeira vez o atributo title aparece sem a declaração de qual State deverá pertencer, ou seja, nesse caso esse é o valor quando o State da aplicação for o State default. Logo em seguida o atributo title aparece seguido de um ponto e do valor Cadastro, que é o nome de nosso segundo State, já com o novo valor do título da janela. E assim, essa regra permanece no próprio componente TitleWindow e também nos demais componentes.

É valido ressaltar, que ao selecionar o modo “Source” em seu Adobe Flash Builder, você também poderá mostrar o código de apenas um ou todos os States disponíveis em seu componente da seguinte forma:

Nesse momento, podemos perceber que o Adobe Flash Builder oculta a codificação em MXML que não será utilizada no State selecionado.

Para efetuarmos a troca de State, faremos a seguinte implementação. Com o State Login selecionado, clique com o botão direito do mouse sob o botão com o label “Não sou cadastrado” e vá na opção “Generate Click Handler“.

Nesse momento, o Adobe Flash Builder entrará em modo “Source”. Faça a seguinte implementação:

1
2
3
4

protected function button1_clickHandler(event:MouseEvent):void
{
	currentState = 'Cadastro';
}

Volte ao modo Design e faça a mesma operação no botão com o label “Efetuar Login” e faça a seguinte implementação:

1
2
3
4

protected function button2_clickHandler(event:MouseEvent):void
{
	currentState = 'Login';
}

Pronto. Basta salvar e executar o projeto, e terá um exemplo simples e rápido para demonstrar o uso de States dentro do Flex 4 SDK. A partir de agora, fica por nossa conta a criatividade para sua melhor exploração.

Para ver o exemplo rodando clique aqui.

Para ver o código fonte do exemplo completo clique aqui.

Para efetuar o download do exemplo clique aqui.

Obrigado pela visita, volte sempre!

Nesse post irei comentar um pouco sobre a utilização de background com um gradiente de cores. No Flex 3 era possível essa implementação através de uma propriedade chamada backgroundGradientColors, que estava disponível nos estilos do objeto Application e que agora, na versão 4 do Flex é necessário a implementação de um Skin para que possamos aplicar o gradiente ao background da aplicação.

O SDK do Adobe Flex 4 mudou muito com relação ao Adobe Flex 3. Uma das grandes mudanças é o uso extensivo de Skins para construção de nossos componentes e aplicações.

A grosso modo pode-se avaliar essas modificações de uma forma negativa, uma vez que a curva de aprendizado se tornou maior com relação ao Flex 3, entretanto essa forma mais robusta de implementação desses recursos nos permite mais flexibilidade e novas possibilidades em nossas implementações.

Ao se deparar com o novo Flex SDK, o desenvolvedor logo percebe que houve um aumento significativo de propriedades no agrupador “Styles” em seu Flex Properties, porém, mesmo com esse aumento algumas propriedades deixaram de existir.

Hoje falaremos do “BackgroundGradientColors“. Uma propriedade que nos permitia passar um array de cores para a aplicação e a mesma aplicava como background um gradiente de cores entre as informadas.

Para demonstrar essa situação, iremos criar um novo “Flex Project” em nosso Flash Builder chamado BackgroundGradientColor conforme imagem abaixo:

Após criado, iremos adicionar um “MXML Skin” em nossa aplicação. Para isso, vá ao menu File, New, MXML Skin, e irá abrir uma tela para criação do arquivo. Nessa tela, iremos configurar o Name e o Host Component de nosso Skin, conforme demonstrado abaixo:

Algumas considerações sobre a criação de um Skin que acabamos de fazer. O nome informado é o nome que a classe Skin irá receber em nosso projeto. A metadata HostComponent é utilizada para informar ao Skin qual componente do SDK fará sua implementação. Ao informar a metadata e sair do campo, o campo “create a copy of” será preenchido automaticamente, com a classe utilizada pelo componente informado no HostComponent.

Após abrir o arquivo criado, iremos ver que ele possui todas as informações sobre o desenho e cores do componente spark.components.Application. Podemos perceber também que existe um grande uso de States.

Iremos procurar o seguinte bloco de código dentro do ApplicationSkin.mxml. Ele deverá estar na linha
47.

1
2
3
4
5
6

    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>

Iremos fazer nossas alterações nesse bloco de códigos, que contém o retângulo que cobre toda a área de nossa aplicação.

Podemos perceber que que dentro do retângulo existe um objeto SolidColor que contem a cor inicial de nosso Application. Esse objeto será removido para adicionarmos o objeto LinearGradient do pacote mx.graphics.*. E para definição das cores do gradiente, usamos objetos GradientEntry que irão conter as cores do gradiente a ser aplicado, conforme abaixo:

1
2
3
4
5
6
7
8
9

<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
    <s:fill>
        <!--- @private -->
		<s:LinearGradient rotation="90">
			<s:GradientEntry color="#000000" />
			<s:GradientEntry color="#999999" />
		</s:LinearGradient>
    </s:fill>
</s:Rect>

Após isso, podemos voltar a nossa aplicação principal e iremos adicionar a propriedade skinClass a classe correspondente ao skin da nossa aplicação, conforme abaixo:

1
2
3
4
5
6
7
8
9

<?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"
			   skinClass="ApplicationSkin">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>

Após essa alteração, entraremos em modo de “Design” e já podemos ver no próprio Flash Builder a implementação do Skin pela nossa aplicação conforme imagem abaixo:

A possibilidade de trabalhar com Skin abre ainda mais as portas para a criatividade dentro do Flex 4 SDK. Agora, fica por nossa conta a criatividade para uma melhor exploração de layouts, cores e formas em nossas aplicações.

Fonte do exemplo? Clique aqui.

Um abraço, até a próxima!

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.

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.

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á:

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:

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

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:

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:

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:

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:

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

Depois de alguns dias sem postar nada no blog, vou atender ao pedido de alguns colegas que fizeram um curso de Scrum a uns dias atrás e postar algo no blog sobre como começar um projeto com Java e Flex, como faço para “instalar” o BlazeDS e fazer minha primeira comunicação.

If you want to see this post in english, click here.

Para quem está iniciando no desenvolvimento Flex com Java como back-end e está optando por trabalhar com Remote Objects precisa trabalhar com algo que faça a comunicação entre Flex e Java.

Existem diversas opções hoje no mercado, e a própria Adobe disponibiliza dois produtos para isso.  O objetivo desse tutorial é exemplificar o uso do BlazeDS para essa comunicação.

O BlazeDS é uma ferramenta open-source, e hoje é amplamente utilizada para a comunicação Java – Flex. Tem como objetivo prover ao desenvolvedor Flex uma forma de se comunicar com seu back-end através de Remote Objects ou comunicação Real-Time através de Messages.

Vale lembrar que o BlazeDS pode ser utilizado para comunicações de aplicações desenvolvidas em Flex para Web (Flash Player) ou para Desktop (AIR).

Mas como iniciar? Primeiramente, devemos fazer o download (clique aqui para o download) através do site oficial do BlazeDS.

O download que estamos fazendo é a versão binária, contendo um arquivo .WAR que contém os arquivos .xml e os .jars necessários para a sua utilização. Também é possível fazer o download do código-fonte do BlazeDS clicando aqui.

Após o download e sua descompactação, também é necessário descompactar o arquivo blazeds.war. Para isso, você poderá utilizar um descompactador como o WinRAR por exemplo. Fazendo isso, obteremos a seguinte estrutura:

O conteúdo da pasta META-INF será desconsiderado. Levaremos em consideração apenas o conteúdo da pasta WEB-INF conforme seguinte apresentação:

A pasta classes e src serão desconsideradas nesse tutorial também.

Dentro da pasta flex, temos os arquivos XMLs necessários para configuração em nosso projeto que será criado no Java, e na pasta lib, temos as bibliotecas java (*.jar) que deverão ser incorporados em nosso projeto. E o arquivo web.xml contém as informações necessárias para a configuração do servlet em nosso projeto.

Nesse artigo, o software utilizado para criação e desenvolvimento do projeto Java é Eclipse Galileu junto com o  WebTools. Você pode tranquilamente adaptar esse tutorial para qualquer IDE que você utilize em seu dia-a-dia.

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.

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.

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.

O primeiro arquivo que iremos configurar, é o arquivo web.xml que fica dentro da pasta WebContent/WEB-INF/. Para essa configuração, iremos adicionar o conteúdo do arquivo web.xml que veio dentro do arquivo blazeds.war que foi previamente descompactado. O resultado será:

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

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>FlexDuck</display-name>
	<welcome-file-list>
		<welcome-file>FlexDuck.html</welcome-file>
	</welcome-file-list>
 
 
    <!-- 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>
        <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>
 
</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:

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 Flex.

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:

Após conferir essas informações, podemos iniciar o desenvolvimento do projeto no Flex.

Primeiramente, iremos criar o bean que será enviado para o Java e vice-versa. Esse bean será um espelho do bean criado no Java, conforme abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package br.com.horochovec.model
{
	[RemoteClass(alias="br.com.horochovec.model.Contato")]
	[Bindable]
	public class Contato
	{
 
		public var nome 	: String;
 
		public var email 	: String;
 
		public function Contato()
		{
		}
 
	}
}

Em seguida, irei 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
		<s:Button x="55" label="Cadastrar" bottom="10" id="btnCadastro"/>
		<s:Label x="10" y="16" text="Nome:"/>
		<s:Label x="13" y="50" text="Email:"/>
		<s:TextInput x="56" y="10" width="332" id="nome"/>
		<s:TextInput x="56" y="44" width="332" id="email"/>
	</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="{this.listContato}">
			<mx:columns>
				<mx:DataGridColumn headerText="Nome" dataField="nome"/>
				<mx:DataGridColumn headerText="Email" dataField="email"/>
			</mx:columns>
		</mx:DataGrid>
		<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5"/>
	</s:Panel>
</s:Application>

Após a construção da tela, iremos criar o serviço remoto que será responsável pela comunicação com o Java. Conforme trecho abaixo, criaremos um RemoteObject e dois métodos para serem executados pela aplicação. Definiremos também os métodos que devem ser disparados quando ocorrerem os retornos, tanto de sucesso quanto de falha na comunicação.

1
2
3
4
5
6
7
8
9
10
11
12

<fx:Declarations>
	<s:RemoteObject id="remoteObject" 
					destination="ContatoService" 
					fault="onFault(event);">
		<s:method name="addContato" 
				  result="onResultAddContatoHandler(event);"
				  fault="onFault(event);" />
		<s:method name="getListContato" 
				  result="onResultGetListContatoHandler(event);"
				  fault="onFault(event);" />
	</s:RemoteObject>
</fx:Declarations>

Feito isso, faremos a implementação dos métodos a cima informados para resultados do RemoteObject.

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

<fx:Script>
<![CDATA[
import br.com.horochovec.model.Contato;
 
import mx.collections.ArrayList;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
 
[Bindable]
public var contato : Contato 		= new Contato();
 
[Bindable]
public var listContato : ArrayList 	= new ArrayList();
 
 
/**
 * Metodo para falhas na comunicação
 */				
protected function onFault(event:FaultEvent) : void
{
	Alert.show('Erro');
}
 
/**
 * Funcao para retorno de cadastro do Contato
 */
protected function onResultAddContatoHandler(event:ResultEvent) : void 
{
	Alert.show('Adicionado');
}
 
/**
 * Funcao para retorno da lista de contatos
 */
protected function onResultGetListContatoHandler(event:ResultEvent) : void
{
	this.listContato = event.result as ArrayList;
}
 
]]>
</fx:Script>

Agora, iremos implementar no botão do painel de cadastro e ao botão no painel de listagem de informações, o evento de click para que seja enviado ao java o bean para cadastro e solicitado ao java a lista de contatos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
	<s:Button x="55" label="Cadastrar" bottom="10" id="btnCadastro" click="btnCadastroClickHandler(event)"/>
	<s:Label x="10" y="16" text="Nome:"/>
	<s:Label x="13" y="50" text="Email:"/>
	<s:TextInput x="56" y="10" width="332" id="nome"/>
	<s:TextInput x="56" y="44" width="332" id="email"/>
</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="{this.listContato}">
		<mx:columns>
			<mx:DataGridColumn headerText="Nome" dataField="nome"/>
			<mx:DataGridColumn headerText="Email" dataField="email"/>
		</mx:columns>
	</mx:DataGrid>
	<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5" id="btnListar" click="btnListarClickHandler(event)"/>
</s:Panel>

Com os eventos de click de cada botão implementados, falta apenas fazer a implementação de seus métodos. Para isso vamos adicionar ao bloco fx:script o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/**
 * Evento de click do botão de cadastro
 */
protected function btnCadastroClickHandler(event:MouseEvent):void
{
	this.remoteObject.addContato(this.contato);
}
 
/**
 * Evento de click do botão de pesquisa
 */
protected function btnListarClickHandler(event:MouseEvent):void
{
	this.remoteObject.getListContato();
}

Para finalizar o código, irei adicionar o Binding entre os dois TextInput e o bean que será serializado para o Java:

1
2

<fx:Binding source="nome.text" destination="contato.nome" twoWay="true"/>
<fx:Binding source="email.text" destination="contato.email" twoWay="true"/>

Feito isso, pronto, nossa aplicação de teste está pronta para o uso final, como resultado, obtemos:

A implementação completa do Flex será:

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
98
99
100
101
102
103

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Script>
	<![CDATA[
		import br.com.horochovec.model.Contato;
 
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import mx.rpc.events.FaultEvent;
		import mx.rpc.events.ResultEvent;
 
		[Bindable]
		public var contato : Contato 				= new Contato();
 
		[Bindable]
		public var listContato : ArrayCollection 	= new ArrayCollection();
 
 
		/**
		 * Metodo para falhas na comunicação
		 */				
		protected function onFault(event:FaultEvent) : void
		{
			Alert.show('Erro');
		}
 
		/**
		 * Funcao para retorno de cadastro do Contato
		 */
		protected function onResultAddContatoHandler(event:ResultEvent) : void 
		{
			Alert.show('Adicionado');
		}
 
		/**
		 * Funcao para retorno da lista de contatos
		 */
		protected function onResultGetListContatoHandler(event:ResultEvent) : void
		{
			this.listContato = event.result as ArrayCollection;
		}
 
		/**
		 * Evento de click do botão de cadastro
		 */
		protected function btnCadastroClickHandler(event:MouseEvent):void
		{
			this.remoteObject.addContato(this.contato);
		}
 
		/**
		 * Evento de click do botão de pesquisa
		 */
		protected function btnListarClickHandler(event:MouseEvent):void
		{
			this.remoteObject.getListContato();
		}
 
	]]>
	</fx:Script>
 
	<fx:Binding source="nome.text" 	destination="contato.nome" 	twoWay="true"/>
	<fx:Binding source="email.text" destination="contato.email" twoWay="true"/>
 
	<fx:Declarations>
 
		<s:RemoteObject id="remoteObject" 
						destination="ContatoService" 
						fault="onFault(event);">
 
			<s:method name="addContato" 
					  result="onResultAddContatoHandler(event);"
					  fault="onFault(event);" />
			<s:method name="getListContato" 
					  result="onResultGetListContatoHandler(event);"
					  fault="onFault(event);" />
 
		</s:RemoteObject>
 
	</fx:Declarations>
 
 
	<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
		<s:Button x="55" label="Cadastrar" bottom="10" id="btnCadastro" click="btnCadastroClickHandler(event)"/>
		<s:Label x="10" y="16" text="Nome:"/>
		<s:Label x="13" y="50" text="Email:"/>
		<s:TextInput x="56" y="10" width="332" id="nome"/>
		<s:TextInput x="56" y="44" width="332" id="email"/>
	</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="{this.listContato}">
			<mx:columns>
				<mx:DataGridColumn headerText="Nome" dataField="nome"/>
				<mx:DataGridColumn headerText="Email" dataField="email"/>
			</mx:columns>
		</mx:DataGrid>
		<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5" id="btnListar" click="btnListarClickHandler(event)"/>
	</s:Panel>
 
</s:Application>

Você pode fazer o download do projeto aqui.

Obrigado e um abraço a todos!

Conforme prometido através de comentários no post anterior, segue o download do projeto DuckToDo com a implementação de um projeto utilizando FlexORM com AIR 1.5

Download aqui.

Forte abraço

Neste artigo, irei comentar um pouco sobre o FlexORM. Este framework tem como objetivo o mapeamento objeto-relacional em projetos que utilizem AIR e base de dados embarcada (SQLite).

O FlexORM é uma criação de Mark Moloney, e é hospedado pela RIAForge.

O FlexORM tem suporte a versão 1.5 do AIR e abaixo, podemos listar algumas de suas vantagens para seu uso:

* Não há necessidade de criação e atualização de tabelas. O FlexORM se encarrega da criação da estrutura do banco, através de um mapeamento feito dentro do próprio objeto a ser persistido;

* Possui suporte as operações CRUD;

* Suporta associações 1:N, N:M, N:1 e 1:1;

* Suporte a atributos transientes;

* Suporte a constraints para consistência de chaves-estrangeiras, através de triggers do SQLite;

* Transações;

* Criação automática de índices;

* Lazy Loading;

* Dentre outras;

Para exemplificar o uso do FlexORM, irei criar um projeto chamado DuckToDo e o objetivo do projeto é que eu possa cadastrar algumas tarefas que eu precise realizar. A aplicação é bem simples no quesito visual, uma vez que o intuito do artigo é o conhecimento do FlexORM.

Para iniciar, iremos criar um projeto no FlexBuilder chamado DuckToDo, conforme a tela abaixo:

Em seguida, vá as propriedades do projeto, e na opção Flex Compiler, adicione a seguinte linha de comando ” -keep-as3-metadata+=Table,Id,Column,ManyToOne,OneToMany,ManyToMany,Transient”, para que o compilador interprete as Metadatas adicionadas ao mapeamento dos Beans, conforme tela abaixo:

Feito isso, você deve fazer o download do FlexORM e adicionar ao seu projeto. Você pode optar por fazer o download do source através de um servidor de versionamento (subversion), ou fazer o download através deste link do arquivo .SWC do projeto FlexORM.

Depois de obter o .SWC, ou por download, ou recompilando o projeto, você deve adicioná-lo a pasta lib/ de seu projeto.

Feito isso, criaremos nossa classe de objeto que será persistida pela nossa aplicação.

Crie uma nova classe actionscript na package “org.flexduck.model” chamada Todo, e adicione o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package org.flexduck.model
{
 
	[Bindable]
	[Table(name="TODO")]
	public class Todo
	{
		[Id]
		public var codigo 	: int;
 
		[Column(name="titulo")]
		public var titulo 	: String;
 
		[Column(name="descricao")]
		public var descricao : String;
 
	}
 
}

Neste momento, quem trabalha com Java e utiliza Hibernate ou JPA já percebe uma grande semelhança. Através da Metadata [Table] no escopo da classe, definimos a qual tabela este objeto deve ser persistido.

No atributo codigo, foi adicionado a Metadata [Id] indicando que esse atributo corresponde a chave primária, ou o identificador, do objeto.

E nos atributos, titulo e descrição, adicionado a Metadata [Column] indicando que refere-se a uma coluna. Junto a Metadata também foi adicionado o nome respectivo da coluna na tabela.

Com isso, nosso bean está pronto para ser persistido. Vamos para a sua gravação.

Dentro do arquivo DuckToDo.mxml foi criada a seguinte estrutura de componentes.

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

<mx:Binding destination="todo.titulo" 		source="titulo.text"/>
<mx:Binding destination="todo.descricao" 	source="descricao.text"/>
 
<mx:Panel width="500" height="250" layout="absolute" title="O que tenho para fazer?" horizontalCenter="0" verticalCenter="0">
 
<mx:ViewStack id="vw" top="0" right="0" left="0" bottom="0">
	<mx:Canvas label="Grid" width="100%" height="100%">
 
		<mx:Label x="10" y="10" text="Título" fontWeight="bold"/>
		<mx:TextInput x="10" y="29" width="460" id="titulo" text="{this.todo.titulo}"/>
 
		<mx:Label x="10" y="58" text="Descrição" fontWeight="bold"/>
		<mx:TextArea x="10" y="75" width="460" height="85" id="descricao" text="{this.todo.descricao}"/>
 
		<mx:Button x="318" y="172" label="Adicionar" id="btnAdd" click="btnAddHandler(event);"/>
		<mx:Button x="252" y="172" label="Listar" id="btnListar" click="btnListarHandler(event);"/>
		<mx:Button x="189" y="172" label="Novo" id="btnNovo" click="btnNovoHandler(event);"/>
		<mx:Button x="406" y="172" label="Excluir" id="btnDel" click="btnDelHandler(event);"/>
 
	</mx:Canvas>
 
	<mx:Canvas label="Formulario" width="100%" height="100%">
		<mx:DataGrid 	top="5" right="5" left="5" bottom="30" 
						id="dg" 
						doubleClickEnabled="true" 
						doubleClick="doubleClickHandler(event);">
			<mx:columns>
				<mx:DataGridColumn dataField="titulo"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:Button label="Pesquisar" id="btnPesquisar" click="btnPesquisarHandler(event);" bottom="5" right="5"/>
		<mx:Button label="Cadastrar" id="btnCadastrar" click="btnCadastrarHandler(event);" bottom="5" right="90"/>
	</mx:Canvas>
 
</mx:ViewStack>
 
</mx:Panel>

Essa estrutura corresponde a um Panel, contendo um ViewStack com dois Canvas dentro. Para o primeiro Canvas foi adicionado um Grid para conter a lista de tarefas e no segundo Canvas, um pequeno formulário para a manutenção dos registros.

Nesse artigo não irei comentar sobre a estrutura do formulário, considerando apenas como relevante as instruções de uso do FlexORM.

Foi adicionado um evento no creationComplete da minha aplicação, para instanciar o banco de dados, conforme declaração abaixo:

1
2

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
						creationComplete="initApp(event);">

E dentro do bloco de programação em ActionScript foi adicionado:

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

<mx:Script>
<![CDATA[
 
import org.flexduck.model.Todo;
import nz.co.codec.flexorm.EntityManager;
 
/**
 * Objeto de persistencia
 */ 
private var genericDAO 	: EntityManager	= EntityManager.instance;
 
/**
 * Classe para listar
 */
private var todoClass	: Class			= Todo;
 
/**
 * Bean
 */
[Bindable]
private var todo		: Todo			= new Todo();
 
/**
 * Evento disparado no creationComplete da aplicação para fazer a conexão com o banco de dados
 */
private function initApp(event:Event) : void
{
	var appDataBase : File = File.documentsDirectory.resolvePath("ducktodo.db");
	var sqlConn		: SQLConnection	= new SQLConnection();
	sqlConn.open(appDataBase);
	this.genericDAO.sqlConnection	= sqlConn;
}
 
/**
 * Função disparada no click do botão de "Adicionar"
 */
private function btnAddHandler(event:MouseEvent) : void
{
	this.genericDAO.save(this.todo);
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no click do botão de "Excluir"
 */
private function btnDelHandler(event:MouseEvent) : void
{
	this.genericDAO.remove(this.todo);
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no duplo click no grid de pesquisa
 */
private function doubleClickHandler(event:MouseEvent) : void 
{
	this.todo	= this.dg.selectedItem as Todo;
	this.vw.selectedIndex	= 0;
}
 
/**
 * Função disparada no click do botão de "Pesquisar"
 */
private function btnPesquisarHandler(event:MouseEvent) : void
{
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no click do botão de "Cadastrar"
 */
private function btnCadastrarHandler(event:MouseEvent) : void
{
	this.vw.selectedIndex 	= 0;
}
 
/**
 * Função disparada no click do botão de "Listar"
 */
private function btnListarHandler(event:MouseEvent) : void
{
	this.vw.selectedIndex	= 1;
}
 
/**
 * Função disparada no click do botão de "Novo"
 */
private function btnNovoHandler(event:MouseEvent) : void
{
	this.todo	= new Todo();
}
]]>
</mx:Script>

Alguns comentários relevantes:

Na função initApp, foi criado uma conexão SQLConnection, e a mesma foi passada para um objeto chamado genericDAO. Este objeto é uma instancia da classe EntityManager do FlexORM, responsável por executar os métodos para manipulação do banco de dados.

Na função btnAddHandler foi feita a persistencia do objeto Todo. Perceba que essa função é responsável por gravar e atualizar o objeto, não sendo necessário que o desenvolvedor se preocupe com a operação específica, apenas que em determinado momento, o objeto deve ser persistido, gravando-o ou fazendo sua atualização.

Na função btnDelHandler foi solicitado que determinado objeto fosse apagado do banco de dados.

Na função btnPesquisarHandler foi solicitado uma busca em todos os registros de determinada Classe, e não um objeto, fique atento a essa situação.

Os demais eventos servem para a navegação da tela, portanto, não serão comentados.

Se você fez corretamente a inclusão de todos os fontes, terá o resultado:

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
						creationComplete="initApp(event);">
 
<mx:Script>
<![CDATA[
 
import org.flexduck.model.Todo;
import nz.co.codec.flexorm.EntityManager;
 
/**
 * Objeto de persistencia
 */ 
private var genericDAO 	: EntityManager	= EntityManager.instance;
 
/**
 * Classe para listar
 */
private var todoClass	: Class			= Todo;
 
/**
 * Bean
 */
[Bindable]
private var todo		: Todo			= new Todo();
 
/**
 * Evento disparado no creationComplete da aplicação para fazer a conexão com o banco de dados
 */
private function initApp(event:Event) : void
{
	var appDataBase : File = File.documentsDirectory.resolvePath("ducktodo.db");
	var sqlConn		: SQLConnection	= new SQLConnection();
	sqlConn.open(appDataBase);
	this.genericDAO.sqlConnection	= sqlConn;
}
 
/**
 * Função disparada no click do botão de "Adicionar"
 */
private function btnAddHandler(event:MouseEvent) : void
{
	this.genericDAO.save(this.todo);
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no click do botão de "Excluir"
 */
private function btnDelHandler(event:MouseEvent) : void
{
	this.genericDAO.remove(this.todo);
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no duplo click no grid de pesquisa
 */
private function doubleClickHandler(event:MouseEvent) : void 
{
	this.todo	= this.dg.selectedItem as Todo;
	this.vw.selectedIndex	= 0;
}
 
/**
 * Função disparada no click do botão de "Pesquisar"
 */
private function btnPesquisarHandler(event:MouseEvent) : void
{
	this.dg.dataProvider	= this.genericDAO.findAll(this.todoClass);
}
 
/**
 * Função disparada no click do botão de "Cadastrar"
 */
private function btnCadastrarHandler(event:MouseEvent) : void
{
	this.vw.selectedIndex 	= 0;
}
 
/**
 * Função disparada no click do botão de "Listar"
 */
private function btnListarHandler(event:MouseEvent) : void
{
	this.vw.selectedIndex	= 1;
}
 
/**
 * Função disparada no click do botão de "Novo"
 */
private function btnNovoHandler(event:MouseEvent) : void
{
	this.todo	= new Todo();
}
]]>
</mx:Script>
 
<mx:Binding destination="todo.titulo" 		source="titulo.text"/>
<mx:Binding destination="todo.descricao" 	source="descricao.text"/>
 
<mx:Panel width="500" height="250" layout="absolute" title="O que tenho para fazer?" horizontalCenter="0" verticalCenter="0">
 
<mx:ViewStack id="vw" top="0" right="0" left="0" bottom="0">
	<mx:Canvas label="Grid" width="100%" height="100%">
 
		<mx:Label x="10" y="10" text="Título" fontWeight="bold"/>
		<mx:TextInput x="10" y="29" width="460" id="titulo" text="{this.todo.titulo}"/>
 
		<mx:Label x="10" y="58" text="Descrição" fontWeight="bold"/>
		<mx:TextArea x="10" y="75" width="460" height="85" id="descricao" text="{this.todo.descricao}"/>
 
		<mx:Button x="318" y="172" label="Adicionar" id="btnAdd" click="btnAddHandler(event);"/>
		<mx:Button x="252" y="172" label="Listar" id="btnListar" click="btnListarHandler(event);"/>
		<mx:Button x="189" y="172" label="Novo" id="btnNovo" click="btnNovoHandler(event);"/>
		<mx:Button x="406" y="172" label="Excluir" id="btnDel" click="btnDelHandler(event);"/>
 
	</mx:Canvas>
 
	<mx:Canvas label="Formulario" width="100%" height="100%">
		<mx:DataGrid 	top="5" right="5" left="5" bottom="30" 
						id="dg" 
						doubleClickEnabled="true" 
						doubleClick="doubleClickHandler(event);">
			<mx:columns>
				<mx:DataGridColumn dataField="titulo"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:Button label="Pesquisar" id="btnPesquisar" click="btnPesquisarHandler(event);" bottom="5" right="5"/>
		<mx:Button label="Cadastrar" id="btnCadastrar" click="btnCadastrarHandler(event);" bottom="5" right="90"/>
	</mx:Canvas>
 
</mx:ViewStack>
 
</mx:Panel>
 
</mx:WindowedApplication>

Basta exportar sua aplicação, e tudo deverá funcionar perfeitamente.

Forte abraço e até a próxima!

Neste post quero comentar uma nova feature do Flex SDK 4 que é o “two-way data binding”, mas o que é e no que isso pode nos auxiliar no dia a dia?

Mas afinal, o que é o Data Binding? É a ação de passar valores de um objeto para outro de forma automática. Quando um objeto sofre uma alteração em determinada propriedade dele, essa alteração é refletida em algum atributo de um objeto. Esse objeto pode ou não, vir a ser o mesmo objeto que sofreu a primeira alteração.

No Flex 3.x o Data Binding possibilitava o espelhamento de informação de um objeto para outro porém o inverso não ocorria de forma automática, dessa forma, éramos obrigados a criar outro Binding, só que desta vez, fazendo a operação de forma inversa, conforme segue código abaixo:

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Binding source="campoA.text" destination="campoB.text"/>
	<mx:Binding source="campoB.text" destination="campoA.text"/>
 
	<mx:TextInput id="campoA" x="10" 	y="10"/>
	<mx:TextInput id="campoB" x="178" 	y="10"/>
 
</mx:Application>

Obviamente que isso dificultava o trabalho do desenvolvedor em seu dia-a-dia, além de aumentar o consumo de memória das aplicações.

No Flex 4.0 a Adobe preparou uma ótima surpresa para auxiliar neste problema – “Two-way Data Binding”.

Mas como ele funciona? Simples, através da declaração adicional twoWay no objeto Binding você pode definir se o binding deve enviar e receber alterações no atributo do objeto de origem.

Veja exemplo abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?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>
	</fx:Declarations>
 
	<fx:Binding source="campoA.text" destination="campoB.text" twoWay="true"/>
 
	<s:TextInput x="10" y="21" id="campoA"/>
	<s:TextInput x="146" y="21" id="campoB"/>
 
</s:Application>

Simples, dessa forma já qualquer alteração feita no TextInput “campoB” será refletida no TextInput “campoA” e vice-versa.

Também é possível fazer a declaração conforme exemplo abaixo, utilizando o @ em conjunto com os {}:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?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>
 
	</fx:Declarations>
 
	<fx:Binding source="campoA.text" destination="campoB.text" twoWay="true"/>
 
	<s:TextInput x="10" y="21" id="campoA"/>
	<s:TextInput x="146" y="21" id="campoB"/>
 
	<s:TextInput x="10" y="65" id="campoC" text="@{campoD.text}"/>
	<s:TextInput x="150" y="65" id="campoD"/>
 
</s:Application>

Eu prefiro a primeira opção, utilizando a declaração do < fx:Binding > para um melhor entendimento e ordenação do código-fonte.

Um abraço e até a próxima.

Esse ano promete, teremos o lançamento no novo Flash Builder 4 com o Flex SDK 4.0, AIR 2.0 e Flash Catalyst, além das novas versões dos softwares da Adobe para a versão CS5, a qual venho testando a alguns meses e tenho me surpreendido bastante, principalmente com o Flash CS5, agora com recursos para desenvolvimento para Iphone, mas este será um assunto específico para outro post, nesse artigo, iremos tratar apenas da instalação do AIR 2.0 dentro do Flash Builder 4.

O primeiro passo é fazer o download da nova versão do AIR 2.0 disponível no Adobe Labs. Para fazer o download clique aqui. No meu caso, eu fiz o download e salvei o arquivo AIR20_win_sdk_010710.zip dentro da pasta sdks\ da instalação do meu Flash Builder.

Feito o download, você deve duplicar a pasta 4.0.0 que contem a nova versão do SDK do Flex, e após isso adicionar o conteúdo do SDK da nova versão do AIR para dentro da nova pasta que você acabou de duplicar. No meu caso, antes de copiar os arquivos do SDK do AIR eu alterei o nome da pasta para “4.0.0 + AIR 2.0.0 Beta” e depois copiei todos os arquivos do novo SDK do AIR para dentro da nova pasta. Confirmei que todos os arquivos que já existiam com o mesmo nome deveriam ser sobre-escritos.

Ok, feito isso, podemos abrir o Flash Builder e fazer a configuração do SDK para utilização.

Ao abrir o Flash Builder, vá ao menu: Window -> Preferences. Nesta janela, iremos adicionar um novo SDK para o Flash Builder, conforme a imagem abaixo:

Após clicar em “Add”, seguimos com a configuração abaixo. Perceba que eu adicionei ao “Flex SDK Location” o caminho do SDK copiado do 4.0.0 e com a adição do SDK no AIR 2.0.0.

E como resultado final:

Agora iremos criar um novo projeto, conforme as configurações da tela abaixo. Atente para a opção aonde eu digo que quero usar uma versão específica do SDK e marco o SDK “4.0.0 + AIR 2.0.0Beta“.

Clicando em “Finish”, uma vez que não será necessário mais nenhuma configuração, nosso projeto está apto a trabalhar com a versão 2.0 do AIR SDK.

Dentro do arquivo, Main-app.xml na segunda linha, podemos ver a indicação da versão do SDK no arquivo de configuração para compilação do projeto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.0beta2">
 
<!-- Adobe AIR Application Descriptor File Template.
 
	Specifies parameters for identifying, installing, and launching AIR applications.
 
	xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.0beta2
			The last segment of the namespace specifies the version 
			of the AIR runtime required for this application to run.
 
	minimumPatchLevel - The minimum patch level of the AIR runtime required to run 
			the application. Optional.
-->

Outro teste comum que você poderá encontrar em outros tutoriais com o mesmo objetivo que este é a instância de um objeto do tipo NativeProcess, que é uma classe específica desta versão do AIR, disponível no pacote: flash.desktop.. Você poderá fazer o teste da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
 
			private var nativeProcess : NativeProcess;
 
		]]>
	</fx:Script>
</s:WindowedApplication>

Bom pessoal, espero ter ajudado a quem quer testar e ainda tinha dúvidas de como proceder a instalação do AIR 2.0 dentro do Flash Builder 4.

Um abraço e até a próxima!