Question

I’m getting in to a situation where I have several interacting widgets (on a web UI), all of whom can be in multiple different states, and whose behavior depends on others the others. I’m running in to situations where, for example, a set of data gets sorted twice, or the data gets displayed before it’s sorted, rather than the other way around. It’s a little bit of a wack-a-mole problem, where I think I’ve simplified things and gotten it working, only to find out I’ve broken things somewhere else.

I have functions that do things like:

widgetAFunction   load data into widget B   tell widget B to sort the data   tell widget B to display the data 

My love of code reuse makes me want to do something like write a loadData function in widget A that goes something like this:

widgetBLoadDataFunction   update data   sort the data   refresh the view 

So that all widgetA has to do is call one function on widgetB. But then there are cases where I just want to sort the data, without updating the data, so I write:

widgetBSortFunction   sort the data   refresh the view 

And then maybe I want a filter function

widgetBFilterFunction filter the data refresh the view

And maybe I want to be update the data but not sort it, so I have

widgetBNoSortLoadDataFunction   update data   refresh the view 

It doesn’t seem that complex, but I wind up with these really long, very brittle chains of function calls, or a bunch of very similar calls. As Martin Fowler would say, the code is getting a little smelly.

So, what other alternatives do I have? I did something on a recent project where I did a state machine kind of thing, where I registered a bunch of functions with a set of conditions, or states which would trigger their execution. That worked somewhat well, and I’m thinking that approach might be good to use again.

Does anyone know what I’m talking about here, and even better, can anyone point me toward some patterns that will help me get my head around this better?

Answer 1

What you need is a finite state machine implementation. Basically every finite state machine needs:

• Events that the program responds to
• States where the program waits between events
• Transitions between states in response to events
• Actions taken during transitions
• Variables that hold values needed by actions between events

A good article from IBM teachs you a way of implementing it by means of Javascript.

Edit: Here is a FSM builder, so you don’t have to build your own.