Removing the drop shadow from the Spark Panel container in Flex 4

The following example shows how you can remove the default drop shadow from the Spark Panel container in Flex 4 by setting the Boolean dropShadowVisible style, or creating a custom skin class and setting the skinClass style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/29/removing-the-drop-shadow-from-the-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_dropShadowVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:Panel title="Spark Panel title"
            dropShadowVisible="{chckBx.selected}"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:CheckBox id="chckBx" label="dropShadowVisible" />
        </s:controlBarContent>
        <s:VGroup left="20" right="20" top="20" bottom="20">
            <s:RichText id="richEditableTxt"
                    text="The quick brown fox jumps over the lazy dog."
                    width="100%" height="100%" />
        </s:VGroup>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

You can also set the dropShadowVisible style in an external .CSS file or in a <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/29/removing-the-drop-shadow-from-the-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_dropShadowVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Panel {
            dropShadowVisible: false;
        }
    </fx:Style>
 
    <s:Panel title="Spark Panel title"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="20" right="20" top="20" bottom="20">
            <s:RichText id="richEditableTxt"
                    text="The quick brown fox jumps over the lazy dog."
                    width="100%" height="100%" />
        </s:VGroup>
    </s:Panel>
 
</s:Application>

Or you can set the dropShadowVisible style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/29/removing-the-drop-shadow-from-the-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_dropShadowVisible_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Script>
        <![CDATA[
            protected function chckBx_changeHandler(evt:Event):void {
                pnl.setStyle("dropShadowVisible", chckBx.selected);
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:CheckBox id="chckBx"
                    label="dropShadowVisible"
                    selected="true"
                    change="chckBx_changeHandler(event);"/>
        </s:controlBarContent>
        <s:VGroup left="20" right="20" top="20" bottom="20">
            <s:RichText id="richEditableTxt"
                    text="The quick brown fox jumps over the lazy dog."
                    width="100%" height="100%" />
        </s:VGroup>
    </s:Panel>
 
</s:Application>

The dropShadowVisible style was added in Flex 4, but you can still see the old method of setting a custom skin class can be seen below. You can still use this technique of custom skinning if you want to create a custom drop shadow:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/29/removing-the-drop-shadow-from-the-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_skinClass_dropShadow_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:Panel title="Spark Panel title"
            skinClass="skins.CustomPanelSkin_noDropShadow"
            width="200"
            horizontalCenter="0"
            verticalCenter="0">
        <s:VGroup left="20" right="20" top="20" bottom="20">
            <s:RichEditableText id="richEditableTxt"
                    text="The quick brown fox jumps over the lazy dog."
                    width="100%"
                    height="100%" />
        </s:VGroup>
    </s:Panel>
 
</s:Application>

The custom skin class, skins/CustomPanelSkin_noDropShadow.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/29/removing-the-drop-shadow-from-the-fxpanel-container-in-flex-gumbo/ -->
<s:SparkSkin name="CustomPanelSkin_noDropShadow"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        blendMode="normal" mouseEnabled="false"
        minWidth="131" minHeight="127"
        alpha.disabled="0.5"
        alpha.disabledWithControlBar="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Panel")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For panel, border and title background are skinned, but the content area and title text are not. */
            static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    contents.left = contents.top = contents.right = contents.bottom = 1;
                } else {
                    border.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    contents.left = contents.top = contents.right = contents.bottom = 0;
                }
 
                var cr:Number = getStyle("cornerRadius");
                var withControls:Boolean =
                    (currentState == "disabledWithControlBar" ||
                        currentState == "normalWithControlBar");
 
                if (cornerRadius != cr) {
                    cornerRadius = cr;
 
                    setPartCornerRadii(topMaskRect, withControls);
                    setPartCornerRadii(border, withControls);
                    setPartCornerRadii(background, withControls);
                }
 
                if (bottomMaskRect) {
                    setPartCornerRadii(bottomMaskRect, withControls);
                }
 
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
                backgroundFill.color = getStyle("backgroundColor");
                backgroundFill.alpha = getStyle("backgroundAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void {
                target.topLeftRadiusX = cornerRadius;
                target.topRightRadiusX = cornerRadius;
                target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
                target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
            }
 
            private var cornerRadius:Number;
        ]]>
    </fx:Script>
 
    <!-- drop shadow can't be hittable so all other graphics go in this group -->
    <s:Group left="0" right="0" top="0" bottom="0">
 
        <!-- top group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
            <!--- @private -->
            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>
 
        <!-- bottom group mask -->
        <!--- @private -->
        <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
                 includeIn="normalWithControlBar, disabledWithControlBar">
            <!--- @private -->
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>
 
        <!-- layer 1: border -->
        <!--- @private -->
        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <!--- @private -->
                <s:SolidColorStroke id="borderStroke" weight="1" />
            </s:stroke>
        </s:Rect>
 
        <!-- layer 2: background fill -->
        <!--- Defines the appearance of the PanelSkin class's background. -->
        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
            <s:fill>
                <!--- @private
                Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
            </s:fill>
        </s:Rect>
 
        <!-- layer 3: contents -->
        <!--- Contains the vertical stack of titlebar content and controlbar. -->
        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>
 
            <!--- @private -->
            <s:Group id="topGroup" mask="{topGroupMask}">
 
                <!-- layer 0: title bar fill -->
                <!--- @private -->
                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0xE2E2E2" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
 
                <!-- layer 1: title bar highlight -->
                <!--- @private -->
                <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0xEAEAEA" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
 
                <!-- layer 2: title bar divider -->
                <!--- @private -->
                <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
                    <s:fill>
                        <s:SolidColor color="0xC0C0C0" />
                    </s:fill>
                </s:Rect>
 
                <!-- layer 3: text -->
                <!--- @copy spark.components.Panel#titleDisplay -->
                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0" minHeight="30"
                         verticalAlign="middle" fontWeight="bold">
                </s:Label>
            </s:Group>
 
            <!--
            Note: setting the minimum size to 0 here so that changes to the host component's
            size will not be thwarted by this skin part's minimum size.   This is a compromise,
            more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
            -->
            <!--- @copy spark.components.SkinnableContainer#contentGroup -->
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
            </s:Group>
 
            <!--- @private -->
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar, disabledWithControlBar" >
 
                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
 
                    <!-- layer 0: control bar divider line -->
                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>
 
                    <!-- layer 1: control bar highlight -->
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:LinearGradientStroke rotation="90" weight="1">
                                <s:GradientEntry color="0xE5E5E5" />
                                <s:GradientEntry color="0xD8D8D8" />
                            </s:LinearGradientStroke>
                        </s:stroke>
                    </s:Rect>
 
                    <!-- layer 2: control bar fill -->
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0xDADADA" />
                                <s:GradientEntry color="0xC5C5C5" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                </s:Group>
                <!-- layer 3: control bar -->
                <!--- @copy spark.components.Panel#controlBarGroup -->
                <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                    <s:layout>
                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                    </s:layout>
                </s:Group>
            </s:Group>
        </s:Group>
    </s:Group>
 
</s:SparkSkin>

View source is enabled in the following example.

You can also set the skinClass style in an external .CSS file or <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/29/removing-the-drop-shadow-from-the-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_skinClass_dropShadow_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Panel {
            skinClass: ClassReference("skins.CustomPanelSkin_noDropShadow");
        }
    </fx:Style>
 
    <s:Panel title="Spark Panel title"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="20" right="20" top="20" bottom="20">
            <s:RichEditableText id="richEditableTxt"
                    text="The quick brown fox jumps over the lazy dog."
                    width="100%" height="100%" />
        </s:VGroup>
    </s:Panel>
 
</s:Application>

Or you can set the skinClass style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/29/removing-the-drop-shadow-from-the-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_skinClass_dropShadow_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Set skin class"
                click="btn_clickHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.CustomPanelSkin_noDropShadow;
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                pnl.setStyle("skinClass", CustomPanelSkin_noDropShadow);
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="20" right="20" top="20" bottom="20">
            <s:RichEditableText id="richEditableTxt"
                    text="The quick brown fox jumps over the lazy dog."
                    width="100%" height="100%" />
        </s:VGroup>
    </s:Panel>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

2 thoughts on “Removing the drop shadow from the Spark Panel container in Flex 4

Comments are closed.