視圖狀態(tài)切換：
<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF">
<mx:states>
<mx:State name="Description">
<mx:AddChild relativeTo="{hbox1}" position="before">
<mx:TextArea width="200" height="180"
borderStyle="none"
text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. "/>
</mx:AddChild>
<mx:RemoveChild target="{descButton}"/>
<mx:AddChild relativeTo="{hbox1}" position="before">
<mx:Button label="Close Description"
click="this.currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:VBox id="vbox1" borderStyle="outset" paddingLeft="5" paddingBottom="5" paddingRight="5" paddingTop="5">
<mx:Label text="Product Name" fontWeight="bold" />
<mx:Button label="Open Description"
click="this.currentState='Description'"
id="descButton"/>
<mx:HBox id="hbox1">
<mx:Label text="$3.99"/>
<mx:NumericStepper id="qty" minimum="1"
maximum="10" stepSize="1"/>
<mx:Button label="Add to Cart"/>
</mx:HBox>
</mx:VBox>
</mx:Application>
使用過渡：由于狀態(tài)切換過于突然，要變的溫和一些
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="400" layout="absolute"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
backgroundColor="#FFFFFF">
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[panel1,panel2,panel3]}">
<mx:Move duration="400"/>
<mx:Rotate angleFrom="0" angleTo="360" filter="move" />
<mx:Resize duration="400"/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="s1">
<mx:SetProperty target="{panel1}" name="x" value="5"/>
<mx:SetProperty target="{panel1}" name="y" value="60"/>
<mx:SetProperty target="{panel1}" name="height" value="300"/>
<mx:SetProperty target="{panel1}" name="width" value="390"/>
<mx:SetProperty target="{panel2}" name="x" value="135"/>
<mx:SetProperty target="{panel2}" name="y" value="10"/>
<mx:SetProperty target="{panel2}" name="height" value="30"/>
<mx:SetProperty target="{panel2}" name="width" value="125"/>
<mx:SetProperty target="{panel3}" name="x" value="270"/>
<mx:SetProperty target="{panel3}" name="y" value="10"/>
<mx:SetProperty target="{panel3}" name="height" value="30"/>
<mx:SetProperty target="{panel3}" name="width" value="125"/>
</mx:State>
<mx:State name="s2">
<mx:SetProperty target="{panel1}" name="x" value="5"/>
<mx:SetProperty target="{panel1}" name="y" value="10"/>
<mx:SetProperty target="{panel1}" name="height" value="30"/>
<mx:SetProperty target="{panel1}" name="width" value="125"/>
<mx:SetProperty target="{panel2}" name="width" value="390"/>
<mx:SetProperty target="{panel2}" name="height" value="300"/>
<mx:SetProperty target="{panel2}" name="x" value="5"/>
<mx:SetProperty target="{panel2}" name="y" value="60"/>
<mx:SetProperty target="{panel3}" name="x" value="270"/>
<mx:SetProperty target="{panel3}" name="y" value="10"/>
<mx:SetProperty target="{panel3}" name="height" value="30"/>
<mx:SetProperty target="{panel3}" name="width" value="125"/>
</mx:State>
<mx:State name="s3">
<mx:SetProperty target="{panel1}" name="x" value="5"/>
<mx:SetProperty target="{panel1}" name="y" value="10"/>
<mx:SetProperty target="{panel1}" name="height" value="30"/>
<mx:SetProperty target="{panel1}" name="width" value="125"/>
<mx:SetProperty target="{panel2}" name="x" value="135"/>
<mx:SetProperty target="{panel2}" name="y" value="10"/>
<mx:SetProperty target="{panel2}" name="height" value="30"/>
<mx:SetProperty target="{panel2}" name="width" value="125"/>
<mx:SetProperty target="{panel3}" name="width" value="390"/>
<mx:SetProperty target="{panel3}" name="height" value="300"/>
<mx:SetProperty target="{panel3}" name="x" value="5"/>
<mx:SetProperty target="{panel3}" name="y" value="60"/>
</mx:State>
</mx:states>
<mx:Panel x="5" y="10" width="125" height="30" layout="absolute" title="Panel 1" id="panel1" click="this.currentState='s1'"/>
<mx:Panel x="135" y="10" width="125" height="30" layout="absolute" title="Panel 2" id="panel2" click="this.currentState='s2'"/>
<mx:Panel x="270" y="10" width="125" height="30" layout="absolute" id="panel3" title="Panel 3" click="this.currentState='s3'"/>
<mx:Button x="167" y="368" label="Reset" click="this.currentState=''"/>
</mx:Application>
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="400" layout="absolute"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
backgroundColor="#FFFFFF">
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[panel1,panel2,panel3]}">
<mx:Move duration="400"/>
<mx:Rotate angleFrom="0" angleTo="360" filter="move" />
<mx:Resize duration="400"/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="s1">
<mx:SetProperty target="{panel1}" name="x" value="5"/>
<mx:SetProperty target="{panel1}" name="y" value="60"/>
<mx:SetProperty target="{panel1}" name="height" value="300"/>
<mx:SetProperty target="{panel1}" name="width" value="390"/>
<mx:SetProperty target="{panel2}" name="x" value="135"/>
<mx:SetProperty target="{panel2}" name="y" value="10"/>
<mx:SetProperty target="{panel2}" name="height" value="30"/>
<mx:SetProperty target="{panel2}" name="width" value="125"/>
<mx:SetProperty target="{panel3}" name="x" value="270"/>
<mx:SetProperty target="{panel3}" name="y" value="10"/>
<mx:SetProperty target="{panel3}" name="height" value="30"/>
<mx:SetProperty target="{panel3}" name="width" value="125"/>
</mx:State>
<mx:State name="s2">
<mx:SetProperty target="{panel1}" name="x" value="5"/>
<mx:SetProperty target="{panel1}" name="y" value="10"/>
<mx:SetProperty target="{panel1}" name="height" value="30"/>
<mx:SetProperty target="{panel1}" name="width" value="125"/>
<mx:SetProperty target="{panel2}" name="width" value="390"/>
<mx:SetProperty target="{panel2}" name="height" value="300"/>
<mx:SetProperty target="{panel2}" name="x" value="5"/>
<mx:SetProperty target="{panel2}" name="y" value="60"/>
<mx:SetProperty target="{panel3}" name="x" value="270"/>
<mx:SetProperty target="{panel3}" name="y" value="10"/>
<mx:SetProperty target="{panel3}" name="height" value="30"/>
<mx:SetProperty target="{panel3}" name="width" value="125"/>
</mx:State>
<mx:State name="s3">
<mx:SetProperty target="{panel1}" name="x" value="5"/>
<mx:SetProperty target="{panel1}" name="y" value="10"/>
<mx:SetProperty target="{panel1}" name="height" value="30"/>
<mx:SetProperty target="{panel1}" name="width" value="125"/>
<mx:SetProperty target="{panel2}" name="x" value="135"/>
<mx:SetProperty target="{panel2}" name="y" value="10"/>
<mx:SetProperty target="{panel2}" name="height" value="30"/>
<mx:SetProperty target="{panel2}" name="width" value="125"/>
<mx:SetProperty target="{panel3}" name="width" value="390"/>
<mx:SetProperty target="{panel3}" name="height" value="300"/>
<mx:SetProperty target="{panel3}" name="x" value="5"/>
<mx:SetProperty target="{panel3}" name="y" value="60"/>
</mx:State>
</mx:states>
<mx:Panel x="5" y="10" width="125" height="30" layout="absolute" title="Panel 1" id="panel1" click="this.currentState='s1'"/>
<mx:Panel x="135" y="10" width="125" height="30" layout="absolute" title="Panel 2" id="panel2" click="this.currentState='s2'"/>
<mx:Panel x="270" y="10" width="125" height="30" layout="absolute" id="panel3" title="Panel 3" click="this.currentState='s3'"/>
<mx:Button x="167" y="368" label="Reset" click="this.currentState=''"/>
</mx:Application>
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="400" layout="absolute"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
backgroundColor="#FFFFFF">
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence targets="{[panel1,panel2,panel3]}">
<mx:Move duration="400"/>
<mx:Rotate angleFrom="0" angleTo="360" filter="move" />
<mx:Resize duration="400"/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="s1">
<mx:SetProperty target="{panel1}" name="x" value="5"/>
<mx:SetProperty target="{panel1}" name="y" value="60"/>
<mx:SetProperty target="{panel1}" name="height" value="300"/>
<mx:SetProperty target="{panel1}" name="width" value="390"/>
<mx:SetProperty target="{panel2}" name="x" value="135"/>
<mx:SetProperty target="{panel2}" name="y" value="10"/>
<mx:SetProperty target="{panel2}" name="height" value="30"/>
<mx:SetProperty target="{panel2}" name="width" value="125"/>
<mx:SetProperty target="{panel3}" name="x" value="270"/>
<mx:SetProperty target="{panel3}" name="y" value="10"/>
<mx:SetProperty target="{panel3}" name="height" value="30"/>
<mx:SetProperty target="{panel3}" name="width" value="125"/>
</mx:State>
<mx:State name="s2">
<mx:SetProperty target="{panel1}" name="x" value="5"/>
<mx:SetProperty target="{panel1}" name="y" value="10"/>
<mx:SetProperty target="{panel1}" name="height" value="30"/>
<mx:SetProperty target="{panel1}" name="width" value="125"/>
<mx:SetProperty target="{panel2}" name="width" value="390"/>
<mx:SetProperty target="{panel2}" name="height" value="300"/>
<mx:SetProperty target="{panel2}" name="x" value="5"/>
<mx:SetProperty target="{panel2}" name="y" value="60"/>
<mx:SetProperty target="{panel3}" name="x" value="270"/>
<mx:SetProperty target="{panel3}" name="y" value="10"/>
<mx:SetProperty target="{panel3}" name="height" value="30"/>
<mx:SetProperty target="{panel3}" name="width" value="125"/>
</mx:State>
<mx:State name="s3">
<mx:SetProperty target="{panel1}" name="x" value="5"/>
<mx:SetProperty target="{panel1}" name="y" value="10"/>
<mx:SetProperty target="{panel1}" name="height" value="30"/>
<mx:SetProperty target="{panel1}" name="width" value="125"/>
<mx:SetProperty target="{panel2}" name="x" value="135"/>
<mx:SetProperty target="{panel2}" name="y" value="10"/>
<mx:SetProperty target="{panel2}" name="height" value="30"/>
<mx:SetProperty target="{panel2}" name="width" value="125"/>
<mx:SetProperty target="{panel3}" name="width" value="390"/>
<mx:SetProperty target="{panel3}" name="height" value="300"/>
<mx:SetProperty target="{panel3}" name="x" value="5"/>
<mx:SetProperty target="{panel3}" name="y" value="60"/>
</mx:State>
</mx:states>
<mx:Panel x="5" y="10" width="125" height="30" layout="absolute" title="Panel 1" id="panel1" click="this.currentState='s1'"/>
<mx:Panel x="135" y="10" width="125" height="30" layout="absolute" title="Panel 2" id="panel2" click="this.currentState='s2'"/>
<mx:Panel x="270" y="10" width="125" height="30" layout="absolute" id="panel3" title="Panel 3" click="this.currentState='s3'"/>
<mx:Button x="167" y="368" label="Reset" click="this.currentState=''"/>
</mx:Application>
posted on 2011-03-15 15:54
長春語林科技 閱讀(179)
評論(0) 編輯 收藏 所屬分類:
flex