Flex States Sample Source Code:
Create a file:
StateDemo2.mxml
|
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*"
creationComplete="srv.send()"> <mx:HTTPService id="srv" url="../assets/catalog.xml"
result="catalog = new ArrayCollection(srv.lastResult.catalog.product)"/> <mx:Script> import mx.collections.ArrayCollection; [Bindable]
public var catalog:ArrayCollection; </mx:Script> <mx:Label text="Click on a product to see details"/>
<mx:VBox width="100%" height="100%" borderStyle="solid"
paddingTop="4" paddingBottom="4" paddingLeft="4" paddingRight="4">
<mx:Repeater id="list" dataProvider="{catalog}" width="100%" height="100%">
<ProductListItem product="{list.currentItem}"/>
</mx:Repeater>
</mx:VBox> </mx:Application>
|
| ProductListItems.mxml |
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"> <mx:Script> [Bindable]
public var product:Object; private function toggleState() : void
{
currentState = currentState == "expanded" ? "" : "expanded";
} </mx:Script> <mx:HBox width="100%" mouseDown="toggleState()">
<mx:Label text="{product.name}" width="200"/>
<mx:Label text="Price: {product.price}"/>
</mx:HBox> <mx:states> <mx:State name="expanded">
<mx:AddChild>
<mx:HBox width="100%">
<mx:Image source="../{product.image}" height="100" width="50"/>
<mx:Text text="{product.description}" width="100%"/>
</mx:HBox>
</mx:AddChild>
</mx:State> </mx:states> </mx:VBox> |
