Flex/Flash/Actionscript

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 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).

This movie requires Flash Player 9.

As a side note, I also contributed a fix from Troy Gilbert that lets you use a CanvasButton in a Repeater. Thanks Troy!

Standard

32 thoughts on “WindowShade component added to FlexLib

  1. Lloyd Fischer says:

    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?

  2. @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.

  3. Bob Pardoe says:

    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

  4. 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.

  5. Shemesh says:

    although this is work to appreciate.
    i have done the same with less hassle.
    just extended Panel !
    i’ll send you the code.

  6. Pingback: Vinny Carpenter’s blog - » Daily del.icio.us for February 22nd through February 25th

  7. Pingback: ???????Flex??(Container)??–WindowShade - ??????

  8. 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.

  9. Pingback: I like WindowShade « Ramblings

  10. Pingback: Building Flexlib from SVN source « Ramblings

  11. Pingback: Building Flexlib from SVN source to get openEnd and closeEnd events for WindowShade « Ramblings

  12. 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?

  13. Linus Graybill says:

    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?

  14. Michael Paley says:

    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.

  15. Danny Patterson says:

    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?

  16. darren_db says:

    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?

  17. 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

  18. Aman says:

    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

  19. ErrK says:

    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?

  20. Srini says:

    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]

  21. Srini says:

    Got it , component class wasn’t able to find headerlcass , which exists in stylesheet.

    Thanks
    Srini

  22. 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

  23. 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

  24. David says:

    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

  25. Arnie says:

    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

  26. tth says:

    Hi Doug, similar to David, can I find out what you did to fix “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]” ??

    Thank you.

  27. CC says:

    Hi Doug, I love the windowShade. One question. When the windowshade is first clicked, it is not opening or closing… from the second click onward, it works fine. Is this a problem for anyone else? Any ideas how to fix it? Thanks.

  28. Hariprasad says:

    Hi Doug,

    I like to use Your WindowShade in my application.

    But I am facing an issue with WindowShade in flex4, I have changed my application from flex3 to flex 4.The issue is i am not able to use WindowShade in my application.If i add the WindowShade while running the application nothing is showing in the browser. If i change the WindowShade to Panel or Some other container it is working fine.I am new to flex.

    Could you please help me to get rid of this…

  29. Hi Doug,

    I am having the exactly same problem as Hariprasad is above.

    Could you help us out with this.

    Best
    Zee

  30. Chris says:

    Zee & Doug:
    I had an issue where my AIR app would crash when using a WindowShade going from Flex 3 to Flex 4. I had to add a style for the headerClass in WindowShades. Try adding a style to your project like:

    @namespace flexlib “http://code.google.com/p/flexlib/”;
    flexlib|WindowShade {
    headerClass:ClassReference(“mx.controls.Button”);
    }

  31. sans says:

    Here’s my issue.If 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’.
    How to resolve?

Comments are closed.