Setting the header height on a Spark Panel container in Flex 4

The following example shows how you can set the header height on a Spark Panel container in Flex 4 by setting the height property on the Panel container’s titleDisplay skin part.

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/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_titleDisplay_height_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form styleName="plain">
            <mx:FormItem label="titleDisplay height:">
                <s:HSlider id="sl"
                        minimum="20" maximum="100"
                        change="pnl.titleDisplay.height = sl.value;" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:Label text="Spark Label text"
                x="20" y="20" />
    </s:Panel>
 
</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

If you want to set the titleDisplay skin part’s height to less than 30 pixels, you’ll need to create a custom skin and remove the minHeight property from the titleDisplay skin part:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ -->
<s:SparkSkin name="CustomSparkPanelSkin"
        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">
    <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;
                }
 
                dropShadow.visible = getStyle("dropShadowVisible");
 
                var cr:Number = getStyle("cornerRadius");
                var withControls:Boolean = (currentState == "disabledWithControlBar" || currentState == "normalWithControlBar");
 
                if (cornerRadius != cr) {
                    cornerRadius = cr;
 
                    dropShadow.tlRadius = cornerRadius;
                    dropShadow.trRadius = cornerRadius;
                    dropShadow.blRadius = withControls ? cornerRadius : 0;
                    dropShadow.brRadius = withControls ? cornerRadius : 0;
 
                    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 it stays sibling of other graphics -->
    <s:RectangularDropShadow id="dropShadow"
            blurX="20" blurY="20"
            alpha="0.32" distance="11" 
            angle="90" color="#000000"
            left="0" top="0" right="0" bottom="0"/>
 
    <!-- 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 -->
        <s:Group id="topGroupMask" left="1" top="1" right="1" bottom="1">
            <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 -->
        <s:Group id="bottomGroupMask"
                 left="1" top="1" right="1" bottom="1"
                 includeIn="normalWithControlBar, disabledWithControlBar">
            <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 -->
        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <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>
                <!--- 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>
 
            <s:Group id="topGroup" mask="{topGroupMask}">
                <!-- layer 0: title bar fill -->
                <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 -->
                <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 -->
                <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 -->
                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0"
                         verticalAlign="middle" textAlign="start" fontWeight="bold" />
            </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
            -->
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
 
            <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 -->
                <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>

Or, you could extend the Spark Panel container skin and set the titleDisplay skin part’s height property to NaN (not a number), using ActionScript, as seen in the following example:

/** http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ */
package skins {
    import spark.skins.spark.PanelSkin;
 
    public class CustomSparkPanelSkinAS extends PanelSkin {
        override public function CustomSparkPanelSkinAS() {
            super();
            titleDisplay.minHeight = NaN;
        }
    }
}

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.

7 thoughts on “Setting the header height on a Spark Panel container in Flex 4

  1. Although I love the spark code model you have to duplicate a whole lot of code here to achieve a very simple task with is a shame. Mosr styles in the Spark skins would help.

    1. @Tink,

      True, that is a fair bit of code to duplicate. Also added a simple ActionScript skin which clears the minHeight property on the titleDisplay skin part.

      Peter

  2. Thanks for the information shared here. that was an interesting and informative. I had a good experience by participating in the Adobe DevSummit in 2009 and looking forward to attend Adobe Flash Platform Summit 2010 as well. AFPS 2010 is the single largest Flash Platform conference in India which features topics like Flash, Flex, Flash Platform, AIR 2.5, Andriod, RIA, LiveCycles, PHP and more. I found the information about the conference from adobesummit.com

  3. I’m fairly new to Flex so I apologize if this is wrong, but what is the point this since I can’t seem to find a way to set the height of the header anyway.

    I used the optional “package skin” which worked great. But since there still is no option to set the header I end up changing the header in code somewhere.
    If I have to set the header height in code, I might as well set the header minHeight in code at the same time and get rid of the optional “package skin”-package.

    Or, am I missing some part?

  4. Or if you want to set the size of the titleDisplay easily without modifying the skin you can do: titleDisplay.height = titleDisplay.minHeight = someNumber;

Comments are closed.