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 Flex, Uncategorized, 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?
August 20th, 2008 at 9:42 am
Hi, I love this control. I cannot figure out how to make the second or third shades move down when the one above is opened…thanks for the help.
January 4th, 2009 at 9:27 pm
I’m having trouble with something I’m working on and I see your compoent has the same problem. If you embed the window shade components inside eachother to create a type of tree control, you’ll see that expanding a child WindowShade doesn’t invalidate the size of its parent. Any idea’s how I can invalidate the size of the parent?
February 4th, 2009 at 5:03 pm
I am having trouble disabling the WindowShade. i have a state change (user logs out) that i want to change the ui so certain members-only features are disabled. currently when i change the myWindowShade.enabled property to false, it disables the contents, but the header button still interacts, opens, and closes. How would I disable this header button to lock down the whole windowShade?
May 12th, 2009 at 12:51 pm
Your degrafa shade is awesome – the only problem I have is that when you click on a button within the opened shade, in my case to navigate to another State – I can’t get the shade to close.
I tried making this function –
private function levelChange1():void {
currentState=’class1State’();
shade.opened = false;
}
But I get an error whenever I click on the button to change states now. Any help would be really appreciated!
warm wishes
Stacey
June 25th, 2009 at 5:19 pm
Hi Doug,
I’ve used your WindowShade extensively in my project. But recently I noticed that if I dynamically add / remove some items to it, even though its width changes to accomodate the contents, its height does not change! This has become a showstopper for me. Would really appreciate your help!
Many Thanks,
Aman
September 25th, 2009 at 2:58 am
I have the same problem that Aman have.
That if i dynamically add and remove item into the windowShade it dose not change the height.
Dose any one have a solution for it?
May 14th, 2010 at 8:06 am
I am using windowShade (Flex4) , but getting this error. I used this in component class , not in main mxml.
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at flexlib.containers::WindowShade/get viewMetrics()[/Users/groumly/Development/workspace-3.5-flex4/FlexLib/src/flexlib/containers/WindowShade.as:482]
at mx.core::Container/get viewMetricsAndPadding()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\Container.as:2365]
at mx.containers.utilityClasses::BoxLayout/http://www.adobe.com/2006/flex/mx/internal::widthPadding()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\containers\utilityClasses\BoxLayout.as:346]
at mx.containers.utilityClasses::BoxLayout/measure()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\containers\utilityClasses\BoxLayout.as:134]
at mx.core::LayoutContainer/measure()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\LayoutContainer.as:432]
at flexlib.containers::WindowShade/measure()[/Users/groumly/Development/workspace-3.5-flex4/FlexLib/src/flexlib/containers/WindowShade.as:502]
at mx.core::UIComponent/measureSizes()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8042]
at mx.core::UIComponent/validateSize()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:7966]
at mx.core::Container/validateSize()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\Container.as:3257]
at mx.managers::LayoutManager/validateSize()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:617]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:709]
at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]
May 14th, 2010 at 10:55 am
Got it , component class wasn’t able to find headerlcass , which exists in stylesheet.
Thanks
Srini
August 10th, 2010 at 6:20 am
I have what seems to be similar issue to Srini, except that moving styles out of component did not resolve issue. The error begins: “TypeError: Error #1007: Instantiation attempted on a non-constructor. at flexlib.containers::WindowShade/createOrReplaceHeaderButton()[/Users/groumly/Development/workspace-3.5-flex4/FlexLib/src/flexlib/containers/WindowShade.as:258]”
From WindowShade.as:
else {
var headerClass:Class = getStyle(“headerClass”);
258… _headerButton = new headerClass();
}
This indicates to me that the issue is with headerClass, as defined in styles in main.mxml:
.linkButtonWindowShade {
headerClass:ClassReference(‘mx.controls.LinkButton’);
header-style-name: linkButtonStyle;
…..
Not sure…thoughts appreciated
August 11th, 2010 at 5:54 am
Ok, got it sorted – My issue was related to nesting of WindowShades, whereas in Flex3 I only need define stylename in the parent WindowShade – in Flex4 I need to define stylename for all nested instances as well. I didn’t look back at the Flex3 WindowShade docs but I did see that headerClass has no inheritance in Flex4 docs, which I assume was the issue.
HTH
Doug
August 15th, 2010 at 9:38 am
Doug:
I have the same issue, but, don’t understand what you fixed. Can you clarify your last post?
I’m using linkButtonWindowShade in few places in my app also, and have component extending WindowShade, should this style also be included here?
Thanks,
David
September 1st, 2010 at 6:09 pm
Hey guys,
Have any of you guys been able to have the default arrow displayed for the windowshade component in flex 4? I can’t seem to get it displayed. Everything else works.
cheers
Anh