Repositioning the control bar on a Spark Panel container in Flex 4

The following example shows how you can move the control bar on a Spark Panel container in Flex 4 by creating a custom Panel skin 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/10/19/repositioning-the-control-bar-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_controlBar_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button label="default skin" click="pnl.setStyle('skinClass', PanelSkin);" />
        <s:Button label="custom skin" click="pnl.setStyle('skinClass', CustomPanelSkin);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.CustomPanelSkin;
            import spark.skins.spark.PanelSkin;
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl" title="Spark Panel title"
            skinClass="skins.CustomPanelSkin"
            left="50" right="50" top="50" bottom="50">
        <s:layout>
            <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
        </s:layout>
        <s:controlBarContent>
            <s:DropDownList id="ddl">
                <s:dataProvider>
                    <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ColorPicker />
            <mx:DateField />
        </s:controlBarContent>
        <s:Label text="Spark Label text" />
        <s:List>
            <s:dataProvider>
                <s:ArrayList source="[Red,Orange,Yellow,Green,Blue]" />
            </s:dataProvider>
        </s:List>
    </s:Panel>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/19/repositioning-the-control-bar-on-a-spark-panel-container-in-flex-4/ -->
<s:SparkSkin name="CustomPanelSkin"
        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>
        <![CDATA[ 
            [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"];
 
            override public function get colorizeExclusions():Array {return exclusions;}
 
            override protected function initializationComplete():void {
                useBaseColor = 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");
 
                if (cornerRadius != cr) {
                    cornerRadius = cr;
 
                    var withControls:Boolean = (currentState == "disabledWithControlBar" || currentState == "normalWithControlBar");
 
                    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 left="1" top="1" right="1" bottom="1" id="topGroupMask" >
            <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 left="1" top="1" right="1" bottom="1" id="bottomGroupMask" 
                 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" />
            </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 -->
                <!--- Defines the appearance of the PanelSkin class's title bar. -->
                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0" minHeight="30"
                         verticalAlign="middle" fontWeight="bold">
                </s:Label>
            </s:Group>
 
            <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" bottom="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="1" bottom="2">
                        <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>
 
            <!--
            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>
    </s:Group>
 
</s:SparkSkin>

View source is enabled in the following example.

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.

14 thoughts on “Repositioning the control bar on a Spark Panel container in Flex 4

      1. It turns out that it has something to do with how Flash Builder will help you create custom skins based on the default Spark skins. If I understand correctly, Builder may remove the code in the <fx:Script fb:purpose=”styling”> blocks for generating skin templates.

        I believe we’re planning on putting some documentation on the Adobe Flex Gumbo page on the Open Source site; http://opensource.adobe.com/wiki/display/flexsdk/Gumbo.

        Peter

  1. Hi Peter thanks a lot for all those nice examples.
    However I got an error on “useBaseColor = true;” where the compiler tell me something like “access to undefined property useBaseColor”
    I am a newbie and tryed with two different SDK build w/o success.
    I did not find any reference tothis issue on Google
    Any clue ?

    1. @fidu,

      It may depend on what Flex 4 SDK you are using? If you’re using an old SDK, it may not be added yet. Or maybe if you’re using a newer Flex SDK that API *may* have been renamed to something like useChromeColor.

      Peter

  2. Peter, thanks for the great examples.

    How would you approach building a reuseable component that extended the Panel component and included, let’s say, a DataGrid? Would you create the custom component class in ActionScript or MXML and add the DataGrid as a child of this class? Or would the DataGrid be added as part of the skin?

  3. Hi peter, I am really going mad wit h the spark container resizing issue, child components are not fitting within the parent container even in this example the List control coming out of the panel while resizing. plz help me on this..

  4. Just curious , Why I get a could not resolve error when i use the xmlns:mx=”library://ns.adobe.com/flex/mx” namespace? If i change to what you have listed (xmlns:mx=”library://ns.adobe.com/flex/halo”) then all of my mx namespaced components will not be resolved. Components such as the DataGrid,TabNavigator and Tree components. Searching through google Im not sure which namespace to go with. Any Suggestions

    1. @Alex,

      Just “FYI”, this is an old namespace from earlier, beta builds of the Flex 4 SDK:

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

      Assuming you’re using the final/released Flex 4 SDK, you should be using the following namespace instead:

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

      A lot of my older examples still haven’t been fully updated to use the latest APIs, but I’m slowly trying to get through them all so they compile in Flex 4+.

      Peter

  5. I’m trying to add a background colour to the contentGroup and see the changes in skin design view but I see no black background when running or component view

    Any ideas friends

  6. s:Group id=”contentGroup” width=”100%” height=”100%” minWidth=”0″ minHeight=”0″
    s:Rect left=”0″ right=”0″ top=”0″ bottom=”0″
    s:fill
    s:SolidColor color=”0×000000″ /
    /s:fill
    /s:Rect
    /s:Group

Comments are closed.