Adding a drop shadow to a custom chrome window

A window that has custom chrome applied can have a drop shadow around its borders. This window can be your main application window or any other window in the application. When you want to add a shadow around your main application window, make sure to set the transparency of this window using the systemChrome and transparent attributes in the application descriptor file:

<systemChrome>none</systemChrome>
<transparent>true</transparent>

You can then add a drop shadow to your window in two ways. The first way is to instantiate a DropShadowFilter (a subclass of the BitmapFilter class) object and set the properties you want for the drop shadow. Every DisplayObject has a filters Array property where you can store BitmapFilter instances you want to use on that DisplayObject. For the DropShadowFilter, you can define many properties, such as color, alpha, blurX, blurY, distance, and angle, to customize the look and feel of your drop shadow.The following example is a basic AIR application with custom chrome applied (Figure 20-1). Actually, the chrome consists of just three Canvas components from the Flex Framework.

Figure 20-1. A custom chrome window.

The drop shadow is configured as follows:

shadowFilter = new DropShadowFilter();
shadowFilter.color = 0xFF0000;
shadowFilter.alpha = 0.75;
shadowFilter.blurX = 5;
shadowFilter.blurY = 5;
shadowFilter.distance = 5;
shadowFilter.angle = 90;

To cast the drop shadow on the window's transparent background, assign the shadowFilter instance to the filters Array of the WindowedApplication instance. In this example, the keyword refers to the WindowedApplication instance:

this.filters = [shadowFilter];

Here is the complete MXML code for the example:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/halo"
                       applicationComplete="init()"
                       backgroundAlpha="0"
                       showStatusBar="false"
                       title="Main window">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Place nonvisual elements (e.g., services, value objects) here -->

</fx:Declarations>

    <fx:Style>
        Canvas{
            border-style:solid;
            border-thickness:0;
            corner-radius:150;
        }
        WindowedApplication{
            drop-shadow-enabled:"true";
            drop-shadow-color:"0xFF0000";
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import mx.core.Window;
            import spark.filters.DropShadowFilter;

            private var shadowFilter:DropShadowFilter;
            private var newWindow:Window;

            private function init():void {
                shadowFilter = new DropShadowFilter();
                shadowFilter.color = 0xFF0000;
                shadowFilter.alpha = 0.75;
                shadowFilter.blurX = 5;
                shadowFilter.blurY = 5;
                shadowFilter.distance = 5;
                shadowFilter.angle = 90;
                // attach the drop shadow to the NativeWindow

                this.filters = [shadowFilter];
                this.stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);

            }
            private function closeWindow(event:MouseEvent):void {
                this.nativeWindow.close();
            }
            private function onMouseDown(event:MouseEvent):void {
                this.nativeWindow.startMove();
            }
        ]]>

</fx:Script>


    <mx:Canvas x="29" y="34" width="200" height="200" backgroundColor="#343434">

        <mx:Label x="25" y="127" text="DROPSHADOW"

                  fontSize="18" color="#FFFFFF" fontWeight="bold"/>

        <mx:Canvas x="9.7" y="10" width="180" height="180"

                   backgroundColor="#7A7C7E" >

            <mx:Canvas x="110.3" y="9" width="60" height="59"

                       backgroundColor="#D7D7D7" >

                <mx:Button label="X" width="30" paddingLeft="0" paddingRight="0"

                           paddingTop="0" paddingBottom="0" height="30"

                           color="#000000" right="12" top="13"

                           themeColor="#949698" click="closeWindow(event)"/>

            </mx:Canvas>

        </mx:Canvas>

    </mx:Canvas>

</s:WindowedApplication>

The second way to show a drop shadow is by setting the drop-shadow-color and drop-shadow-enabled style properties of the displayObject you are using as the background of your application. In a basic AIR application with a Canvas component as a background container, set the style properties for the Canvas component as follows:

Canvas.BgCanvas {

    background-color:"0xE6E6E6";

    border-style:solid;

    border-color:"0xFFFFFF";

    border-thickness:10;

    corner-radius:20;


    drop-shadow-color:"0x000000";

    drop-shadow-enabled:true;


    shadow-direction:top;

    shadow-distance:5;


}

You can also set the shadow-distance as you like, and you can set shadow-direction to be centered, left, or right.

Make sure the systemChrome attribute is set to none and the transparent attribute is set to true; otherwise, you will not see the shadow. Figure 20-2 shows the resulting application.

Figure 20-2. An AIR application with a drop shadow applied by setting drop

Here is the full MXML code for the example:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

                       xmlns:s="library://ns.adobe.com/flex/spark"

                       xmlns:mx="library://ns.adobe.com/flex/halo"

                       applicationComplete="init()"

                       backgroundAlpha="0"

                       showStatusBar="false"

                       title="Main window">

    <s:layout>

        <s:BasicLayout/>

    </s:layout>

    <fx:Declarations>

        <!-- Place nonvisual elements (e.g., services, value objects) here -->

    </fx:Declarations>

    <fx:Style>

        @namespace "library://ns.adobe.com/flex/spark";

        WindowedApplication {

            padding-right:"5";

            padding-left:"5";

            padding-top:"5";

            padding-bottom:"5";

            show-flex-chrome:false;

        }

        Border.BgCanvas {

            background-color:"0xE6E6E6";

            border-style:solid;

            border-color:"0xFFFFFF";

            border-thickness:10;

            corner-radius:20;


            drop-shadow-color:"0x000000";

            drop-shadow-enabled:true;


            shadow-direction:left;

            shadow-distance:15;

        }

    </fx:Style>


    <fx:Script>

        <![CDATA[

            import flash.display.NativeWindowSystemChrome;


            private function init() : void {

                stage.addEventListener( MouseEvent.MOUSE_DOWN, onMouseDown )

            }


            private function closeWindow( event : MouseEvent ) : void {

                this.nativeWindow.close();

            }


            private function onMouseDown( event : MouseEvent ) : void {

                this.nativeWindow.startMove();

            }

        ]]>

    </fx:Script>

    <s:Border styleName="BgCanvas"

              right="20"

              bottom="20"

              top="20"

              left="20">

        <s:HGroup y="0"

                  right="15"

                  left="5"

                  verticalAlign="middle"

                  direction="ltr"

                  width="100%">

            <mx:Spacer width="100%"/>

            <mx:LinkButton label="close"

                           click="closeWindow(event)"/>

        </s:HGroup>

        <s:Label text="I can have a drop shadow "

                 horizontalCenter="0"

                 verticalCenter="0"

                 fontSize="12"/>

    </s:Border>

</s:WindowedApplication>

This recipe was originally contributed by Marco Casario as part of O'Reilly's Flex 4 Cookbook.