Changing the title bar background fill on a Spark Panel container in Flex Gumbo

The following example shows how you can modify the background fill on a Spark Panel container’s title bar in Flex Gumbo by creating a custom skin and modifying the title bar fill Rect object’s fill property.

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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/02/changing-the-title-bar-background-fill-on-a-spark-panel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_titleBar_fill_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:Panel id="panel"
            title="Spark Panel title"
            horizontalCenter="0"
            verticalCenter="0"
            width="320"
            height="240"
            skinClass="skins.CustomPanelSkin">
        <s:TextArea id="textArea"
                initialize="textArea.text = mx_internal::VERSION;"
                left="20" top="20" />
    </s:Panel>

</s:Application>

And the custom skin class, CustomPanelSkin.mxml, is as follows:

View skins/CustomPanelSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/02/changing-the-title-bar-background-fill-on-a-spark-panel-container-in-flex-gumbo/ -->
<s:SparkSkin name="CustomPanelSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.Panel")]
        ]]>
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            /* Define the skin elements that should not be colorized.
               For panel, border and title backround are skinned, but the content area and title text are not. */
            static private const exclusions:Array = ["background", "titleField", "contentGroup"];

            override public function get colorizeExclusions():Array {return exclusions;}

            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];

            override public function get contentItems():Array {return contentFill};
        ]]>
    </fx:Script>

    <!-- drop shadow -->
    <s:Rect left="0" top="0" right="0" bottom="0">
        <s:filters>
            <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
        </s:filters>
        <s:fill>
            <s:SolidColor color="0" />
        </s:fill>
    </s:Rect>

    <!-- layer 1: border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
        </s:stroke>
    </s:Rect>

    <!-- layer 2: background fill -->
    <s:Rect id="background" left="1" top="1" right="1" bottom="1">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" id="bgFill" />
        </s:fill>
    </s:Rect>

    <!-- layer 3: title bar fill -->
    <s:Rect left="1" right="1" top="1" height="30">
       <s:fill>
            <s:SolidColor color="haloBlue" />
       </s:fill>
    </s:Rect>

    <!-- layer 4: title bar highlight -->
    <s:Rect left="1" right="1" top="1" height="30">
       <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xEAEAEA" />
                <s:GradientEntry color="0xD9D9D9" />
            </s:LinearGradientStroke>
       </s:stroke>
    </s:Rect>
    <s:Rect left="1" right="1" top="31" height="1">
        <s:fill>
            <s:SolidColor color="0xC0C0C0" />
        </s:fill>
    </s:Rect>

    <!-- layer 5: text -->
    <s:SimpleText id="titleField" lineBreak="explicit"
             left="10" right="4" top="2" height="30"
             verticalAlign="middle" fontWeight="bold" color="white" />

    <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" />

</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.

7 thoughts on “Changing the title bar background fill on a Spark Panel container in Flex Gumbo

  1. In flex 3, i create custom panel class that is the same with window in window os: icon, title, minimize, maximize, and close button. In flex 4, the Panel class need skin to change its default skin. How do i do it in flex 4?

    1. irabbit,
      Assuming you are using the Halo panel still (and not the new Spark Panel container), you can switch back to the Halo theme by adding this compiler argument to your Flex compiler settings:

      -theme=${flexlib}/themes/Halo/halo.swc

      For more information, see “Using the Halo theme in Flex 4”.

      Peter

  2. Another question, how to i make panel can drap? In flex 3, we just set isPopup property to true. But in flex 4 i can not drag it although i set its value to true.

    1. irabbit,

      I haven’t played around with the isPopUp property much, but this seems to create a draggable Halo Panel container in Flex 4:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/halo">
       
          <mx:Panel id="pnl"
                  width="400" height="300"
                  horizontalCenter="0" verticalCenter="0"
                  creationComplete="pnl.isPopUp = true;">
              <mx:Button label="Halo Button" />
          </mx:Panel>
       
      </s:Application>

      How is your code different?

      Peter
      (ps: If you’re going to paste raw MXML code in this blog, you may need to escape your tags. For example, replace your < with &lt; and your > with &gt;)

  3. Hi Peter.
    I think it is ok if we use Halo Panel Class in Flex 4. But what happen if i use draggable Spark Panel in flex 4.
    In flex 4 docs, i found that: Starting with Flex 4.0, Adobe recommends that you use the spark.components.Panel class as an alternative to this class.

  4. <s:Label id=”titleDisplay” maxDisplayedLines=”1″
    left=”9″ right=”3″ top=”1″ bottom=”0″ minHeight=”30″
    verticalAlign=”middle” fontWeight=”bold”>
    </s:Label>

Comments are closed.