Changing the text alignment of a Spark Panel title in Flex 4

The following example shows how you can change the text alignment of a Spark Panel title in Flex 4 by setting the textAlign style on the Panel container’s titleDisplay object.

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/09/22/changing-the-text-alignment-of-a-spark-panel-title-in-flex-4/ -->
<s:Application name="Spark_Panel_titleDisplay_textAlign_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>
        <mx:Form paddingTop="0" paddingBottom="0">
            <mx:FormItem label="textAlign:">
                <s:DropDownList id="dropDownList"
                                requireSelection="true"
                                change="dropDownList_change(event);">
                    <s:dataProvider>
                        <s:ArrayList source="[left,center,right,start,end]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
 
            protected function dropDownList_change(evt:IndexChangeEvent):void {
                pnl.titleDisplay.setStyle("textAlign", dropDownList.selectedItem);
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="The quick brown fox jumps over the lazy dog"
            width="400" height="150"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

You can also set the textAlign style in an external .CSS file or <Script/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/22/changing-the-text-alignment-of-a-spark-panel-title-in-flex-4/ -->
<s:Application name="Spark_Panel_titleDisplay_textAlign_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|Panel #titleDisplay {
            textAlign: center;
        }
    </fx:Style>
 
    <s:Panel id="pnl"
            title="The quick brown fox jumps over the lazy dog"
            width="400" height="150"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or you could create a custom Panel skin and set the textAlign style directly on the Label control, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/22/changing-the-text-alignment-of-a-spark-panel-title-in-flex-4/ -->
<s:Application name="Spark_Panel_titleDisplay_textAlign_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="pnl"
            title="The quick brown fox jumps over the lazy dog"
            skinClass="skins.CustomPanelSkin"
            width="400" height="150"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/22/changing-the-text-alignment-of-a-spark-panel-title-in-flex-4/ -->
<s:SparkSkin name="CustomPanelSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5"
        blendMode="normal"
        mouseEnabled="false"
        minWidth="131" minHeight="127">
    <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>
        <![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", "titleDisplay", "contentGroup"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            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;
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            [Bindable]
            public 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"
            tlRadius="{cornerRadius}" trRadius="{cornerRadius}"
            blRadius="0" blRadius.withControls="{cornerRadius}"
            brRadius="0" brRadius.withControls="{cornerRadius}" />
 
    <!-- 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 left="0" top="0" right="0" bottom="0"
                    topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}"
                    bottomLeftRadiusX.withControls="{cornerRadius}"
                    bottomRightRadiusX.withControls="{cornerRadius}">
                <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 left="0" top="0" right="0" bottom="0"
                    topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}"
                    bottomLeftRadiusX.withControls="{cornerRadius}"
                    bottomRightRadiusX.withControls="{cornerRadius}">
                <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"
                topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}"
                bottomLeftRadiusX.withControls="{cornerRadius}"
                bottomRightRadiusX.withControls="{cornerRadius}" >
            <s:stroke>
                <s:SolidColorStroke color="{getStyle('borderColor')}" alpha="{getStyle('borderAlpha')}" 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"
                topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}"
                bottomLeftRadiusX.withControls="{cornerRadius}"
                bottomRightRadiusX.withControls="{cornerRadius}">
            <s:fill>
                <!-- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                <s:SolidColor color="{getStyle('backgroundColor')}"
                              alpha="{getStyle('backgroundAlpha')}" />
            </s:fill>
        </s:Rect>
 
        <!-- layer 3: contents -->
        <!--- contains the vertical stack of titlebar content and controlbar -->
        <s:Group id="contents" left="1" right="1" top="1" bottom="1">
            <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"
                        textAlign="center" />
            </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>

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.

8 thoughts on “Changing the text alignment of a Spark Panel title in Flex 4

  1. Does the current release of Flash Builder 4 & Flash Player 10 break the Panel Title centering example above? I implemented the your CSS example in my code with no effect; title remains left aligned. Even cut & pasted your code into a new MXML application in case I was doing something wrong. It too is left aligned. Thanks in advance for any help you can offer!

  2. Update –

    Was able to center Panel Title by setting it explicitly in the fx:Script section. For example…

    lbPNL.titleDisplay.setStyle(“textAlign”, “center”);

    Ideally I’d like to do via CSS. For example…

    s|Panel #titleDisplay {
    textAlign: center;
    }

    But for whatever reason this is not working? Again, would appreciate your feedback on whether or not we can do this in CSS.

    1. @Randy Schultz,

      After looking through the default s:Panel skin, I’m not surprised this no longer works. It looks like the default PanelSkin.mxml file is explicitly setting the textAlign style to “start” (which looks like a change between the Flex 4.0 and Flex 4.1 SDKs — wherein Flex 4.1 added better bi-di text support). Here’s the “offending” code snippet in question from Flex 4.1 and Flex Hero beta:

      <!-- layer 3: text -->
      <s:Label id="titleDisplay" maxDisplayedLines="1"
               left="9" right="3" top="1" bottom="0" minHeight="30"
               verticalAlign="middle" textAlign="start" fontWeight="bold">
      </s:Label>

      Since that textAlign="start" is hard coded into the skin file, you won’t be able to override it using CSS like you could in Flex 4.0. Now in Flex 4.1 and later you’ll need to explicitly set the textAlign style using ActionScript, or you’ll need to create a custom skin which overrides that textAlign value.

      But basically I don’t think that it is a bug in the Flex SDK that it no longer works.

      Peter

      1. And the easiest custom Spark Panel skin I can think of to get you your center aligned titles back is something like this:

         
        package skins {
            import spark.skins.spark.PanelSkin;
         
            public class CustomSparkPanelSkin extends PanelSkin {
                override public function CustomSparkPanelSkin() {
                    super();
                    titleDisplay.setStyle("textAlign", "center");
                }
            }
        }

        Hope that helps,
        Peter

      2. Or, another approach would be a custom Spark Panel skin that clears the defined textAlign style using the clearStyle() method, and then you can set the textAlign style using the CSS in your main application CSS block, as seen in the following examples:

        <?xml version="1.0" encoding="utf-8"?>
        <s:Application name="Spark_Panel_titleDisplay_textAlign_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 {
                    skinClass: ClassReference("skins.CustomSparkPanelSkin");
                }
         
                s|Panel s|Label#titleDisplay {
                    textAlign: center;
                }
            </fx:Style>
         
            <s:Panel id="pnl"
                     title="The quick brown fox jumps over the lazy dog"
                     width="400" height="150"
                     horizontalCenter="0" verticalCenter="0" />
         
        </s:Application>

        And the custom Spark Panel skin, skins/CustomSparkPanelSkin.as, is as follows:

        package skins {
            import spark.skins.spark.PanelSkin;
         
            public class CustomSparkPanelSkin extends PanelSkin {
                override public function CustomSparkPanelSkin() {
                    super();
                    titleDisplay.clearStyle("textAlign");
                }
            }
        }

        Peter

Comments are closed.