Triggering effects when a container is resized

The following example uses a resizeEffect effect along with a Resize tween effect (<mx:Resize />) to create a smooth tween effect whenever the panel is resized

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2007/09/23/triggering-effects-when-a-container-is-resized/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white" >

     < mx:Script >
         <![CDATA[
            private function sizePanel(w:uint, h:uint):void {
                panel.width = w;
                panel.height = h;
            }
         ]]>
     </ mx:Script >

     < mx:Resize  id ="resize"   />

     < mx:ApplicationControlBar  dock ="true" >
         < mx:Button  label ="160x160"
                click ="sizePanel(160, 160);"   />
         < mx:Button  label ="240x160"
                click ="sizePanel(240, 160);"   />
         < mx:Button  label ="160x240"
                click ="sizePanel(160, 240);"   />
         < mx:Button  label ="320x240"
                click ="sizePanel(320, 240);"   />

         < mx:Spacer  width ="100%"   />

         < mx:Label  text ="w:{panel.width}, h:{panel.height}"   />
     </ mx:ApplicationControlBar >

     < mx:Panel  id ="panel"
            title ="title"
            status ="status"
            width ="320"
            height ="240"
            resizeEffect ="{resize}" >
         < mx:Accordion  id ="accordion"
                historyManagementEnabled ="false"
                width ="100%"
                height ="100%" >
             < mx:VBox  label ="Shipping Information"   />
             < mx:VBox  label ="Billing Information"   />
         </ mx:Accordion >
         < mx:ControlBar  id ="cb" >
             < mx:Button  />
         </ mx:ControlBar >
     </ mx:Panel >

</ mx:Application >

注意学习：

        <mx:Accordion id="accordion"
                historyManagementEnabled="false"
                width="100%"
                height="100%">
            <mx:VBox label="Shipping Information" />
            <mx:VBox label="Billing Information" />
        </mx:Accordion>