Gridshore » flex3

Integrate flex security in Mate using the spring BlazeDS integration project

jettro — Sun, 24 May 2009 09:04:20 +0000

More than a year a go I started writing about flex. My first post was about the integration of BlazeDS with the springframework at the back-end using intellij. I moved on with a Datagrid component that had filtering included in my second post. Than I did two posts about integrating spring security. The first article was a nice start to understand the concepts. The second post improved the code a lot with more understanding of the flex principles.

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


    com.adobe.flex.framework
    flex-framework
    ${flex.sdk.version}
    pom


    org.springframework
    spring-actionscript
    ${spring-actionscript.version}
    swc


    com.asfusion
    mate
    ${mate.version}
    swc



    org.sonatype.flexmojos
    flexmojos-unittest-support
    ${flex-mojos.version}
    swc
    test

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:

    
        src/main/flex
        src/test/flex
        
            
                org.sonatype.flexmojos
                flexmojos-maven-plugin
                ${flex-mojos.version}
                true
                
                    /books-web
                    true
                    ${basedir}/src/main/locale/{locale}
                    
                        en_US
                        
                    
                
            
        
        install
        
            
                ${basedir}/src/main/resources

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:

    
        
            flex-mojos-repository
            http://repository.sonatype.org/content/groups/public
            
                true
            
            
                false
            
        
        
            fnh
            http://fna.googlecode.com/svn/trunk/fna/fna_m2_repository/
        
        
            Servebox
            http://maven.servebox.org/repository
            
                true
            
            
                false
            
        

        
            spring-milestone
            Spring Portfolio Milestone Repository
            http://maven.springframework.org/milestone
            
                true
            
            
                false
            
        
    
    
        
            flex-mojos-repository
            http://repository.sonatype.org/content/groups/public
            
                true
            
            
                false

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.

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.

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.

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.

Upgrading the flex based books-overview sample

jettro — Sun, 10 May 2009 20:14:09 +0000

As a lot of you out there know, I write a lot about flex and java. For my flex posts I use a sample called books-overview. You can find the sourcecode on google code. A lot of different frameworks released new versions. In this post I describe the some of the upgrades that are important to me

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:

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


    org.codehaus.jackson
    jackson-core-asl
    0.9.9-6

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.

Doing flex with JMS: combining BlazeDS, spring-jms and ActiveMQ

jettro — Mon, 13 Apr 2009 05:34:03 +0000

The complete story of combining a lot of different technologies and a lot of different blog post and articles found on the web. There are multiple good posts around this topic, but none of them gave the exact solution I needed. Therefore I write this blog post, maybe someone else can use this as well.

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


     org.springframework
     spring-jms
     ${spring.version}


     javax.jms
     jms
     1.1


     org.apache.activemq
     activemq-core
     5.2.0


     org.apache.xbean
     xbean-spring
     3.5

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.

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.

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.

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.



    
        
        
    

    
        
    

    
        
            
                Topic
                javax.jms.ObjectMessage
                java:comp/env/jms/flex/TopicConnectionFactory
                java:comp/env/jms/stockMessageTopic
                NON_PERSISTENT
                DEFAULT_PRIORITY
                AUTO_ACKNOWLEDGE
                
                    
                        Context.INITIAL_CONTEXT_FACTORY
                        org.apache.activemq.jndi.ActiveMQInitialContextFactory
                    
                    
                        Context.PROVIDER_URL
                        tcp://localhost:61616

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.

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

Upgrading to Spring BlazeDS Integration M2

jettro — Sun, 08 Mar 2009 11:15:45 +0000

I have written some posts about using flex and the project Spring BlazeDS Integration. If you haven’t read that post I suggest you start there first : Flex remoting without configuring the client. That said, what is this post about? As the title already says, we are going to upgrade the example from the previous blog post to use the new features of the M2 release of spring Blazeds integration.

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.

