Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

2.4 Add App Menus

When you first create an app with NW.js, it won’t have any of the standard menus and keyboard shortcuts you’re accustomed to on Mac. That means no “Edit” or “View” menu and no Command-Q keyboard shortcut to quit. Learn how to activate these standard menus and shortcuts in this lesson.

Related Links

2.4 Add App Menus

Hey. This is. Welcome to the final lesson in Web App to Mac App Using NWJS. In this lesson we're gonna add in some menus, some app menus. And this is gonna allow our app users to do things like copying and pasting via the Edit menu and using shortcut keys to quit the app via the main task manager drop down. Now in order to add these menus in we're going to need to use some java script and that java script is going to need to communicate with nwjs's inbuilt libraries. So what we're gonna do is go into our app.nw folder. And we're gonna need to create a new java script file and we'll do that in the assets folder and inside the java script folder there. So, we're gonna create a new job script file and we're gonna name it NWJS extras. That's just gonna help us identify that this file is just purely for the extra things we need in order to have this app work with NWJS. Now you wanna go ahead and open that file up for editing. All right, so here we are in our NWJS extras file and we're gonna work with the NWJS GUI system in order to add in the app menus that we need. And NWJS works on top of nojs so that means you can use nodes require system to pull in components that you need or modules that you need to work with. So the first thing we're gonna do is require the NWGI system. So we're gonna create a new variable. And then we're gonna require nw.gui. Next we're gonna create a new menu, so we'll setup another variable. Named MB for Menu Bar. And gonna generate a new GUI menu. And its type is going to be menubar. Now in order to add the type of menus that we want, just the basic edit menu and the basic drop-down is already a system built in to nwjs to almost instantly reactivate those menus. So we're gonna say mb createMacBuiltin, and then we're gonna give the name of our app. And these last two lines that we've added in, are going to just tap into the menu system that NWJS all ready has set up for us, this built in Mac menu. And that's gonna have that just ready to go for us. So then all we'll need to do, is tell the GUI system that's managing the window of our app to get the menu that we've just had set up, the built in menu. So we're gonna say GUI, window, get We're gonna have it get a menu, and the menu that we're gonna have it get is the menu bar that we've just set up with the lines of code above, and that's it, that's all we need to have the app menus added in that we wanna use. Now all that's left is to load this file into our app and we're gonna do that by the index HTML file. So we're gonna go back up out of our JSN assets folder and grab our index.HTML file for editing. Okay, so we'll make this nice and quick by just copy and pasting one of the lines that we all ready have, loading in JavaScript assets for our app. And then we'll change this one to nwjs_extras. And then we'll save that and now we're good to go. So we'll go back up again to the top level of our app. We'll run it once more. And now this time, here are our menus. So now we've provided the ability to cut, copy, paste and so on. And now we've also provided the ability to quit and hide with a shortcut. So that's it, your app is now completely built and it's ready for sharing with other people. So now you know all the essentials of how to convert a web app into a Mac App using NWJS. Please join me in the final video of this course, where we'll just quickly recap everything that we have learned and I'll give you a few tips on extra areas of app creation that you might like to look into next. I'll see you there.

Back to the top