Question

What is UI state? Can you give me an example of something like that might be? Does it refer to things like keeping track of what tab is open for example?

Answer 1

I think the idea is that the application has state, and the UI reflects that state.

So when you app starts it goes like the following

1) Initial state (app is started up)
2) Loads initial data (“loading state”)
3) Is ready for interaction (“ready state”)

Now lets say the user starts an interaction by opening a form.

4) User opens form and goes to (‘editing form state’)

The user can cancel or save so now the states diverge. If cancel

5) The ‘editing form state’ receives the cancel event, discards the changes, and goes back to “Ready”

If save

5) The app goes to “Saving” state, then when done goes back to “Ready” or “Error”

The great thing about this conceptualization is that it allows your ‘state chart’ to update the application elements depending on the state. For example, in ‘loading’ or ‘saving’ states you can mask the UI or disable the buttons. The key point is that the views don’t need to know about the state, all it does is sit around and be manipulated. Its the state code that manages what views are doing what at any given time.

Note that is also correct for views in your UI to have state. For example, a button can have states like, ‘mouseenter’, ‘mouseexit’, ‘clickdown’, ‘clickup’, ‘inactive’, etc. A custom view in your UI can be considered to have states when it renders itself differently depending on the data it represents.

You might want to take a look at

http://www.wisdom.weizmann.ac.il/~harel/papers/Statecharts.pdf