...

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.

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

    
        
    

    
        
        
            
                /config.properties=configPropertyController

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.

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




    
    

    
    
        
            
                /config.properties=configPropertyController
                /*=mySpringManagedMessageBroker

new




    
    
        
    

    
    

    
    
        
        
            
                /config.properties=configPropertyController

Flex remoting without configuring the client

jettro — Fri, 23 Jan 2009 17:36:57 +0000

For a while I am experimenting with flex. I wrote quite some posts about flex and security and I started writing about the Springframework BlazeDS Integration project. One thing that I do not really like about the configuration is the way to configure the remoting. All the hassle with the service-config.xml that needs to be available on the client as well as on the server. Not really nice. Using the maven way of creating a jar with these config files and unzipping this jar into the web server project as well as the client flex project is a way. Still, not ideal when developing in your ide when you want to add a new remote service.

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


    Spring MVC Dispatcher Servlet
    *.properties

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.


    
        
            /config.properties=configPropertyController
            /*=mySpringManagedMessageBroker

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.

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.

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. 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 exposedParams = createExposedParamsMap(request);
        return new ModelAndView("propertiesView", "exposedParams", exposedParams);
    }

    abstract protected Map 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 createExposedParamsMap(HttpServletRequest request) {
        Map exposedParams = new HashMap();
        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 exposedParams = (Map)model.get("exposedParams");

        Set> entries = exposedParams.entrySet();

        response.setContentType(getContentType());
        for(Map.Entry 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.

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.

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

Creating the flex client using Spring ActionScript

jettro — Tue, 06 Jan 2009 09:07:10 +0000

In my previous post I have created a flex client with a BlazeDS back-end using the spring blazeds integration. If you are familiar with the springframework, the configuration became a lot easier at the server side. Still I had some problems to get it easier at the client as well. I still needed the services-config.xml file with some destinations in it. In the side note I already mentioned another way of creating the client using Spring-ActionScript project. As it turns out, you do not really need Spring-ActionScript to loose the configuration. Still it gives you some help and I like to experiment with it a litle bit.

This post is going through the steps to refactor the current books-overview sample application of mine into a cleaner project using Spring-ActionScript.

Obtaining and building Spring-ActionScript

The Spring ActionScript project is based on the prana framework. Christophe Herreman has moved it under the umbrella of SpringSource. Prana is an inversion of control container for flex that used the springframework approach. Now that prana is changed into Spring ActionScript, no releases have been made yet. So you need to create one yourself or download snapshot builds. Creating it yourself is very easy. Ant is used to create a release.

First download the source using a subversion client from the following url:

https://src.springframework.org/svn/se-springactionscript-as/

Step into the ant folder and execute “ant” to see the options. You can create a debug enabled version, a release, documentation. I created the debug enabled version with the following command. Of course you do have to have ant on your path. Do not forget to change the build.properties. You need to change the FLEX_HOME parameter as described in the readme file that comes with the sources.

ant compile-main-debug

The swc file is created in the antbuild/compile/main/swc folder. You can install it in your maven repository using the command.

mvn install:install-file -DgroupId=org.springframework -DartifactId=spring-actionscript -Dversion=0.6.1-SNAPSHOT -Dpackaging=swc -Dfile=antbuild/compile/main/swc/spring-actionscript.swc

What about maven

Maven is not really supported (yet). It is not very hard to use. If you followed the previous step, you now have the spring-actionscript artifact with version 0.6.1-SNAPSHOT in your repository. Defining your dependency and using the flex-compiler-mojo makes it very easy to create the swf file for your project. The following code block gives the important part of the pom file.

    
        
			com.adobe.flex.framework
			flex-framework
			${flex.sdk.version}
			pom
		
        
            org.springframework
            spring-actionscript
            0.6.1-SNAPSHOT
            swc
        
    

    
        src/main/flex
        
            
				info.flex-mojos
				flex-compiler-mojo
                ${flex-mojos.version}
				true
				
                    /books-web
					
						en_US
					
				
			
        
        install
        
            
                ${basedir}/src/main/resources

Recap of RemoteObject wrapper

For those of you that have not red any of my previous posts, you can find the sources of the sample I use at my google code project. If you want to read more about the sample and it’s structure I recommend my previous post: Integrating spring security and flex 3. In that post I describe the structure of my RemoteService that wrappes a RemoteObject and creates a listener for FAULT events that are thrown by RemoteObjects. This way you can create an exception handling mechanism for remote objects.

I did have to make a small change for the new endpoint configuration. I changed the constructor, added an extra argument for destination. The destination is attached to the wrapped RemoteObject.

    public function RemoteService(id:String, destination:String, endPoint:String) {
        this.remoteObject = new RemoteObject(id);
        this.remoteObject.destination = destination;
        this.remoteObject.endpoint = endPoint;
        this.remoteObject.addEventListener(FaultEvent.FAULT, onRemoteException);
    }

Configuring an end point

Endpoint need to be configured on the server as well as on the client. In my previous post I already discussed the server side. With minimal configuration a spring bean is now exposed as a remote destination. Still the client needs to know these destinations. Previously I used the the same config file as from the server, but with the new spring blazeDS integration this was not working. At first I created two files, one for the server and one for the client. This is not ideal, therefore I started looking at configuring the endpoint in code. It turns out this is pretty straightforward. The code block before already shows how to add the destination to a RemoteObject. What does a destination look like?

http://localhost:8080/books-web/messagebroker/amf

This is not very flexible, and you do not want to hard code this in you swf file. Now is a good time to introduce the Spring ActionScript project. It is time to configure the services and inject the configuration into these components using data from a property file.

Using Spring ActionScript

In this sample we are going to use Spring ActionScript (from now on I call it S-AS) to configure the services. I do not introduce interfaces just yet. Of course it would be better to create interfaces for the different services that we use, that will be a nice improvement for the future. The following code block shows you the xml configuration file of the S-AS. This file is placed on the web server where the swf file is hosted as well. To be honest, I am not sure if this is what you really want. I need to think about that more. Next to the xml file is also a property file that specifies the parameters for host, port and web-context.

The next step of course is using S-AS in your project. How do you load the file and get the objects from the context. There are some steps you need to make, mainly because of the a-sychronous nature. In my application I show an initialization screen while the context is being loaded. When loading is done (you receive an event) I check if there is a current login for the user. The following code block shows part of the Main.mxml file. The initializeApplication function is called by the engine on creationComplete.

private var _applicationContext:XMLApplicationContext;

private function initializeApplication():void {
    _applicationContext = new XMLApplicationContext("applicationContext.xml");
    _applicationContext.addEventListener(Event.COMPLETE, onApplicationContextComplete);
    _applicationContext.load();

    showRightUIComponent('initializingMessage');
}

private function onApplicationContextComplete(event:Event):void {
    bookService = _applicationContext.getObject("bookService");
    authenticationHelper = _applicationContext.getObject("authenticationService");
    authenticationHelper.isPrincipalAuthenticatedBefore();
}

Line 4 shows the loading of the context, a call to the server is done to obtain the file. In line 5 we add the listener for the COMPLETE event. When this event is received we obtain the two services: bookService and authenticationService.

Conclusions

I have shown how you can use Spring ActionScript to loose the services-config.xml. You now have a clean separation between the server component and the client. There is a good start to structure the flex app, but it is only a start. I recommend to use another framework like Cairngorm puremvc or Mate. There is no integration yet between spring actionscript and Mate but I do think it will be a nice combination. If I can find the time I’ll try to come up with this.

Hope you liked this article, feel free to comment with remarks or questions.

References

http://www.herrodius.com/blog/158 – nice description of what you can do with Spring ActionScript from the author.
http://www.springsource.org/extensions/se-springactionscript-as – homepage of the Spring ActionScript project.
http://www.kylehayes.info/blog/index.cfm/2008/2/26/Remotely-Connect-Your-FlexAIR-App-Without-ServicesConfig – Blog explaining remoting without the config xml stuff
http://code.google.com/p/gridshore/source/browse/#svn/trunk/books-overview – source code of the sample.

Wow, springframework enters the ActionScript and flex domain

jettro — Mon, 05 Jan 2009 12:04:54 +0000

Some time a go I had a chat with Alef Arendsen. We talked about flex and the integration with springframework. As a lot of you know, I wrote a few posts about that topic. We talked about what the springframework could do to make life easier for spring developers when using flex and BlazeDS. At that time I did not expect that springsource would jump into this the way they do now. I see already two projects

This sounds almost to good to be true. Combining my springframework knowledge with flex and ActionScript. Maybe I should create a flex front-end talking using BlazeDS to a Hippo Back-end. Of course the application is running on OSGi

Oke, that is something I am not going to talk about in this post. I am going to talk about the new spring flex projects and my first impression. This post is about the BlazeDS integration.

I am going to use the books-overview sample to try out the integration. You can find the sources of books-overview at google code. I base the changes I do on the blog post from Jeremy Grelle about the release of M1. The books-overview project is build with maven. I was using a separate module for the flex remoting config files. Since these files now become very easy and do not need maintenance, I am placing them at the projects at hand. Therefore the config project is to be removed. And the files have been moved into the ria and the web project.

Maven

The hardest part with maven is to find the dependencies, I added two repositories and manually installed the blazeds spring integration.

    
        
            flex-mojos-repository
            http://svn.sonatype.org/flexmojos/repository/
            
                true
            
            
                false
            
        
        
            fnh
            http://fna.googlecode.com/svn/trunk/fna/fna_m2_repository/
        
    
    
        
            flex-mojos-repository
            http://svn.sonatype.org/flexmojos/repository/
            
                true
            
            
                false

There are two important modules, the books-web and the books-ria. Books-web contains the BlazeDS stuff, books-ria the flex stuff. Check the poms if you need the dependencies. I do want to show the flex compilation using the plugin from velo.

    
        
			com.adobe.flex.framework
			flex-framework
			${flex.sdk.version}
			pom
		
    

    
        src/main/flex
        
            
				info.flex-mojos
				flex-compiler-mojo
                ${flex-mojos.version}
				true
				
                    /books-web
					
						en_US
					
				
			
        
        install
        
            
                ${basedir}/src/main/resources

web.xml

We start of with the spring replacement of the blazeds servlet. Instead of the flex.messaging.MessageBrokerServlet we now use the standard dispatcher servlet of spring.

    
        Spring MVC Dispatcher Servlet
        org.springframework.web.servlet.DispatcherServlet
        
            contextConfigLocation
            /WEB-INF/spring-web.xml
        
        1
    

    
        Spring MVC Dispatcher Servlet
        /messagebroker/*

Spring config

I am not going to spend to much time on explaining this stuff since Jeremy already does a good job in his blog. The following code block gives the spring config I have created with some comments in there as well. In short, we create a wrapper around the Message broker, a url handler that connects the incoming requests to this message broker. Finally you need the services. This is one of the nice things of the spring integration. You can export your remote services from the spring config file. I expose the book manager as the remoteBookManager. Now check the source



    
    

    
    
        
            
                /*=mySpringManagedMessageBroker

That is it for the server side. We continue with the client

Client configuration

The client does not need to be changed a lot. We can now remove the special factory configuration for the connection of spring and flex. There is one thing that is still to be changed, the configuration of the destinations. For now I have an empty destination in my remoting-config.xml. I hope this is because I am doing something wrong. If that is the case I’ll correct this is the future. The next code block


    
        
    

    
        
    

    

    
        
            nl.gridshore.samples.books.web.security.AuthenticationHelper

Concluding

For now I do not see a lot of improvement in clarity, it does not get worse eaither. I can imagine if we make the configuration at the client side more easy it will get better. Of course the road map is interesting. Think about security. Now I have created some custom mechanisms for the security integration. It would be very nice if that is supported out of the box. So should you use it? Yes I think you should if you are into the spring framework. It looks like a clean way to integrate flex and spring and I do believe it will get better in the future.

In short, thanks SpringSource for this project, let’s hope this will give a push in the right direction.

Side note

By creating your own channels in code, you can accomplish losing the client configuration of destinations. I have made it work in an ugly way and will post more on this when I have made it nice. Go and habve a look at the post from kyle hayes if you want to learn more.

I personally like the approach of the other spring flex project. That is the direction I am going into: http://www.herrodius.com/blog/158.

Things I do with flex as a java programmer

jettro — Mon, 15 Dec 2008 21:13:52 +0000

So far I have written a few posts mainly about the implementation of security and flex. In this post I want to focus on a the usage of flex in a more general sense. For the experienced flex programmer, this might not be a very interesting post, still you might find something interesting. For all java programmers that want to learn more about flex, this post will be an interesting read. Some of the topics I’ll discuss are: Using renderers, using stacks, creating effects, event driven frameworks and everything else that I run into.

IDE

Use a good IDE to create your mxml and ActionScript code. The most obvious choice is Flex Builder from adobe. To me there is a very big disadvantage, flex builder is based on the eclipse platform. Since I am an IntelliJ user, this is a (Big) problem. Luckily flex development is becoming better in IntelliJ. I tend to use IntelliJ for my coding, but I use Flex builder for running and debugging. Also when developing Air you are completely dependent on flex builder. When I can completely use IntelliJ I’ll let you know .

Build tool

Use a build system that makes you independent from for instance flex builder. There is a pretty good maven plugin for creating flex applications. So what maven plugin am I talking about? Flex mojo’s from Velo. It is a very good set of plugins to create your swf files. You can find more information on the google code project. To be honest, I think there could be more documentation on how to start working with this plugin. There are a few things you can do to make life easier. One of them is use an existing maven archetype from FNA. Another one is using my sample application as a reference.

ActionScript and Mxml

Adobe flex comes with two main languages, an xml language called mxml. This can do a lot already, but if you need real power, you need to use the other languages called ActionScript. The mxml language is very powerful for creating a nice user interface. With just a few lines of code you can create a complete page which obtains data from a remote source (yahoo boss for instance) and presents the returned data in a table.

With this great power comes a risk, without some standards and a bit of structure your code can become a mess. There are also limitations on mxml, that is when ActionScript jumps in. If we look at the previous sample, we can add a click listener that opens a returned link by clicking on it in a new window. To do this you add the following code to the DataGrid : itemClick=”clickLink(event)”. To make it work we use a script block, check the following code.

private function clickLink(event:ListEvent):void {
var url:String = String(event.currentTarget.selectedItem.url);
newWin(url);
}

private function initFocus():void {
searchQuery.setFocus();
}

private function newWin(url:String):void {
var urlRequest:URLRequest = new URLRequest(url);
navigateToURL(urlRequest, "_blank");
}

Finally we make sure the searchBox gets focus by adding this line to the Application tag: applicationComplete=”initFocus()”. The following image shows a screendump of the application.

One thing that is missing in a default implementation of the DataGrid is filtering. For my first bigger flex project I have created such a control. You can read more about it in my blog item : creating a flex 3 datagrid with back-end filtering.

The last thing I would like to mention on this topic is that everything that you can do with mxml can also be done with ActionScript. Sometimes it is more obvious to use one over the other. For me, I use mxml for the real view components, action script is used for everything else. Check out the frameworks topic for ways to help you structure you application.

Using States

Did you ever create an application where a click on a button changed the complete screen? Elements get reshuffled, some appear, others disappear. Than using states is going to be your thing. I was creating a screen that contained a list of elements. Clicking on one of the items moved focus to the detail pane. I wanted the overview pane to be disabled but visible when working on one of the items. In the other state where the user is looking for an item from the list, the detail pane must be invisible. I started with a function that changed properties of all items. It turns out that states are the real answer. Check the following example where we have a form that needs to be entered in three steps. During a step the other steps can be visible, but they need to be disabled.



... CDATA[ // sorry I have problems posting the real CDATA tag
private function initState():void {
currentState='state1';
}
]]...

In the sample you can edit only one box at a time, by pushing one of the buttons you go to the other box. This might be a bit strange example. You’d probably use another implementation in the real world. But it shows what you can do. You can also add color or other things like rounded corners. Wonder how? You can use the same means. Provided a default value for a styleName in the TextArea elements and use the SetProperty to change the property styleName into something else. You can do the same thing for the size of the TextArea’s. The following image gives you an idea what you can easily accomplish.

Using renderers

Using style sheets and inline style information can help you a lot in styling components. Still, sometimes you need more. In a datagrid you want to show an image depending on multiple fields of the current item, or you want to add an image to the items in the dropdown list. There is a good post about flex renderers by Peter Ent on flexdev at adobe.com. Some of the most important things to know about flex renderers are that you should use them with care. They can be pretty expensive. They are reused, be sure to take into account that they can have state from the previous use. Let’s have a look at one of the two samples I mentioned. The select box with an image in each item. An orange point means that you have not read the item yet. The grey one than means of course that you have read it before. The first code shows the ComboBox where the itemRenderer property of the ComboBox is set. The second part is the item renderer itself. The item renderer itself is placed into a separate component to make it more explicit and even re-useable.



...CDATA[
import images.EmbeddedImages;

override public function set data( value:Object ) : void {
super.data = value;
if (data.read == true) {
readIcon.source = EmbeddedImages.readSmallImage;
} else {
readIcon.source = EmbeddedImages.unreadSmallImage;
}
}
]] ...

Important about the item renderer is the override of the set data method. Here you have access to the data and can do manipulation when the data is set. In our case we change the actual image that is presented as part of the item. The item itself is generated as an HBox.

As an alternative to an ItemRenderer you can use a labelFunction. You cannot create complete Hbox components, still you can do a lot of formatting. Often that is enough to do. A good example is always to format a date. The following code block gives an example of a DataGrid where one column uses a formatter to format a date.



... CDATA[
private function formatCreatedate(rowItem:Object, column:DataGridColumn):String {
return longDateFormatter.format(rowItem.createdate);
}

]] ...

Styling and effects

Styling your application is very easy, oke, the basic styling. You will find out that the styling details can be very hard to accomplish. Still some things like these perfectly rounded corners, are so damn easy. I already used this technique in the sample with the different states. The following piece of code shows the code for the example.


.active {
corner-radius:10px;
border-color:yellow;
border-thickness:2px;
}
.inactive {
corner-radius:0px;
background-color:#dddddd;
}

I am not going into great details about all the other possible things. What I do want to mention are effects. When you are moving from one state to another, you can use effects to make it look very nice. There are a lot of resources to be found on the web. I have extended my three step form with a nice state transition effect. The following code block shows the transition.

With the use of ActionScript you might be able to make this more generic. But now you can easily follow what happens. Converting it to ActionScript is something I leave up to you guys to resolve. If you really want to see this work, you can download the air version. By the way, you do need the air player to run it . If you only want the source, you can download it as well

Frameworks and libraries

Just like with any technology, flex has a lot of libraries that you can use. There are some very well known libraries and some lesser known. At the moment I use Mate for my biggest project. This is a tag-based, event-driven Flex framework. I like the way you can do decoupling and dependency injection. It feels good. I am beginning to learn about Cairgorm. To be honest, for now I like Mate better. But you should not take this as an advise to look only at Mate. Try it out yourself. I am planning on rewriting the books-overview sample with Mate, more on that in posts to come.

Another component I use is the auto complete manager from yahoo’s project astra-flex. Since the project comes with excellent documentation, I am not going to explain how to use it. So far I have not used other components, feel free to comment on this blog post with good examples.

Security, BLazeDS and spring integration

I am keeping this short, read my other posts about flex for more details on these topics.

Concluding

This post has become long enough. Time to end with some thoughts and some references. Compared to important java frameworks I am missing documentation and good examples. Adobe has documented the sdk pretty thorough though. As a very positive point, there is a very active and helpful community. The maven plugin from velo and the Mate framework are good examples of how people help you when you are stuck. If you are beginning with flex, or you are looking for very specific knowledge you should definitely check out the adobe videos.

I hope this post was helpful, questions and comments are welcome.

References

Doing flex with maven

jettro — Thu, 24 Jul 2008 12:53:13 +0000

This is a very short item. In my last few posts I have done some flex things. For most of them I was still using a bit of ant integrated with maven or even not integrated at all. Some days a go I was directed to this sample on the adobe developer connection. The example gives you an excellent walkthrough for using maven together with BlazeDS, spring and maven. I liked it so much that I immediately started rewriting my own sample to use the mentioned maven plugin and project architecture. So now please go to the website and check it out if you are having flex/maven problems.

Adobe Developer Connection

The Flex, Spring, and BlazeDS full stack

The website that adobe has created for flex developers looks nice and might turn out to be a valuable resource for your flex and java coding. And if I am doing a good job, I will have an article posted there. So stay tuned.

Integration spring security (Acegi) and flex 3 the sequel

jettro — Mon, 14 Jul 2008 14:00:12 +0000

In my previous blog post : integrating flex 3 with spring security I made a good effort to create a nice flex 3 application and integrate authentication and authorization with spring security. A few days a go I received a trackback from sven. Curious as I am I started reading the material he provided and especially the other links he mentioned. That made me think about my own solution. To be honest I think I did not really do a good job. It works, but still not optimal for most of the flex situations.

In my previous post I already mentioned the problem of sessions that are closed and exception handling with respect to security. In this article I am looking at the available mechanisms for security in flex. In this post I explain why I am not really using the flex or better BlazeDS security mechanisms and what you probably should use them for.

If this made you curious enough, read on. If you have questions, remarks or improvements, do not hesitate to use the comments feature of this blog item.

The security problem

The basic problem: we want to know who you are and we then what you are allowed to do. In other words, we want to use authentication to determine if you are who you say you are and authorization to determine what you are allowed to do. For web applications, authentication is a territory that is well known. There are lot’s of different ways to determine if you are who you say you are. Think about password, iris scan, finger print, tokens, etc.

When clients are becoming richer or fat, this does not have to change, but if you are creating applications that should function offline as well, you have some limitations. For my sample I am using a username/password combination. I am not using https, not using encryption. It is a basic sample.

I am going to show you a possible solution that uses some basic components to authenticate against a server side web application. Using BlazeDS we are talking direct to spring beans that are secured using spring security.

Flex and BlazeDS security mechanism for remoting

BlazeDS has a few things that can help you to secure the remote calls from the web client. You can configure security for remote destinations. This way BlazeDS makes sure you have been authenticated and have the required role. The following piece of code gives an example of a destination that is secured. The destination references a security-constraint that is also presented in the code.


    
        spring
        bookManager
    
    
        
    
    
        Custom
        
            ROLE_USER

This way the user is asked for a username/password using for instance using Basic authentication. This mechanism makes use of the application server. Since not all application servers use the same mechanism for authentication there are special implementations available for a number of application servers. If you want to use an application level authentication you need to create a custom LoginCommand.

At first I thought this was the way to go, to be honest I never really understood it. So maybe I am missing something. For now I think my solutions is more flexible and easier to understand for an average java programmer. Therefore the flex/BlazeDS model was not the way to go for me. Let’s go over to a general view of my solution.

Overview of my solution

I am a java programmer coming to the flex world. Therefore my solution might be a bit to java-ish. Since I am integrating with java and spring security specifically, I do not really mind. The following things were important to me when creating the solution:

No double configuration of roles for authorization, but the flex application must have the availability of obtained authorizations.
Easy recovery in case of exception due to bad credentials, unauthorized access of remote methods, session time out, etc.
No necessity for offline working (no authentication details available in the client)
Possibility of re-authentication in case of a session time out without asking for credentials again.

This all can be done using some hierarchy in classes, use of singletons for user data and custom events. The following image gives a schematic overview of the solution. You are missing the actual pages: Home and AuthenticationForm. You are also missing the actual service implementations on the server side. Both topics will be talked about later on.

Remote services, error handling and events.

The image shows the main components for authentication and authorization from the flex side. The yellow classes are provided by the framework, the green ones are services that interact with remote services and the data obtained from the server. The blue ones are the events used by the security mechanism to expose the results of authentication and authorization requests.

Let’s start with the services. The super class RemoteService contains some generic methods for catching and translating them into events. The constructor excepts an id and the name of the destination for the RemoteObject to create. Beware that this name should be the same as configured in the destination of the remoting-config.xml. The next block of code shows you the implementation of this RemoteService

/**
 * Super class for all remote services that contains some generic methods.
 */
