This post is mainly about flex and Parsley. We will go into depth of the architecture of the client and how to talk to the server. I will describe the communication with the application that makes use of the axon framework, but I will not go into a lot of details. If you want more information about the Axon Framework I suggest you go to the website http://www.axonframework.org. There is good documentation available in the reference manual. If you want to learn about flex and the Parsley framework in general, please read on.

What is Parsley and why use it?

Parsley is all about decoupling. It is a dependency injection framework and is has strong support for messaging. I like the way the dependency injection as well as message handling is configured. By using [INJECT] on a parameter, you tell parsley to inject an object of the type as specified by the parameter. We will see examples of the usage later on. Other things to inject are the [MessageDispatcher] that enables dispatching messages from each component.

The final component I want to mention is the DynamicCommand object. I use it more as a controller, still it is an interesting concept. We create one component that receives a message, does a remote call and handles the result of that call. All in one object. Again, an example will follow later on.

Structure of the Parsley solution

The following image gives you an idea of the overall solution of parsley. The image shows you the relationship between the view components, the controllers and the model. Messages are send from the view to the controller. The controller interacts with the remote components, updates the model and determines which view should be active. The controllers can also respond to remote push notifications, more on that later on.

Configure parsley

To enable injection and message handling, parsley needs it’s own context to be setup. The easiest way to do this is using an mxml object and an mxml ContextBuilder object. The next code block shows you the complete configuration of the framework. Within the configuration you can see the controllers being configured as DynamicCommand objects. You also find there the RemoteObject, the Consumer and the model objects. They should all be familiar from the previous image.

<mx:Object xmlns:mx="http://www.adobe.com/2006/mxml"
           xmlns:sf="http://www.spicefactory.org/parsley"
           xmlns:commands="org.axonframework.examples.addressbook.commands.*"
           xmlns:model="org.axonframework.examples.addressbook.model.*"
           xmlns:cons="org.axonframework.examples.addressbook.consumer.*"
        >
    <mx:RemoteObject
            id="remoteAddressService"
            destination="addressService"
            endpoint="messagebroker/amf"
            showBusyCursor="true"/>
    <cons:Consumer/>

    <sf:DynamicCommand type="{NewAddressController}" messageType="{NewAddressMessage}"/>
    <sf:DynamicCommand type="{NewContactController}" messageType="{NewContactMessage}"/>
    <sf:DynamicCommand type="{SearchAddressController}" messageType="{SearchForAddressesMessage}"/>
    <sf:DynamicCommand type="{SelectContactController}" messageType="{SelectContactMessage}"/>
    <sf:DynamicCommand type="{ShowContactsController}" messageType="{ShowContactsMessage}"/>
    <sf:DynamicCommand type="{UpdatedContactController}" messageType="{UpdatedContactMessage}"/>
    <sf:DynamicCommand type="{UpdatedContactAddressController}" messageType="{UpdatedContactAddressMessage}"/>
    <sf:DynamicCommand type="{RemoveAddressController}" messageType="{RemoveAddressMessage}"/>
    <sf:DynamicCommand type="{RemovedItemController}" messageType="{RemovedItemMessage}"/>
    <sf:DynamicCommand type="{RemoveContactController}" messageType="{RemoveContactMessage}"/>

    <model:AddressModel/>
    <model:ContactModel/>

    <mx:Script><![CDATA[
        import org.axonframework.examples.addressbook.commands.*;
        import org.axonframework.examples.addressbook.messages.*;
        ]]></mx:Script>
</mx:Object>

That is all that parsley needs to know. The final step is to build the context using the special mxml tag. I have included the next tag in my Main.mxml.

	<sf:ContextBuilder config="ParsleyConfiguration"/>

Next we will focus on the different components

Messages

We make use of two types of messages:

• CommandMessage – tells the receiver to do something.
• NotificationMessage – tells the receiver that something happened

View

Each view component should focus on presenting data and sending messages. The data is injected as a model object. Messages can be dispatched by the special parsley provided dispatcher. Than parsley also provides a Context object that can be used when pop-ups are needed. The following code block shows you the configuration of these mentioned parameters from the ContactsView.mxml component. You can also find a function that is called by pushing a button to send a message to obtain details about a certain contact.

[Inject]
[Bindable]
public var contactModel:ContactModel;
[MessageDispatcher]
public var dispatcher:Function;
[Inject]
public var context:Context;

private function showContactDetails(event:ListEvent):void {
    dispatcher(new SelectContactCommandMessage(event.currentTarget.selectedItem as Contact));
    currentState = 'detail';
}

This is all pretty straightforward, if you need the code check out the sources from the google code project. Let us follow what happens when obtain details button is pushed and the SelectContactMessage is dispatched.

Controller

By dispatching this message, parsley selects the SelectContactController since the argument of the execute method is that exact message. The following code block gives you the complete implementation of the SelectContactController. The super class of all controllers contains a method to handle the faults coming from the remote calls and it makes the dispatcher as well as the remote object available. This class is also in the code block. In the code check how the dispatcher, the RemoteObject and the contactModel are injected. Another thing to notice here is that we only go to the server if we have not cached the contact details locally. So what if the contact details get updated on the server? Or if new contacts are added on the server? More on that in the next section.

public class BaseController {
    [MessageDispatcher]
    public var dispatcher:Function;

    [Inject(id="remoteAddressService")]
    public var addressService:RemoteObject;

    public function BaseController() {
        // default constructor
    }

    public function error(fault:Fault):void {
        dispatcher(new ErrorNotificationMessage(fault.faultString));
    }

}

public class SelectContactController extends BaseController {
    [Inject]
    public var contactModel:ContactModel;

    private var findAddressesFor:Contact;

    public function SelectContactController() {
        super();
    }

    public function execute(message:SelectContactCommandMessage):AsyncToken {
        var cachedContact:Contact = contactModel.findContactByIdentifier(message.contact.uuid);
        contactModel.selectedContact = cachedContact;
        findAddressesFor = cachedContact;

        if (!cachedContact.detailsLoaded) {
            return addressService.obtainContactAddresses(message.contact.uuid);
        }
        return null;
    }

    public function result(addresses:ArrayCollection):void {
        var cachedContact:Contact = contactModel.findContactByIdentifier(findAddressesFor.uuid);
        cachedContact.addresses = addresses;
        cachedContact.detailsLoaded = true;
    }
}

You have now seen the most important parts of the mechanism to go from a view to a controller. Did you notice that we send an ErrorNotificationMessage when something goes wrong in the server communication? The notification messages are handled in the OverallView component. Other notification messages are also handled in this component. The following code block gives a piece of code that handles the message.

[MessageHandler]
public function handleActivityLogEvent(message:NotificationMessage):void {
    createNotification(message.message, Notification.INFO);
}

Communication with the server

The server is used to send data to and of course to obtain data from. The easiest way is when the flex client takes control. As we saw in the parsley configuration, the remote object is configured as you would in any flex client. In the code from the SelectContactController we can see the call to the server. The result function is called when the server returns a result. This is not very complicated to understand.

Let us have a look at how this is handled on the server. Using spring blazeds integration this becomes very easy as well

BlazeDS and Spring BlazeDS Integration

Doing flex remoting with the Spring BlazeDS integration is so easy that anybody can use it. In the web.xml you configure the dispatcher servlet. The config file is loaded using the following tag in a spring configuration file.

<flex:message-broker services-config-path="classpath*:services-config.xml"/>

