A new Flex container has been added to FlexLib, called the WindowShade. This container shows a header button above or below the content of the container. Clicking the header button opens or closes the panel. This lets you easily create expandable panels in your Flex applications. A single WindowShade container can be used on its own, or you can place a few of them in a VBox to make something similar to an Accordion, except you can have multiple children open at once (similar to Peter Ent’s stack components).
The component was contributed by Dave Glasser, of iDashboards. I initially went back and forth with Dave about the component. At first I thought this was really trying to be an accordion component with multiple open children, in which case I figured if we were going to do that component we should do it right (maybe extend Accordion). But I’ve since been won over to the usefulness of a single WindowShade container, and in my latest project I even used it - 3 times 
So I worked with Dave and we reworked the component a bit, and now I think it’s pretty nifty.
Here’s an example that uses LinkButtons for the headers. You can use any Button control (ie Button, LinkButton, CanvasButton).
As a side note, I also contributed a fix from Troy Gilbert that lets you use a CanvasButton in a Repeater. Thanks Troy!
This entry was posted
on Saturday, February 9th, 2008 at 5:52 pm and is filed under Uncategorized, Flex, flexlib.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Entries (RSS)
February 10th, 2008 at 9:38 am
Thanks Doug,
I found WindowShade yesterday and immediately reskinned my project to use it. I do have a question though. How do you make the contents of the shade appear as if part of the button (as shown above)? I always get a separate button and content. Would you mind publishing the source for your sample?
February 10th, 2008 at 11:29 am
@Lloyd - you can grab the source of that example here: http://flexlib.googlecode.com/svn/trunk/examples/WindowShade/WindowShade_Sample.mxml
The basic thing I did was make sure that the background styles matched the LinkButton styles, so that basically just means making the cornerRadius the same.
I may post a few more examples of how to use the WindowShade and not have it look like a standard button above a container. You can use the WindowShade really well to make the kind of “drawer” components that are docked to the side of the screen that slide out with tools.
February 11th, 2008 at 12:09 am
You have a small bug. It you open the second ‘window’ and then try to tab down to it from the text boxes in the first ‘window’, as you leave the last text box, the blue border of the titlebar mouseover appears rather than tabbing to the next ‘window’. Using 9.115 & Firefox 2.0.0.11
February 11th, 2008 at 6:48 am
Ha, for the last several weeks I’ve been doing a project at work, and a big component of it is almost exactly like this… of course mine is much weaker as I just start doing Flex not too long ago. I’ll be looking at this component and would be happy to chip in on any idea that’d be useful for you guys.
February 11th, 2008 at 9:28 am
Nice addition. I’ve wanted one of these a couple times in the past.
February 12th, 2008 at 11:31 pm
although this is work to appreciate.
i have done the same with less hassle.
just extended Panel !
i’ll send you the code.
February 25th, 2008 at 7:00 pm
[…] dougmccune.com » Blog Archive » WindowShade component added to FlexLib - A new Flex container has been added to FlexLib, called the WindowShade. This container shows a header button above or below the content of the container. Clicking the header button opens or closes the panel. This lets you easily create expandable panels i […]
February 29th, 2008 at 8:03 am
[…] 通过点击▼来控制是展开还是收缩容器(Container)的内容，略加修改就可以实现和Outlook那样的效果，很是有用。可以在这里看具体的介绍以及实际体验一下Demo~ […]
March 3rd, 2008 at 8:08 am
One need that I kept on encountering for this design is a container… one that would let user access those panels that have scrolled outside of the display region due to extension of other panel(s). There’s a need to 1) easily list and access all panels of the group and 2) a good transition to move user to a selected panel w/o losing focus.
April 1st, 2008 at 5:16 pm
[…] Doug McCune » Blog Archive » WindowShade component added to FlexLib Here’s an example that uses LinkButtons for the headers. You can use any Button control (ie Button, LinkButton, CanvasButton). […]
April 4th, 2008 at 4:20 pm
[…] I am using the very nifty WindowShade from the life-saving (OK that’s a bit melodramatic…) FlexLib library. However, I wanted to be notified of open and close events. I heard somewhere (can’t find where now) that those events have been added into the SVN for FlexLib. I didn’t want to have to do a checkout and copy those files over and update it everytime the FlexLib SVN code updated… not fun. Fortunately there is a note in the FlexLib Wiki about creating a FlexBuildProject from the svn tree. This got interesting. I never build a SWC before and it certainly makes it a lot easier. […]
April 4th, 2008 at 6:21 pm
[…] I am using the very nifty WindowShade from the life-saving (OK that’s a bit melodramatic…) FlexLib library. However, I wanted to be notified of open and close events. I heard somewhere (can’t find where now) that those events have been added into the SVN for FlexLib. I didn’t want to have to do a checkout and copy those files over and update it everytime the FlexLib SVN code updated… not fun. Fortunately there is a note in the FlexLib Wiki about creating a FlexBuildProject from the svn tree. This got interesting. I never build a SWC before and it certainly makes it a lot easier. […]
April 24th, 2008 at 9:05 am
Hey Doug,
totally sweet!
many thanks for sharing a very useful component!
I am seeing some strange behavior, and maybe you can point me to the issue rather easily before i go sleuthing too deep into your code…
Some content will display at first, then when i close the Shade it goes away, and when i open the shade it DOES NOT come back…
it has a canvas with an extra component inside…
any ideas?
June 10th, 2008 at 9:59 am
Hey Doug - I love the work you’ve done, it’s been invaluable to me so far.
Regarding the WindowShade, you mentioned above you might post some samples of how to use the WindowShade docked to the side of the screen. I’m trying to figure out how to do exactly this. Any chance you could post a sample?