Home > Articles

  • Print
  • + Share This
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:

  1. Set the window chrome to none and the transparency to true in the application’s descriptor file (see Listing 5.6).
  2. On WindowedApplication set the showFlexChrome to false.
  3. 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 output
ccc.gifapp.xml]</content>

   <!— The title of the main window. Optional. —>
   <!— <title>Custom Chrome</title> —>
   <!— The type of system chrome to use (either "standard" or "none").
ccc.gifOptional. Default standard. —>
   <systemChrome>none</systemChrome>
   <!— Whether the window is transparent. Only applicable when systemChrome
ccc.gifis false. Optional. Default false. —>
   <transparent>true</transparent>
   <!— Whether the window is initially visible. Optional. Default false. —>
   <visible>true</visible>
   <!— Whether the user can minimize the window. Optional. Default true. —>
   <!— <minimizable></minimizable> —>
   <!— Whether the user can maximize the window. Optional. Default true. —>
   <!— <maximizable></maximizable> —>
   <!— Whether the user can resize the window. Optional. Default true. —>
   <!— <resizable></resizable> —>
   <!— The window's initial width. Optional. —>
   <!— <width></width> —>
   <!— The window's initial height. Optional. —>
   <!— <height></height> —>
   <!— The window's initial x position. Optional. —>
   <!— <x></x> —>
   <!— The window's initial y position. Optional. —>
   <!— <y></y> —>
   <!— The window's minimum size, specified as a width/height pair,
ccc.gifsuch as "400 200". Optional. —>
   <!— <minSize></minSize> —>
   <!— The window's initial maximum size, specified as a width/height pair,
ccc.gifsuch as "1600 1200". Optional. —>
   <!— <maxSize></maxSize> —>
</initialWindow>

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

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')"
ccc.gifclick="onMinimize()" x="168" y="6" alpha="0.8" />
       <mx:Image source="@Embed(source='assets/close.png')" click="onClose()"
ccc.gifx="180" y="6" alpha="0.8" />
       <mx:Label text="Adobe AIR Programming Unleashed" styleName="scores"
ccc.gifx="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.

  • + Share This
  • 🔖 Save To Your Account