Now I use annotations to explicitly export some of the functions as remote services. The following code block gives you the example of obtaining address details for a contact. Notice that the name of the method is the same as the method call used in the flex code. By adding the annotation @RemotingInclude we tell spring to expose this as a remote service using BlazeDS.

    @RemotingInclude
    public List<AddressDTO> obtainContactAddresses(String contactIdentifier) {
        List<AddressDTO> foundAddresses = new ArrayList<AddressDTO>();

        List<AddressEntry> addressesForContact =
                repository.findAllAddressesForContact(UUID.fromString(contactIdentifier));
        for (AddressEntry entry : addressesForContact) {
            foundAddresses.add(AddressDTO.createFrom(entry));
        }
        return foundAddresses;
    }

The repository is based on the query database of Axon. I am not going into all the Axon Framework details here. Check the references if you want to learn more about Axon.

That is all there is to it, now you can obtain data from the server. Sending data to the server is done exactly the same.

Receiving events

I already mentioned that we cache data in the flex client. Still we want to have up-to-date data. Using the Axon framework and Spring BlazeDS integration it is not hard to push data to the client from the server when new or updated data is available. Again this blog does not have the intention to fully discuss the axon framework.

Catching and dispatching events on the server

We focus on the event that a new contact is created. The following code shows how you can register a listener for new contacts being created using the Axon framework. The listener makes use of the UpdateMessageProducerForFlex. Axon registers listeners based on the annotation @EventHandler and the argument of the method, in this case the ContactCreatedEvent.

private UpdateMessageProducerForFlex producer;
@EventHandler
public void handleContactCreatedEvent(ContactCreatedEvent event) {
    logger.debug("Received and event with name {} and identifier {}", event.getName(), event.getEventIdentifier());
    ContactDTO contactDTO = new ContactDTO();
    contactDTO.setName(event.getName());
    contactDTO.setUuid(event.getAggregateIdentifier().toString());
    producer.sendContactUpdate(contactDTO);
}

This is the Axon part, the producer is used to send the message to the clients. Sending the message to the flex client is done using the spring BlazeDS integration. The following piece of code shows the producer. After that the configuration of the server.

public class UpdateMessageProducerForFlex {
    private MessageTemplate template;

    @Autowired
    public UpdateMessageProducerForFlex(MessageTemplate template) {
        this.template = template;
    }

    public void sendContactUpdate(final ContactDTO contactDTO) {
        template.send(contactDTO);
    }
}

    <flex:message-destination id="event-bus"/>

    <bean id="defaultMessageTemplate" class="org.springframework.flex.messaging.MessageTemplate">
        <property name="defaultDestination" value="event-bus"/>
    </bean>

The value for the default destination “event-bus” is very important. This needs to be configured in the client as well. Speaking of the client …

Catching and dispatching events at the client

Within the parsley configuration we have configured an object called Consumer. This object configures the client side of the poller and registers it on startup. This registration needs to be done at the right time. Parsleys provides the [Init] notation for that.

The consumer receives messages from the server and dispatches new Notification messages to the client side application. Controller objects pick up these events and update the model. The following code block shows the complete consumer object. Notice the configuration of the ChannelSet and the consumer.

<mx:Object xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        [Init]
        public function init():void {
            consumer.subscribe();
        }

        [MessageDispatcher]
        public var dispatcher:Function;

        public function messageHandler(event:MessageEvent):void {
            if (event.message.body is Contact) {
                dispatcher(new UpdatedContactNotificationMessage(event.message.body as Contact));
            } else if (event.message.body is Address) {
                dispatcher(new UpdatedContactAddressNotificationMessage(event.message.body as Address))
            } else if (event.message.body is Removed) {
                dispatcher(new RemovedItemNotificationMessage(event.message.body as Removed));
            }

        }

        public function faultHandler(event:Event):void {
            dispatcher(new ErrorNotificationMessage("Fault while receiving message" + event.toString()))
        }

        ]]></mx:Script>
    <mx:Consumer id="consumer" destination="event-bus" channelSet="{cs}" message="messageHandler(event)"
                 fault=" faultHandler(event)"/>

    <mx:ChannelSet id="cs">
        <mx:AMFChannel url="messagebroker/pollingamf"/>
    </mx:ChannelSet>

</mx:Object>

Wrapping up

That is it. We have touched all components. I like how clean you can develop flex clients using Parsley and how easy it is to interact with a server using the Spring BlazeDS integration. Also the way to handle events using Axon makes this a very nice way to keep the data in your flex client up to date.

Hope you likes the sample, sources can be found in google code. Check the addressbook sample project of the axon framework.

The following image shows a screendump of the sample, after that are some references.

• http://code.google.com/p/axonframework/source/browse
• http://www.spicefactory.org/parsley/
• http://www.springsource.org/spring-flex
• http://www.axonframework.org

I was some time a go I had a look at the sample, since than a lot of people keep coming back to it. I still get questions about it. Therefore I decided to upgrade the sample. This blog post is about the upgrade I did which are mainly upgrades in versions of the libraries and the build configuration. Still I think it is worthwhile to have a look at it.

Before I start with this blog post I need to warn you that I am not going to explain a lot of the internals. Please browse my other flex 3 blog items to find out more.

Library upgrade

The client (flex) side

For the flex building I use Mate. I think mate is a nice framework, but it is not very active. Not many improvements are created. Still it does the job. I am also creating a flex sample for the Axon Framework using Parsley. Stay tuned for a blog post that is around the corner about this sample. I upgrade the mate to release 0.8.9

Another framework I use on the flex side is the spring-actionscript project. This project changed a lot since the last time I used it. I am now using version 0.8.1. This project is now split up into a few other modules. I did have a problem with the StringUtils class. This is in as3commons:as3commons-lang. By transitive dependecy you get 0.1 of this library. I had to upgrade to version 0.2 to make it work.

The serverside

I did not upgrade a lot on the serverside. I could have upgrade to spring 3, I’ll wait till it becomes the default for the spring blazeds integration project. They still use version 2.5.6, so I’ll stick with that. I did upgrade the Spring Blazeds Integration project to the latest release: 1.0.2.RELEASE.

Building and developing

The biggest change was in the maven configuration. Flex-mojos made a lot of improvements and is now tightly integrated with Intellij. To me that is incredibly important. My development speed with flex has enormously increased.

I use flex-mojos version 3.5.0. The configuration is now very easy. For the war project you just need to add the following plugin plus configuration:

<plugin>
    <groupId>org.sonatype.flexmojos</groupId>
    <artifactId>flexmojos-maven-plugin</artifactId>
    <version>${flex-mojos.version}</version>
    <executions>
        <execution>
            <goals>
                <goal>copy-flex-resources</goal>
            </goals>
        </execution>
    </executions>
</plugin>

Now let us have a look at the configuration of the swf file. Again it is pretty straightforward. You have to add the flex-framework as a dependency.

<dependency>
    <groupId>com.adobe.flex.framework</groupId>
    <artifactId>flex-framework</artifactId>
    <version>${flex.sdk.version}</version>
    <type>pom</type>
</dependency>

Finally we have to configure the flex-mojos compiler plugin.

<plugin>
    <groupId>org.sonatype.flexmojos</groupId>
    <artifactId>flexmojos-maven-plugin</artifactId>
    <version>${flex-mojos.version}</version>
    <extensions>true</extensions>
    <configuration>
        <debug>true</debug>
        <configurationReport>true</configurationReport>
    </configuration>
    <dependencies>
        <dependency>
            <groupId>com.adobe.flex</groupId>
            <artifactId>compiler</artifactId>
            <version>${flex.sdk.version}</version>
            <type>pom</type>
        </dependency>
        <dependency>
            <groupId>com.adobe.flex.compiler</groupId>
            <artifactId>asdoc</artifactId>
            <version>${flex.sdk.version}</version>
            <classifier>template</classifier>
            <type>zip</type>
        </dependency>
    </dependencies>
