Applying Filters to TitleWindow Header

I like to blog about simple issues with elusive answers. When I cannot quickly find online information for how to do what I want to do, I’m annoyed.

Recently, I wanted to add a shadow to TitleWindow component’s header label in Flex 3. Styles with CSS didn’t seem to work, so I took another approach. Here’s what I did:

Firstly, I was working with a custom Flex component that already extended TitleWindow. While you can create a “title-style-name” for components that extend panel, setting drop shadow doesn’t appear to work. The solution lies in using the internal namespace. When using the internal namespace, you can directly reference the titleTextField and apply filters. These filters can be set in the updateDisplayList method and be sourced from a public variable.

package .....
import mx.containers.TitleWindow;</code></span>

use namespace mx_internal; //this is necessary

public class CustomTitleWindow extends TitleWindow

  public var titleFilters:Array;

  public function CustomTitleWindow()

  override protected function updateDisplayList( w:Number, h:Number ):void
    super.updateDisplayList( w, h );
      titleTextField.filters = titleFilters;

To Instantiate, just do this:

//somewhere inside your flex code
<mx:dropshadowfilter id="dsf" alpha=".5" color="0x000000">
<custom:customtitlewindow titlefilters="{[ds]}" xmlns:custom="">

That does it! Now you can pass along any filter you desire to the titleWindow through the titleFilters property.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: