Comments on: Styling Flexlib’s WindowShade

By: xiahui

xiahui — Wed, 29 Jun 2011 13:44:49 +0000

thanks for your answer. I have solved this question, but the solved method isn’t clever.
the reason of checkbox’s icon can’t updated with the current state of the shade (open or closed) is that checkbox locate in headerRenderer. If open/close the WindowShade, headerRenderer is not changed, so the data of headerRenderer is not changed.

The property selected of checkbox isn’t changed because the render isn’t updated. So, I update the headerRenderer.

protected function shade_creationCompleteHandler(event:FlexEvent):void
{
shade.headerRenderer=new ClassFactory(itemh);
//headerRenderer=”itemh”

}

protected function shade_openedChangedHandler(event:WindowShadeEvent):void
{
shade.headerRenderer=new ClassFactory(itemh);
}
At last,I want to ask why header is only in render,but a component member of windowshade
Thanks

By: justin

justin — Tue, 28 Jun 2011 20:03:13 +0000

@xiahui: Something must get updated with the current state of the shade (open or closed). I suggest using the debugger. Wire up the event listeners and set a breakpoint inside openHandler(). Alternately, you can keep track of the state manually, just say isOpen = true in the openHandler() and isOpen = false in the closeHandler().

By: xiahui

xiahui — Tue, 28 Jun 2011 13:48:33 +0000

I maybe describe my question.
I only want to change checkbox’s icon when opening/closing the shade, but WindowShade(parent).opened doesn’t get updated – it just keeps the initial value. how can i do?

By: xiahui

xiahui — Tue, 28 Jun 2011 13:40:03 +0000

i meet the same quesion with Opher in flex4, i also want to use
shade.addEventListener(WindowShadeEvent.OPEN_BEGIN, openHandler);
but how to write openHandler() function?

By: justin

justin — Wed, 06 Apr 2011 21:06:56 +0000

@Opher: You could try to listen for the open/close events directly on the shade like this:

shade.addEventListener(WindowShadeEvent.OPEN_BEGIN, openHandler);
shade.addEventListener(WindowShadeEvent.CLOSE_END, closeHandler);

Then you can do whatever you need to do in the event handlers.

By: Opher

Opher — Wed, 06 Apr 2011 21:00:47 +0000

Hi,

I’ve been trying to use this technique, but it seems like “WindowShade(parent).opened” doesn’t get updated when opening/closing the shade – it just keeps the initial value, so the checkbox doesn’t change its state. . Any idea what I’m doing wrong?

By: Abhishek

Abhishek — Tue, 29 Mar 2011 05:10:54 +0000

Thanks! That works for me!

By: justin

justin — Mon, 28 Mar 2011 17:43:32 +0000

@Abhishek: If you want a border outside the windowshade, I’d be tempted to just put the shade into a container with a border. Simple is best.

By: Abhishek

Abhishek — Mon, 28 Mar 2011 17:32:15 +0000

Great read! I am using the flexlib:WindowShade for a project myself, and I found your article very helpful. I have a question though – is it possible to draw a border around the whole windowshade? Say, to signify the user wants focus on a current windowshade?

By: justin

justin — Wed, 19 May 2010 16:16:00 +0000

@Umesh: If you want to change the style at runtime, the easiest thing to do is to use getStyle() and setStyle().

So, if I wanted to switch styles on the header on open & close, I just listen for the correct events and use setStyle() to make the switch.

shade.addEventListener(WindowShadeEvent.OPEN_BEGIN,
    function(e:Event):void {
        shade.setStyle('headerStyleName', 'headOpen');
    });
shade.addEventListener(WindowShadeEvent.CLOSE_END,
    function(e:Event):void {
        shade.setStyle('headerStyleName', 'headClose');
    });

And then define two CSS styles for headOpen and headClose with different background colors.

Good luck.