</plugin>

The configurationReport parameter is used by intellij. This creates an xml file that intellij uses to set you compiler properties in intellij. Very nice.

Repositories

I also want to mention the additional repositories I configured. I added a repository for libraries coming from flex-mojos and another library for the spring-actionscript libraries.

<repository>
    <id>flexmojos-repository</id>
    <url>http://repository.sonatype.org/content/groups/flexgroup/</url>
</repository>
<repository>
    <id>yoolab.org-releases</id>
    <url>http://projects.yoolab.org/maven/content/repositories/releases</url>
    <releases>
        <enabled>true</enabled>
    </releases>
</repository>

The only library I still cannot find online is Mate. Therefore I added it to my google code repository. Please do the same thing if you need it for your own project. Do not use my repository because I will reach my maximum bandwidth and then I have to take it away again.

If you want to check out the state of the project while I was writing this blog, use the following tag:

http://code.google.com/p/gridshore/source/browse/#svn/tags/books-overview-1.0.0

Hope this is helpfull when exploring my sample, feel free to post remarks, improvements and questions.

With the next posts I moved on to use maven, which in the beginning was not easy, but thanks to the excellent flex-mojos plugin from velo. In the beginning of this year I started blogging about the springsource coming into the flex domain for real. Two projects, one for the spring style of programming in the ActionScript language. The other one for integrating BlazeDS and the spring framework. I wrote multiple posts about the new spring project. This post will probably not be the last. But if you are using Mate as well as the spring BlazeDS Integration project. This is a must read post. Maybe only to laugh at what I have done, but I hope to be amazed how simple a full flexed application can be when you combine all these technologies.

Kind of a long introduction, but what is this post really about? I have been using a sample application called books-overview that I have been using for flex based applications. I have been adding stuff to it once in while, but now I have completely refactored it. I am using a framework called Mate, have made it modular using the flex-mojos plugin and I have adopted the Spring BlazeDS integration project. Time to explain the way I handle security now, how I am using maven and show the extension to Mate for security.

Read on to find out how I did it and like always leave a comment if you like it or if you have improvements.

The books-overview sample

The books overview sample is a very easy application. You need to login to get access to the application. You can get two different roles. A normal user can look at the books, and admin user can also add books. The domain model is very easy. There are two entities; book and author. A book can have multiple authors and an author can write multiple books. I think the architecture is pretty straightforward. The basic business layer, dao layer, domain component and a web project containing the BlazeDS and flex components. We use spring-security to implement authentication as well as authorization. All data is stored in an in memory database and everything is build using maven. You can find the code in google code, checkout the trunk with the following command:

svn checkout http://gridshore.googlecode.com/svn/trunk/books-overview gridshore-books-overview

To tests if it works, you can use the following commands:

• step into the directory where you just checked out the sample
• mvn clean install (you might have to install some artifacts yourself that are not available in a repository)
• cd books-web
• mvn clean jetty:run-war
• open your browser with the url: http://localhost:8080/books-web

You should see the login screen, enter user admin with password admin and you should see the following screen:

It looks like a pretty easy screen, but a lot has happened before this screen is presented to you. Most important to know for now is that the New Book button is only available when logged in as admin. The name can be seen in the logout button on the right. This time with the label logout admin. You can now experiment with the application a bit. That way you will better understand what is happening in the code.

Setting up the maven build

For my development I use a combination of building with maven and writing code within intellij. Maybe I should invest more time to build with intellij as well, but I keep having problems with it. The workflow of building with maven in a command line is now so easy that I settle with that. Though I do miss the debugging, maybe I’ll step into it once more. A very cool feature of intellij is that it can group projects into modules. You can make intellij create these modules automatically based on maven structures. Pom projects become modules. That way grouping your flex projects to give them common dependencies becomes very easy. That is what I have done for the sample.

Lets have a look at the dependencies and some build specifics. The parent pom contains the following dependencies: flex.sdk.version=3.2.0.3958, spring-actionscript=0.7.1, mate.version=0.8.7.1, flex-mojos.version=3.2.0

<dependency>
    <groupId>com.adobe.flex.framework</groupId>
    <artifactId>flex-framework</artifactId>
    <version>${flex.sdk.version}</version>
    <type>pom</type>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-actionscript</artifactId>
    <version>${spring-actionscript.version}</version>
    <type>swc</type>
</dependency>
<dependency>
    <groupId>com.asfusion</groupId>
    <artifactId>mate</artifactId>
    <version>${mate.version}</version>
    <type>swc</type>
</dependency>
<!-- testing -->
<dependency>
    <groupId>org.sonatype.flexmojos</groupId>
    <artifactId>flexmojos-unittest-support</artifactId>
    <version>${flex-mojos.version}</version>
    <type>swc</type>
    <scope>test</scope>
</dependency>

The build section for both of the flex modules is the same. The only difference is the packaging. For the security model it is swc and for the mate module it is swf. The mate modules is actually not a very good name, it contains the application, maybe I should call it main or so. The build section of the pom looks like this:

    <build>
        <sourceDirectory>src/main/flex</sourceDirectory>
        <testSourceDirectory>src/test/flex</testSourceDirectory>
        <plugins>
            <plugin>
                <groupId>org.sonatype.flexmojos</groupId>
                <artifactId>flexmojos-maven-plugin</artifactId>
                <version>${flex-mojos.version}</version>
                <extensions>true</extensions>
                <configuration>
                    <contextRoot>/books-web</contextRoot>
                    <mergeResourceBundle>true</mergeResourceBundle>
                    <resourceBundlePath>${basedir}/src/main/locale/{locale}</resourceBundlePath>
                    <locales>
                        <locale>en_US</locale>
                        <!--<locale>nl_NL</locale>-->
                    </locales>
                </configuration>
            </plugin>
        </plugins>
        <defaultGoal>install</defaultGoal>
        <resources>
            <resource>
                <directory>${basedir}/src/main/resources</directory>
            </resource>
        </resources>
    </build>

The other big maven thing to configure is the server side. This you can find in the books-web project. There are dependencies for BlazeDS and the spring-flex project containing the BlazeDS spring integration. Please check the code if you want to see more of it. The last thing I want to show about maven are the repositories I use to find most of the artifacts. You do need to install some manually, but most of them come from an existing repository:

    <repositories>
        <repository>
            <id>flex-mojos-repository</id>
            <url>http://repository.sonatype.org/content/groups/public</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
        <repository>
            <id>fnh</id>
            <url>http://fna.googlecode.com/svn/trunk/fna/fna_m2_repository/</url>
        </repository>
        <repository>
            <id>Servebox</id>
            <url>http://maven.servebox.org/repository</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>

        <repository>
            <id>spring-milestone</id>
            <name>Spring Portfolio Milestone Repository</name>
            <url>http://maven.springframework.org/milestone</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>flex-mojos-repository</id>
            <url>http://repository.sonatype.org/content/groups/public</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>

Enough about maven, lets move on to the flex side.

Introducing Mate, a flex framework

Mate is a tag-based, event-driven Flex framework. At least that is what the website states. Event driven is very important. If you follow the recommended way to create your application you get a clean separation of front end components that show data, forms and interaction components. Each action should lead to an event, which is handled by Mate. Most of the logic is put into manager components.

Lets have a look at what happens when you click on the All Books button. The MainNavigation.mxml contains a button that calls the following code when the button is clicked.

private function doObtainAllBooks():void {
    var event:BooksEvent = new BooksEvent(BooksEvent.OBTAIN_ALL_BOOKS);
    dispatchEvent(event);
}

