Comments on: Styling Flexlib’s 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.

By: Umesh

Umesh — Wed, 19 May 2010 12:28:05 +0000

Hi,
Thanks for a very good example. I wanted to know how can I have a different header colors applied. I want the header to have a one color when window shade is open and another color when it is closed.

Any help will be much appreciated. Using the most recent Flex 4 version.

By: Joel

Joel — Mon, 22 Feb 2010 14:54:21 +0000

Excellent guide. Helped a ton. Thanks!

By: justin

justin — Fri, 27 Mar 2009 15:27:56 +0000

As I mentioned above, I’m using a CanvasButton in the headerRenderer of the WindowShade. The CanvasButton hold three components: a Label, a CheckBox, and a basic Canvas. The key to making the entire CanvasButton clickable is the extra Canvas, which is space-filling and transparent:

backgroundColor="#000000" backgroundAlpha="0" />

By: sandeep

sandeep — Thu, 26 Mar 2009 15:50:29 +0000

Hi,

Happened to do the same thing what you and faced the same problem and the only difference is that i couldn’t resolve the issue you faced. I am not able to roll over or roll out a windowshade when clicked on Windowshade apart from the label. I have included a Label with in the Windowshade but it has made windowshade rolldown functionality to fail. Can you please look at the code and let me know where things have failed, I have tried all the possible ways but failed.

Please find my code below…

and my actionscript methods…

public static function onBackDown(event:Event):void {
ModelLocator.getInstance().dispatchEvent(new Event(“LabelClicked”));
}

public static function onBackClick(event:Event):void {
event.stopPropagation();
}

Would appreciate if you could suggest a solution…

Thanks