AIR Windows
There has been some confusion over windows within an AIR application. The original alpha had a class named NativeWindow that is in the flash.display package. The sample code to create a NativeWindow looks something like this:
var newWindow:NativeWindow =
new NativeWindow( true, new NativeWindowInitOptions());
newWindow.title = "My Window";
newWindow.width = 700;
newWindow.height = 300;
var tf:TextField = new TextField();
tf.htmlText="<b><font size='70'>This is "+
"a NativeWindow with a flash.text.TextField</font></b>";
tf.wordWrap=true;
tf.width=700;
tf.height=300;
newWindow.stage.addChild(tf);
newWindow.activate();
}
If you look at the function above you will notice that the component I added was a simple flask TextField from the flash.text package. This is noteworthy as because the window is a NativeWindow it can include components from the flash namespace but not the mx namespace. So, I could not put new Button() within the newWindow.stage.addChild() method and expect it to work.
So, with the AIR beta came the Window class which falls under mx.core. So, what does this mean? You guessed it, you can now easily include components from the mx namespace in your AIR windows. Here is an example of a file named MyWindow.mxml:
width="400" height="300">
<mx:Button label="Button"/>
<mx:DataGrid>
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<mx:ComboBox/>
</mx:Window>
Here is the code to create an instance of the MyWindow class.
var win:MyWindow = new MyWindow();
win.open();
}
Keep in mind that the NativeWindow class is still very useful and is lighter weight than the Window class. I hope this clears up any confusion. If you find that something I said here was incorrect or have something to add, please comment.
July 27th, 2007 at 1:00 pm
Great point. There has been a good deal of confusion over which API is correct to use for a given situation. flash.display.NativeWindow is the low-level API, and really provides nothing more than the window itself and a stage to put content on. mx.core.Window conceptually represents both the window and the topmost Flex container in the window. It brings with it all the invisible framework code that’s needed to manage layout and to deal with UIComponents.
If you’re using the Flex framework, you almost certainly want to be using mx.core.Window.
-Ethan
July 28th, 2007 at 6:03 pm
Hey. Thanks for this post. I’m playing with AIR now trying to get a handle on how things work and I was pulling my hair out trying to figure out how to get content into a NativeWindow. This post totally got me on the correct page. Thanks!
May I ask a follow up question about the Window object? I’m trying to create a transparent window … so if I were to add the following two lines to your example right above the win.open(); line…
win.systemChrome = NativeWindowSystemChrome.NONE
win.transparent = true;
I would expect this to make the new window transparent, but my test code has had no luck producing this like you can with a NativeWindow. Is this anything that you have tried or know about?
Thanks
Brian
July 29th, 2007 at 7:40 am
You can only use transparent windows if you also have the overall application set to be a transparent application within the XML config file.
July 30th, 2007 at 6:36 pm
Great article and tutorial. All examples worked for me however, I’m unable to go further and add an instance of another container located in an mxml file into a NativeWindow object. Am I missing something?
private function createNativeWindow():void{
var newWindow:NativeWindow =
new NativeWindow( true, new NativeWindowInitOptions());
newWindow.title = “My Window”;
newWindow.width = 700;
newWindow.height = 300;
// Custom Box is an object inheriting mx:VBox containing a few child components
var tf:CustomBox = new CustomBox();
newWindow.stage.addChild(tf);
}
July 30th, 2007 at 6:42 pm
If you are trying to use MXML components, you should be using mx:Window and not NativeWindow.
July 31st, 2007 at 10:35 am
Thanks. That is what I ended up using, but being new to this I wasn’t sure if that was best practice or not.
August 8th, 2007 at 12:55 pm
I understand that if I want to add MXML components I should be using mx:Window instead of NativeWindo, but I need the alwaysOnTop functionality of the NativeWindow. Can I get mx:Window to always stay on top or is there a way to add mx components to the NativeWindow?
August 8th, 2007 at 1:55 pm
Have you tried the orderToFront() method of the Window component.
August 8th, 2007 at 2:46 pm
The problem is that orderToFront() won’t keep the window in front if other application gain focus. I need the window to ALWAYS stay on top regardless of what other application the client may be using.
August 18th, 2007 at 1:16 pm
Excellent aritcle - I have successfully created a window using the Window class but was wondering how to pass data from the new window to the original window. Or is there a way to still reference the parent window variables from the new Window? Any help would be greatly appreciated. Thanks!
August 18th, 2007 at 5:16 pm
You can access the window by its id. For example if you created a window like this:
private function createCoreWindow():void{
var win:MyWindow = new MyWindow();
win.open();
}
You could set a property on that window by using:
win.propertyName = “whatever”;
or call a function like:
win.functioName();
August 19th, 2007 at 2:03 pm
Thanks very much. Using your example, what id would I use from the script code in “MyWindow” to reference functions or variables in the “parent” window? I tried using parentApplication but it didn’t recognize the object I was attempting to reference. Thanks again for your help.
August 19th, 2007 at 4:05 pm
“You can only use transparent windows if you also have the overall application set to be a transparent application within the XML config file.”
Thanks for the info it has been very helpful. I’ve been trying to get this to work as well to spawn transparent windows with Flex components, but I’ve tried everything and nothing seems to work. I have a transparent main app, but all I have been able to do is spawn a window with that cruddy Flex Chrome. Any ideas?
this doesn’t work (the main app’s XML is set to systemChrome=”none” as well) it only sets it to the Flex Chrome :
win.systemChrome = “none”;
win.transparent = true;
August 19th, 2007 at 5:00 pm
Nevermind I figured it out!!!
It’s not fully implemented yet, but there is a workaround:
set showFlexChrome=”false” in your mx:WindowApplication and mx:Window
This also means you don’t have to use mx:Application anymore for your root to make windows transparent, but maybe everyone knew that.
October 10th, 2007 at 3:37 pm
Thanks for posting the solution to spawning transparent windows with flex components - I had very little hair left after spending all morning trying to do the exact same thing and comming up short everytime.
December 31st, 2007 at 5:48 pm
showFlexChrome=”false”
Thanks Bradical! That’s terribly important. I will blog that myself so as to have more tracks about that in the future!
April 30th, 2008 at 12:51 am
private function createCoreWindow():void{
var win:MyWindow = new MyWindow();
win.open();
}
Thanks,
but how can i call the function in parent (like WindowedApplication), from win ?
April 30th, 2008 at 4:47 am
You could pass a reference of the parent into the new window or create an event listener on the parent to listen for events being broadcast from the new window.