Flex

commanding dawn

Over the last few weeks I have been trying to improve the documentation for Dawn on its GitHub page. I am slowly making progress (hindered a little by starting a new job) but realise there are still some real weak spots. One area in particular is Dawn’s use of the command pattern. I built Dawn’s commands in a bit of a rush while completing the project that demonstrated the need for them, so have held back giving them too much formal documentation until I can clean them up and add a couple more key features. That said, I still find them very useful in their current state so thought I’d write this little post to give them more of an airing.

There are lots of good reasons for using commands in your applications. They are a proven solutuion for all sorts of common problems in client side development such as queueing, cacheing, batching etc. They are also very useful for performing business logic that spans multiple domains within an application, and thus belong in no one domain alone.

Why make another command library?

Enough of why commands are good (we all know that), why does Dawn contain its own flavour of this oh so common pattern? In turns out providing the command pattern is not a simple as it might seem in Actionscript, at least not if you have some design principles you intend to stick to. Most of the frameworks I have come accross in actionscript provide commands in a pretty similar way, the steps are somethings like this

  1. Create a new object that implements some ICommand interface
  2. implement the execute method, which takes some generic object as its argument. Find a way to get hold of any objects you need, perhaps a service locator (PureMVC) or a singleton (Caringorm)
  3. define some string or event (a string type field) that triggers the command
  4. configure the framework to trigger the command on the newly defined event (one-to-one mapping)

So what is wrong with that? How could that be better? It seems to me that those steps break a number of principles I think are fairly important, it also looks like a lot of work which could go wrong.

Take step 1. “Create a new object that implements some ICommand interface“. Everyone loves a bit of programming to interfaces! But there a snag here with Actionscript, that ICommand interface will have defined a type for its argument e.g.

interface ICommand{
    function execute(event:FrameworkEvent):void
}

In actionscript there is no way for me to extend an interface and narrow the type of the argument, this for example would be impossible

interface MyCommand extends ICommand{
    function execute(event:MyFrameworkEvent):void
}

What that means is that any commands I write that want to get information out of the event that triggered them are going to have to cast the argument! Type safety FAIL! I want to be able to write type safe commands that know the exact type of their arguments.

Step 2. “implement the execute method, which takes some generic object as its argument. Find a way to get hold of any objects you need, perhaps a service locator (PureMVC) or a singleton (Caringorm)” You can probably guess what I dont like about that. Commands are so valuable because they can encapsulate complex logic that involves a number of parts of an application. But commands are stateless (created each time they are executed) and tend to be created by the framework, so how can they get hold of the objects that they need to act upon? In most frameworks I have come across objects that need to be involved in commands either need to implement the singleton pattern – the enemy of testable code! Or register with a service locator, which adds new dependencies on the command to a service locator class and a random string against which the object may (fingers crossed) be registered against. I want my commands to have as few dependencies as possible, I dont want to have to rely on strings to get hold of the core actors in my system, and I certainly dont want to fall into the many traps thats singletons lay.

step 3. “define some string or event (a string type field) that triggers the command” Having created this command in framework X I now need to think about how to trigger its execution. I might have to create a new object that extends some base event to do this, or I may just have to choose a string name. I can just about deal with this step, I know that there is going to have to be something that triggers the command (I just dont think string or events are very good choices).

step 4. “configure the framework to trigger the command on the newly defined event (one-to-one mapping)” This is where the previous step starts to frustrate me. I have to TELL the framework that the object I just created is the one that will trigger the command. This will most likely look something like so

framework.registerCommand( MyThing.NAME, MyLovelyCommand );

There are a couple of things I don’t like about that, firstly it depends on developer discipline (I dont have that!), meaning it’s up to me to check that the value of MyThing.NAME is what it should be, the compiler won’t care if all my NAME properties have the same value!! Secondly it’s configuration, and configuration does not rock my boat.

how is Dawn different?

Heres an example of what a typical command might look like in Dawn (in a typical hay making application).

