Flex Examples
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 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/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>
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.
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.
Share
Do you know how to change the height of a spark panel titlebar?
@Sarah,
Probably a few ways to do this, but you could probably just tweak the height of the
titleDisplayskin 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):Peter
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?
@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
minHeightproperty 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:Peter