Building Sproutcore Apps with Statecharts (part 2)

by Evin

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:
Contacts Tool

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:

Collection Statechart

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.

This entry was posted on Sunday, February 22nd, 2009 at 2:36 pm and is filed under Best Practices. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Building Sproutcore Apps with Statecharts (part 2)”

  1. Mike Subelsky Says:

    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:

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

Leave a Reply