As you can see, this only dispatches and event. Mate uses an mxml component with a lot of special tags to handle events. This handling can result in calling remote services, manager classes, dispatching new events and injecting data into view components. The following code block shows the capturing of this event, calling a remote service to obtain the books, giving the books to a manager, injecting the results into the AllBooks.mxml view component. Finally a new navigation event is dispatched to open the view component. The names of the tags give a clear description of what is going on.

<EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/">
    ...
    <mx:RemoteObject id="booksService"
                     endpoint="http://{props.host}:{props.port}/{props.webcontext}/messagebroker/amf"
                     destination="remoteBookManager"/>

    <EventHandlers type="{BooksEvent.OBTAIN_ALL_BOOKS}" debug="true">
        <RemoteObjectInvoker instance="{booksService}" method="obtainAllBooks">
            <resultHandlers>
                <MethodInvoker generator="{BooksManager}" method="storeBooks" arguments="{resultObject}"/>
                <EventAnnouncer generator="{MainNavigationEvent}" type="{MainNavigationEvent.NAVIGATION}">
                    <Properties navigationId="{MainNavigationEvent.ALL_BOOKS}"/>
                </EventAnnouncer>
            </resultHandlers>
        </RemoteObjectInvoker>
    </EventHandlers>
    <Injectors target="{AllBooks}">
        <PropertyInjector source="{BooksManager}" sourceKey="books" targetKey="books"/>
    </Injectors>
    ...
</EventMap>

Now have a look at the code of the BooksManager component. Calling the actual remote object and transforming java objects into flex objects is done using BlazeDS. More on this later on. The objects that you get back are Books.

public class BooksManager {
    [Bindable]public var books:ArrayCollection = new ArrayCollection();

    public function storeBooks(obj:Object):void {
        books = ArrayCollection(obj);
    }
}

[Bindable]
[RemoteClass(alias="nl.gridshore.samples.books.domain.Book")]
public class Book {
    public var id:Number;
    public var title:String;
    public var isbn:String;
    public var authors:ArrayCollection = new ArrayCollection();

    public function Book() {
    }

    public function addAuthor(author:Author):void {
        authors.addItem(author);
    }
}

That was your crash coarse in Mate. If you want to know more about the basics, be sure to check out their website. A lot of links to other good resources are available. Time to move on. For the security part I need to extend Mate. That is what the next section is about

Implementing authentication in the flex client

With respect to the authentication there are three different events that take place:

• Check if needs authentication – If the current client is not authenticated the login form must be presented
• Try authentication – check the provided credentials, show an error message if authentication fails or go to the initial screen.
• Logout – logout from the client

The handling of these three events can be found in the SecurityEventMap.mxml component. This part of the solution has changed the most with respect to previous versions of the sample. In the current release I make use of the standard capabilities of the flex class mx.messaging.ChannelSet. I have created an extension to interact with this channelset using tags, the ChannelSetInvoker. Creating this class was not easy to me, there is a document that can help and the source code from existing tags is very helpful. I run by some things I learned while creating the extension.

A very important part is to make a difference to properties that you need to configure the component and arguments to the methods being called. The ChannelSet will not change and can be provided as a property. The username and password for the login method are arguments to the method and need to be provided as arguments. Within the source code you can see the difference as well, the ChannelSet is a property of the component, while username and password are not really visible in the code. The ChannelSetInvoker component uses the ResultEvent and the FaultEvent to communicate with handlers. You can register handlers in the Mate event mapping component. Of course we need to registers these handlers within the component. This is done in the complete function

    override protected function complete(scope:IScope):void {
        if (this.resultHandlers && resultHandlers.length > 0) {
            this.createInnerHandlers(scope, ResultEvent.RESULT, resultHandlers);
        }
        if (this.faultHandlers && faultHandlers.length > 0) {
            this.createInnerHandlers(scope, FaultEvent.FAULT, faultHandlers);
        }
    }

Time to move on to the fun part, the actual interaction with the ChannelSet. The components supports three methods (think about the three events we needed): login, logout and authenticated. The magic takes place in the run function.

    override protected function run(scope:IScope):void {
        var argumentList:Array = (new SmartArguments()).getRealArguments(scope, this.arguments);
        innerHandlersDispatcher = channelSet;

        if (method == "login") {
            if (!channelSet.authenticated) {
                var loginToken:AsyncToken = channelSet.login(argumentList[0], argumentList[1]);
                loginToken.addResponder(new AsyncResponder(
                        function(event:ResultEvent, token:Object = null):void {
                            scope.lastReturn = event.result;
                            innerHandlersDispatcher.dispatchEvent(event);
                        },
                        function(event:FaultEvent, token:Object = null):void {
                            scope.lastReturn = event.fault;
                            innerHandlersDispatcher.dispatchEvent(event);
                        }));
            }
        } else if (method == "logout") {
            var logoutToken:AsyncToken = channelSet.logout();
            logoutToken.addResponder(new AsyncResponder(
                    function(event:ResultEvent, token:Object = null):void {
                        innerHandlersDispatcher.dispatchEvent(event);
                    },
                    function(event:FaultEvent, token:Object = null):void {
                        innerHandlersDispatcher.dispatchEvent(event);
                    }));
        } else if (method == "authenticated") {
            var isAuthenticated:Boolean = channelSet.authenticated;
            scope.lastReturn = isAuthenticated;
            var event:ResultEvent = new ResultEvent("user is authenticated?", false, true, isAuthenticated);
            innerHandlersDispatcher.dispatchEvent(event);
        }
    }

Check how we use the provided arguments in the login method handling. AsyncToken objects are used to handle the asynchronous results of the login and logout methods. Finally the innerHandlerDispatcher is used to notify the registered handlers of new results. For the final piece of the puzzle, have a look at the implementation of the event handling. Due to the names of the tags the code is self explanatory.

<EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/"
          xmlns:extensions="extensions.*">
    <mx:ChannelSet id="authenticationChannelSet">
        <mx:AMFChannel id="myAmf" uri="http://{props.host}:{props.port}/{props.webcontext}/messagebroker/amf"/>
    </mx:ChannelSet>

    <!-- Event handlers -->
    <EventHandlers type="{AuthenticationEvent.TRY}" debug="true">
        <extensions:ChannelSetInvoker method="login"
                                      channelSet="{authenticationChannelSet}"
                                      arguments="{[event.username,event.password]}">
            <extensions:resultHandlers>
                <MethodInvoker generator="{AuthenticationManager}" method="logInSuccess"
                               arguments="{currentEvent.result}"/>
            </extensions:resultHandlers>
            <extensions:faultHandlers>
                <MethodInvoker generator="{AuthenticationManager}" method="storeAuthenticationProblem"
                               arguments="{currentEvent.fault}"/>
            </extensions:faultHandlers>
        </extensions:ChannelSetInvoker>
    </EventHandlers>

    <EventHandlers type="{AuthenticationEvent.CHECK_NEEDS}" debug="true">
        <extensions:ChannelSetInvoker method="authenticated" channelSet="{authenticationChannelSet}">
            <extensions:resultHandlers>
                <MethodInvoker generator="{AuthenticationManager}" method="isAuthenticated"
                               arguments="{currentEvent.result}"/>
            </extensions:resultHandlers>
        </extensions:ChannelSetInvoker>
    </EventHandlers>

    <EventHandlers type="{AuthenticationEvent.LOGOUT}" debug="true">
        <extensions:ChannelSetInvoker method="logout" channelSet="{authenticationChannelSet}">
            <extensions:resultHandlers>
                <MethodInvoker generator="{AuthenticationManager}" method="logout"/>
            </extensions:resultHandlers>
        </extensions:ChannelSetInvoker>
    </EventHandlers>
