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

by Peter deHaan on March 15, 2009

in FullScreen, SWFObject, StageDisplayState, beta1

In a previous example, “Creating full-screen Flex applications”, we saw how to toggle full screen mode in a Flex application by setting the allowFullScreen parameter in the HTML wrapper template’s AC_FL_RunContent() method.

The following example shows how you can enable full screen from your HTML template to your Flex applications using the Flex 4 SDK (which uses SWFObject now).

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/15/creating-full-screen-flex-applications-in-flex-gumbo-swfobject-edition/ -->
<s:Application 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();">
 
    <fx:Script>
        <![CDATA[
            [Bindable]
            private var fullScreenState:String;
 
            private function init():void {
                fullScreenState = stage.displayState;
            }
 
            private function btn_click(evt:MouseEvent):void {
                if (btn.selected) {
                    fullScreenState = StageDisplayState.FULL_SCREEN;
                } else {
                    fullScreenState = StageDisplayState.NORMAL;
                }
 
                try {
                    stage.displayState = fullScreenState;
                } catch (any:*) {
                    // ignore
                }
            }
        ]]>
    </fx:Script>
 
    <s:VGroup horizontalCenter="0" top="20" width="150">
        <s:SimpleText text="width={width}" />
        <s:SimpleText text="height={height}" />
        <s:SimpleText text="displayState={fullScreenState}" />
        <s:ToggleButton id="btn"
                label="Toggle fullscreen"
                click="btn_click(event);"
                width="100%" />
    </s:VGroup>
 
</s:Application>

NOTE: It appears that the /html-template/index.template.html sets the allowfullscreen flag to “true” by default now, so you no longer need to manually edit the .HTML templates.

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Tagged as:

{ 8 comments… read them below or add one }

1 lee probert August 3, 2009 at 7:14 am

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);

Reply

2 Peter deHaan August 3, 2009 at 10:30 am

@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

Reply

3 Peter deHaan August 3, 2009 at 10:41 am

Added SWF.

4 Peter deHaan August 3, 2009 at 11:33 am

@lee,

What about this?

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

Peter

Reply

5 Matt S. August 4, 2009 at 1:45 pm

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?

Reply

6 Peter deHaan August 4, 2009 at 2:12 pm

@Matt S.,

This works for me in Flex 4.0.0.9027:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/15/creating-full-screen-flex-applications-in-flex-gumbo-swfobject-edition/ -->
<s:Application 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();">
 
    <fx:Script>
        <![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);
            }
        ]]>
    </fx:Script>
 
    <s:VGroup horizontalCenter="0" top="20" width="150">
        <s:SimpleText text="width={width}" />
        <s:SimpleText text="height={height}" />
        <s:SimpleText text="displayState={fullScreenState}" />
        <s:ToggleButton id="btn"
                label="Toggle fullscreen"
                click="btn_click(event);"
                width="100%" />
    </s:VGroup>
 
</s:Application>

Peter

Reply

7 Matt S. August 5, 2009 at 7:52 am

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])

<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
        creationComplete="init()"
        click="clickHandler(event)"
        toggle="true">
 
    <mx:Script>
        <![CDATA[
            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 );
            }
        ]]>
    </mx:Script>
 
</mx:Button>

Reply

8 Peter deHaan August 5, 2009 at 7:58 am

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

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

Peter

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: