Table of Contents

uiWindow

Required: Aspire UI Components Standard Edition

A uiWindow container contains a title bar and a content area for its child. It can also optionally display a menu bar and a status bar.


Using uiWindow

To use uiWindow containers in your application, you must first initialize the class by calling the uiWindow.initialize() method: 

// ** initializes the uiWindow class passing the stage object for the parameter **
uiWindow.initialize(stage);

You create instances of the uiWindow class normally, via the new operator. 

// ** creates a normal uiWindow instance **
var myWin:uiWindow = new uiWindow();

To show a uiWindow instance, you would call its open() method1). 

// ** opens the window at stage coordinates 50,50 (x,y) **
myWin.open(50,50);

To close a uiWindow instance programmatically, call its close() method2). 

// ** closes the window programmatically **
myWin.close();

ActionScript 3.0 Example

import com.ghostwire.ui.containers.*;
import com.ghostwire.ui.controls.*;
import com.ghostwire.ui.data.*;
import com.ghostwire.ui.enums.*;
import com.ghostwire.ui.events.*;
import com.ghostwire.ui.managers.*;
 
// ** initializes the uiWindow class passing the stage object for the parameter **
uiWindow.initialize(stage);
 
var myWin:uiWindow = new uiWindow();
myWin.title = "Window 1";
myWin.open(5,5);
 
var myWin2:uiWindow = new uiWindow();
myWin2.title = "Window 2";
myWin2.open(25,45);

uiWindow Example

Using the “classic” skin:
uiWindow classic skin Example

NOTE: the uiWindow instances are not native Operating System windows - they are still Flash components, merely skinned to look like windows commonly used in desktop applications.


Content

The uiWindow component can only contain a single uiForm child object, which can be accessed via the content property. This embedded uiForm instance can of course contain other child objects. This means that if you wish to add content to a uiWindow instance, you must do so by adding to the single child content3). 

// ** add to content **
myWin.content.addChild(txta);

You can also create a new uiForm container, add whatever content you want to this container, and set the uiWindow instance's content property to this uiForm instance.

ActionScript 3.0 Example

 1: import com.ghostwire.ui.containers.uiForm;
 2: import com.ghostwire.ui.containers.uiWindow;
 3: import com.ghostwire.ui.controls.uiText;
 4:
 5: // ** initializes the uiWindow class **
 6: uiWindow.initialize(stage);
 7:
 8: // ** create the content **
 9: var txta:uiText = new uiText("multiline text\nanother line...");
10:
11: var myWinForm:uiForm = new uiForm();
12: myWinForm.padding = 8; // ** put some space around the content **
13: myWinForm.addChild(txta);
14:
15: // ** create the window **
16: var myWin:uiWindow = new uiWindow();
17: myWin.title = "My Window";
18: myWin.content = myWinForm; // ** set the content **
19:
20: // ** show the window **
21: myWin.open();

uiWindow Example

NOTE: The uiWindow container will assume a minimum size based on its contents.


Mode

A uiWindow container can be set to be closeable/maximizable/minimizable (by pressing respective buttons on the title bar), and/or movable (by dragging the title bar), and/or resizable (by dragging edges of the window) by end-users. The window can also be set to be “modal” (while it is active, other parts of the application will not be interactive).

The type of window created depends on the mode specified when the instance is created (this mode cannot be modified after instantiation). 

import com.ghostwire.ui.containers.uiWindow;
import com.ghostwire.ui.enums.WINDOW;
 
var myWin:uiWindow = new uiWindow(WINDOW.NORMAL);

The default mode is WINDOW.NORMAL if you do not specify a value4). WINDOW.NORMAL indicates that the uiWindow container is closeable, maximizable, minimizable, movable and resizable by end-users. The value is equivalent to WINDOW.CAN_CLOSE|WINDOW.CAN_MAXIMIZE|WINDOW.CAN_MINIMIZE|WINDOW.CAN_MOVE|WINDOW.CAN_RESIZE.

