• Home
  • About Me
  • AIR Central
  • AS3 Libs
  • Books
  • Flex Central
  • Resources
  • The Guru's
    •  

    AIR Windows

    July 17th, 2007

    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:

    1. private function createNativeWindow():void{
    2.     var newWindow:NativeWindow =
    3.     new NativeWindow( true, new NativeWindowInitOptions());
    4.     newWindow.title = "My Window";     
    5.     newWindow.width = 700;
    6.     newWindow.height = 300;
    7.     var tf:TextField = new TextField();
    8.     tf.htmlText="<b><font size='70'>This is "+
    9.     "a NativeWindow with a flash.text.TextField</font></b>";
    10.     tf.wordWrap=true;
    11.     tf.width=700;
    12.     tf.height=300;
    13.     newWindow.stage.addChild(tf);
    14.         newWindow.activate();
    15. }

    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:

    1. <mx:Window xmlns:mx="http://www.adobe.com/2006/mxml"
    2. width="400" height="300">
    3.    <mx:Button label="Button"/>
    4.    <mx:DataGrid>
    5.         <mx:columns>
    6.             <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
    7.             <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
    8.             <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
    9.         </mx:columns>
    10.     </mx:DataGrid>
    11.     <mx:ComboBox/>
    12. </mx:Window>

    Here is the code to create an instance of the MyWindow class.

    1. private function createCoreWindow():void{   
    2.     var win:MyWindow = new MyWindow();
    3.     win.open();
    4. }

    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.

    24 Comments | Adobe AIR (Apollo) | Permalink
    Posted by everythingflex