Monday, August 29, 2011

Full Screen in Flex 4

Flex provides a great way of setting web applications into full screen on the desktop. The following code snippet demonstrates the same.

public function toggleFullScreen(uiComponent:UIComponent):void
{
       if(uiComponent.stage.displayState == StageDisplayState.NORMAL)
              uiComponent.stage.displayState = StageDisplayState.FULL_SCREEN;
       else if (uiComponent.stage.displayState == StageDisplayState.FULL_SCREEN)
              uiComponent.stage.displayState = StageDisplayState.NORMAL;
}

The piece of code will set any component into the full screen mode, except the fact that it does not actually solve the purpose. It actually gets the whole application into full screen mode.
That is because setting the full screen property belongs to the Stage object. The flash runtime however has only one stage and all the components displayed refer to the same stage. [For more refer this]. This brings us to the problem. How do you get only the component to fullscreen. Fortunately, there's a simple way to achieve this. Take a look at the code below and I'll explain the nuances after that.

private var componentWidth:Number;
private var componentHeight:Number;
private var sourceComponent:UIComponent;


public function toggleComponentFullScreen(uiComponent:UIComponent):void
{
var stage:Stage = FlexGlobals.topLevelApplication.stage;

if(uiComponent != null && stage.displayState == StageDisplayState.NORMAL)
{
this.componentWidth = uiComponent.width;
this.componentHeight = uiComponent.height;
this.sourceComponent = uiComponent;

this.sourceComponent.width = stage.stageWidth;
this.sourceComponent.height = stage.stageHeight;

var p:Point = new Point(0,0);
p=view.localToGlobal(p);

var sourceRect:Rectangle = new Rectangle(p.x, p.y, stage.stageWidth, stage.stageHeight);

this.fullScreenHandler(null, sourceRect);
}
}


private function fullScreenHandler(event:FullScreenEvent = null, sourceRect:Rectangle = null):void
{
var stage:Stage = FlexGlobals.topLevelApplication.stage;

if(event == null || !event.fullScreen)
{
if((stage.displayState == StageDisplayState.NORMAL) && event == null)
{
if(!stage.hasEventListener(FullScreenEvent.FULL_SCREEN)
stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);

stage.displayState = StageDisplayState.FULL_SCREEN;
stage.fullScreenSourceRect = sourceRect;
}
else
{
stage.displayState = StageDisplayState.NORMAL;
stage.fullScreenSourceRect = null;

this.sourceComponent.width = this.componentWidth;
this.sourceComponent.height = this.componentHeight;
}
}


toggleComponentFullScreen
So what we do here is that we save the component's width and height in separate variables to be used later. When the component's state needs to be changed to FULL SCREEN, we set the components width and height to fill the stage. Next we convert the components local coordinates to global coordinates and create a Rectangle with them that can mask the screen.

fullScreenHandler
The handler is a generic function that can also be called from outside without the event. This function checks the displayState of the stage and based on that either masks it with the component's mask rectangle or removes the mask and sets the components width and height back to the original ones.

I found this useful in my application. Hope this can help someone. Cheers.


No comments :