To create a window that can be closed and can be moved but not maximizable/minimizable/resizable: 

var myWin:uiWindow = new uiWindow(WINDOW.CAN_CLOSE|WINDOW.CAN_MOVE);

To create a window that can be closed and resizable but not maximizable/minimizable/movable5): 

var myWin:uiWindow = new uiWindow(WINDOW.CAN_CLOSE|WINDOW.CAN_RESIZE);

To create a normal window that is “modal” (while it is active, other parts of the application will not be interactive): 

var myWin:uiWindow = new uiWindow(WINDOW.NORMAL|WINDOW.IS_MODAL);

To create a window that is “modal”, can be closed and can be moved but not maximizable/minimizable/resizable6): 

var myWin:uiWindow = new uiWindow(WINDOW.MODAL);

The value of WINDOW.FIXED (zero) indicates that the uiWindow instance cannot be closed, cannot be maximized, cannot be minimized, cannot be moved, and cannot be resized by end-users. 

var myWin:uiWindow = new uiWindow(WINDOW.FIXED);

NOTE: Regardless of the value set for the mode property, your application will still be able to close/maximize/minimize/move/resize the uiWindow instance programmatically.


Menu Bar

To automatically embed a uiMenuBar control in a uiWindow container, set its menuModel property:

ActionScript 3.0 Example

import com.ghostwire.ui.containers.*;
import com.ghostwire.ui.controls.*;
import com.ghostwire.ui.data.*;
import com.ghostwire.ui.enums.*;
import com.ghostwire.ui.events.*;
import com.ghostwire.ui.managers.*;
 
// ** initializes the uiWindow class **
uiWindow.initialize(stage);
 
// ** create the content **
var txta:uiText = new uiText("multiline text\nanother line...");
 
var myWinForm:uiForm = new uiForm();
myWinForm.padding = 8; // ** put some space around the content **
myWinForm.addChild(txta);
 
// ** create the window **
var myWin:uiWindow = new uiWindow();
myWin.title = "My Window";
myWin.content = myWinForm; // ** set the content **
 
var menuXML:XML =
<menu>
    <item label="File" >
        <item label="New..." />
        <item label="Open..." />
        <item label="Open Recent" >
            <item label="Document 1" />
            <item label="Document 2" />
            <item label="Document 3" />
        </item>
        <!-- comment: empty item denotes a separator -->
        <item />
        <item label="Save" enabled="false" />
        <item />
        <item label="Exit" />
    </item>
    <item label="Edit" >
        <item label="Undo" />
        <item label="Redo" enabled="false" />
        <item />
        <item label="Cut" enabled="false" />
        <item label="Copy" enabled="false" />
        <item label="Paste" enabled="false" />
    </item>
    <item label="View" >
        <!-- comment: check items -->
        <item label="Line Numbers" checked="true" />
        <item label="Word Wrap" checked="false" />
        <item />
        <item label="Language" >
            <!-- comment: a group of radio items -->
            <item label="English" group="Lang" checked="true" />
            <item label="French" group="Lang" />
            <item label="Japanese" group="Lang" />
        </item>
    </item>
    <item label="Help" >
        <item label="About..." />
    </item>
</menu>
 
myWin.menuModel = new uiModel(menuXML);
 
// ** show the window **
myWin.open(20,20);

uiWindow with menu bar

The uiWindow will dispatch a uiMenuEvent.MENU_SELECT event when an enabled menu item is selected. 

myWin.addEventListener(uiMenuEvent.MENU_SELECT,on_winMenuSelect,false,0,true);
 
function on_winMenuSelect(evt:uiMenuEvent):void
{
    txta.text = evt.item.label;
}


Status Bar

To display a status bar in the uiWindow container, set the status property: 

myWin.status = "Done";

uiWindow with status bar

NOTE: If you wish to display a status bar without any text, set the status property to an empty string ””. Setting the property to null will remove the status bar.


Title Bar

