Full Screen Flex Applications

Flash and Flex have a cool feature that allows your application to consume a user's entire screen.

So, for instance, at the click of a button your application could jump out of the browser to fill the user's entire screen. The below example quickly demonstrates this full screen capability.

Full Screen Flex Example

The below code shows us the key code that allows the application to consume the full screen in response to an event (i.e. a mouse click).

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:Script>
   <![CDATA[
      // toggle the display mode as full screen
      public function toggleFullScreen( event:Event=null ):void
      {
         if( this.stage.displayState == StageDisplayState.NORMAL )
         {
            // set full screen display
            this.stage.displayState = StageDisplayState.FULL_SCREEN;
         }
         else
         {
            // set normal display
            this.stage.displayState = StageDisplayState.NORMAL;
         }
      }
   ]]>
   </mx:Script>
</mx:Application>

The above code is an application's MXML file. The this.stage property is a property of the application that can be used to manage its display state (Full Screen or not).

To use Full Screen you must set the allowFullScreen Flash parameter to true in the HTML that embeds your SWF file. For instance, this property can be set in your Flex application's index.template.html file.

Listening for Display State Changes

Your application can listen for changes to the application's display state to detect when full screen mode is turned on or off.

The below code shows how to register a listener and detect the display state.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   applicationComplete="init()">
   
   <mx:Script>
   <![CDATA[
      // init() is called for the application's applicationComplete event
      public function init():void
      {
         // add a listener for changes to the full screen status of the application
         this.stage.addEventListener( FullScreenEvent.FULL_SCREEN, fullScreenChange );
      }
      
      // fullScreenChange() is called when the display state changes to/from full screen
      protected function fullScreenChange( event:FullScreenEvent ):void
      {
         if( this.stage.displayState == StageDisplayState.FULL_SCREEN )
         {
            // we're in full screen mode, do something
         }
         else
         {
            // we're back to normal display mode, do something
         }
      }
   ]]>
   </mx:Script>
</mx:Application>

Often we'll make use of an application's creationComplete event. However, in order to access an application's stage property, to add an event listener for instance, we'll need to make use of the applicationComplete event. This event is triggered a little later in the application initialization process.

Text Input Disabled in Full Screen Mode

Text input is disabled in Full Screen mode. See Adobe's bug database comments on the issue.

Full Screen Flex Applications

Listening for Display State Changes

Text Input Disabled in Full Screen Mode

Related Links: