OK, What is it really look like…

So you might be reading the last post and got excited want to try it in one of your own applications. Then, the Reality Fairy drops by to seed doubt and you say, ‘Great, but what does it look like in real life’. So we have created an example application to show how it is done. First, we will start with the statecharts. This is a very simple application of a contact address book.

Using Statecharts for GUI Interactions…

The first statechart is of the general application structure and workflow:

You can see from the chart that there are two states that have substates. This one of the powers of statecharts in limiting the complexity of the application and diagram. The next statechart is for the File Upload Wizard:

Next, we will show the last state chart for the failure state:

Using Statecharts for Server Calls…

We created a new collection object that handles the calls to the server. The reason that this is helpful is that now you can use the objects currently loaded in the collection and then refresh the list in the background seamlessly. This is the state chart:

Example application

We created a really simple application called Contact Tool. It’s a port of the contacts sproutcore sample app to the new bitburger view with states for server calls. We’ve left all the state transitions explicit so you can see it go through all the states. You can also download the source from github here.

1. Mike Subelsky Says:
   May 28th, 2009 at 5:18 pm

   Just got around to reading these – great stuff! Now I see what all the fuss is about! Too bad the original statecharts book is out of print…

2. Mr Says:
   November 6th, 2009 at 6:30 pm

   Mike Subelsky: what book? Just google for Harel’s original paper! (and other pdfs)

Name (required)

Mail (will not be published) (required)

Website