class MakeHayCommand{
   [Inject] public var barn:Barn;

   [Execute] public function execute( note:MakeHay ):void{
      barn.makeHay(note.howMuchHay);
   }
}

There are a few things to note

  • there is no ICommand interface
  • the argument to the execute method is specific to the business logic being executed
  • the execute method has [Execute] metadata
  • the barn variable has [Inject] metadata

You might have already guessed that a Dawn command was not going to implement an ICommand interface.  Dawn tries to make the most of Actionscript by using metadata over interfaces here inorder to preserve type safety. When this command is triggered the method that has the [Execute] metadata will be invoked (this also means that we could call the method anything we like, something more meaningful, like, makeTheHay).  Now that we have an argument that is specific to the business logic being executed we no longer need to perform risky runtime casting.

My other major gripe with commands is how core actors within a system are reached, Dawn makes this easy by building upon its dependency injection library.  Just like any other object in Dawn, the command need only specify what it needs by providing the [Inject] metadata.  Dawn will ensure that the relavent objects are constructed/retrieved before the command is executed, so all the logic to fetch domain objects via service locators or singletons is removed, making for a terser more testable command.

While all that type safety would be good on its own it also hands us another easy win with a bit of dry configuration.  We (and Dawn) can see the type of the argument of the execute method, so we can completely skip the configuration step (thats the nasty bit where we start defining strings all over the place), the command is implicitly mapped to the MakeHay notification.

Setting up and triggering a command then looks much simpler

We tell Dawn we have a new command (but skip any mapping step)

commands.addCommand(MayHayCommand);

Since the command system is built on top of Dawns other libraries (DI and notifications) we can just send a notification of type MakeHay to trigger the command.

notificationBus.trigger(new MakeHay(numberOfBales));

and we’re done.

One more quick win

Another nice feature we get for free by building on top of the notification system is that any command you write is mapped by type, and types can be concrete classes (like the above example) or abstract classes or even interfaces.

Here is a command that will log any notification that implements IResponder

class LogRpcCommand {
    [Execute] public function execute( responder:mx.rpc.IResponder ):void {
        trace("making rpc call", responder);
    }
}

Recap

Hopefully I’ve gone someway in justifying why Dawn implements it’s own command pattern.  I wanted to ensure my code stayed type safe, I didn’t want to invent verbose ways of getting hold of objects within the system, and I didn’t want to map classes to string.

I still have someway to go with them, there is more I want from them (queueing baked in etc) but I already find them very useful, and well worth their place in Dawn.

Woo, I presented at Max

I gave my presentation at Adobe Max this morning on building Flex applications with PureMVC.  It was a real privilege to get the opportunity to speak, and I hope those who attended found it useful.

I also feel fortunate that I had such a good topic to talk on, as that always makes it easier :) so many thanks to Cliff for doing such a great job with PureMVC

In case anyone is interested I have uploaded the slides and the sample code…
code
slides (keynote)

slide (swf)

Project Snooze

A little while back I started a project called Project Snooze.  My idea was to port the basic functionalty of Hibernate to Adobe AIR, in the hope of making working with SQLite in AIR a much more fun/agile process.  I got quite a way with it back when I was commuting as I worked on the train.  Since then I have let it slip a little but now I’ve decided its about time I finished what I started!

The basic idea is that with a nominal amout of metadata Snooze can create your database, and perform CRUD operations for your objects.  It supports the most common relationship types, one-to-one, one-to-many, and many-to-many, and I am planning to build a querying api into it.

If your interested in finding out more about it you can check it out on github… where hopfully you will see a lot of commits from this lazy geek!

Speaking at Max

Some exciting news I left off the last post (as I thought it deserved its own) is that I have been confirmed as a speaker at Adobe Max Europe.  Im going to be speaking about building Flex applications with PureMVC, so a lot like the FlexCamp talk only this time I will be going into more detail…. I’m currently trying to figure out how to communicate something quite abstract without sounding dry, or making the usual mistake of just saying something is elegent without backing it up with facts/justification.  Hummm, righto back to keynote!

