Hybrid View

  1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    11
    Vote Rating
    0
    stashx is on a distinguished road

      0  

    Exclamation Air SystemTray bug fixed

    Air SystemTray bug fixed


    Hello everyone... I had some time to post in the forums, but i think this time you will enjoy my post...

    First of all, i think i found a bug on Ext.air library (0.20 and 0.30). The bug includes the Ext.air.SystemTray and especially the showIcon function. It works, for a strange reason, only when it is called by the Ext.air.NativeWindow (defining the minimizeToTray property). In my case i didn't want the system tray to appear only when the window was minimized but all the time. this is why i was using the following code but with out any success (named:traytest2.html)
    PHP Code:
    <html>
    <
    head>
        <
    title>Testing SystemTray</title>

        <
    link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
        <
    link rel="stylesheet" type="text/css" href="lib/ext/air/resources/ext-air.css" />

        <
    script type="text/javascript" src="lib/air/AIRAliases.js"></script>
        
        <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="lib/ext/ext-all.js"></script>
        <script type="text/javascript" src="lib/ext/air/ext-air.js"></script>

        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';
            Ext.onReady(function(){
                Ext.QuickTips.init();
            
                var win = new Ext.air.NativeWindow({
                    id: 'mainWindow',
                    instance: window.nativeWindow
                });
                
                win.show();
                win.instance.activate();
            
                var tray = Ext.air.SystemTray; 
                tray.setIcon('icons/AIRApp_16.png', 'Testing SystemTray', true); //<-- set the 3rd argument true to automatically display the tray icon when the icon is loaded
                tray.setMenu([{
                    text: 'Open Application',
                    handler: function(){
                        win.activate();
                    }
                }, '-', {
                    text: 'Exit',
                    handler: function(){
                        air.NativeApplication.nativeApplication.exit();
                    }
                }]);
                tray.on('click',function(){ //<-- this one will show your app with a single left click on the tray icon
                    win.activate();
                });
                win.on('displayStateChanging',function(e){//<--this one will hide the window from the taskbar when you minimize it
                    if(e.afterDisplayState=='minimized'){
                        e.preventDefault();
                        win.hide();
                    }
                },this);

                win.on('closing', function(){
                    Ext.air.NativeWindowManager.closeAll();
                });
            });
        </script>
        
    </head>
    <body>
    <span></span>
    </body>
    </html> 
    After 2 days of debugging (i really miss firebug writing AIR apps), i found out that the problem was that on the setIcon function (set on the Ext.air.SystemTray), the private variable icon was replaced by the string argument icon passed to the function.

    To solve my problem and finally get it work properly i have changed the argument icon to iconfile in 2 lines. first on the argument list and at the line above the last if (loader.load(new air.URLRequest(icon)) So here is the function written correct:
    PHP Code:
            setIcon : function(iconfiletooltipinitWithIcon){
                if(!
    icon){ // not supported OS
                                
    return;
                }
                var 
    loader = new air.Loader();
                
    loader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, function(e){
                    
    bitmaps = new runtime.Array(e.target.content.bitmapData);
                    if (
    initWithIcon) {
                        
    icon.bitmaps bitmaps;
                    }
                });
                            
                            
    loader.load(new air.URLRequest(iconfile));
                if(
    tooltip && air.NativeApplication.supportsSystemTrayIcon) {
                    
    app.icon.tooltip tooltip;
                }
            } 
    My function was tested to work on windows system using 2 different ways to display trayicon. The one on the top and the following (using the Ext.air.NativeWindow's property, minimizeToTray) (named:traytest.html):
    PHP Code:
    <html>
    <
    head>
        <
    title>Testing SystemTray</title>

        <
    link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
        <
    link rel="stylesheet" type="text/css" href="lib/ext/air/resources/ext-air.css" />

        <
    script type="text/javascript" src="lib/air/AIRAliases.js"></script>
        
        <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="lib/ext/ext-all.js"></script>
        <script type="text/javascript" src="lib/ext/air/ext-air.js"></script>

        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';
            Ext.onReady(function(){
                Ext.QuickTips.init();
            
                var win = new Ext.air.NativeWindow({
                    id: 'mainWindow',
                    instance: window.nativeWindow,
                    minimizeToTray: true,
                    trayIcon: 'icons/AIRApp_16.png',
                    trayTip: 'Testing SystemTray',
                    trayMenu : [{
                        text: 'Open Application',
                        handler: function(){
                            win.activate();
                        }
                    }, '-', {
                        text: 'Exit',
                        handler: function(){
                            air.NativeApplication.nativeApplication.exit();
                        }
                    }]
                });
                
                win.show();
                win.instance.activate();
                
                win.on('closing', function(){
                    Ext.air.NativeWindowManager.closeAll();
                });
            });
        </script>
        
    </head>
    <body>
    <span></span>
    </body>
    </html> 
    I have uploaded here my full source code and the compiled ones for the tests i made so you can check out what i mean.
    I have both ways included. If you want to check my testfiles with the original ext-air.js, you have to replace mine at 'lib/ext/air/' where i have my corrected one (v0.30).

    Thank you for your time. I'm waiting for your experience on using systemtray, suggestions on how to work with systemtray and comments about my edits and way of displaying systemtray. I'd love to here from any EXT.air developer too. Is it really a bug or am i too tired to understand it and get it working....

    StashX

    BTW i was googling it and i couldn't find anything about systemtray....

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Posts
    11
    Vote Rating
    0
    stashx is on a distinguished road

      0  

    Default


    i guess you could also save the following into a separate file and include it after your ext-air.js...
    PHP Code:
    /*
     * Ext JS Library 0.30
     * Copyright(c) 2006-2009, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */

    /**
     * @class Ext.air.SystemTray
     * @singleton
     *
     * 
     *
     */
    Ext.air.SystemTray = function(){
        var 
    app air.NativeApplication.nativeApplication;
        var 
    iconisWindows falsebitmaps;
        
        
    // windows
        
    if(air.NativeApplication.supportsSystemTrayIcon) {
                    
    icon app.icon;
                    
    isWindows true;
            }
        
        
    // mac
            
    if(air.NativeApplication.supportsDockIcon) {
                
    icon app.icon;
            }
        
        return {
            
    /**
                     * Sets the Icon and tooltip for the currently running application in the
                     * SystemTray or Dock depending on the operating system.
                     * @param {String} icon Icon to load with a URLRequest
                     * @param {String} tooltip Tooltip to use when mousing over the icon
                     * @param {Boolean} initWithIcon Boolean to initialize with icon immediately
                     */
            
    setIcon : function(iconfiletooltipinitWithIcon){
                if(!
    icon){ // not supported OS
                                
    return;
                }
                var 
    loader = new air.Loader();
                
    loader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, function(e){
                    
    bitmaps = new runtime.Array(e.target.content.bitmapData);
                    if (
    initWithIcon) {
                        
    icon.bitmaps bitmaps;
                    }
                });
                            
                            
    loader.load(new air.URLRequest(iconfile));
                if(
    tooltip && air.NativeApplication.supportsSystemTrayIcon) {
                    
    app.icon.tooltip tooltip;
                }
            },
            
                    
    /**
                     * Bounce the OS X dock icon. Accepts a priority to notify the user
                     * whether the event which has just occurred is informational (single bounce)
                     * or critcal (continual bounce).
                     * @param priority {air.NotificationType} The priorities are air.NotificationType.INFORMATIONAL and air.NotificationType.CRITICAL.
                     */
            
    bounce : function(priority){
                
    icon.bounce(priority);
            },
            
            
    on : function(eventNamefnscope){
                
    icon.addEventListener(eventName, function(){
                    
    fn.apply(scope || thisarguments);
                });
            },
            
                    
    /**
                     * Hide the custom icon
                     */
            
    hideIcon : function(){
                if(!
    icon){ // not supported OS
                    
    return;
                }
                
    icon.bitmaps = [];
            },
            
                    
    /**
                     * Show the custom icon
                     */
            
    showIcon : function(){
                if(!
    icon){ // not supported OS
                    
    return;
                }
                
    icon.bitmaps bitmaps;
            },
            
                    
    /**
                     * Sets a menu for the icon
                     * @param {Array} actions Configurations for Ext.air.MenuItem's
                     */
            
    setMenu: function(actions_parentMenu){
                if(!
    icon){ // not supported OS
                    
    return;
                }
                var 
    menu = new air.NativeMenu();
                
                for (var 
    0len actions.lengthleni++) {
                    var 
    actions[i];
                    if(
    == '-'){
                        
    menu.addItem(new air.NativeMenuItem(""true));
                    }else{
                        var 
    item menu.addItem(Ext.air.MenuItem(a));
                        if(
    a.menu || (a.initialConfig && a.initialConfig.menu)){
                            
    item.submenu Ext.air.SystemTray.setMenu(a.menu || a.initialConfig.menumenu);
                        }
                    }
                    
                    if(!
    _parentMenu){
                        
    icon.menu menu;
                    }
                }
                
                return 
    menu;
            }
        };    
    }(); 
    StashX