</EventMap>

To be able to actually authenticate, we need a server component as well. With the RC2 release of the spring-flex project this has become incredibly easy. The next section talks about that part of the application.

Spring-flex, how easy can it be.

I do want to stress that the documentation coming with spring-flex is a good read. I recommend to read it to see all options that you have. For now I discuss only the basic steps.

http://static.springframework.org/spring-flex/docs/1.0.x/reference/html/ch04s02.html

• Configure the web.xml, add the dispatcher servlet and the springSecurityFilterChain for the initialization of spring security.
• I added one servlet mapping for *.properties. This is for loading the config.properties file through a spring bean. Check my post flex remoting without configuring the client to find out more on this topic.
• Configure BlazeDS using the services-config.xml file in the default location WEB-INF/flex. Remember that we do not need this file in the flex client anymore like we did in the past. It is also this file where you configure BlazeDS logging.
• Configure the security, be sure to look good before it is over.

    <!-- Bootstraps and exposes the BlazeDS MessageBroker -->
    <flex:message-broker>
        <flex:secured />
    </flex:message-broker>

    <!-- remote proxies -->
    <flex:remoting-destination destination-id="remoteBookManager" ref="bookManager" exclude-methods="internalUseStoreBook"/>

    <security:http entry-point-ref="preAuthenticatedEntryPoint"/>

    <bean id="preAuthenticatedEntryPoint"
        class="org.springframework.security.ui.preauth.PreAuthenticatedProcessingFilterEntryPoint" />

    <security:global-method-security>
        <security:protect-pointcut
            expression="execution(* nl.gridshore.samples.books.business.*Manager.store*(..))"
            access="ROLE_ADMIN"/>
        <security:protect-pointcut
            expression="execution(* nl.gridshore.samples.books.business.*Manager.obtain*(..))"
            access="ROLE_USER"/>
    </security:global-method-security>

    <security:authentication-provider>
        <security:user-service>
            <security:user name="admin" password="admin" authorities="ROLE_USER, ROLE_ADMIN"/>
            <security:user name="user" password="user" authorities="ROLE_USER"/>
        </security:user-service>
    </security:authentication-provider>

As you can see, most of the configuration deals with method-security and the authentication provider. It takes around 5 lines of code to configure spring security to receive all incoming authentication requests and connect to BlazeDS security. I think this is pretty amazing. During the refactoring I could remove a lot of configuration and a java class. Also the client code has become a lot easier and adheres to standards of flex remoting.

Concluding

That is it, now we have a much cleaner sample. Be sure to check out the code and of course the referring frameworks. I also want to mention the extendability of the Mate framework. At first I had to understand some basic concepts, but than it become easy to write an extension. I hope you like the blog. Questions and commands are welcome.

See you again next time.

• flex-mojos (3.1) – the maven flex plugin
• Mate (0.8.7.1) – a flex framework
• Spring BlazeDS Integration 1.0.0.RC1

Read on to find out the changes I had to make, the problems I ran into (not that much actually).

Maven build

Let us start with the build system. I want to upgrade to the latest and greatest 3.1 version of the flex-mojos plugin. This is not hard, there is excellent documentation available in the form of this open source book.

I did not have to make a lot of changes, the groupId and the artifactId of the plugin have changed, but that is easy. I do have problems running the tests on a mac. The mentioned book does give a method to make the flex unit tests work, but it does not work for me like I would have wanted it to. It seems that the call to the flash executable is wrong. The suggested way is to cp the Flash Player.app to the /Applications folder. Please do not do this using sudo, I prefer to do it by hand using the Finder. Another problem is the call from the plugin. It calls FlashPlayer.app, I think It should be Flash\ Player. Therefore I add the following directive to the maven command:

-DflashPlayer.command=Flash\ Player

This only works if you make sure the player is on the path, I included the following line in my .bash_profile file:

export PATH=$PATH:/Applications/Flash\ Player.app/Contents/MacOS

Now the application is running again. Time to move on.

Mate

Mate is now upgraded to the released version 0.8.7.1. I did not find a good repository containing this release for maven. Therefore I had to add it manually. I did not really go into the new features. I see there are mock objects now for services. I have not come up with the right way to use them without changing my code in for instance unit tests. Therefore there are no exiting things to do for mate. Feel free to add a comment if I missed something.

Spring BlazeDS Integration

It seems to be a small step, but I had to make some adjusments. I had to change the bean from flex:remote-service into flex:remoting-destination. Beware to change the service-id into destination-id if you need another name of the destination than the default name deduced from the exposed bean. This was not right at the moment in the documentation.

The flex:remoting-destination configuration than becomes:

<flex:remoting-destination destination-id="remoteBookManager" ref="bookManager" exclude-methods="internalUseStoreBook"/>

To make this all work, I had to add a dependency which is optional by default but I did need it. Not sure why.

<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-core-asl</artifactId>
    <version>0.9.9-6</version>
</dependency>

The next problem I ran into, had to do with the following error message. I do only show the first line, not the complete stacktrace.

Problem with the : org.springframework.beans.factory.NoSuchBeanDefinitionException:
        No bean named '_filterChainList' is defined

As described is this forum post, this can be resolved by disabling session fixation in the http configuration of spring security. Jeremy has tested this as well and stated it is indeed a bug. A fix is committed and will be in the next release.

Now everything is working again. I am personally not fond of the spring dependencies labelled 2.5.6.A. These have to do with the special OSGi enabled jars. But they give a lot of double dependencies on external jars. Luckily Jeremy has promised to create a version without the OSGi versions as well. Check this post. The responsiveness of the community and the committers is great, this is what I like so much about the spring framework. I had to say it

Some additional remarks

Next to the framework upgrades I also want to mention some things you can find in the sample. I added a unit test based on FlexUnit. I took the flex security out of the normal project and placed it into a seperate swc project.

What is left? Well I need to add the old features in the new mate version. You cannot add new books at the moment. I also want to have a good look at the security integration in the BlazeDS integration project of the spring framework. I also want to do some messaging, which I have done already in another project. Finally I have a nice maven solution to print a build version number in the flex application. If you like that idea, be patient. I’ll try to write my next post about that topic.

Thanks for reading, hope to see you back soon. Do not forget to connect to me via linkedin, gridshore has it’s own group. You can also stay up to date using twitter.

References

• http://www.sonatype.com/books/maven-book-stage/reference/ch20.html – reference manual for the flex maven build plugin.
• http://www.statusq.org/archives/2008/07/30/1954/ – reference to the easiest way to get wget on your machine.

To get an idea if this post is about the approach you need, let me describe the problem or challenge I am facing.

I have an application that is showing the current stock supply of an online shop. Because obtaining all stock items takes a few seconds, I want to notify users when stock changes. To be able to do this I want to communicate changes from a java server using spring technology to a flex client through BlazeDS. The amount of users is not very big, and the changes to the stock are not important when someone obtains all stock items. Therefore the messages do not need to be persisted and we can use an in memory message server implementation provided by ActiveMq. So the flow becomes:

• Spring sends a message to a topic.
• BlazeDS pics up the message and transforms the stock payload
• All flex clients gets notified of the message

Go on to read about the solution.

Technology stack

The project uses a normal architecture, web layer, business layer and data layer. There is an integration component for xml export. The jms part is an integral part of the business layer, maybe I move it to the integration layer. But that does not have influence on the solution. Now we focus on the most important components. The web component and the business component.

Web/BlazeDS project

BlazeDS is used as the remoting solution for the flex clients. The flex clients send requests to the server. BlazeDS runs on the server, receives the requests and using spring factories calls the spring beans. For our solution we need to do it the other way around. From the server we want to notify all connected clients. Using BlazeDS, this is done with JMS. BlazeDS has an adapter to publish and subscribe to queues and topics.

