Setup overview

Typical demo setup

All of the examples are set up in the same way:

1. HTML elements to represent state, and buttons to call actions
2. Global CSS styles to make the page look pretty, with local styles where required
3. A page script to configure the states and handlers and create the StateMachine
4. A call to a StateHelper (see below) which takes care of the base wiring from the StateMachine to your UI

The code for the example above is:

var fsm = new StateMachine({
    transitions: [
        'next : a > b > c',
        'back : a < b < c'
    ]
});

StateHelper.jQuery(fsm);

This code sets up the StateMachine's transitions (actions and states) and in is where you add additional event listeners, configuration, etc.

The call to StateHelper is optional, but it can used to quickly wire up a UI (see below).

Note the following regarding all demo files:

• The code is similar across demos
• All the code for each demo is on the page
• The StateMachine for each demo is accessible via the console, e.g. fsm.do('next')
• Check console for additional output

Basic handler/event setup

StateMachine communicates changes in its state to the outside world via events.

In order to respond to a system changing state, you need to assign event handlers, either through the config, or manually:

// config
handlers: {
    'change': function(event, fsm) {
        // update ui
        // do stuff
    }
}

// manually
fsm.on('change', function(event, fsm) {
    // update ui
    // do stuff
});

Handlers for a connected UI

There are various states you'll want to to monitor to reflect available actions, states and transition for any connected UI, and they are:

• system.change
• transition.pause, transition.resume and transition.cancel

If you think your system will have additional state and/or actions added or removed, you'll also need to listen to:

• state.add and state.remove
• action.add and action.remove

As with vanilla JavaScript, any passed events will contain information regarding the state change, and you should update your UI accordingly.

Helpers

Although it's quite straightforward to set up event handlers yourself, the JavaScript code is essentially the same between applications, so a class, StateHelper, is provided to give you one-liner setup of the very basics, including:

• Current state
• Available actions
• Whether the transition is paused or not

StateHelper has a few environment-specific methods that cater for jQuery, Vue, etc., that auto-wire UIs, depending on your setup.

It is strongly advised if you are going to use StateHelper, to look at and understand the underlying code. It's not at all complicated, but it is recommended to get a handle on pub/sub setup.

See the next section for more info.