Traditionally, states were meant to implement the look and feel of a component, totally independent of each other, so it was frequent to have repeating content between states. But all that has changed in Flex 4.
After reading a very helpful article about the recent changes, which you can find here, I was pleasantly surprised to see that state content was no longer segmented (in a sense that the content for a state, is completely separated for the other states) but rather, each element in the component can be assigned to a specific state. This way the states serve merely a design/functionality purpose, and the elements themselves can be included or excluded into or from a specific state. That way, no content is repeated.
Here is a quick example of this concept, a component consisting of a text (default state) and a button (expanded state):
First, the Flex 3 implementation:
<mx:states>
<mx:State name="default">
<mx:AddChild>
<mx:TextInput id="myTextInput" />
</mx:AddChild>
</mx:State>
<mx:State name="expanded">
<mx:AddChild>
<mx:TextInput id="myTextInput" />
<mx:Button id="myButton" />
</mx:AddChild>
</mx:State>
</mx:states>
You can see how the state layouts are completely independent of each other. Now let's take a look at the new way of defining states:
<s:states>
<s:State name="default" />
<s:State name="expanded" />
</s:states>
<s:VGroup>
<s:TextInput id="myTextInput" />
<s:Button id="myButton" includeIn="expanded" />
</s:VGroup>
Quite a difference. An equivalent implementation would be to use excludeFrom="default" instead of includeIn="expanded".
For more information regarding Flex 4 states changes and examples, read Adobe's Enhanced States Syntax article.
