Search Flex Components Free

Custom Search

December 25, 2007

Flex Multi-state thumbnail example Source Code

Flex States Sample Source Code:
Create a file:
StateDemo.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*"
horizontalAlign="left"
creationComplete="srv.send()">

<mx:HTTPService id="srv" url="product.xml" useProxy="false"/>

<Thumbnail id="thumbnail" product="{srv.lastResult.product}"/>

<mx:Label text="Choose a state:"/>
<mx:RadioButton label="default" selected="true" click="thumbnail.currentState=''"/>
<mx:RadioButton label="medium" click="thumbnail.currentState='medium'"/>
<mx:RadioButton label="large" click="thumbnail.currentState='large'"/>

</mx:Application>

Thumbnail.mxml
<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF" verticalAlign="left"
paddingTop="4" paddingBottom="4" paddingLeft="4" paddingRight="4"
borderStyle="solid"
width="130" height="130"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
resizeEffect="Resize">

<mx:Script>

[Bindable]
public var product:Object;

</mx:Script>

<mx:Label text="{product.name}" fontSize="11" fontWeight="bold"/>

<mx:HBox>
<mx:Image id="img" source="{product.image}" width="38" height="75"/>
<mx:VBox id="features" width="100%" height="100%">
<mx:Label text="Price: {product.price}"/>
</mx:VBox>
</mx:HBox>

<mx:states>

<mx:State name="medium">

<mx:SetProperty name="width" value="200"/>
<mx:SetProperty name="height" value="200"/>
<mx:SetProperty target="{img}" name="width" value="50"/>
<mx:SetProperty target="{img}" name="height" value="100"/>

<mx:AddChild relativeTo="{features}">
<mx:Label text="Warranty: {product.warranty}"/>
</mx:AddChild>

</mx:State>

<mx:State name="large" basedOn="medium">

<mx:SetProperty name="width" value="300"/>
<mx:SetProperty name="height" value="300"/>
<mx:SetProperty target="{img}" name="width" value="75"/>
<mx:SetProperty target="{img}" name="height" value="150"/>

<mx:AddChild>
<mx:Text text="{product.description}" width="100%" height="100%"/>
</mx:AddChild>

</mx:State>

</mx:states>

</mx:VBox>

Related Flex Tutorials