Apache – Detecting client screen resolution

When creating the layout in your flex application, you can achieve a consistent screen resolution independent look and feel from using relative scaling.

This is much akin to creating a liquid layout with HTML.

For example, to create a simple two column application— left navigation and content— you only need two containers, one predefined and one left to scale indefinitely.

As follows:

<mx:HBox width="225">
    <mx:Button label="Menu 1"/>
    <mx:Button label="Menu 2"/>
    <mx:Button label="Menu 3"/>
</mx:HBox>
<mx:HBox width="100%">
    Any content here will flow fluidly across the entire screen regardless of window size/screen resolution.
</mx:HBox>

Using the above basics you can create a application layout that forms to any screen.

However, sometimes you need to create a more elaborate layout scheme with many interchanging components resizing dynamically to fit the window.

For this you can do Absolute Positioning. override the components updateDisplayList() function and create your own sizing/positioning rules.

This of course requires you to be within a Canvas container or have the main Application container set to absolute layout.

A simple example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void 
        {
            //find out how big we are
            var stageWidth:int = this.width;
            //center the box in the middle of the page.
            centeredBox.x = stageWidth - (centeredBox/2);
        }
    </mx:Script>
    <mx:HBox id="centeredBox" width="500"/>
</mx:Application>

By overriding updateDisplayList() you can create endless ways to better dynamically position and size your components to better use the screen realestate.

From http://www.sapethemape.com/2009/01/detecting-screen-resolution-in-flexair/, it looks like you can use Capabilities.screenResolutionX and Capabilities.screenResolutionY.

Example:

private function CapabilitiesMax():void
{
    width = Capabilities.screenResolutionX;
    height = Capabilities.screenResolutionY;
    stage.nativeWindow.x = 0;
    stage.nativeWindow.y = 0;
}