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

By Peter deHaan On March 29, 2009 · 2 Comments

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

 
Tagged with: • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

2 Responses to Removing the drop shadow from the Spark Panel container in Flex 4

  1. ddsmedia says:
    April 14, 2009 at 9:07 am

    Que bien que existn paguinas con exemplos en flex

    Necesitas una agenda para tus pacientes?
    Agenda Business Customer
    http://www.ddsmedia.net

    Reply
  2. Flexer says:
    August 21, 2009 at 6:35 am

    Please find another good example here flexamples4

    Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree