DIGG IT! The Wiki over at opensource.adobe.com is in full swing and recently the States enhancements were posted here I really like the changes as states were so complex to think about and edit without the design view. The new inline States allow you to declare state changes within components using a simple syntax and some new attributes. Before you had to define all the delta values externally within a state tag and this was very hard to edit by hand. Here are a few examples:
Inline States Syntax ( Note use of "includeIn" and "excludeFrom" ):
<!-- Given the states A,B,C -->
<m:states>
<m:State name="A"/>
<m:State name="B"/>
<m:State name="C"/>
</m:states>
<!-- This button will appear in only states A and B -->
<Button label="Click Me" includeIn="A, B"/>
<!-- This button will appear in states A and B -->
<Button label="Button C" excludeFrom="C"/>
State specific attributes:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="library:ns.adobe.com/flex/halo"
xmlns:m="http://ns.adobe.com/mxml/2009" layout="absolute">
<m:states>
<m:State name="landState"/>
<m:State name="airState"/>
<m:State name="waterState"/>
</m:states>
<mx:VBox id="vbox">
<mx:HBox>
<mx:Button id="land" label="Land" click="currentState='landState'" />
<mx:Button id="air" label="Air" click="currentState='airState'" />
<mx:Button id="water" label="Water" click="currentState='waterState'" />
</mx:HBox>
<mx:CheckBox label="Helicopter" color.airState="0xFF0000"/>
<mx:CheckBox label="Motorcycle" color.landState="0xFF0000" />
<mx:CheckBox label="Car" color.landState="0xFF0000" />
<mx:CheckBox label="Airplane" color.airState="0xFF0000"/>
<mx:CheckBox label="Train" color.landState="0xFF0000" />
<mx:CheckBox label="Boat" color.waterState="0xFF0000"/>
<mx:CheckBox label="Submarine" color.waterState="0xFF0000"/>
</mx:VBox>
</mx:Application>
Object Based Properties:
<mx:Application xmlns:mx="library:ns.adobe.com/flex/halo"
xmlns:m="http://ns.adobe.com/mxml/2009">
<m:states>
<m:State name="default"/>
<m:State name="glow"/>
</m:states>
<mx:Button label="Button" click="currentState=currentState=='glow'?'':'glow'">
<mx:filters>
<mx:DropShadowFilter distance="9" />
</mx:filters>
<mx:filters.glow>
<mx:GlowFilter/>
</mx:filters.glow>
</mx:Button>
</mx:Application>
<!-- Alternatively the above code could be written using
state specific nodes -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:m="http://ns.adobe.com/mxml/2009"
xmlns:mx="library:ns.adobe.com/flex/halo">
<m:states>
<m:State name="default"/>
<m:State name="glow"/>
</m:states>
<mx:Button label="Button" click="currentState=currentState=='glow'?'':'glow'">
<mx:filters>
<mx:DropShadowFilter distance="9" includeIn="default" />
<mx:GlowFilter includeIn="glow"/>
</mx:filters>
</mx:Button>
</mx:Application>
I especially like the simplicity of the new states. States were a very hard feature to use larger scale but the changes in Flex 4 really look to be a step in the right direction. I guess the more obvious thing for me is how open we are about sharing key information on a release so far in advance. We have done alphas before with Flex but being able to see inside of the early prototype stages is very cool. Trust me when I say that there is a ton more to come.
Cheers,
Ted :)
Ok Ted, that is just sexy. I'll look at it some more l8rz to see any ways to improve on it but at first look it just feels good.
I know it's still only in the early prototyping phase but do you know if the new state functionality can be used through ActionScript as well?
This makes ma happy also. One other thing I would love to see ( something I have already added as a feature request ) is the option to have components be destroyed when they are not in the current state. There are times when I do not want them hanging around in memory and especially do not want them retaining their existing values. This can be accomplished manually now, but would be much easier if I can just specify destroy = true.
@smakinson: I agree. +1 for that one.
@Ben, there will be associated changed to the states API, but the syntax itself is MXML specific. e.g. You'll be able to "set" state-specific properties, styles, event handlers from AS3, as well as including/excluding component instances from a given state or states very easily - dynamically.
@smakinson, *great* idea. Please feel free to chime in on the spec comments and your feedback will be incorporated.
I like seeing States get more love.
@smakinson: unfortunately the way the current Flash Player is built there is no way to force garbage collection and fully destroy items.
Unless Ted has information about new features of Flash Player 10 that he can release, your best bet it to add it to the Flash Player bug/wish list.
This is not a Flex specific feature.
Jolyon
@Jolyon, I don't think that's what smakinson means. I don't mean to speak for @smakinson but I'm not looking for GC.
What I mean is simply creating a brand new item every time you go to the new state. That is VERY handy. It doesn't have to use the GC just new MyItem() (under the hood).
I like the new syntax.
I'd like to make a request:
Please do not break cut-and-paste across different states in the visual designer. (It works today. Keep it working. Including comments.)
Early on in my Flex career I had a fairly complicated form and I realized I wanted to split it into a couple of states. Making the change in MXML was daunting, especially with the old syntax because I would have had to use a bunch of AddElement elements all over the place. Admittedly it would be less so with the new syntax, but still.
So I tried it in the designer and was wowed because:
1. It worked at all, which was pretty good because the designer figured out to put in all those AddElement elements.
2. It even moved my comments into the state. I really didn't expect that.
I tell this story when people ask me if the Flex visual designer is any good.
Thanks.