Region States Sample

Spry States Sample

This sample shows you how you can use region states to let Spry manage when specific markup gets displayed.

In the table below, there are 7 dynamic regions. The first 4 are bound to individual data sets, the last three are bound to all, or some of the data sets. Notice that when you initially load this page, or if you press the "Reload" button below, that the markup in each region automatically switches between showing a loading message and either displaying data or displaying an error message.

Notice that all of the regions that depend on dsBad, all show error messages after loading, and that all regions that depend on data sets that successfully loaded display data.

The "Loading", "Error", "Ready", "Custom 1", and "Custom 2" buttons below allow you to manually switch each dynamic region into a specific state.

The built-in region states that are automatically triggered are:

"loading" - One or more of the data sets bound to the region is loading.
"error" - One ore more of the data sets bound to the region failed to load.
"ready" - All data sets bound to the region have loaded successfully.

The state of a region can be set manually with a call to setState(). If a region is called with a "custom" state that the region does not support, the setState() is ignored.

dsStates	dsPenn	dsCali	dsBad	All Data Sets	dsStates + dsPenn + dsCali	dsBad + dsPenn + dsCali
Loading all dsStates ... Failed to load dsStates! {name} {name} {name}, {name}	Loading dsPenn ... Failed to load dsPenn! {name} {name} {name}, {name}	Loading dsCali ... Failed to load dsCali! {name} {name} {name}, {name}	Loading dsBad ... Failed to load dsBad! {@value} dsBad Custom 1 Content! dsBad Custom 2 Content!	Loading all data sets ... Failed to load one or more data sets! All data sets loaded successfully! Custom 1 Content! Custom 2 Content!	Loading dsStates, dsPenn, and dsCali ... Failed to load one or more data sets! All data sets loaded successfully! Custom 1 Content! Custom 2 Content!	Loading dsBad, dsPenn, and dsCali ... Failed to load one or more data sets! All data sets loaded successfully! Custom 1 Content! Custom 2 Content!

You don't have to provide markup for all states:

This will show up on error --> An error occurred!

This will show on custom1 --> Custom 1 State

The RSS Reader Demo gives a real-world use example of region states.