StateGroups – finally found a use for them

State groups? Ever looked at them and though they look really useful but then can’t find a good use for them!
Well last year (yes its taken a while to finish of this post – hopefully its worth it), while developing some mobile apps I came across a great use for them. At the time their were also very few examples of using stategroups on-line and none in a practical setting.
So here goes, lets see how they’re done and where would be good to use them.

  • The problem
  • Mobile apps can have 1 of 3 DPI settings and this will change how your app looks. (320 DPI, 240 DPI and 120 DPI).
    So we can think of each of these DPI’s as a state.
    Then we can have a view and like most views you will use states. For example to have “Edit mode on” and “Edit mode off”.

  • That give is 2 different groups of states
  • Group 1 is the DPI setting.
    Group 2 is the view mode.

  • Soloution
  • I always like to see working examples of something, bit like a picture & a 1000 words.
    So below is a test app to change the values of and of course it has source code to view.


Click to open state group examples

I’ve also included below what I consider to be the important bits of the code to understand.
Check out the source code of the app for more detail.

<s:states>
	<!-- use these stategroups for setting values in components -->
	<s:State name="editOn" stateGroups="editIsOn" />
	<s:State name="editOff" stateGroups="editIsOff" />
	<s:State name="one" stateGroups="lowDPI" />
	<s:State name="two" stateGroups="medDPI" />
	<s:State name="three"  stateGroups="highDPI" />
 
	<!-- These are the usfull states -->
	<s:State name="editOn160" stateGroups="editIsOn,lowDPI" />
	<s:State name="editOn240" stateGroups="editIsOn,medDPI" />
	<s:State name="editOn320" stateGroups="editIsOn,highDPI" />
	<s:State name="editOff160" stateGroups="editIsOff,lowDPI" />
	<s:State name="editOff240" stateGroups="editIsOff,medDPI" />
	<s:State name="editOff320" stateGroups="editIsOff,highDPI" />	
</s:states>
<s:Label
	text.lowDPI="low DPI"
	text.medDPI="med DPI"
	text.highDPI="high DPI"
 
	text.editOff="edit Off"
	text.editOn="edit On"
	/>
<s:Label
	text.editOff120="edit Off 120"
	text.editOff240="edit Off 240"
	text.editOff360="edit Off 360"
 
	text.editOn120="edit On 120"
	text.editOn240="edit On 240"
	text.editOn360="edit On 360"
 
	text.editOn="edit On"
	text.editOff="edit Off"
 
	text.one="one"
	text.two="two"
	text.three="three"
	/>
 
<s:Label
	text.one="one"
	text.two="two"
	text.three="three"
 
	text.editIsOff="edit is Off"
	text.editIsOn="edit is On"
	/>

These are the various combinations of states you can use together, and the list of the actual states.
For example you can’t set text.one and text.lowDPI on the same component.

Hopefully this will give you a bit of insight into how and where to use stateGroups. Very useful tool under specific circumstances.

[ad name=”ad-1″]