*** 6/8 UPDATE:  We have now added Flex Scaffolding in MyEclipse for Spring 8.6!!  Create an entire Spring Flex CRUD app in a matter of seconds.  Try it by downloading the 8.6 milestone. Check out the what's generated blog or the getting started video.

UPDATES: This blog has been updated for MyEclipse for Spring 8.5, Spring 3.0, and Flash Builder 4.  If you are looking for the previous version that includes the MyEclipse for Spring milestone, Spring 2.5, and Flex Builder 3, download the archived pdf.

In Part 1 of this example, I covered prerequisites, project creation and setup, and scaffolding in MyEclipse for Spring.  In Part 2, I will discuss adding the necessary pieces to get a Spring application Flex enabled through BlazeDS remoting.

This blog is divided into 2 parts:

web.xml

  1. Add the messagebroker servlet mapping: Insert the following code where the servlet mappings are defined.  This mapping is used by the Flex remoting object.
    <servlet-mapping>
        <servlet-name>ClassicFlexCars Servlet</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
    </servlet-mapping>
  2. Add the flex context file: Find where the ClassicFlexCars Servlet is defined.  In the param-value element for the contextConfigLocation, add /WEB-INF/flex-servlet.xml.  So the resulting servlet block should look like:
    <servlet>
        <description>generated-servlet</description>
        <servlet-name>ClassicFlexCars Servlet</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/flex-servlet.xml,
              classpath:ClassicFlexCars-generated-web-context.xml,
              classpath:ClassicFlexCars-web-context.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

flex-servlet.xml

  1. Add a file, named flex-servlet.xml, to the ClassicFlexCars > WebRoot/WEB-INF folder with the following contents:
    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
     xmlns:flex="http://www.springframework.org/schema/flex"
     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">        
    
         <flex:message-broker/>
    
         <!-- Expose the ProductService bean for BlazeDS remoting -->
         <flex:remoting-destination ref="ProductService" />
    
    </beans>

services-config.xml

  1. When adding the Flex Project Type, it adds a handful of files to the WebRoot/WEB-INF/flex folder.  Feel free to use whatever Flex provides.  However, to just get remoting up and running on a channel, all you need in the services-config.xml file is the following:
    <?xml version="1.0" encoding="UTF-8"?>
    <services-config>
    
        <services>
            <default-channels>
                <channel ref="my-amf"/>
            </default-channels>
        </services>
    
        <channels>
            <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
            <endpoint
           url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf"
           class="flex.messaging.endpoints.AMFEndpoint"/>
            </channel-definition>
        </channels>     
    </services-config>

    NOTE: Anytime this file is udpated or modified, you'll want to force a recompile of the swf file. These configurations are compiled into the flash file.

Add the spring-flex jar

  1. Add The following jar either through classpath containers or the WEB-INF/lib folder.  This jar can be found at the spring-flex download:
    • org.springframework.flex-1.0.3.RELEASE.jar

Flex UI - ClassicFlexCars.mxml

  1. To get a simple list view of the miniature cars, all that is needed is a remoting object defined, a data grid, and a button to load the data:
    <?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" minWidth="955" minHeight="600">
    
        <fx:Declarations>
            <s:RemoteObject id="ro" destination="ProductService" />
        </fx:Declarations>
    
        <s:VGroup horizontalAlign="left">
            <mx:AdvancedDataGrid dataProvider="{ro.loadProducts.lastResult}"/>
            <s:Button label="Get Cars" click="ro.loadProducts()"/>
        </s:VGroup>
    </s:Application>
    

Run it on BlazeDS

Add the BlazeDS tomcat server to the MyEclipse Server view by right-clicking the Servers pane and clicking Configure Server Connector.  Configure the Tomcat 6.x server to point to the BlazeDS tomcat directory.  Then add the ClassicFlexCars project to the server and run!  Browse to http://localhost:8400/ClassicFlexCars/ClassicFlexCars.html

References

< Page 1 | 2

Related Posts

Angular 4 — the Butterfly, Not the Cocoon. Metamorphosis doesn’t have to be ugly: forget about Kafka or what a butterfly has to go through before it shows its amazing apparel. Angular 4 has evolved for you and is showing its best colors. “Just how different is it from Angular 2?”, you might wonder. There are some overall and package-specific changes, as well as new features.First of all, it...
The Time Has Come to Learn TypeScript. TypeScript or JavaScript?  Now, that is the question!  If TypeScript, a typed superset of JavaScript, compiles down to JavaScript, the obvious query is why have it in the first place.  Another logical inquiry is whether it’s ideal for everyone, how and where it can be used.There are two good reasons why developers should bother learning TypeScript ...
Darkest Dark Theme, Angular 4.0 Support, MyEclipse... We are excited! We have so much going on, and we wanted you to be the first to know all about our recent updates and new products. Introducing Darkest DarkLike many of you, we wanted Eclipse looking vibrant. We wanted our IDE to make us excited, and not feel like we are still coding in the early 2000s. That’s how it all started, and the “Darkest Da...
MyEclipse 2017 Stable 1.0 is out! Earlier this year we were really excited about being able to provide you with initial support for Angular 2. Well, now with this release you also get tooling support for Angular 4. Not only that, but we wanted to make sure you were able to update simply to Angular 4 -- with a one-click flow that does most of the steps for you. Once you are all set,...

Posted on Feb 16th 2010