« WSPatternStyleGenerator | Main | MAX 2007 Early Bird Ending Soon!! »
AIR Windows
| By Rich Tretola | July 17, 2007 |  Print This Post
|
 (No Ratings Yet) Loading ... | 214 views |
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:
- private function createNativeWindow():void{
- 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:
- <mx:Window xmlns:mx="http://www.adobe.com/2006/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.
- private function createCoreWindow():void{
- 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.
Topics: Adobe AIR |
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.
May 22nd, 2008 at 2:20 pm
This works great… A few questions that someone may be able to answer
1) Is there an easier way to send a referenced of WindowedApplication to the new Window instance other than sending the reference of (this) from the WindowedApplication.
2) How do you handle a moving event for a Window class (which includes WindowedApplication). A moving event only works for a NativeWindow which is at the heart of every Window object. So if I’m in the parent, can I reference it as : this.NativeWindow.addEventListener(NativeWindowBoundsEvent.MOVING, mainAppWinMoving)
That’s just rough code from the top of my head, but it threw me an error as I started to move it (if I remember correctly, don’t have it right in front of me). The error was a casting one I think.
May 22nd, 2008 at 9:02 pm
As a follow up to my last comment in case people might be wondering, this works…
this.nativeWindow.addEventListener(NativeWindowBoundsEvent.MOVING, movingWindow);
public function movingWindow(event:NativeWindowBoundsEvent):void{
trace(”moving”);
}
this refers to the main window of the WindowedApplication, within each window mx object (including the ‘this’ WindowedApplication) is a nativeWindow which is what is needed for the event watching.
PS. Instead of MOVING , you can replace this with MOVE (after event has moved), or RESIZE, etc. Check the docs for NativeWindowBoundsEvent events.
May 27th, 2008 at 10:30 pm
var newWindow:Window = new Window();
newWindow.title = “A title”;
newWindow.width = 480;
newWindow.height = 320;
var sw:Number=Capabilities.screenResolutionX;
var sh:Number=Capabilities.screenResolutionY;
newWindow.x=(sw-newWindow.width)/2;
newWindow.y=(sh-newWindow.height)/2;
var ft:HTML=new HTML();
//var ft:TextField=new TextField();
ft.htmlText=data.content;
newWindow.addChild(ft)
newWindow.open();
——————————————————
i use window class ,but the window show nothing
May 27th, 2008 at 10:46 pm
So is there a way to pass variables from one nativeWindow to another? Say for example I have this :
var wOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
wOptions.systemChrome = NativeWindowSystemChrome.NONE;
var newWindow:NativeWindow = new NativeWindow(wOptions);
newWindow.bounds = new Rectangle(0, 0, 1024, 768);
var loaderMC:Loader=new Loader();
loaderMC.load(new URLRequest(”testing.swf”));
newWindow.stage.addChild(loaderMC);
newWindow.activate();
—-
so i have a new window opened up and now i want the testing.swf to receive a variable from that “original opener”
is that possible?