public class RemoteService {
    private static var BAD_CREDENTIALS:String =
            "org.springframework.security.BadCredentialsException : Bad credentials";
    protected var remoteObject:RemoteObject;

    /**
     * Constructor accepting an id and destination for the actual RemoteObject to create. An event listener
     * is added for exceptions.
     * @param id String representing the id of the new RemoteObject to create
     * @param destination String representing the destination of the RemoteObject to create
     */
    public function RemoteService(id:String, destination:String) {
        this.remoteObject = new RemoteObject(id);
        this.remoteObject.destination = destination;
        this.remoteObject.addEventListener(FaultEvent.FAULT,onRemoteException);
    }

    /**
     * generic fault event handler for all remote object actions. based on the received message an action
     * is taken, mostly throwing a new event.
     * @param event FaultEvent received for handling
     */
    public function onRemoteException(event:FaultEvent):void {
        trace('code : ' + event.fault.faultCode +
              ', message : ' + event.fault.faultString +
              ',detail : ' + event.fault.faultDetail);

        if (event.fault.faultString == BAD_CREDENTIALS) {
            Application.application.dispatchEvent(
                    new AuthenticationFailureEvent(AuthenticationFailureEvent.AUTHENTICATION_FAILURE,
                            "problem while authenticating"))
        } else {
            Application.application.dispatchEvent(
                    new RemoteExceptionEvent(RemoteExceptionEvent.REMOTE_EXCEPTION,
                            "unknown problem occurred during a remote call : " + event.fault.message));
        }
    }
}