BlazeDS with Spring

With the release of BlazeDS from Adobe building your business logic in java just became a lot more accessible! In this post I’m going show the basics of setting up a Java, spring based application, then connecting to it from Flex via the flex.messaging.factory.SpringFactory . I’m going to keep the the domain (business logic) as simple as possible, and I’m not going to be persisting anything to a database. This is so I don’t get bogged down in details and can get straight to the point… connecting Flex to Java/Spring with BlazeDS…. so here we go!

What you’ll need.

The Steps!

Creating The Java

  1. Create a Spring project in eclipse named BlogExample and set the output folder to be war/WEB-INF/classes.
  2. Find the directory you unzipped the BlazeDS download into and navigate to the following directory {blaze install dir}/tomcat/webapps/blazeds/
  3. copy the contents of this directory into the new project (you should have copied two folders, called WEB-INF and META-INF. These folders contain the necessary libraries and config files for connecting to Java from Flex)
  4. Copy spring.jar file from {Spring unzip directory}/dist/ into the war/WEB-INF/lib directory of the project. The project now contains all the necessary library’s to connect Flex to Java. However as we are using Spring we will still need one more jar file which we will get in step 9
  5. Next you need to create your business logic, I have created a very simple POJO called SimpleBook.java, which contains two properties with getters and setters (you can download the complete project here which contains this simple class).
  6. Create a new Spring Bean Definition File called beans.xml inside the WEB-INF directory.
  7. Add the following lines to the new beans.xml file, it tells spring to instantiate SimpleBook and set its properties
    <bean id=”myBook” class=”uk.co.ziazoo.example.domain.SimpleBook”>
    <property name=”name” value=”my book” />
    </bean>
  8. Next we need to edit the services-config.xml and remoting-config.xml so that flex can connect to the application. Your can download mine from here (remoting-config.xml, services-config.xml). Be sure to change the endpoint in the services-config.xml to point to your local tomcat server. I have used the tomcat that come with the BlazeDS download as it comes pre-configured to work with BlazeDS.
  9. If you take a look within the services-config.xml you will see I am referencing a class named flex.messaging.factory.SpringFactory which doesn’t currently exist in the project. We can get this file thanks to http://www.igenko.org… here blazeds-spring-beta1.jar
  10. Once you have downloaded the blaze-spring-beta1.jar just copy it into the war/WEB-INF/lib folder
  11. Next its time to configure the web.xml file. The web.xml file that come with BlazeDS needs a little tweaking to get it to work with our spring app. Firstly the included file uses the older DTD based syntax, we need to change this to the newer XML scheme method. Once we have done that we need to change the <listener> property such that it fits the spring based development ideas. (The changes essentially allow Spring to instantiate the business classes, rather than letting Flex do it… this is crucial to the whole idea of Spring, and its called IoC, Inversion of Control). Once that changes are made the web.xml file should look like this web.xml
  12. The Java code is now complete, all that remains is to deploy it to the tomcat server, I have done this using Ant, blogging how to setup Ant and starting tomcat are all fairly in depth and very dependent on the system they are being installed on, so I’ll keep quite on that. If you are stuck I recommend reading the build.properties and build.xml files in my project.

The Flex

I am using Flex Builder 3.0, so these steps will vary for other IDS etc

  1. Create a new project and select the application type J2EE
  2. Set the root folder to to the context root of the java app withing tomcat ie /Users/Sam/Documents/blazeds_b1_121307/tomcat/webapps/blogexample
  3. Replace the contents of the main mxml file with the follow main.mxml
  4. Run the flex app.. and you should see the following
    Result

And thats your lot!!! :)

OOPS… forgot to upload the full Java code… here ya go Java code

Flex Cairngorm code example

