I would think the easiest way to address this is to create states for various screen resolution ranges, while keeping the rest of the application the same. Set the state based on the resize event calling a function from the application tag.
Otherwise, you'll have to create an algorithm (see rough example below) that re-sizes the container with the buttons, and places each button, depending on the screen size. There aren't any standard containers that wrap controls within a container. You might search for a custom container. <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"; creationComplete="initButtons()" resize="toolbarSize()" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Button; [Bindable] public var toolbarHeight:Number; [Bindable] public var myTAWidth:Number; public var myButton1:Button = new Button; public var myButton2:Button = new Button; private function toolbarSize():void{ var toolbarWidth:Number = 1000; if (this.width > 1000){ toolbarHeight = 50 trace (toolbarHeight); trace (this.height); } else if (this.width <= 1000){ toolbarHeight = (100); trace (toolbarHeight); trace (this.height); } myTAWidth = this.width; if (myTAWidth < 800){ myButton2.y = ((myButton1.y + myButton1.height) + 5); myButton2.x = 0; } if (myTAWidth >= 800){ myButton2.y = 0; myButton2.x = ((myButton1.x + myButton1.width) + 5); } } private function initButtons():void{ myButton1.label = 'Test Button 1' myButton1.width = 200; myButton1.height = 25; myTA.addChild(myButton1); myButton2.label = 'Test Button 2' myButton2.width = 200; myButton2.height = 25; myButton2.y = 0; myButton2.x = ((myButton1.x + myButton1.width) + 5); myTA.addChild(myButton2); toolbarSize(); } ]]> </mx:Script> <mx:HBox height="{toolbarHeight}" width="{myTAWidth}" id="myHBox" bottom="0" borderColor="#FF0101"> <mx:TextArea width="100%" height="100%" id="myTA"/> </mx:HBox> </mx:WindowedApplication> --- In [email protected], "Pan Troglodytes" <[EMAIL PROTECTED]> wrote: > > Using Flex 2, I'm having a bit of a problem figuring out how a toolbar > should be coded. I want a strip that runs along the bottom of the app. It > has a number of differently sized buttons on it, some regular buttons with > just an icon, some icons and text, some popup buttons, etc. When the app is > resized to not be wide enough to show all the buttons, I need the toolbar to > resize itself to be taller (consuming space from the rest of the app) so > none of the buttons are clipped and instead show up on subsequent rows of > the toolbar. > > I've looked into Grid and Tile and all of these seem to be based on having > cells that are all the same width. Unfortunately, that's not what I'm > looking for. Any pointers? > > -- > Jason >