The onRemoteException is not finished yet, at the moment we only handle BAD_CREDENTIALS differently than other exceptions. I can imagine that we will have more exceptions here. But for now the structure is clear. Most important to notice is the use of events. Using the special Application object, we dispatch the AuthenticationFailureEvent as well as the RemoteExceptionEvent. The next thing is to create a sub-class of this service that actually uses the connection. So let’s have a look at the SecurityService

The SecurityService is used to authenticate a user making use of the provided username and password. The following block of code contains the implementation if this method:

public function authenticatePrincipal(username:String,password:String):void {
    var userData:UserData = UserData.getInstance();
    userData.username = username;
    userData.password = password;
    remoteObject.authenticatePrincipal.addEventListener(ResultEvent.RESULT,handleAuthenticatePrincipal);
    remoteObject.authenticatePrincipal(username,password);
}

Important in this piece of code is obtaining the singleton UserData instance. This instance contains the credentials and has some utility methods to see if the logged in user has administrative rights or is a plain user. The way to get the results back looks a bit strange to the average java programmer, but we are doing a-synchronous calls (like JMS guys). The next piece of code gets called if the response is received and handles this response.

protected function handleAuthenticatePrincipal(event:ResultEvent):void {
    var userData:UserData = UserData.getInstance();
    userData.authenticated = true;

    var obj:Object = event.result;
    var obtainedRoles:Array = obj.roles as Array;
    for(var i:int=0; i < obtainedRoles.length; i++) {
        userData.addGrantedRole(obtainedRoles[i])
    }

    Application.application.dispatchEvent(
            new AuthenticationEvent(AuthenticationEvent.AUTHENTICATION,"user is authenticated"));
};

