Comments on: Creating full-screen Flex applications in Flex 4 (SWFObject Edition)

By: Peter deHaan

Peter deHaan — Wed, 05 Aug 2009 14:58:33 +0000

Sorry, if you’re posting XML, MXML, or HTML, you’ll need to escape your < chars as < and your > chars as >

I’ll try and update the comments form to mention that.

Peter

By: Matt S.

Matt S. — Wed, 05 Aug 2009 14:52:41 +0000

Thanks, Peter.

That solution definitely works in a situation where the components and handlers are defined directly in the Application object, and the stage listener can be handled on applicationComplete.

For the benefit of those seeking a solution similar to my case…
In my case (handling this in a custom button component), setting an Event.ADDED_TO_STAGE handler was the solution. This allowed me to set the FullScreenEvent.FULL_SCREEN listener on stage in the custom component; since stage = null until the component is added stage’s display list.

(Noting that I’m presently using Halo, not Spark, components with Flex 4 [Gumbo])

"1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml"
        creationComplete="init()"
        click="clickHandler(event)"
        toggle="true">
 
    
        
            override protected function clickHandler(event:MouseEvent):void
            {
                try 
                {
                    switch ( stage.displayState )
                    {
                        case StageDisplayState.FULL_SCREEN:
                            stage.displayState = StageDisplayState.NORMAL;
                            break;
                        default:
                            stage.displayState = StageDisplayState.FULL_SCREEN;
                            break;
                    }
                }
                catch ( any:*) { }
 
                event.stopImmediatePropagation();
            }
 
            private function fullScreenHandler( e:FullScreenEvent ):void
            {
                selected = e.fullScreen; 
            }
 
            private function init():void
            {
                addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );    
            }
 
            private function addedToStageHandler( e:Event ):void
            {
                stage.addEventListener( FullScreenEvent.FULL_SCREEN, fullScreenHandler, false, 0, true );
            }
        ]]>
    
 
>

By: Peter deHaan

Peter deHaan — Tue, 04 Aug 2009 21:12:27 +0000

@Matt S.,

This works for me in Flex 4.0.0.9027:

"1.0" encoding="utf-8"?>

 name="Gumbo_FullScreen_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo"
        applicationComplete="init();">
 
    >
        [CDATA[
            [Bindable]
            private var fullScreenState:String;
 
            private function init():void {
                fullScreenState = stage.displayState;
                stage.addEventListener(FullScreenEvent.FULL_SCREEN, stage_fullScreen);
            }
 
            private function btn_click(evt:MouseEvent):void {
                if (isFullScreen()) {
                    fullScreenState = StageDisplayState.NORMAL;
                } else {
                    fullScreenState = StageDisplayState.FULL_SCREEN;
                }
 
                try {
                    stage.displayState = fullScreenState;
                } catch (any:*) {
                    // ignore
                }
            }
 
            private function stage_fullScreen(evt:FullScreenEvent):void {
                btn.selected = isFullScreen();
            }
 
            private function isFullScreen():Boolean {
                return (stage.displayState == StageDisplayState.FULL_SCREEN);
            }
        ]]>
    >
 
     horizontalCenter="0" top="20" width="150">
         text="width={width}" />
         text="height={height}" />
         text="displayState={fullScreenState}" />
         id="btn"
                label="Toggle fullscreen"
                click="btn_click(event);"
                width="100%" />
    >
 
>

Peter

By: Matt S.

Matt S. — Tue, 04 Aug 2009 20:45:43 +0000

Peter,

In your example, if the escape key is used to return to normal from fullscreen, the togglebutton remains in a selected state, and the text for displaystate continues to show “fullscreen”.

I’m currently trying to use a toggle button, but want it to return to its unselected state if the user hits the escape key to return to normal view.

The following (executed during creationComplete of a custom button) results in an “Error #1009: Cannot access a property or method of a null object reference.” on “stage”:

stage.addEventListener( FullScreenEvent.FULL_SCREEN, fullScreenHandler, false, 0, true );
or, alternately:
FlexGlobals.topLevelApplication.stage.addEventListener( FullScreenEvent.FULL_SCREEN, fullScreenHandler, false, 0, true );

Thoughts on how to resolve this?

By: Peter deHaan

Peter deHaan — Mon, 03 Aug 2009 18:33:29 +0000

@lee,

What about this?

FlexGlobals.topLevelApplication.stage.addEventListener(FullScreenEvent.FULL_SCREEN,handleFullscreen);

Peter

By: Peter deHaan

Peter deHaan — Mon, 03 Aug 2009 17:41:50 +0000

Added SWF.

By: Peter deHaan

Peter deHaan — Mon, 03 Aug 2009 17:30:38 +0000

@lee,

I just updated the example to work with the latest API (or 4.0.0.8903+, at least) and it worked fine. Which error(s) were you seeing with the example?

Peter

By: lee probert

lee probert — Mon, 03 Aug 2009 14:14:06 +0000

Hi Peter. Me again! I’m trying to do this today and am finding that I can’t set a listener up on the stage object. Has this changed in the latest SDK?

this.stage.addEventListener(FullScreenEvent.FULL_SCREEN,handleFullscreen);