May 07
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.
By Ted. ; )
