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

    SuperWindow

    What is the SuperWindow component? In a nutshell it adds functionality for multiple windows on either Mac or Windows without having to specifically code for each operating system. It will manage NativeMenus, Dock and SystemTray icons and menus per window, ContextMenus, and Alerts.

    Properties

    Per Application Static variables:

  • MULTI_MENU_MODE:Boolean - optional, if set to true will create multiple menus in the upper toolbar on Mac OS X. If false, the 3rd menu location will be reused when each window is in focus. defaults to false

    • MULTI_MENU_MODE = false (Mac OS X):
    sw1.jpg

    MULTI_MENU_MODE = true (Mac OS X):
    sw2.jpg

    Windows Vista shows per window menus:
    sw3.jpg

  • SHOW_SYSDOCK_MENU:Boolean - optional, if set to true will re purpose the nm NativeMenu as the SystemTray/Dock icon menu. defaults to false

    • SHOW_SYSDOCK_MENU=true (Mac OS X):
    sw4.jpg

    SHOW_SYSDOCK_MENU=true (Windows):
    sw5.jpg

    Per Window variables:

  • nm:NativeMenu - optional, if set will be used as the NativeMenu and also ContextMenu, and SystemTray/Dock icon menu if additional arguments have been set.
  • menuName:String - optional, if set will be used as the menu label for NativeMenu’s on Mac OS X. If not set, the menuName will default to the window title.
  • showContextMenu:Boolean - optional, if set to true, the nm will be re purposed as the ContextMenu. defaults to false

    • showContextMenu = true (Mac OS X):
    sw6.jpg

    showContextMenu = true (Windows):
    sw7.jpg

  • addWindowControls:Boolean - optional, if true will add a menu of window controls to all of the menu types that are enabled (native, dock/sysTray, or context) defaults to false

    • addWindowControls = true (Mac OS X NativeMenu):
    sw8.jpg

    addWindowControls = true (Windows SystemTray Menu):
    sw9.jpg

  • sysDockIconBitmaps:Array - optional, if set will be used to create a custom SystemTray or Dock icon per window and will switch depending on which window is currently in focus.

    • sw10.jpg

  • alteredSysDockIconBitmaps:Array - optional, if set will be used as the altered SystemTray or Dock icon that is cycled with the sysDockIconBitmaps when the startAlert() method is called.
  • alertMethod:String - optional, determines which kind of alert will be displayed when the startAlert() function is called. The options are native, icon, or toast. defaults to native
    • native - will call the nativeWindow.notifyUser() methods when on Windows or the DockIcon.bounce() method on Mac

    alertMethod=”native” (Mac OS X):
    sw11.jpg

    alertMethod=”native” (Windows):
    sw12.jpg

    • toast - will create an AlertWindow and set an icon within the window to either information or critical and will either simply animate and retreat or animate and bounce depending on the specified alertType

    alertMethod=”toast” (Mac OS X - INFORMATIONAL):
    sw13.jpg

    alertMethod=”toast” (Windows - CRITICAL):
    sw14.jpg

    • icon - will alter the appearance of either the Dock or SystemTray icon by swapping either the default icon with filtered version or a custom supplied icon with a filtered version

    alertMethod=”icon” (Mac OS X):
    sw15.jpg

    alertMethod=”icon” (Windows):
    sw16.jpg

  • alertType:NotificationType - optional, determines what type of alert to show when creating an alertMethod of either native or toast. The options are NotificationType.CRITICAL or NotificationType.INFORMATIONAL. defaults to NotificationType.CRITICAL

    • Per Window methods:

  • startAlert():void - when called will animate the Dock or SystemTray icon by cycling either the sysDockIconBitmaps with the alteredSysDockIconBitmaps or the default icons. The animation will remain until the window is given focus or the stopAlert() method is called.
  • stopAlert():void - when called, stops the Dock or SystemTray icon animation.

    • Some Sample Code creating SuperWindows with ActionScript

    Window with a menu

    private function openWindow():void{
        // create main menu
        var nativeMenu:NativeMenu = new NativeMenu();
        // create a few menu items
        var menuItem1:NativeMenuItem = new NativeMenuItem("Menu Item 1");
        var menuItem2:NativeMenuItem = new NativeMenuItem("Menu Item 2");
        // add menu items
        nativeMenu.addItem(menuItem1);
        nativeMenu.addItem(menuItem2);     
        // create a submenu
        var subMenu:NativeMenu = new NativeMenu();
        // create a submenu item
        var menuItem3:NativeMenuItem = new NativeMenuItem("Menu Item 3");
        // add item to submenu
        subMenu.addItem(menuItem3);
        // set the submenu to menuItem1
        menuItem1.submenu = subMenu;
        // create new MenuWindow and pass in a NativeMenu
        var win = new SuperWindow();
        win.title = "Example 1";
        win.nm = nativeMenu;
        win.width=350;
        win.open();
    }

    Window with a menu, window controls, and context menu

    private function openWindow():void{
        // create main menu
        var nativeMenu:NativeMenu = new NativeMenu();
        // create a few menu items
        var menuItem1:NativeMenuItem = new NativeMenuItem("Menu Item 1");
        var menuItem2:NativeMenuItem = new NativeMenuItem("Menu Item 2");
        // add menu items
        nativeMenu.addItem(menuItem1);
        nativeMenu.addItem(menuItem2);     
        // create a submenu
        var subMenu:NativeMenu = new NativeMenu();
        // create a submenu item
        var menuItem3:NativeMenuItem = new NativeMenuItem("Menu Item 3");
        // add item to submenu
        subMenu.addItem(menuItem3);
        // set the submenu to menuItem1
        menuItem1.submenu = subMenu;
        // create new MenuWindow and pass in a NativeMenu
        var win = new SuperWindow();
        win.title = "Example 1";
        win.nm = nativeMenu;
        win.adWindowControls = true;
        win.showContextMenu = true;
        win.width=350;
        win.open();
    }

    Window with a custom icons

    [Embed(source="assets/e16.png")]
    private var Icon16:Class;   
    private var bitmap16:Bitmap = new Icon16();
                
    [Embed(source="assets/e32.png")]
    private var Icon32:Class;   
    private var bitmap32:Bitmap = new Icon32();
                
    [Embed(source="assets/e48.png")]
    private var Icon48:Class;   
    private var bitmap48:Bitmap = new Icon48();
               
    [Embed(source="assets/e128.png")]
    private var Icon128:Class; 
    private var bitmap128:Bitmap = new Icon128();

    private function openWindow():void{
        var win = new SuperWindow();
        win.sysDockIconBitmaps = [bitmap16.bitmapData,
                            bitmap32.bitmapData,
                            bitmap48.bitmapData,
                            bitmap128.bitmapData];
        win.width=350;
        win.open();
    }

    Creating SuperWindow’s with MXML

    Window with a menu and toast alerts

    <?xml version="1.0" encoding="utf-8"?>
    <SuperWindow xmlns="com.everythingflex.air.components.*"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        width="400" height="150" creationComplete="init()" title="Example 3"
        nm="{nativeMenu}" showContextMenu="true" layout="absolute">
       
        <mx:Script>
        <![CDATA[
        [Bindable]
        private var nativeMenu:NativeMenu = new NativeMenu();
           
        private function init():void{
            // create a few menu items
                    var menuItem1:NativeMenuItem = new NativeMenuItem("Menu Item 1");
                    var menuItem2:NativeMenuItem = new NativeMenuItem("Menu Item 2");
                    // add menu items
                    nativeMenu.addItem(menuItem1);
                    nativeMenu.addItem(menuItem2);     
                    // create a submenu
                    var subMenu:NativeMenu = new NativeMenu();
                    // create a submenu item
                    var menuItem3:NativeMenuItem = new NativeMenuItem("Menu Item 3");
                    // add item to submenu
                    subMenu.addItem(menuItem3);
                    // set the submenu to menuItem1
                    menuItem1.submenu = subMenu;
        }         
        ]]>
        </mx:Script>
        <mx:Button click="this.startAlert('Something important is happening')"
            x="130" y="65" label="Start &quot;toast&quot; Alert"/>
    </SuperWindow>

    Window with a menu, context menu, window controls, custom icons, altered icons, and icon alerts

    <?xml version="1.0" encoding="utf-8"?>
    <SuperWindow xmlns="com.everythingflex.air.components.*"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        width="400" height="150" creationComplete="init()" title="Icon Alert 3"
        nm="{nativeMenu}" showContextMenu="true" layout="absolute">
       
        <mx:Script>
        <![CDATA[
        [Bindable]
        private var nativeMenu:NativeMenu = new NativeMenu();
           
        [Embed(source="assets/e16.png")]
        private var Icon16:Class;   
        private var bitmap16:Bitmap = new Icon16();
                
        [Embed(source="assets/e32.png")]
        private var Icon32:Class;   
        private var bitmap32:Bitmap = new Icon32();
                
        [Embed(source="assets/e48.png")]
        private var Icon48:Class;   
        private var bitmap48:Bitmap = new Icon48();
               
        [Embed(source="assets/e128.png")]
        private var Icon128:Class; 
        private var bitmap128:Bitmap = new Icon128();
                
        [Embed(source="assets/e16_2.png")]
        private var Icon16_2:Class; 
        private var bitmap16_2:Bitmap = new Icon16_2();
                
        [Embed(source="assets/e32_2.png")]
        private var Icon32_2:Class; 
        private var bitmap32_2:Bitmap = new Icon32_2();
                
        [Embed(source="assets/e48_2.png")]
        private var Icon48_2:Class; 
        private var bitmap48_2:Bitmap = new Icon48_2();
               
        [Embed(source="assets/e128_2.png")]
        private var Icon128_2:Class;   
        private var bitmap128_2:Bitmap = new Icon128_2();      
           
        private function init():void{
            // create a few menu items
                    var menuItem1:NativeMenuItem = new NativeMenuItem("Menu Item 1");
                    var menuItem2:NativeMenuItem = new NativeMenuItem("Menu Item 2");
                    // add menu items
                    nativeMenu.addItem(menuItem1);
                    nativeMenu.addItem(menuItem2);     
                    // create a submenu
                    var subMenu:NativeMenu = new NativeMenu();
                    // create a submenu item
                    var menuItem3:NativeMenuItem = new NativeMenuItem("Menu Item 3");
                    // add item to submenu
                    subMenu.addItem(menuItem3);
                    // set the submenu to menuItem1
                    menuItem1.submenu = subMenu;
                    this.alertMethod = "icon";
                    this.alertType = NotificationType.CRITICAL;
                    this.showContextMenu = true;
            this.addWindowControls = true;
            this.sysDockIconBitmaps = [bitmap16.bitmapData,
                                bitmap32.bitmapData,
                                bitmap48.bitmapData,
                                bitmap128.bitmapData];
            this.alteredSysDockIconBitmaps = [bitmap16_2.bitmapData,
                                    bitmap32_2.bitmapData,
                                    bitmap48_2.bitmapData,
                                    bitmap128_2.bitmapData];
        }   
               
        ]]>
        </mx:Script>
        <mx:Button click="this.startAlert('Something important is happening')"
            x="130" y="65" label="Start &quot;icon&quot; Alert"/>
    </SuperWindow>