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.
10 Comments
I sure use ‘BetterTitleWindow’ (a lot) … looking forward to giving this a go. Thanks!
Great add. Love the collapse effect.
Very nice. Thanks for providing this to the community.
Other nice features that could be added are: ability to scale panel, maximize and minimize.
keep up the great work.
This is good stuff! Thanks for posting it. I also featured it on a recent round up on my blog at http://remotesynthesis.com/post.cfm/cool-stuff-with-the-flash-platform-12-16-10 which is also distributed internally here at Adobe.
I would actually really appreciate it if you could add a link to this post as a comment to the TitleWindow documentation at http://help.adobe.com/en_US/flex/using/WS6c678f7b363d5da52e8f1ca1124a0430dcf-8000.html#ionCTAAnchor that way other users could reference it (and it could potentially be added to the official documentation).
Keep up the good work!
Brian Rinaldi
Web Community Manager, Flash Platform
Adobe
Great stuff. I was wondering if I could take your features you have added here and add them into my Flex 4 window manager class. Take a look and get back to me.
http://www.flashdan.net/2010/12/flex-4-dashboard.html
-Dan
@Dan,
Sorry for the late reply, but sure, feel free to incorporate this into your window manager. It looks like a promising project…
is there a way to get the titlewindows to be collapsed by default?
@joey: the mxml component has an attribute called expanded, set it to false to have the window collapsed by default
I have a couple of these Title Window components in a small Panel component ( I have to keep it small). All works great except that when I extend the TitleWindow its content goes outside the Panel. So I was wondering if I can somehow make my Panel “aware” of the TitleWindow size (that it has expended) so it too expends.
I’m assuming this would work if the TitleWindow was able to notify its parent component (the Panel) about any changes…
Is this possible?
Just so you all know this component, the Sliding Panel, is working very well when one is embedded into another one. This is exactly the functionality I was looking for. When one is expending, the other one will also expend to accommodate new panel’s size.