Resizing container on resize of application window in Adobe Flex/AIR Application

I am working on an Adobe AIR Application. The size on Application window is 800X600 and is contains border container and border container contains many controls.

What I want is to if user re-sizes the application then that container should also be re-sized according to scale. i.e If user maximizes or minimizes the w开发者_开发百科indow then that border container should also be maximized or minimized respectively.

If you don't want to (or can't for some reason) use percentage based widths then you can always just do the following in MXML:

<s:BorderContainer 
    xmlns:mx = "http://www.adobe.com/2006/mxml"
    xmlns:s = "library://ns.adobe.com/flex/spark"

    width = "{parentApplication.width / 2}"
    height = "{parentApplication.height / 2}">

You are just getting a reference to the component's parentApplication and directly binding to its width and height. Throw whatever math you want on the end.

An easier way to do this is to have your components declare their sizes/positions relative to their outer containers. For example, rather than setting x, y, width and height, set left, right, top and bottom in your Application component as well as the containers within your Application. If you want to enforce a minimum size of 800x600, you can set the minWidth and minHeight properties. Hope that helps.

This can be accomplished using an MVC framework. Some options include RobotLegs, Mate, Cairngorm or it is possible to use some quick design patterns and implement a custom version.

Essentially, the Application event Event.RESIZE should be detected and applied to the container. The properties of stageHeight and stageWidth will give the necessary info to resize the container.

Resize events will traverse the display hierarchy in any case, but it's convenient to intercept at the application level, should a custom event or function apply to the controls.