AIR Tip 2 - Going Fullscreen
August 24th, 2007
One of the great features of AIR is the ability to go fullscreen. Obviously this could be abused - but when used properly, this opens up many doors. One great example of a useful fullscreen application is Daniel Dura's Twittercamp. When you click on the logo (bottom-right) it opens up into a fullscreen application. This is extremely useful for display in some "presentation" type mode - such as on a plasma or LCD Television.
Here is a picture of the TwitterCamp Application:
SIDENOTE: I am currently working on a fullscreen AIR application here at Georgia Tech Savannah. I will be posting more details about that application in the future.
To go fullscreen in Flex - you simply have to set the displayState of the stage to Fullscreen:
Flex
- systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
Going fullscreen in Javascript is just as easy, however, if you want to eliminate the system chrome, you will have to edit the application xml file. There are two ways to do it - both are below. (We will be addressing custom chrome and the application xml file in the next AIR Tip.)
Javascript Option 1
- var Rectangle = window.runtime.flash.geom.Rectangle;
- window.htmlControl.stage.window.bounds = new Rectangle(0,0,air.Capabilities.screenResolutionX,air.Capabilities.screenResolutionY);
Javascript Option 2
- window.htmlControl.stage.window.width = air.Capabilities.screenResolutionX;
- window.htmlControl.stage.window.height = air.Capabilities.screenResolutionY;
- window.htmlControl.stage.window.x = 0;
- window.htmlControl.stage.window.y = 0;
It is important to note that the first option will only work when a window is initialized. After that, you can use the second option.
For our example application today, we will be creating a very simple web browser, that will respond to a button press to go fullscreen. You can look at the application XML file to see how I removed the system chrome. As I stated earlier, I will go into more detail in the next AIR Tip. We also will introduce two features that will be covered in depth in the next AIRTip as well: using a custom action to move a window and using a custom action to close a window. The screenshot below shows the finished product.
NOTE: The next AirTip will deal with Custom Chrome, so we will start really making the applications look nice.
As always, the source and applications are below:
Flex Application
Source Code
AIR Application
HTML / Javascript Application
Source Code
AIR Application