Over the Christmas break I finally managed to claw an afternoon of free time together to knock up a little example application. Why bother? Well just about every client I go to meet and potentially work with wants to see some example code first… now since writing code is my job you wouldn’t think that was a very difficult task, but its not quite that simple. Often the projects I work on are very large, worked on by multiple programmers, and dependent on some server side code to run. Even when the projects are small enough to send to someone as an example I’m not even sure I have the legal right to-do so!

With the above in mind I though it was about time I created a little application that I could send around to plug my abilities etc, and you can see it here

A little about how it works

The app is built using Flex 3.0 and the Cairngorm framework. Data is pulled in via XML, and displayed using a simple image viewing component I created.

Why use Flex

Flex enables me to build the same breed of applications we have all been building with Flash for sometime… only with Flex we can do faster, more reliably, with a fuller api and using a decent IDE… whats not to like?

Why Cairngorm

Cairngorm is all about building complex RIA’s in a consistent MVC manner… adobe puts it like this “The Cairngorm microarchitecture is intended as a framework for Enterprise RIA developers”. As you may have noticed the little image viewer I’m using as my example code is no enterprise application, in fact it only has a couple of user gestures, I’m just trying to demonstrate my familiarity with the framework.

I think Cairngorm is very important to the Flex developer community, it offers a well proven methodology for building applications, which separates concerns, promotes testability and leads to very predictable, scalable solutions.

About the view

I wanted to build a little set of classes that would allow me to display items (which could be anything from products to images etc.) in a number of ways, and was simple to extend. The snappyviewer, which is the name of the component displaying the images is an implementation of those classes.

The main classes the view is built around are two interfaces IItemView and IItemDisplayer.

Both interfaces contain a function named display. The display function in IItemVIew is intended to delegate the displaying of items to the IItemDisplayer via composition. The display function in IItemDisplayer is implemented for various display types, ie, displaying items in a grid, or in a row (GridItemDisplayer & SlideItemDisplayer).

To change which type of view the IItemView uses I can set the IItemDisplayer though the dispayer setter function in IItemVIew and hey presto, the view is updated.

You can check out the code by right clicking on the application and selecting Source View.

Any feedback welcome :)

ps.. you can see the application here

Flex fights back with thermo

Over the last few months I have been keeping my fingers crossed for some real big changes in the Adobe Flex camp, they just arrived!

Since I first heard about Flex over a year ago and started working with it I have been very impressed. It’s a great platform for developers to create amazing web applications on… but for me there has been one big elephant in the room, and that’s the designer developer workflow!

We’ve all seen Blend combined with XAML now, and if you’re anything like me the first thing you thought when you saw it was why on earth cant Adobe do that with mxml!!!! And now it looks like they have with the project codenamed Thermo.

Adobe Thermo Logo

Thermo allows designers to use the tools they love (like the mouse…) and to draw the application as that want it. Thermo will then convert, on the fly (or when imported from a program like photoshop) the graphics into mxml! Perfect! It even allows for visual tweaking of motions and transitions. Its looks the the application I have been dreaming the Flash IDE would become for ages!

I personally can’t wait to see what comes of this… my hope (and this may be pie in the sky right now) is that we can in the not too distant future say goodbye to the Flash IDE (well, us developers at least). This would enable developers to focus on building applications rather that bullying design into behaving like one!

For more info on thermo check out this demo.

moxie makes beta

More great news coming out of Adobe today… Flex 3 (code named moxie) is now in Beta, and you can download the latest SDK, Flex Builder and Flash player from labs!. I’ve just had time to play with Flex builder and I’m already impressed.. the refactoring is better than I hoped, it gives you the option to preview the potential changes in a little file comparison window before committing them.. very neat ! Great work Adobe! …. Ooo, I just saw this video on video.onflex.org, it does a awesome job of demoing the new refactoring features!

more Flex 3 from ted

Its all about Ted Patrick’s blog this week, as more news about Flex 3 is coming out everyday… Today he’s blogged on the Components and SDK Enhancements which is all good news… but for me thus far the best changes are those to the code base… refactoring sounds awesome!!.. especially for someone who always makes embarrassing spelling mistakes in his variable names ;)