BlazeDS only supports client pull for notifications. This is not ideal, actual push by the server would be better. You’ll need less bandwidth and less activity on the server as well as client. This is supported by the commercial version life cycle data services of adobe, but not by BlazeDS. The commercial version uses a proprietary called Real Time Messaging Protocol. You can read more on this topic in this blog post by Aaron West. This technology is not Open Source and therefor not in the BlazeDS technology stack. For applications with a limited amount of users, this client pull is not a real problem. The client pull can use two different channel types: Streaming and polling. I’ll settle with polling for now. Streaming might me the better option, but polling works for now. More info on the channels can be found in an example by Adobe

Business containing JMS provider

The spring framework comes with some extras to support JMS communication. Sending messages is made easy using the spring framework. We still need a messaging platform. I have choosen ActiveMQ. It is one of the best known Open Source JMS providers and it has very good integration with the spring framework. ActiveMQ comes with a mechanism to embed the messaging container in your application. This can be fully configured in spring.

Maven for dependencies

I am not going into a great detail here. I have written multiple posts about BlazeDS, find maven setup in one of these posts. For the messaging I had to add the following dependencies

<dependency>
     <groupId>org.springframework</groupId>
     <artifactId>spring-jms</artifactId>
     <version>${spring.version}</version>
</dependency>
<dependency>
     <groupId>javax.jms</groupId>
     <artifactId>jms</artifactId>
     <version>1.1</version>
</dependency>
<dependency>
     <groupId>org.apache.activemq</groupId>
     <artifactId>activemq-core</artifactId>
     <version>5.2.0</version>
</dependency>
<dependency>
     <groupId>org.apache.xbean</groupId>
     <artifactId>xbean-spring</artifactId>
     <version>3.5</version>
</dependency>

Spring configuration of ActiveMQ

Time to start the messaging container. I could find most of the required info online in other post. Still I had to do some tweaking to get it done. The most important post I used is how-do-i-embed-a-broker-inside-a-connection. I’ll show you all the configuration in a spring config file first.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:amq="http://activemq.apache.org/schema/core"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xsi:schemaLocation="
			http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
            http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd
            http://activemq.apache.org/schema/core http://activemq.apache.org/schema/core/activemq-core-5.2.0.xsd">

    <amq:broker useJmx="false" persistent="false">
        <amq:transportConnectors>
            <amq:transportConnector uri="tcp://localhost:61616"/>
        </amq:transportConnectors>
    </amq:broker>

    <amq:topic id="destination" physicalName="stockMessageTopic"/>

    <amq:connectionFactory id="jmsFactory" brokerURL="vm://localhost"/>
</beans>

Namespace

ActiveMQ has namespace support for spring, I think they do use an extension in the XBean project. I did not really evaluate this, but you need the dependency. Beware that in the original sample the xsd does not have the right url. If you want to use xml support in Intellij, you need to change the xsd url in what I have. The namespace can be used to configure the Topic, the connection factory and of course the broker.

Topic destination

We configure a topic, again I spend some time to figure this out. The sample used a query instead of a topic. I just missed it. So beware to take the right one. The physical name is important, this is used by BlazeDS as well to connect to the topic to receive messages. Check the Tomcat configuration later on.

Connection Factory

Configuration of a connection factory that connects to a local broker (running in the same jvm). This connection factory can be used by clients, in our case the spring jms client that publishes messages.

Broker

The broker does the actual routing of messages, provides the queues and topics. In short this is the message container. Because we define it in the spring container, it runs in the same jvm. Which is perfect in our case, we do not need persistent messages. The send messages can very short, just long enough to notify all connected subscribers.

The Message provider

The message provider is a spring bean. We need to add a bit of spring configuration. The next block shows the additional beans.

    <bean id="myJmsTemplate" class="org.springframework.jms.core.JmsTemplate">
        <property name="connectionFactory">
            <bean class="org.springframework.jms.connection.SingleConnectionFactory">
                <property name="targetConnectionFactory">
                    <ref local="jmsFactory"/>
                </property>
            </bean>
        </property>
    </bean>

    <bean id="stockMessageProducer" class="nl.primatras.backoffice.service.jms.JmsStockMessageProducer">
        <property name="jmsTemplate" ref="myJmsTemplate"/>

        <property name="destination" ref="destination"/>
    </bean>

Spring jms makes use of a JmsTemplate, you can read more about this in the spring reference manual. The template is used to send a message to a queue or topic. Therefore the jmsTemplate needs to have a connection factory. The other component is the message producer. This class does the actual message creation. To be able to do just that, it needs the mentioned jmsTemplate and a destination. The the code looks like this:

    public void sendStockUpdate(final StockVO stock) {
        logger.debug("About th send a message ...");
        jmsTemplate.send(destination, new MessageCreator() {
            public Message createMessage(Session session) throws JMSException {
                return session.createObjectMessage(stock);
            }
        });
    }

Notice that we use the method createObjectMessage, we will come back to this when configuring BlazeDS. You can also use TextMessage, but we use the javax.jms.ObjectMessage and let BlazeDS do it’s parsing trick on the client.

Tomcat configuration

BlazeDS uses JNDI to find the connection factory and the name of the queue or topic to connect to. These need to be available. WIth tomcat that is not to hard. You can configure this using the context.xml file that can be found in the conf folder. The contents of this file are copied almost one-on-one from this excellent blog post.

<Context path="/BlazeTest">
<Resource name="jms/flex/TopicConnectionFactory"
        type="org.apache.activemq.ActiveMQConnectionFactory"
        description="JMS Connection Factory"
        factory="org.apache.activemq.jndi.JNDIReferenceFactory"
        brokerURL="tcp://localhost:61616"
        brokerName="myBroker"/>
<Resource name="jms/stockMessageTopic"
        type="org.apache.activemq.command.ActiveMQTopic"
        description="a stock topic"
        factory="org.apache.activemq.jndi.JNDIReferenceFactory"
        physicalName="stockMessageTopic"/>
</Context>

The names of the resources are used in the flex configuration, important are the brokerURL and the physical name of the topic. These are the same as the ones configured in the spring activeMQ xml.

BlazeDS/Flex Configuration

Configuration of the destinations of messaging is done in the messaging-config.xml file. The file looks like this.

<?xml version="1.0" encoding="UTF-8"?>
<service id="message-service" class="flex.messaging.services.MessageService">
    <adapters>
        <adapter-definition id="actionscript" class="flex.messaging.services.messaging.adapters.ActionScriptAdapter"
                            default="true"/>
        <adapter-definition id="jms" class="flex.messaging.services.messaging.adapters.JMSAdapter" default="false"/>
    </adapters>

    <default-channels>
        <channel ref="my-polling-amf"/>
    </default-channels>

    <destination id="stock-topic-jms">
        <properties>
            <jms>
                <destination-type>Topic</destination-type>
                <message-type>javax.jms.ObjectMessage</message-type>
                <connection-factory>java:comp/env/jms/flex/TopicConnectionFactory</connection-factory>
                <destination-jndi-name>java:comp/env/jms/stockMessageTopic</destination-jndi-name>
                <delivery-mode>NON_PERSISTENT</delivery-mode>
                <message-priority>DEFAULT_PRIORITY</message-priority>
                <acknowledge-mode>AUTO_ACKNOWLEDGE</acknowledge-mode>
                <initial-context-environment>
                    <property>
                        <name>Context.INITIAL_CONTEXT_FACTORY</name>
                        <value>org.apache.activemq.jndi.ActiveMQInitialContextFactory</value>
                    </property>
                    <property>
                        <name>Context.PROVIDER_URL</name>
                        <value>tcp://localhost:61616</value>
                    </property>
                </initial-context-environment>
            </jms>
        </properties>
        <adapter ref="jms"/>
    </destination>
