flex组件使用

WipeUpExample.mxml
<?xml version="1.0"?>
<!-- Simple example to demonstrate the WipeUp effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:WipeUp id="wipeOut" duration="1000"/>
<mx:WipeUp id="wipeIn" duration="1000"/>

<mx:Panel title="WipeUp Effect Example" width="95%" height="95%"
paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">

<mx:Text width="100%" color="blue"
text="Use the WipeUp effect to show or hide the text and image."/>

<mx:Label text="Nokia 9930"
fontSize="14"
visible="{cb1.selected}"
hideEffect="{wipeOut}" showEffect="{wipeIn}"/>

<mx:Image source="@Embed(source='assets/Nokia_6630.png')"
visible="{cb1.selected}"
hideEffect="{wipeOut}" showEffect="{wipeIn}"/>

<mx:CheckBox id="cb1" label="visible" selected="true"/>

</mx:Panel>
</mx:Application>

SimpleEffectExample.mxml
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Effect class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[

import mx.controls.Alert;

// Event handler for the effectEnd event.
private function endEffectHandler():void {
Alert.show("Effect Ended!");
}

// Event handler for the reset button.
private function resetHandler():void {
expand.end();
img.width=30;
img.height=60;
button1.enabled=true;
}
]]>
</mx:Script>


<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"
duration="10000" effectEnd="endEffectHandler();"/>

<mx:Panel title="Resize Effect Example" width="100%" height="100%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Text width="100%" color="blue"
text="Use the Button controls to control the Resize effect."/>

<mx:Image id="img" width="30" height="60"
source="@Embed(source='assets/Nokia_6630.png')"/>

<mx:ControlBar>
<mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
<mx:Button label="Pause" click="expand.pause();"/>
<mx:Button label="Resume" click="expand.resume();"/>
<mx:Button label="Reverse" click="expand.reverse();"/>
<mx:Button label="End" click="expand.end();"/>
<mx:Button label="Reset" click="resetHandler();"/>
</mx:ControlBar>

</mx:Panel>
</mx:Application>


VBoxExample.mxml
<?xml version="1.0"?>
<!-- Simple example to demonstrate the VBox layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Panel title="VBox Container Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Label width="100%" color="blue"
text="A VBox container with vertically aligned children."/>

<mx:VBox borderStyle="solid" paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10">

<mx:Button label="Button 1"/>
<mx:Button label="Button 2"/>
<mx:Button label="Button 3"/>
<mx:ComboBox/>

</mx:VBox>

</mx:Panel>
</mx:Application>


SimpleHRule.mxml
<?xml version="1.0"?>
<!-- Simple example to demonstrate the HRule control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:WipeLeft id="myWL"/>

<mx:Panel title="HRule Control Example" id="myPanel"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

<mx:HRule rollOverEffect="{myWL}" width="100%" strokeWidth="1" strokeColor="red"/>
<mx:Label width="100%" color="blue"
text="Move mouse over HorizontalRule control to redraw it."/>

</mx:Panel>
</mx:Application>

ViewStackExample.mxml
<?xml version="1.0"?>
<!-- Simple example to demonstrate the ViewStack layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Panel title="ViewStack Container Example" height="95%" width="95%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Text width="100%" color="blue"
text="Use the Button controls to change panels of the ViewStack container."/>

<mx:HBox borderStyle="solid" width="100%"
paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

<mx:Button id="searchButton" label="Search Panel"
click="myViewStack.selectedChild=search;"/>
<mx:Button id="cInfoButton" label="Customer Info Panel"
click="myViewStack.selectedChild=custInfo;"/>
<mx:Button id="aInfoButton" label="Account Panel"
click="myViewStack.selectedChild=accountInfo;"/>
</mx:HBox>

<!-- Define the ViewStack and the three child containers and have it
resize up to the size of the container for the buttons. -->
<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

<mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">
<mx:Label text="Search Screen" color="#000000"/>
</mx:Canvas>

<mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
<mx:Label text="Customer Info" color="#000000"/>
</mx:Canvas>

<mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%">
<mx:Label text="Account Info" color="#000000"/>
</mx:Canvas>
</mx:ViewStack>

</mx:Panel>
</mx:Application>