Cannot access window close function in Desktop Application using node js

Question

I am developing a windows desktop application using node.js and backbone.js. I want to perform an action when the user closes the app by clicking on the close button on the title bar or right clicking on the application from windows taskbar.

My app.js looks like this,

 var app = module.exports = require('appjs');


app.serveFilesFrom(__dirname + '/content/assets/');

var menubar = app.createMenu([ {
label : '&File',
submenu : [ {
    label : 'E&xit',
    action : function() {
        window.close();
    }
},{
    label : 'New',
    action : function() {
        window.test();
    }
} ]
}, {
label : '&Window',
submenu : [ {
    label : 'Fullscreen',
    action : function(item) {
        window.frame.fullscreen();
        console.log(item.label + " called.");
    }
}, {
    label : 'Minimize',
    action : function() {
            console.log("df");
        window.frame.minimize();
    }
}, {
    label : 'Maximize',
    action : function() {
        console.log("nnnnnnlaaaaaaaaaaaaaaa");
        window.frame.maximize();
    }
}, {
    label : ''// separator
}, {
    label : 'Restore',
    action : function() {
        window.frame.restore();
    }
} ]
} ]);

menubar.on('select', function(item) {
console.log("menu item " + item.label + " clicked");
});

var trayMenu = app.createMenu([ {
label : 'Show',
action : function() {
    window.frame.show();
},
}, {
label : 'Minimize',
action : function() {
    window.frame.hide();
}
}, {
label : 'Exit',
action : function() {
    window.close();
}
} ]);

var statusIcon = app.createStatusIcon({
icon : './data/content/icons/32.png',
tooltip : 'AppJS Hello World',
menu : trayMenu
});



 var window = app.createWindow({
 width : 1024,// 640
height : 768,
showChrome: true,
icons : __dirname + '/content/icons'
});
window.on('create', function() {
console.log("Window Created");
window.frame.show();
window.frame.center();
window.frame.maximize();
window.frame.setMenuBar(menubar);
});

window.on('ready', function() {
console.log("Window Ready");    
window.require = require;
window.process = process;
window.module = module;
//window.frame.openDevTools();
window.fileAssoc = process.mainModule.filename;
//window.readMyFile();
function F12(e) {
    return e.keyIdentifier === 'F12'
}
function Command_Option_J(e) {
    return e.keyCode === 74 && e.metaKey && e.altKey
}


        });*/


window.addEventListener('keydown', function(e) {
console.log("hi");      
    if (F12(e) || Command_Option_J(e)) {            
        window.frame.openDevTools();
    }
   });
   }); 

Please find the attached screenshot. I am able to perform actions on custom added functionalities inside "File" & "Windows".

But i don't know how to capture the event when the default app close button in the title bar is clicked or closed by right clicking on the application from windows task bar. Please help.

Thanks in Advance

Consonantal

Is it this event you are looking for: msdn.microsoft.com/en-us/library/… – Egret

Yes, the first one is similar to what i am looking for. But i don't know how to get the window close event using JavaScript(Node JS). – Consonantal

Answer 1

UPDATED (added a few more code lines to show proper way for event to fire)

You should do like this:

var gui = require("nw.gui");

var win_main = gui.Window.get();
win_main.on('close', function () {
    this.hide(); // Pretend to be closed already
    alert("Closing...");

    // here you detect if data is saved, and if not, ask user if they want to save

    this.close(true);   // if this line executes the app closes, if not,
                        // app stays opened
});

I tried the above and it works perfect. It catches both "Close button" clicks and key shortcuts like "Ctrl+F4" in Windows.

For further reading (moved from comments):

http://tutorialzine.com/2015/01/your-first-node-webkit-app/

https://nodesource.com/blog/node-desktop-applications

https://gist.github.com/LeCoupa/80eca2716a2b13c37cce

https://github.com/nwjs/nw.js/

https://github.com/nwjs/nw.js/wiki/window

Egret

I have tried the same in my above app.js But the close event is not entering this method. window.on('close', function() { console.log("Window close"); }); Is this the window object same as that i have used to create window?? or some thing like this. var window = gui.Window.get(); – Consonantal

Can't answer that as I don't have the necessary tools to test it. It do say though, that you need node-webkit, do you? – Egret

After reading this it might be when the title bar close button is clicked, that event doesn't get fired (check the App section). I had a similar issue years ago and solved that by hiding the main window, create a new sub window, which acts as "the main" and when that one got closed, the hidden main captured the sub window's close event. Hope this help or another way is to open a frameless window and create that functionality within the DOM itself. – Egret

Thank you very much for the help. I will try out what you said and will update by tommorow :) ... – Consonantal

I am sorry that my project currently is an appjs project. Is it necessary to use NW.js to implement this? – Consonantal

Yes, you need NW.js. What is it you need to do when the whole app closes? I mean a desktop app can close for many reasons so the best approach is to code accordingly, and what was need at close might be able to do at next start. – Egret

Shall we continue in chat. – Consonantal

Please let me know if our chat gave any positive result – Egret

I updated my answer ... I downloaded and tried the above and it should be very easy to add to existing app and make it all work as you first intended. – Egret

Answer 2

Finally I have done this by hiding the default title bar and adding a custom one.

For that, I set "showChrome" attribute in appJs to false during the window creation, which is by default true.

The code change is

  var window = app.createWindow({
  width : 1024,// 640
  height : 768,
  **showChrome: false**,
  icons : __dirname + '/content/icons'
   });

But when the 'showChrome' attribute is set to false task bar also will be hidden until we minimise or restore the app.

Consonantal

One thing that happened to me was that one can close a window using "Ctrl+F4" on Windows OS, which still give the user no chance to save their data ... does the same happens for you or you can catch that event? – Egret

No. It only handles when the app is closed from title bar. – Consonantal

Ah, so if a user close the app in any other way than through your custom "close/exit" buttons you aren't able to catch that event and user get no warning to save content? – Egret

Yeahh.. Exactly.. Didn't get any way to handle that. That's why i ended up with a partial fix. – Consonantal

Ok, did you try the "nw.js" approach or it gave you too much work right now? – Egret

Updating to node webkit now will give me a lot of un-necessary works. – Consonantal

As you told me you use "nw.exe" already, all it takes is to add the nw.js file and the few lines in my answer, and then, when that event fires, you just pass that to your existing function/class and return true/false to the "this.close(true/false)" method to either close the app or abort and stay running. – Egret