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:
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.