FSM Visualisation

OK, have put together the first visualisation for a pureMVC StateMachine Utility markup tool.

The purposes of this tool are:
1) to make a state diagram for easier visualisation of the flow of your application
2) to create the FSMInjector class for your application, along with all the necessary constants, and the XML declaration.

I’m using the flare framework and what you see is really just a development from the Dependency Graph.

The visualisation data is stored as a text file in JSON, along with all the metadata associated with each node and edge. This will be the file format for saving and retrieving work. There will also eventually be an export routine that will convert this format into the FSMInjector.

At the moment we just have the ability to visualise, not to edit. The next pieces of functionality I will be working on will be:
1) adding states.
2) deleting states.
3) adding edges (actions).
4) deleting edges.

[kml_flashembed movie=”http://www.revisual.co.uk/uploads/2009/may/fsm/demo1/demo1.swf” height=”400″ width=”470″ /]

Asynch StateMachine Demo 2

Using the AsyncCommand util (pureMVC)
I wanted to see how the AsynchCommand would work with the synchronous nature of the StateMachine, and whether the AsynchMacroCommand would hold the thread until its completion. Unfortunately in this example it seems that it doesn’t: the DISPLAY state is entered before the asynchrous loading process ends. This is safe in this demo as the progress window is modal and inhibits interaction, but this could open windows of uncertainty.

State Diagram:
[kml_flashembed movie=”http://www.revisual.co.uk/uploads/2009/jan/asynchStateDemo2/state_diagram2.swf” height=”180″ width=”300″ /]

In this demo, there are only two states. The loading takes place when entering the DISPLAY state.

Demo App:
[kml_flashembed movie=”http://www.revisual.co.uk/uploads/2009/jan/asynchStateDemo2/asynchStateDemo2.swf” height=”300″ width=”470″ /]

Asynch StateMachine Demo

I’ve whipped up a quick demo for the pureMVC StateMachine utility, illustrating the encapsulation of an asynchronous process (loading external images) within a state.

State Diagram:
[kml_flashembed movie=”http://www.revisual.co.uk/uploads/2009/jan/asynchStateDemo/state_diagram.swf” height=”180″ width=”300″ /]
The red LOADING state represents the non-interactive state, were the laoding takes place. The state is left when all the images are loaded (to DISPLAY), or an error occurs (to READY).

Demo App:
[kml_flashembed movie=”http://www.revisual.co.uk/uploads/2009/jan/asynchStateDemo/asynchStateDemo.swf” height=”300″ width=”470″ /]

brain freeze

I have been working lots on my Domino project, to-ing and fro-ing about its complexity and its usefulness. Been bouncing ideas of Pedr Brown, which has been good (he didn’t think it was a useless idea, just that I was going about it from the arse end).

So I’m almost there with the core classes, and am working up a unit test to give it a twice over.

These classes will provide the model and controller for the command chains. The next step (at Pedr’s suggestion) will be creating a visualisation tool for the model: basically drawing up a non-interactive flow diagram of the command processes, so you can see their relationships to eachother.

The final step, if all goes well, will be to create an interactive visualisation tool… which will be the biggy.

My main headache has been trying to hook it up to the StateMachine utility, because of its Synchronous nature. But lets tackle that problem when we get there, mmm?

here’s to it :)

Domino effect

Have had a bit more time of my hands at the moment, so I having been spending more time with my son, and have had renewed enthusiasm for my Domino project…

The new pureMVC StateMachine Utility has enabled my to simplify my ideas again.

Be assured, I shall be posting my ideas here soon… as long as I don’t bog myself down in detail again.

PureMVC StateMachine Utility

Well, finally my StateMachine utility is officially hosted on the pureMVC Manifold… download it here.

Its quite different than the original in a number of ways:

1) the utility conforms to the basic SCXML standard, and comes with a FSMInjector class that creates the StateMachine from an SCXML defined model.

2) the transitions from state to state are no longer purely linear; multiple legitimate target states can be defined within each state, so the transitions can be dynamically decided at run time.

3) the StateMachine class now only sends notifications, it doesn’t execute registered commands directly. This means that other actors (ie Mediators) can declare an interest in them.

4) transitions can be cancelled from the exiting phase.

When I’ve a little more time I shall write a more in depth tutorial. But for the moment, have a play, and see what you think…

cheers :~)

pureMVC simple StateMachine utility

*Update see this post for the latest version*

Here is an implementation of a simple State Machine for pureMVC that I whipped up for a project. This is really useful for anyone creating applications, honest, its saved my life a few times :) It suddenly occurred to me that because its so simple I’ve been taking its power for granted, and I should share it for the greater geek good. I’ve been using it in combination with trilec’s command chaining utility as a way of controling my command structures.

Have put the code in the svn on my google code page and will prepare a download when I’ve documented it.

Initiate the StateMachine

// instanitate 
var stateMachine:StateMachine = new StateMachine();
// register with the facade before registering any commands
// create a state 
var state:State = new State(ApplicationStates.STATE_ONE)
// register the commands to be triggered when 
// entering and exiting that state 
// repeat for each state (this can be done any time)
state = new State(ApplicationStates.STATE_TWO)

Changing State
This is very simple, just send a notification from anywhere within the pureMVC framework with a new state as its body:

// create a state 
var state:State = new State(ApplicationStates.STATE_TWO)

[kml_flashembed movie=”http://www.revisual.co.uk/uploads/2008/oct/statemachine/state_machine_demo.swf” height=”300″ width=”470″ /]