Changing the header text color on a Spark Panel container in Flex 4

The following example shows how you can change the header text color on a Spark Panel container in Flex 4 by setting the color style on the 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/04/30/changing-the-header-text-color-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_titleDisplay_color_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>
            <mx:FormItem label="Spark Panel title color:">
                <mx:ColorPicker id="clrPckr"
                        selectedColor="black"
                        change="clrPckr_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function clrPckr_changeHandler(evt:ColorPickerEvent):void {
                pnl.titleDisplay.setStyle("color", evt.color);
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="Spark Panel"
            left="40" right="40" top="40" bottom="40">
        <s:controlBarContent>
            <s:Label text="Panel control bar contents" />
        </s:controlBarContent>
 
        <s:Button label="Panel contents" x="20" y="20" />
    </s:Panel>
 
</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

Or you can set the titleDisplay skin part’s text color 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/2010/04/30/changing-the-header-text-color-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_titleDisplay_color_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Panel #titleDisplay {
            color: red;
        }
    </fx:Style>
 
    <s:Panel id="pnl"
            title="Spark Panel"
            left="40" right="40" top="40" bottom="40">
        <s:controlBarContent>
            <s:Label text="Panel control bar contents" />
        </s:controlBarContent>
 
        <s:Button label="Panel contents" x="20" y="20" />
    </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.

4 thoughts on “Changing the header text color on a Spark Panel container in Flex 4

    1. @Sarah,

      Probably a few ways to do this, but you could probably just tweak the height of the titleDisplay skin part, as seen in the following example (or you could always reskin, or probably try extending the s:Panel class and adding some custom style/property to control the header height):

      <?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">
          <s:controlBarContent>
              <s:HSlider id="sl"
                      minimum="20" maximum="100"
                      change="pnl.titleDisplay.height = sl.value;" />
          </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>

      Peter

  1. Thanks! This seems to work, although I can only make the title width thicker and not thinner.

    How would I add a custom style to control the header height?

    1. @Sarah,

      True, it looks like you cannot set your Spark Panel header area lower than 30px using the HSlider in my test app. Turns out that the default s:Panel skin sets the minHeight property to 30. You could create a custom Spark Panel skin (copy/paste the default skin) and change the minimum label display height to something like 16px using the following snippet:

      <!-- layer 3: text -->
      <!--- @copy spark.components.Panel#titleDisplay -->
      <s:Label id="titleDisplay" maxDisplayedLines="1"
               left="9" right="3" top="1" bottom="0" minHeight="16"
               verticalAlign="middle" textAlign="start" fontWeight="bold" />

      Peter

Comments are closed.