As you can see in the code we tell the userData object that he is authenticated now and we add the roles he is authorized for. To make sure that those that are interested get notified of the authentication we throw an event.

The next step is to actually start the authentication process. This is done on the visual components. The first one that gets loaded is the Home.mxml page.

Visible components interacting with services

To demonstrate the complete authentication process we need only two visual components: Home.mxml and AuthenticationForm.mxml. I am not going to show them completely, you can browse the sources only. (see references at the bottom). In Home.mxml we add listeners for the AuthenticationEvent as well as the RemoteExceptionEvent, then we create the form and add it to the main content panel. The following piece of code shows just that:

private function initializeApplication():void {
    Application.application.addEventListener(AuthenticationEvent.AUTHENTICATION, handleAuthenticationEvent);
    Application.application.addEventListener(RemoteExceptionEvent.REMOTE_EXCEPTION, handleRemoteExceptionEvent);
    authenticateUser();
}

private function authenticateUser():void {
    myMainContentPanel.removeAllChildren();
    var authenticationForm:AuthenticationForm = new AuthenticationForm();
    authenticationForm.securityService = authenticationHelper;
    myMainContentPanel.addChild(authenticationForm);
}

As you can see in the code we call the method handleAuthenticationEvent when a user gets authenticated. This method is not interesting for our cause, it could just show Yes, I am authenticated in an alert box. Let’s have a look at the AuthenticationForm now. This is also a pretty simple class with a call to the security service and a method that handles the a-synchronous callback.

