Flex, resize children when parent is resize

Question

Hi

I have Buttons which I have rotated vertically within a Canvas, that is working fine. The problem occurs, when the user resizes the window to a small size a vertical scroll bar appears, I would rather have each button squashed upto a smaller size.

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="40" maxWidth="40" xmlns:myComponents="myComponents.*"
  horizontalScrollPolicy="off"
 creationComplete="created()" initialize="init()">
 <mx:Script>
  <![CDATA[
   import mx.effects.Rotate;

   function created() : void {
   addBtn("Personal");
   addBtn("Work");
   addBtn("Three");
   addBtn("Four");

   }

   function addBtn(name:String) {
    var newBtn: Button = new Button();
    newBtn.label = name;
    newBtn.styleName = "drawerButton";
    newBtn.width = 150;
    newBtn.x = (-newBtn.width / 2) + 50;
    newBtn.y = (-newBtn.height / 2) - 30;

    var rotationContainer:Canvas = new Canvas();
    rotationContainer.clipContent = false;
    rotationContainer.addChild(newBtn);
    rotationContainer.rotation = 90;
    rotationContainer.height = 150;

    uiContainer.addChild(rotationContainer);
   }

  ]]>
 </mx:Script>
 <mx:VBox x="5" y="30" right=""  >
  <mx:VBox id="uiContainer" right="0" verticalGap="2" >
  </mx:VBox>
 <mx:Button id="uiAdd" styleName="addButton" >
 </mx:Button>
 <mx:Button id="uiRename" styleName="renameButton">
 </mx:Button>
 <mx:Button id="uiDelete" styleName="deleteButton">
 </mx:Button>
 </mx:VBox>

So in this case the buttons would go from a width of 150 to min of 20.

Answer 1

don't know about Flex, but in Flash you would implement Event.RESIZE event listener, something like:

stage.addEventListener(Event.RESIZE, resizeInterface);

and then you resize your buttons in resizeInterface function.

Answer 2

You need to link up to the resize handler of the control that's being resized, and from there you can get the information that you need off of the event object, including (if you need it) the old width of the control. Here's a simple sample:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  xmlns:myComponents="myComponents.*">
    <mx:Script>
     <![CDATA[
      import mx.controls.Button;
      import mx.containers.Panel;
      import mx.events.ResizeEvent;

      public function resizePanel(width:int, height:int):void
      {
       thePanel.width = width;
       thePanel.height = height;
      }

      public function panel_resizeHandler(event:ResizeEvent):void
      {
       var myPanel:Panel = event.target as Panel;
       var padding:int = 10;
       var width:Number = myPanel.width - padding * 2;
       for(var i:int = 0; i < myPanel.childDescriptors.length; i++)
       {
        if(myPanel.childDescriptors[i].type == Button)
        {
         var myButton:Button = this[myPanel.childDescriptors[i].id] as Button;
         myButton.width = width;
        }
       }
      }
     ]]>
    </mx:Script>
    <mx:ControlBar>
     <mx:Button label="300x160" click="resizePanel(300, 160)" />
     <mx:Button label="800x160" click="resizePanel(800, 160)" />
    </mx:ControlBar>
    <mx:Resize id="resize" />
    <mx:Panel id="thePanel" resize="panel_resizeHandler(event)" width="800" resizeEffect="{resize}">
     <mx:Button id="fileBtn" label="File" width="200"/>
     <mx:Button id="editBtn" label="Edit" width="200"/>
     <mx:Button id="deleteBtn" label="Delete" width="200"/>
     <mx:Button id="aboutBtn" label="About" width="200"/>
    </mx:Panel>
</mx:Application>