Flex 4
Integração Flex 4 & Spring 3 com Spring BlazeDS [Parte I]
22/06/10
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!
21/06/10
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
10/01/10
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:
- Download and install Flash Builder 4 beta (requires free Adobe membership).
- 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.
- 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
- Day 1 project files (ZIP; 36.2 MB)
Exploring the basics
- Introducing Flex and the Adobe Flash Platform (8:37)
- Exploring Adobe Flash Builder 4 and projects (17:13)
- Understanding namespaces (7:01)
- Managing code and compiling applications (10:08)
- Laying out a form in Design mode (12:25)
- Introducing styling and skinning (8:34)
- Exercise: Creating and skinning an application
- Introducing data binding (5:35)
- Introducing data retrieval and handling with HTTPService (24:14)
- Exercise: Displaying retrieved XML data in application controls
Introducing object-oriented programming
- Implementing OOP concepts in Flex (31:06)
- Exercise: Creating MXML custom components with properties
- Programming ActionScript classes (26:26)
- Exercise: Creating an ActionScript class and instances
Understanding components and layouts
- Laying out Spark and MX components in containers (16:09)
- Exercise: Experimenting with container layouts
- Using constraints to control component layout (6:47)
- Exercise: Implementing a constraint-based layout
Day 2
- Day 2 project files (ZIP; 44.9 MB)
Handling events
- Implementing event handlers (12:40)
- Exercise: Handling a user event
- Understanding the event object and bubbling (21:11)
- Exercise: Using the event object
- Adding event listeners with ActionScript (7:48)
- Exercise: Using the addEventListener() method
Validating and formatting data
- Using formatters (5:25)
- Exercise: Formatting dates
- Validating form data (16:41)
- Exercise: Validating form data
Navigating application content
- Understanding MX navigator containers (10:13)
- Exercise: Navigating using MX navigator containers
- Controlling application states (16:11)
- Exercise: Creating and navigating application states
Animating components and states
- Animating components with effects (15:47)
- Exercise: Animating components with effects
- Animating states with transitions (24:32)
- Exercise: Applying transitions to view states
Day 3
- Day 3 project files (ZIP; 31.7 MB)
Controlling text display
- Introducing the text controls (14:12)
- Exercise: Using text controls
- Utilizing the Text Layout Framework (12:44)
- Exercise: Using text layout features
Controlling visual display with CSS
- Defining styles in CSS (9:59)
- Exercise: Defining selector styles
- Introducing advanced CSS selectors (8:29)
- Exercise: Using advanced CSS selectors
Skinning Spark components
- Introducing skinning (10:58)
- Drawing with FXG (3:25)
- Adding scrollbars (3:10)
- Exercise: Creating and applying skins
- Implementing skin states (7:55)
- Exercise: Creating states and transitions for a skin
- Implementing skin parts (9:11)
- Creating custom skin properties (8:09)
- Exercise: Customizing and reusing skins
Day 4
- Day 4 project files (ZIP; 35 MB)
Extending events
- Creating an event type and dispatching the event object (13:34)
- Exercise: Creating an event type and dispatching the event object
- Extending the Event class to pass data in the event object (18:16)
- Exercise: Extending the Event class to pass data in the event object
Accessing remote data
- Retrieving and handling data with HTTPService (17:57)
- Exercise: Populating an application with data and handling faults
- Introducing the MVC pattern (7:34)
- Exercise: Separating the model from the view
- Making HTTP request with parameters (6:01)
- Exercise: Making an HTTP request with parameters
- Using the Flash Builder data wizard (2:57)
- Exercise: Creating a master/detail interface with a wizard
Creating a typed data model
- Implementing a typed data model (12:49)
- Exercise: Creating and using a typed data model
- Implementing two-way binding (4:05)
- Exercise: Binding to a data model
- Using E4X to manipulate loaded data (No Link)
- Exercise: Manipulating data using E4X (No Link)
Day 5
- Day 5 project files (ZIP; 53.6 MB)
Displaying data with the DataGroup container
- Representing data in default item renderers (13:07)
- Exercise: Passing data to item renderers for display
- Creating a custom item renderer (9:17)
- Exercise: Displaying dynamic data in a custom item renderer
- Skinning the DataGroup container (8:01)
- Exercise: Skinning the DataGroup container
Displaying Data with the DataGrid control
- Creating and formatting the DataGrid control (12:45)
- Exercise: Using the DataGrid control
- Creating item renderers and item editors (14:26)
- Exercise: Creating item renderers and item editors
- Handling item renderer events (2:48)
- Exercise: Handling a DataGrid itemClick event
Deploying Flex and AIR Applications
- Understanding the bin-debug folder (6:51)
- Creating a production build (3:06)
- Exercise: Creating a production build
- Creating an Adobe AIR application (9:48)
- Exercise: Deploying to the desktop
This work is not licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
Popularity: 31% [?]








