The new Spark components included in Flex 4 are a tremendous step forward in terms of ease of skinning and extensibility, but some of them seem a little barebones out of the box. In particular the Panel and TitleWindow components are lacking a number of features that I frequently wind up needing (and I'm guessing I'm not alone). I tackled something similar in Flex 3, when I created the BetterTitleWindow component, but I've had a few more ideas for features and I'm all about Flex 4 these days, so I thought I'd give it another go.

Here's a quick rundown of all the features I added:

• - ability to collapse/expand
• - optional collapse/expand indicator
• - title bar or indicator clickable
• - ability to display a close button (which dispatches a CloseEvent)
• - closeButtonSkin can be specified
• - titleBarContent property can be used to add components to the title bar
• - layout of titleBarContent can be manipulated through titleBarLayout property
• - title bar height settable through a style property

The most fun feature I added is the ability to make the component collapsible, so that it minimizes down to just the title bar and expand back up. This is a pretty cool capability to have, and I have some ideas about using this to create a full-fledged Accordion replacement.

Here's some mxml showing how to set up the title bar content and layout:

And here's a sample app that shows the new features. View source is enabled, and you can also download the source from our svn.

This becomes quite handy when you have a control (e.g. slider) that when interacted with changes the size of item renderers dynamically.