The text to display as the title of the uiWindow container is set via the title property: 

myWin.title = "My Window";

To display an icon next to the text title, set the icon property: 

myWin.icon = "star.png";

The icon property indicates the source to an image asset (by default, stored in the “assets/images/” folder).

uiWindow with icon in the title bar


Custom Cursors

If your application has the uiCursors manager initialized, uiWindow instances will use the “SIZE_EW”, “SIZE_NESW”, “SIZE_NWSE”, and “SIZE_NS” custom cursors automatically: uiWindow with custom cursor


MyWinExample

For a live demo, please look at uiWindow Example

ActionScript 3.0 MyWinExample class

  1: package
  2: {
  3:
  4:     import com.ghostwire.ui.containers.*;
  5:     import com.ghostwire.ui.controls.*;
  6:     import com.ghostwire.ui.data.*;
  7:     import com.ghostwire.ui.events.*;
  8:     import com.ghostwire.ui.enums.*;
  9:     import com.ghostwire.ui.managers.*;
 10:
 11:     import flash.display.*;
 12:     import flash.events.*;
 13:     import flash.system.*;
 14:     import flash.ui.*;
 15:
 16:     public class MyWinExample extends Sprite
 17:     {
 18:         // ** instances **
 19:         private var nameInput:uiTextInput;
 20:         private var jobList:uiComboBox;
 21:         private var aboutWin:uiWindow;
 22:
 23:         public function MyWinExample()
 24:         {
 25:             // ** make sure stage is not null **
 26:             addEventListener(Event.ADDED_TO_STAGE,init);
 27:
 28:             // ** optional, hide the default context menu **
 29:             contextMenu = new ContextMenu();
 30:             contextMenu.hideBuiltInItems();
 31:         }
 32:
 33:         private function init(evt:Event):void
 34:         {
 35:             // ** uncomment to use "classic" theme **
 36:             //uiSkins.initialize("classic");
 37:
 38:             // ** let assets preload before starting application **
 39:             uiSkins.manager.addEventListener(Event.INIT,main);
 40:
 41:             // ** initializes uiCursors class **
 42:             uiCursors.initialize(stage);
 43:
 44:             // ** initializes uiWindow class **
 45:             uiWindow.initialize(stage);
 46:         }
 47:
 48:         private function main(evt:Event):void
 49:         {
 50:             // ** main application code **
 51:
 52:             // ** welcome window **
 53:             var welcomeText:uiText = new uiText("This is a modal uiWindow instance.\n\nTry clicking outside this window.\n\nClose this window to proceed.");
 54:
 55:             var welcomeWin:uiWindow = new uiWindow(WINDOW.MODAL);
 56:             welcomeWin.title = "Welcome!";
 57:             welcomeWin.content.padding = 10;
 58:             welcomeWin.content.addChild(welcomeText);
 59:             welcomeWin.open();
 60:             // ** end welcome window **
 61:
 62:             // ** img window **
 63:             var img:uiImage = new uiImage("flower.jpg");
 64:             img.maintainAspectRatio = true;
 65:             img.fillX = true;
 66:             img.fillY = true;
 67:
 68:             var imgWin:uiWindow    = new uiWindow();
 69:             imgWin.title        = "flower.jpg";
 70:             imgWin.liveDragging    = true;
 71:             imgWin.content.addChild(img);
 72:             // ** end img window **
 73:
 74:             // ** profile window **
 75:             var profileBox:uiBox    = new uiBox();
 76:             profileBox.alignX        = ALIGN.CENTER;
 77:             profileBox.vertical        = true;
 78:             profileBox.spacing        = 8;
 79:
 80:             var nameText:uiText        = new uiText("NAME");
 81:             nameText.textStyle        = "header";
 82:             profileBox.addChild(nameText);
 83:
 84:             nameInput    = new uiTextInput("Anonymous");
 85:             nameInput.fillX                = true;
 86:             profileBox.addChild(nameInput);
 87:
 88:             var bioText:uiText        = new uiText("BIO");
 89:             bioText.textStyle        = "header";
 90:             profileBox.addChild(bioText);
 91:
 92:             var bioInput:uiTextArea    = new uiTextArea("Enter some text here");
 93:             bioInput.fillX            = true;
 94:             profileBox.addChild(bioInput);
 95:
 96:             var jobText:uiText        = new uiText("OCCUPATION");
 97:             jobText.textStyle        = "header";
 98:             profileBox.addChild(jobText);
 99:
100:             jobList        = new uiComboBox(["Accountant","Artist","Athelete","Baker","Botanist","Cartoonist","Cryptographer","Dentist","Driver","Engineer","Fireman","Gardener","Historian","Illustrator","Journalist","Lawyer","Mason","Mathematician","Nurse","Optician","Painter","Reporter","Secret Agent","Software Engineer","Tutor","Ufologist","Writer","Zookeeper"]);
101:             jobList.fillX    = true;
102:             profileBox.addChild(jobList);
103:
104:             var submitButton:uiPushButton    = new uiPushButton("Submit");
105:             submitButton.alignX                = ALIGN.CENTER;
106:             profileBox.addChild(submitButton);
107:
108:             var profileFrame:uiFrame = new uiFrame();
109:             profileFrame.title = new uiText("Profile");
110:             profileFrame.title.textStyle = "header";
111:             profileFrame.fillX = true
112:             profileFrame.content = profileBox;
113:
114:             var profileForm:uiForm = new uiForm();
115:             profileForm.padding = 10;
116:             profileForm.defaultButton = submitButton;
117:             profileForm.addChild(profileFrame);
118:
119:             var profileWin:uiWindow = new uiWindow();
120:             profileWin.title = "Profile";
121:             profileWin.content = profileForm;
122:
123:             var menuXML:XML =
124:             <menu>
125:             <item label="File">
126:                 <item label="New..." />
127:                 <item label="Open..." />
128:                 <item label="Browse..." />
129:                 <item />
130:                 <item label="Save" />
131:                 <item />
132:                 <item label="Exit" />
133:             </item>
134:             <item label="View">
135:                 <item label="Status Bar" checked="false"/>
136:                 <item />
137:                 <item label="Choices">
138:                     <item label="Choice A" group="choice" checked="true" />
139:                     <item label="Choice B" group="choice" />
140:                     <item label="Choice C" group="choice" />
141:                 </item>
142:             </item>
143:             <item label="Help">
144:                 <item label="About..." />
145:             </item>
146:             </menu>
147:
148:             profileWin.menuModel = new uiModel(menuXML);
149:             profileWin.addEventListener(uiMenuEvent.MENU_SELECT,on_profileWinMenuSelect,false,0,true);
150:             // ** end profile window **
151:
152:             // ** about window **
153:             aboutWin = new uiWindow(WINDOW.CAN_CLOSE|WINDOW.CAN_MINIMIZE|WINDOW.CAN_MOVE,profileWin);
154:             aboutWin.title = "Profile - About";
155:             aboutWin.content.padding = 10;
156:             aboutWin.content.addChild(new uiText("This is a child window.\n\nIt always appear on top of the parent window.\n\nIt is hidden if the parent window is minimized.\n\nClosing the parent window will also close this window."));
157:             // ** end about window **
158:
159:             // ** topLevelPane **
160:             var topLevelPane:uiPane = new uiPane();
161:             topLevelPane.padding    = 4;
162:             topLevelPane.setSize(stage.stageWidth,stage.stageHeight);
163:             addChild(topLevelPane);
164:
165:             var titleText:uiText    = new uiText("Aspire UI Components Example");
166:             titleText.alignX        = ALIGN.CENTER;
167:             titleText.background    = {color:0x819A98,cornerRadius:12}
168:             titleText.padding        = "6,12";
169:             titleText.textStyle        = "title";
170:             topLevelPane.addChild(titleText);
171:
172:             var versionText:uiText    = new uiText("Flash Player Version "+Capabilities.version);
173:             versionText.alignX        = ALIGN.CENTER;
174:             versionText.y            = 450;
175:             topLevelPane.addChild(versionText);
176:
177:             var footerText:uiText    = new uiText("© 2008-2009 GhostWire Studios")
178:             footerText.background    = {color:0x819A98};
179:             footerText.padding        = 3;
180:             footerText.alignX        = ALIGN.CENTER;
181:             footerText.fillX        = true;
182:             footerText.textStyle    = "footer";
183:             footerText.y            = 480;
184:             topLevelPane.addChild(footerText);
185:
186:             var ghostwireMark:uiImage    = new uiImage("GhostWireStudiosMark");
187:             ghostwireMark.alignX    = ALIGN.CENTER;
188:             ghostwireMark.alignY    = ALIGN.BOTTOM;
189:             topLevelPane.addChild(ghostwireMark);
190:
191:             var buttons:uiBox    = new uiBox();
192:             buttons.alignX        = ALIGN.CENTER;
193:             buttons.y            = 100;
194:             buttons.spacing        = 20;
195:
196:             var winButtonA:uiLabelButton = new uiLabelButton("Open Window A");
197:             var winButtonB:uiLabelButton = new uiLabelButton("Open Window B");
198:             var winButtonC:uiLabelButton = new uiLabelButton("Open Window C");
199:
200:             winButtonA.data = profileWin;
201:             winButtonB.data = imgWin;
202:             winButtonC.data = welcomeWin;
203:
204:             winButtonA.addEventListener(MouseEvent.CLICK,on_click,false,0,true);
205:             winButtonB.addEventListener(MouseEvent.CLICK,on_click,false,0,true);
206:             winButtonC.addEventListener(MouseEvent.CLICK,on_click,false,0,true);
207:
208:             buttons.addChild(winButtonA);
209:             buttons.addChild(winButtonB);
210:             buttons.addChild(winButtonC);
211:
212:             topLevelPane.addChild(buttons);
213:             // ** end topLevelPane **
214:         }
215:
216:         /**
217:         @private
218:         */
219:         private function on_profileWinMenuSelect(evt:uiMenuEvent):void
220:         {
221:             var oWin:uiWindow = evt.target as uiWindow;
222:             if (oWin)
223:             {
224:                 if (evt.item.label == "Status Bar")
225:                 {
226:                     oWin.status = (evt.item.checked) ? "" : null;
227:                 }
228:                 else if (evt.item.label == "Exit")
229:                 {
230:                     oWin.close();
231:                 }
232:                 else if (evt.item.label == "About...")
233:                 {
234:                     aboutWin.open();
235:                 }
236:             }
237:         }
238:
239:         /**
240:         @private
241:         */
242:         private function on_click(evt:MouseEvent):void
243:         {
244:             var oWin:uiWindow = evt.target.data as uiWindow;
245:             if (oWin)
246:             {
247:                 oWin.open();
248:             }
249:         }
250:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
251:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
252:     }
253: }

MyWinExample.as


See Also


API Reference

For more information on the members of the com.ghostwire.ui.containers.uiWindow class, please refer to the API Reference.


1) Adding uiWindow instances to the display list manually via addChild() and addChildAt() has no effect - use the open() method of the respective uiWindow instances instead.
2) You should not manually remove uiWindow instances from the display list via removeChild() or removeChildAt() - use the close() method of the respective uiWindow instances instead.
3) Attempting to call addChild() or addChildAt() directly on the uiWindow instance itself will throw an error
4) You can find the list of qualified values in the com.ghostwire.ui.enums.WINDOW class.
5) Note that if a uiWindow instance is resizable but not movable, the end-user can still eventually adjust the position by resizing the window.
6) The value of WINDOW.MODAL is equivalent to WINDOW.CAN_CLOSE|WINDOW.CAN_MOVE|WINDOW.IS_MODAL.