Flex 4

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

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!

Popularity: 100% [?]

Tour de Flex 2.0 – Cerca de 500 exemplos Flex!

Adobe acaba de lançar o novo Tour de versão Flex 2.0 , que agora contém cerca 500 exemplos Flex! A nova versão tem novos exemplos (apenas disponível na versão AIR do Tour de Flex), incluindo:

  • Detecção de armazenamento em massa
  • Processo Nativo
  • Abrir com o aplicativo padrão
  • Socket Server

Além disso, existem alguns bons exemplos do novo Flash Player 10.1 e AIR 2 APIs, incluindo:

  • Handler de erro global
  • Globalização / Internacionalização
  • Acesso ao Microfone

Aqui está um exemplo do Doug McCune’s Physics Form bem legal e um dashboard em tempo real do Tour de Flex: real-time Tour de Flex Dashboard.

Se você já tem instalado o Tour de Flex, então ele deve fazer o auto update para a versão mais recente quando você iniciá-lo. Caso contrário, instale-o a partir daqui:

Popularity: 51% [?]

Flex 4 in a week: Video Download Links

Download Flex 4 Videos (.flv):

Download Details:

Total Files : 53

Total Size: 1.38GB

Day 1: 13 files -> 387 MB

Day 2: 10 files -> 308 MB

Day 3: 11 files -> 248 MB

Day 4: 9 files -> 229 MB

Day 5: 10 files -> 246 MB

Basic Information:

Learn to use Flex 4 beta and Flash Builder 4 in a week by stepping through this video training course.

To get started, follow these steps:

  1. Download and install Flash Builder 4 beta (requires free Adobe membership).
  2. Download the project files for each training day.The project files include the starter and solution files for the listed exercises as well as transcripts of the training videos.Note: If you prefer, you can also download the starter and solution files for each exercise individually from the respective exercise pages.
  3. To maximize your learning, view the videos and complete the exercises in the order listed.

Important: This training is based on the Flex 4 beta 2 and Flash Builder beta 2 versions. Like beta software, this course is still in active development. If you run into problems and have questions, please post your question to the Flex in a Week forum. Also help us help you learn Flex better by telling us what works and what doesn’t work for you in the way this course is structured and presented, so we can make any necessary changes in time for the Flex 4 and Flash Builder releases.

Start Downloading :)

Day 1

Exploring the basics

Introducing object-oriented programming

Understanding components and layouts

Day 2

Handling events

Validating and formatting data

Navigating application content

Animating components and states

Day 3

Controlling text display

Controlling visual display with CSS

Skinning Spark components

Day 4

Extending events

Accessing remote data

Creating a typed data model

Day 5

Displaying data with the DataGroup container

Displaying Data with the DataGrid control

Deploying Flex and AIR Applications

:) This work is not licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.

Popularity: 31% [?]