View Full Version : UI state machine improvements in RC5

2013-03-19, 22:55
I've made some good improvements to the UI state machine in RC5. You can now switch between development mode and runtime mode and have the default states restored when you switch back. This simplifies the testing of state driven UIs.

I have also added a new action:


or as inline delegates:




This causes all UI components to revert back to their default attributes.

You can do this at the page level, section level or an individual UI component. e.g.

$("page: page1?action=resetstate||page: page1?action=changestate&state=showall")

Notice how actions can be chained together using ||

These "inline" delegates can be used effectively in "change", "click" or "data changed" delegates.

Using UI states that you define using the UI States Editor allows you to visually layout a page and "think" about how you want it to react as users enter data or data is displayed as you navigate through your data.

So the basis behind all this is that you build your page visually then declare the UI states that the page can have and what it should look like as it transitions through various UI states.

This UI state machine can be put to particularly good use when building workflow apps that you want to run in the cloud and mobile.

Note that you can specify a list of states as a comma separated list like this changestate:state1,state2,state3 or resetstate:state1,state2

I've also included an example App in RC5 called example_uistates which you can open, switch into runtime mode and see how the UI state machine can be used.