What is the right way to scale a Flex application up to fullscreen?

Question

Fullscreen mode and I have been battling for a while in this Flex application, and I'm coming up short on Google results to end my woes. I have no problem going into fullscreen mode by doing a Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;, but the rest of the content just sits there in the top, left corner at it's original size.

All right, says I, I'll just do a stage.scaleMode = StageScaleMode.SHOW_ALL and make it figure out how to pull this off. And it looks like it does. Except that when you mouse over the individual checkboxes and buttons and various components, they all fidget slightly. Just a slight jump up or down as they resize...on mouse over. Well, this is frustrating, but bearable. I can always just invoke invalidateSize() explicitly for all of them.

But for the comboboxes. The ones at the bottom have their menus go off the bottom of the screen, and when I pop out of fullscreen mode, their drop downs cut off half way. I have no idea how to fix that. Can someone step in here, and put me out of my misery?

What is the right way to scale a Flex application up to fullscreen?

var button:Button = button_fullscreen;
try {
    if(stage.displayState == StageDisplayState.FULL_SCREEN) {
        Application.application.stage.displayState = StageDisplayState.NORMAL;
        button.label = "View Fullscreen Mode";
        stage.scaleMode = StageScaleMode.NO_SCALE;
    } else {
        Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
        button.label = "Exit Fullscreen Mode";
        stage.scaleMode = StageScaleMode.SHOW_ALL;
    }
    invalidateSizes(); // Calls invalidateSize() explicitly on several components.
} catch(error:SecurityError) {
    Alert.show("The security settings of your computer prevent this from being displayed in fullscreen.","Error: "+error.name+" #"+error.errorID);
} catch(error:Error) {
    Alert.show(error.message,error.name+" #"+error.errorID);
}

Answer 1

Hi,

Sometimes things go wrong with flex :)

try the following approach

stage.align = StageAlign.TOP_LEFT;

then on resize or added to stage set the scaling manually

private function updateScaling():void
{
   if(stage.stageWidth != width || stage.stageHeight != height)
   {
       var scaling:Number = 1;
       if(width>height)
       {
          scaling = stage.stageWidth / width;
       }
       else
       {
         scaling = stage.stageHeight / height;
       }

       scaleX = scaleY = scaling;
   }
} 

Answer 2

This fullscreen utility may be of use to you. http://blog.appdivision.com/2009/09/08/flex-full-screen-utility/