Creating Transparent Native Windows with the mx:Window Class

Holy hell. I’ve been tearing my hair out all night trying to figure out how to make a fully transparent and chrome-less native window using the mx:Window class. Luckily, thanks to Bradical from this post, I found the solution. You just need to set showFlexChrome equal to False in your mx:Window component. So quick mini-tutorial for anyone doing custom chrome/transparent native windows:

If you’re looking at a lot of AIR documentation you’ll probably see references to a NativeWindow class and think that’s what you want to use to create a new native window. If you’re doing Flex work however, you won’t be able to add any components from the Flex Framework to that NativeWindow because NativeWindow is a Flash class and doesn’t include the Flex (mx) libraries. So what you’ll want to do instead is create a custom component that extends mx:Window:

<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="75"
	styleName="chromeless" layout="absolute" verticalAlign="middle"
	horizontalAlign="center">
	<mx:Style>
		.chromeless
		{
			showFlexChrome: false;
			background-image: "";
			background-color: "";
			padding: 0px;
		}
	</mx:Style>
	<mx:Image source="@Embed('assets/notifier.png')" id="background" />
	<mx:Label id="lbl" color="#ffffff" fontSize="20"
		textAlign="center" top="25" bottom="25" right="0" left="0" />
</mx:Window>

Notice I set up a style called chromeless, knocked out the background image/color and set the padding to zero like any other custom chrome application, but I’ve also set the showFlexChrome property to false. Now you’re good to go and you can start using all of the Flex Framework in your native window. In this case I’m setting the other native window chrome properties when I actually create the window (in my main Application file):

	public function createNewWindow() : void
	{
		var win : NotificationWindow = new NotificationWindow();
		win.systemChrome = NativeWindowSystemChrome.NONE;
		win.type = NativeWindowType.LIGHTWEIGHT;
		win.transparent = true;
		win.open(true);
         }

NotificationWindow is just the name of my MXML component (NotifyWindow.mxml) and I can set the system chrome options in that file directly, or on creation like I did above. If you’re going to be using the same chrome settings for your custom native window class, it’s probably easiest just to set the system chrome options inside your component.

Hope that helps other folks, and a huge thanks to Bradical, wherever you are!

http://fleximagically.com polyGeek

Brilliant work. No really Brilliant. And timely. I could have spent hours pulling your hair out trying to get this to work. But fortunately you did it for me.

Oh, you might want to add a button to close the new window that was opened. Something like:

Should do it.

Oh, and don’t put it UNDER the image, like I did the first time.
http://fleximagically.com polyGeek

Crap, I was wondering if the code would show up. It didn’t. Try this:

mx:Button label=”close”
click=”this.close();” /

I’ll leave it as an exercise for the reader to figure out where the delimiters go.
Ryan Boros

speaking of pulling my hair out…that what i’ve been doing in regards to these notification windows. great tutorial, it has got me closest to what i want to do. a quick question, which may or may not be stupid. how do you position that new window? doing a straight open and it displays fine in the upper left. when i try to change the x & y, it’s almost like there’s a mask that stays in the upper left and the window will eventually disappear the further right and down that you position it. any help would be much appreciated.
Ryan Boros

ah, disregard previous question, i figured it out. to change the position of the window:

win.move(x:int, y:int):void;

this was probably obvious to most already, but for slow people like me, there you go.
Jeesmon

Thanks for posting this. I wasted lot of time getting something displayed in NativeWindow before finding this post.

Ryan Stewart – Mountaineer Coding

Just an average guy trying to drink above average beer.

Creating Transparent Native Windows with the mx:Window Class