</service>

There are a few things to notice here. You can see the message type, the connection factory and destination using JNDI. The initial context environment is coming from ActiveMQ and the provider url should be familiar by now.

The client

The final step is the flex client. Flex has very good support for consumers and producers. On the client I am mainly using Mate, which is a flex event driven framework. It has support for messaging as well through the MessageHandlers tag. It turns however that flex 3.2 has a problem together with Mate. Check this blog post for the way it should work and go through the comments to get an idea why it does not work. Because of this problem I had to take a slight detour. The most important part is very easy though. The following code block shows the most important part of configuring a consumer.

<mx:Consumer id="consumer" destination="stock-topic-jms" message="messageHandler(event)"
             acknowledge="acknowledgeHandler(event);" fault=" faultHandler(event)"/>

Then finally you need to login, this can best be done in the creationComplete handler.

private function logon():void {
    consumer.subscribe();
}

That is it, now you just have to implement the three methods that are attached to the consumer. I’ll show the messageHandler implementation as the last piece of the puzzle.

private function messageHandler(event:MessageEvent):void {
    var stock:Stock = event.message.body as Stock;
    var updateEvent:StockEvent = new StockEvent(StockEvent.UPDATE_STOCKITEM_EVENT);
    updateEvent.stock = stock;
    dispatchEvent(updateEvent);
}

Notice that by using the ObjectMessage type, the body of a message is a stock object.

The future

This is all looking very good. I am very pleased about the result. I hope the spring blazeds integration project will make life easier. I know that m2 release contains some messaging support. Did not have time to have a look at it yet. Hope to add it to m books-overview example in a while.

Conclusions

I do want to stress that most of the configuration and code come from other blog posts. I have named them all in the references section. The biggest problem is to combine the server side spring/activemq part with the client/blazeds part. I think this blog post closes that hole.

Stay tuned for more flex stories.

References

• http://livedocs.adobe.com/blazeds/1/blazeds_devguide/
• http://mmartinsoftware.blogspot.com/2008/05/simplified-blazeds-and-jms.html
• http://activemq.apache.org/how-do-i-embed-a-broker-inside-a-connection.html
• http://mate.asfusion.com/page/documentation/tags/messagehandlers
• http://bugs.adobe.com/jira/browse/BLZ-300
• http://www.joshuaostrom.com/2008/08/01/tunkey-blazeds-jms-activemq/
• http://www.adobe.com/devnet/livecycle/articles/blazeds_testdrive_07.html
• http://www.trajiklyhip.com/blog/index.cfm/2008/5/21/The-Truth-About-BlazeDS-and-Push-Messaging

Maven

I do not think the spring blazeds artifacts are available in maven yet. Therefor you have to download them and install them in your local maven repo, or deploy them in your Artifactory if you use it.


mvn install:install-file -DgroupId=org.springframework.flex -DartifactId=org.springframework.flex -Dversion=1.0.0.M2 -Dpackaging=jar -Dfile=/path/to/jar


Change the used version of the jar in the books-web projects pom.xml. If you haven’t downloaded the sources yet, you can find them here.

Doing a mvn clean install and everything should be fine. If you are having problems with out of memory exceptions, give maven a bit of extra memory


export MAVEN_OPTS=-Xmx256m


Namespace support in spring configuration

Message broker

Next up is changing the spring configuration to use the new namespace support. Before you can use the new namespace, you have to specify it in the xml header. The next code block shows you the configuration as I use it. The suggestion comes from the reference manual.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:flex="http://www.springframework.org/schema/flex"
       xsi:schemaLocation="
            http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
            http://www.springframework.org/schema/flex http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">
...
</beans>

The first element configures the message broker, the handler mapping and a message broker handler adapter. If you read my previous post, remember that we add our own handler adapter as well for the config files. By default spring looks up a handler adapter. If one is already available and you need a second, you have to configure one yourself. In our case we add the simple controller handler adapter.

The new namespace configuration also adds a SimpleUrlHandlermapping. We need to add our mapping for the config.properties file. Therefore we cannot use the default mapping. The default mapping routes all requests to the MessageBroker. Check the following code for the additional configuration as I would have liked it. To bad this is not possible. On the other hand, Jeremy Grelle gives a good explanation why this cannot be done this way in this forum thread.

    <flex:message-broker>
        <flex:mapping pattern="/config.properties=configPropertyController"/>
        <flex:mapping pattern="/*=_messageBroker"/>
    </flex:message-broker>

This code block shows how it really must be. Which is good as well.

    <flex:message-broker>
        <flex:secured />
    </flex:message-broker>

    <bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        <property name="order" value="0"/>
        <property name="mappings">
            <value>
                /config.properties=configPropertyController
            </value>
        </property>
    </bean>

Remote services

Methods of beans can be exposed at remote services. There is namespace support for this as well. Again the namespace provides a lot of default behavior. One of the things is the name of the service that comes from the references bean. I need to change this since the used name is already used. This can easily be done using the service-id property. There is another feature that I like. You can explicitly configure the methods to expose or the methods to prevent from being exposed. You can use the exclude-methods and the include-methods. I use this to prevent the internal use method from being exposed. The following code block shows the configuration.

    <flex:remote-service service-id="remoteBookManager" ref="bookManager"
                         exclude-methods="internalUseStoreBook"/>

Remote services configuration

If your application is only using spring managed remote services you can remove the remoting configuration completely. Default channels are provided by the spring integration. We do have a problem with our current security implementation. This makes use of a non spring managed remote service for authentication. If we want to remove this we need to use the new spring security integration. That is the next step.

Integrating spring security

The new M2 milestone comes with spring security integration. To be honest, there is not much use for me here. I did add it because there must be some exception handling and mapping being done. I still have some questions on this area that I will try to get answered the coming weeks. So stay tuned for an improved security version as well.

Summary

The following two code blocks show the old config file and the new style. I just love these more clean configuration files that make use of namespaces. To bad I have to provide my own SimpleUrlMappingHandler, but as mentioned it is probably better to make the separation.

