Creating a transparent window application
Back to: Apollo Documentation home page
The WeatherStation sample application illustrates the following Apollo features:
- A window with a transparent background and a non-rectangular border
- Window control buttons for minimizing and closing the window
- Moving the window by responding to the "move" event
The WeatherStation sample also shows how some powerful Flash Player features can be used within an Apollo application, including:
- Calling an HTTP service to retrieve weather forecast data
- Storing and retrieving application settings using a SharedObject
Note: This is a sample application provided, as is, for instructional purposes.
| Contents |
|---|
Creating a transparent window application
The Apollo runtime supports both opaque and transparent application windows. Transparent windows let the operating system's desktop show through, while opaque windows obscure the desktop area behind them.
An Apollo window can use the borders, title bar, menu bar, and window control buttons (known collectively as "system chrome") that are standard for the operating system. Your application uses the standard system chrome elements when the windowMode attribute of the <rootContent> element in the application descriptor file is set to "systemChrome" (the default setting). A window that uses system chrome will always be opaque.
The Flex ApolloApplication component provides an alternate set of window chrome elements and a rectangular window frame. The ApolloApplication component's window is always opaque as well.
If you want your application to be transparent, then it should not use system chrome or the ApolloApplication component. This means that the application must provide its own mechanisms for controlling the window and its background.
The WeatherStation sample application
This article describes the WeatherStation sample application. The WeatherStation application window is partially transparent and it does not use system chrome, so it displays rounded and irregular borders instead of the usual rectangular frame. It also displays images that extend beyond the visual border of the application.
The application queries weather forecast data from the Yahoo! Weather service based on a U.S. ZIP code. Data is returned from the service as XML and the application then parses, formats and displays it. Here is a screenshot of the application in action:
Files used to build the application
The application includes the following source files:
| File | Description |
|---|---|
| WeatherStation.mxml | The main application file in MXML for Flex 2. Details of the code are discussed in the Understanding the code section. |
| WeatherServices.mxml | Defines the HTTPService call and its parameters. |
| WeatherStation-app.xml | The Apollo application descriptor file. |
| assets/close_icon.png assets/minimize_icon.png | Images used for the custom window chrome buttons. |
| icons/ApolloApp_16.png icons/ApolloApp_32.png icons/ApolloApp_48.png icons/ApolloApp_128.png | Sample Apollo icon files. |
To download the source files for this example, click here (395K).
For help on building this quick start sample application, see How to build the quick start sample applications.
Understanding the code
The following sections describe the Apollo-related source code in this sample application.
The WeatherStation application performs other interesting functions such as communicating with a remote HTTP service, parsing an XML result using the new ActionScript 3.0 E4X syntax, and storing and retrieving settings data using a SharedObject. You can find more information about these functions in Programming ActionScript 3.0 and in the ActionScript 3.0 Language Reference.
This article does not describe all of the Flex components used in the MXML code for this application. For more information on the Flex components please refer to the Flex 2.0 Language Reference.
Setting the window transparency
The transparency of the application window is controlled in two places.
First, the application descriptor file for the application contains a rootContent element that has two attributes that affect window transparency, the systemChrome attribute and the transparent attribute. The transparency attribute must be set to true. In addition the systemChrome attribute should be set to none or else the standard system window title bar and buttons will be used, and the application background will be opaque. Here's an example of the rootContent element in the application descriptor file:
<rootContent contentType="application/x-shockwave-flash"
systemChrome="none"
transparent="true"
visible="true">
WeatherStation.swf
</rootContent>
Second, the CSS styles that are applied to the Flex 2 Application component can affect how that component's background is displayed and whether it is opaque or transparent. To make sure the background is transparent the WeatherStation.mxml file includes the following CSS style declaration:
<mx:Style>
Application
{
background-color:"";
background-image:"";
padding: 0px;
}
/* additional style declarations... */
</mx:Style>
Moving the application window
A user can move the WeatherStation window around on the desktop by clicking anywhere in the background of the window, holding the mouse down, and dragging the window to another location. To trigger the window moving process the application listens for and responds to the MouseEvent.MOUSE_DOWN event.
First, the Application declaration specifies that the initApp() method will handle the "creationComplete" event.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
usePreloader="false"
creationComplete="initApp()"
layout="absolute"
width="250"
paddingRight="0"
paddingLeft="0">
After the application is loaded, the initApp() method sets up "mouseDown" event listeners on the two visible VBox components. When the user presses the mouse button while the cursor is over one of these VBox components, the onMouseDown() method is invoked.
// adds mouseDown listeners so a click and drag on the background or the // display area lets you move the window this.bgBox.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); this.tempBox.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
The onMouseDown() method shows how simple it can be to start the window moving sequence:
private function onMouseDown(evt:MouseEvent):void
{
stage.window.startMove();
}
Calling the window.startMove() method results in the window moving around the desktop in response to mouse movements until the mouse button is released. You don't need to write additional code to control the window moving and stopping sequence; it is handled automatically.
Minimizing and closing the application window
The WeatherStation application uses small Button components to let the user minimize or close the application.
Each button's click event is set to trigger an appropriate method, as follows:
<mx:Button id="minimizeBtn"
icon="@Embed('assets/minimize_icon.png')"
width="16"
height="16"
click="onMinimize(event)" />
<mx:Button id="closeBtn"
icon="@Embed('assets/close_icon.png')"
width="16"
height="16"
click="onClose(event)" />
When the minimize button is clicked, the onMinimize() method calls the window.minimize() method:
private function onMinimize(evt:MouseEvent):void
{
stage.window.minimize();
}
When the close button is clicked, the onClose() method calls the window.close() method:
private function onClose(evt:MouseEvent):void
{
stage.window.close();
}
The window.close() method will terminate the application. It does so asynchronously, and a "close" event is fired when the application is about to stop. The application can listen for the "close" event and perform various clean-up or housekeeping functions before the application stops.
Casting a shadow on the desktop
The WeatherStation window appears to cast a shadow on the desktop as if it were floating above it. In fact the drop shadow is not applied to the window itself. It is applied to the bgBox VBox component that's used as a background element, and it is casting a shadow on the applications window's transparent background. This makes it seem like the shadow is falling on the desktop instead.
To achieve this effect, the application first defines an instance of the flash.filters.DropShadowFilter class.
public var shadowFilter:DropShadowFilter;
The initApp() method then sets the parameters of the filter and applies the filter to the bgBox component and a number of other components, as follows:
// creates a generic drop shadow to use on components that don't accept CSS shadow styles shadowFilter = new DropShadowFilter(); shadowFilter.color = 0x000000; shadowFilter.alpha = 0.4; shadowFilter.blurX = 5; shadowFilter.blurY = 5; shadowFilter.distance = 5; // 'external' shadows addShadow(this.bgBox); addShadow(this.largeImage); // 'internal' shadows addShadow(this.locationTxt); addShadow(this.tempTxt); addShadow(this.conditionTxt); addShadow(this.additionalTxt);
Because the largeImage Image object extends beyond the boundaries of the bgBox component's background, it also needs a shadow to make the illusion complete. The other display components are only given shadows because they seem to stand out better that way.
The same DropShadowFilter instance is applied to each of the components in the addShadow() method:
/**
* Adds a standard drop shadow to a display object.
*/
public function addShadow(comp:DisplayObject):void
{
comp.filters = [this.shadowFilter];
}
Each component is passed as an argument to this method and treated as a DisplayObject instance (so the same method could be used for DisplayObject instances that are not Flex UIComponent instances too). Each object's filters array is then set to an array containing the one shadowFilter object.
Back to: Apollo Documentation home page