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>