This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Custom Window Chrome
Adobe AIR projects generated from the New Flex Project Wizard in Adobe Flex Builder output a default MXML file with a root tag called WindowedApplication. As outlined earlier in this chapter, this gives your application a standard native window as expected.
What if a project calls for a truly customized window chrome, such as a fully branded look and feel that includes custom icons for window controls and a nonrectangular shape?
No sweat—this can be accomplished by the following steps:
- Set the window chrome to none and the transparency to true in the application’s descriptor file (see Listing 5.6).
- On WindowedApplication set the showFlexChrome to false.
- Create a Canvas with an embedded background image (optional).
In Listing 5.6 we’ve changed the chrome and transparency properties in the application descriptor, which prevents Adobe AIR from opening a visible default Window when the application is launched. This, in combination with setting the showFlexChrome to false in our application code (see Listing 5.7) delivers the desired effect.
Listing 5.7. Modifying Window Properties in the Application Descriptor File
<!— Settings for the application's initial window. Required. —> <initialWindow> <!— The main SWF or HTML file of the application. Required. —> <!— Note: In Flex Builder, the SWF reference is set automatically. —> <content>[This value will be overwritten by Flex Builder in the outputapp.xml]</content> <!— The title of the main window. Optional. —> <!— <title>Custom Chrome</title> —> <!— The type of system chrome to use (either "standard" or "none").
Embedding an image as your application’s background is completely optional. At this point you literally have a blank slate to work with inside your Adobe Flex application. You can use a circular or square background image or perhaps draw your application background yourself via the ActionScript drawing APIs, it’s up to you. See Figure 6.10.
)
Figure 5.10 Example of using a bitmap image as the custom chrome for a Window.
In Listing 5.8 we’ve opted to simply embed a bitmap image and used that as the background. In addition we’ve included a drop shadow filter on the Canvas that gives a floating perspective to the application.
Listing 5.8. Creating a Window with Custom Chrome in Adobe Flex
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
showFlexChrome="false"
creationComplete="init()">
<mx:Style source="styles.css" />
<mx:Script>
<![CDATA[
import mx.controls.Label;
private function init():void
{
myCanvas.addEventListener( MouseEvent.MOUSE_DOWN, moveWindow );
var dropShadow:DropShadowFilter = new DropShadowFilter();
var glow:GlowFilter = new GlowFilter(0x000000,1,5,5,3);
var filters:Array = new Array( dropShadow, glow );
myCanvas.filters = filters;
}
private function moveWindow( event:MouseEvent ):void
{
stage.nativeWindow.startMove();
}
private function onMinimize():void
{
stage.nativeWindow.minimize();
}
private function onClose():void
{
stage.nativeWindow.close();
}
]]>
</mx:Script>
<mx:Canvas
id="myCanvas"
width="200" height="200"
backgroundImage="@Embed(source='assets/air.png')"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image source="@Embed(source='assets/minimize.png')"
click="onMinimize()" x="168" y="6" alpha="0.8" />
<mx:Image source="@Embed(source='assets/close.png')" click="onClose()"
x="180" y="6" alpha="0.8" />
<mx:Label text="Adobe AIR Programming Unleashed" styleName="scores"
x="10" y="176" />
</mx:Canvas>
</mx:WindowedApplication>
There is a little added work going this route because you have to create your own mechanisms for standard window controls such as minimize, maximize, and so on. In Listing 5.7 we’ve added listeners on our window control images and explicitly, via the event handlers, initiatied the desired window behavior.