old

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:flex="http://www.springframework.org/schema/flex"
       xsi:schemaLocation="
            http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
            http://www.springframework.org/schema/flex http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">

    <!-- Bootstraps and exposes the BlazeDS MessageBroker -->
    <bean id="mySpringManagedMessageBroker" class="org.springframework.flex.messaging.MessageBrokerFactoryBean"/>

    <!-- Maps request paths at /* to the BlazeDS MessageBroker -->
    <bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        <property name="mappings">
            <value>
                /config.properties=configPropertyController
                /*=mySpringManagedMessageBroker
            </value>
        </property>
    </bean>

    <!-- Dispatches requests mapped to a MessageBroker -->
    <bean class="org.springframework.flex.messaging.servlet.MessageBrokerHandlerAdapter"/>

    <!-- Dispatches request mapped to a Controller -->
    <bean class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter"/>

    <!-- remote proxies -->
    <bean id="remoteBookManager" class="org.springframework.flex.messaging.remoting.FlexRemotingServiceExporter">
        <property name="messageBroker" ref="mySpringManagedMessageBroker"/>
        <property name="service" ref="bookManager"/>
    </bean>

    <!-- Controllers for property configuration files -->
    <bean id="configPropertyController" class="nl.gridshore.samples.books.web.controller.ConfigPropertyController"/>

    <!-- View resolver used connect the views returned by controllers to view implementation classes -->
    <bean id="defaultViewResolver" class="org.springframework.web.servlet.view.ResourceBundleViewResolver">
        <property name="basename" value="views"/>
        <property name="order" value="1"/>
    </bean>
</beans>

new

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:flex="http://www.springframework.org/schema/flex"
       xsi:schemaLocation="
            http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
            http://www.springframework.org/schema/flex http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">

    <!-- Bootstraps and exposes the BlazeDS MessageBroker -->
    <flex:message-broker>
        <flex:secured />
    </flex:message-broker>

    <!-- remote proxies -->
    <flex:remote-service service-id="remoteBookManager" ref="bookManager"
                         exclude-methods="internalUseStoreBook"/>

    <!-- Non default url handler mapping needed for the property file -->
    <bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        <property name="order" value="0"/>
        <property name="mappings">
            <value>
                /config.properties=configPropertyController
            </value>
        </property>
    </bean>

    <!-- Dispatches request mapped to a Controller -->
    <bean class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter"/>

    <!-- Controllers for property configuration files -->
    <bean id="configPropertyController" class="nl.gridshore.samples.books.web.controller.ConfigPropertyController"/>

    <!-- View resolver used connect the views returned by controllers to view implementation classes -->
    <bean id="defaultViewResolver" class="org.springframework.web.servlet.view.ResourceBundleViewResolver">
        <property name="basename" value="views"/>
        <property name="order" value="1"/>
    </bean>
</beans>

What is the arternative? On the serverside, the mentioned spring project is doing a good job. You do not have to configure all endpoints. But you still need something on the client.

This post talks about a mechanism to enable you to loose all this configuration on the client

An overview

So what am I planning to do. Using the Properties object from the Spring-ActionScript project I will load a property file from the server. This property file will contain the parameters required by the remote objects to connect to an endpoint. The property files will not be on the server, the request will be captured by the Dispatcher servlet from spring. Special controller classes will create the properties requested by the client and a view class creates a stream to the client. That way the client does not know the requested file is actually a dynamic resource.

Does that sound complicated? Well, read on and I’ll explain it step by step.

The server side

As mentioned in the introduction, we use the special spring BlazeDS integration project on the server. I am not going to discuss the configuration anymore. Read my previous post Wow springframework enters the actionscript and flex domain to learn how to do that. For this post I’ll focus on the differences.

So what do we need? We need the server to respond to the url:

http://localhost:8080/books-web/config.properties

with the result:

host=localhost
port=8080
context-root=books-web

And of course the result should be different when running on another server.

web.xml

We add a servlet mapping for a *.properties

<servlet-mapping>
    <servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
    <url-pattern>*.properties</url-pattern>
</servlet-mapping>

spring-web.xml

We need to add a url mapping, and we have to add a mapping for the config.properties request. Now the simple url mapping looks like this.

<bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
    <property name="mappings">
        <value>
            /config.properties=configPropertyController
            /*=mySpringManagedMessageBroker
        </value>
    </property>
</bean>

Next step is to configure the controller and a default view resolver. The view resolver uses a resource bundle to connect the views and the classes that generate content.

<bean id="configPropertyController" class="nl.gridshore.samples.books.web.controller.ConfigPropertyController"/>
<bean id="defaultViewResolver" class="org.springframework.web.servlet.view.ResourceBundleViewResolver">
    <property name="basename" value="views"/>
    <property name="order" value="1"/>
</bean>

The last thing to mention for the spring configuration took me a moment to figure out. Usually when creating a spring application, by default a HandlerAdapter is registered. Since the BlazeDS integration registers it’s own HandlerAdapter, the MessageBrokerHandlerAdapter, we need to register an additional HandlerAdapter to take care of our controller. That is why I added the following line to the spring config.

<bean class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter"/>

PropertyController

The classes I added are pretty straightforward. I created a super class called PropertyController. This class implements the Controller interface. It is an abstract class that calls the method to create a Map<String,String>. This map is stored in the model and we move on to the view with a name propertiesView.

public abstract class PropertyController implements Controller {
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
        Map<String, String> exposedParams = createExposedParamsMap(request);
        return new ModelAndView("propertiesView", "exposedParams", exposedParams);
    }

    abstract protected Map<String, String> createExposedParamsMap(HttpServletRequest request);
}

ConfigPropertyController

For our case, we mapped the config.properties to the class ConfigPropertyController. The implementation makes use of the provided HttpServletRequest to read information about the server.

public class ConfigPropertyController extends PropertyController {
    protected Map<String, String> createExposedParamsMap(HttpServletRequest request) {
        Map<String, String> exposedParams = new HashMap<String, String>();
        exposedParams.put("host", request.getServerName());
        exposedParams.put("port", String.valueOf(request.getServerPort()));

        // The context root path contains a prefix '/', we have to take that of.
        String contextRoot = request.getContextPath();
        contextRoot = contextRoot.substring(1);
        exposedParams.put("context-root", contextRoot);

        return exposedParams;
    }
}

The last piece of the puzzle is the PropertyView class. This class writes out the file to the client with one of the provided properties per line. Exactly like you’d expect a property file to be.

public class PropertyView extends AbstractView {
    public PropertyView() {
        setContentType("text/plain");
    }

    protected void renderMergedOutputModel(Map model, HttpServletRequest request, HttpServletResponse response) throws Exception {
        Map<String,String> exposedParams = (Map<String,String>)model.get("exposedParams");

        Set<Map.Entry<String,String>> entries = exposedParams.entrySet();

        response.setContentType(getContentType());
        for(Map.Entry<String,String> entry : entries) {
            StringBuilder lineBuilder = new StringBuilder();
            lineBuilder.append(entry.getKey());
            lineBuilder.append("=");
            lineBuilder.append(entry.getValue());
            response.getWriter().println(lineBuilder.toString());
        }
    }
}

Now you can start up the server and test the implementation. Than we continue with the flex client

The Client

On the client side I use Mate, I do not think this changes the implementation of this strategy a lot. Another thing you’ll need is a copy of the spring-ActionScript project. Sorry no maven yet. Get a copy from the site and build it.

http://forum.springsource.org/showthread.php?t=66193

You’ll need this library for easy access to a nice way of loading property files from the server. The next block of code shows some functions that reside in you main flex application file.

[Bindable]
public var properties:Config = new Config();
private var loadedProps:Properties = new Properties();

public function initApp():void {
    loadedProps.addEventListener(Event.COMPLETE, onLoaderComplete);
    loadedProps.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
    loadedProps.load("config.properties");
}

private function onLoaderComplete(event:Event):void {
    properties.host = loadedProps.getProperty("host");
    properties.port = loadedProps.getProperty("port");
    properties.webcontext = loadedProps.getProperty("context-root");
}

First we initiate a load of the file we used in the server side part called config.properties. Responding to the complete event, we set the properties of the Config object using the loaded properties from the server. Next up we initiate the Mate event maps. Notice that we add the properties object to this map under the property props.

<map:MainEventMap props="{properties}"/>

In the EventMap we have to add the property called props of type Config. Using this object we can configure the remote obejcts like this.

    <mx:RemoteObject id="booksService"
                     endpoint="http://{props.host}:{props.port}/{props.webcontext}/messagebroker/amf"
                     destination="remoteBookManager"/>

That is about it, now the client knows how to obtain the server config data and with this information it can access the endpoints.

If you want to have a look at the code or try it yourself, have a look at the following project in google code.

http://code.google.com/p/gridshore/source/browse/#svn/trunk/books-overview

Look for the books-flex-mate module to check the current progress of the new implementation. It is by far from finished. As of now you can only login using user/user and logout again.

Hope this can help you program your flex better, or at least have some inspiration to improve your (or mine) code. Comments are welcome