private function submitLogin():void {
    submitButton.enabled = false;
    Application.application.addEventListener(
            AuthenticationFailureEvent.AUTHENTICATION_FAILURE,loginServiceFaultHandler);
    securityService.authenticatePrincipal(userName.text,password.text);
}

private function loginServiceFaultHandler(event:AuthenticationFailureEvent):void {
    authenticationMessage.text = "Problem while authentication ...";
    authenticationMessage.visible = true;
    submitButton.enabled = true;
}

As you can see, the AuthenticationFailureEvent is handled by this form page. We show just a text that there was something wrong. In any other cases we let the Home page catch the AuthenticationEvent, we do nothing here.

Final part to cover is the server side implementation. That is what we’ll do next.

Server side implementations of remote services

Within the remoting-config.xml I have configured the following destination:


    
               nl.gridshore.samples.books.web.security.security.AuthenticationHelper

Within the class Authenticationhelper you can find the following method that obtains the spring application context, executes the authentication and handles the obtained principal. Take notice of the name of the bean we obtain. This is the default name when using the namespace configuration of spring-security. The other important part is the creation of the UsernamePasswordAuthenticationToken and doing the actual authentication. Problems with authentication result in a runtime exception that is propagated into flex and handled by the RemoteService object.

public AuthorizationData authenticatePrincipal(String username, String password) {
    ApplicationContext appContext = WebApplicationContextUtils.getWebApplicationContext(
            flex.messaging.FlexContext.getServletConfig().getServletContext());
    AuthenticationManager manager = (AuthenticationManager)appContext.getBean("_authenticationManager");
    UsernamePasswordAuthenticationToken usernamePasswordAuthenticationToken =
            new UsernamePasswordAuthenticationToken(username,password);

    Authentication authentication = manager.authenticate(usernamePasswordAuthenticationToken);
    SecurityContextHolder.getContext().setAuthentication(authentication);

    GrantedAuthority[] authorities =
            SecurityContextHolder.getContext().getAuthentication().getAuthorities();
    int numAuthorities = authorities.length;
    String[] grantedRoles = new String[numAuthorities];
    for (int counter = 0; counter < numAuthorities ; counter++) {
        grantedRoles[counter] = authorities[counter].getAuthority();
    }
    String name = SecurityContextHolder.getContext().getAuthentication().getName();
    return new AuthorizationData(grantedRoles,name);
}

That is about it, if you feel this is the way to go, check the sources in my google code repo. If you have strong opinion that this is just wrong, please share your thoughts.