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

By Peter deHaan On September 22, 2009 · 8 Comments

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

Tagged with: Gumbo • textAlign • title • titleDisplay

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

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

jason says:

October 9, 2009 at 8:07 am

Getting error “Error: Required skin part titleField cannot be found.”

Reply
- Peter deHaan says:
  
  October 10, 2009 at 6:18 pm
  
  @jason,
  
  Which build number are you using?
  <mx:Label text="{mx_internal::VERSION}" />
  Peter
  
  Reply
Dhanashri says:

February 23, 2010 at 12:55 am

nice job!!!!!!!!!!!

Reply
Randy Schultz says:

August 29, 2010 at 5:46 am

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!

Reply
Randy Schultz says:

August 29, 2010 at 6:42 am

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.

Reply
- Peter deHaan says:
  
  August 29, 2010 at 2:54 pm
  
  @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:
   <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
  
  Reply
  - Peter deHaan says:
    
    August 29, 2010 at 2:59 pm
    
    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
  - Peter deHaan says:
    
    August 29, 2010 at 3:03 pm
    
    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