NW.js Basics: Overview of DevTools, Menu and MenuItems

[00:00] Now, I'm going to show you how to set up a menu bar. One of the things we did in the previous episode is, we got rid of this toolbar here. In the toolbar, there's this nifty little button that we really, really want to keep. That's a button to toggle the Chrome dev tools.

[00:17] We don't want to keep this bar here, but we do want to make sure we can toggle that, what we want to do is put that into a menu bar item at the top. That's what I'm going to show you how to do right now. Let's go ahead and get rid of the toolbar again, so we make it look more like a native app.

[00:38] What we're going to do is we're going to in a quick JavaScript directory, and inside that directory, we are going to add a JavaScript file called "bundle." This will actually be generated by WebPack later, but we'll just call it bundle for now. We'll use this to bootstrap our application.

[00:56] We also need to include that in our head here, in our index.html, so that we can seize the script. We'll just do source and put that in there, JavaScript and bundle. We'll close that off, and now the bundle will be loaded, and we're good to go. Node Webkit comes with a class called "NWGUI."

[01:22] If you go on their GitHub and look at the menu class, you can see how this is set up, and I'll show you how to set this up right now. The first thing that we need to do is actually bring in this GUI, and node Webkit actually understands what require means without any sort of packaging system.

[01:40] Now that we have this GUI class, we can actually do pretty much everything node Webkit-y in the app.

[01:46] One of the things we need to start with is give a reference to a window, and this is the root window that the application first was with. We are going to use a method called "window.get," and that will bring in the main window.

[02:05] And then from here, we can add our menu bar. Adding a menu can be a little harrowing at times, and it can be a bit confusing, especially, if you're doing it on Mac. But I'll show you a few gouges and how to get around them. One of the first things we're going to do is we're going to create a menu bar instance.

[02:25] What we're going to do is create a variable called "MenuVar," and create a new GUI.menu. You can see that over here, but with this one, we are going to actually give it a type. It's going to be a special type that sits in the bar at the top. We're going to call it "menu bar." That's important, first gotcha.

[02:46] The second thing is that Mac doesn't immediately give you the native drop-downs at the top. Just edit and window. In order to enable those, we can create, MenuVar has a method called "CreateMacBuiltIn" and you can give it a name. We'll call it "NWJS demo," and this will create those two items.

[03:13] It will also fix a problem where you cannot copy and paste in your application, which is a bummer on Mac, for that matter. But this fixes it, and it's another gotcha. And then, what we need to do is add that to the window menu. The reference we have to the window, we add MenuVar to the menu, and we shall see it working in the app.

[03:40] We'll bring up the app, and now, you can see we have edit and window at the top. These are related to our current node Webkit app. Since we don't have access to those Chrome dev tools anymore, what we're going to want to do is create a menu item that allows us to toggle those.

[03:56] We don't have to worry about the Chrome in the application itself. What we're going to do is we're going to create a develop menu item, and it's another GUI menu item. Then, what we're going to do is create another menu item beneath that menu, which will act as the clickable toggle item.

[04:15] We'll call it develop toggle item equals NewGUI.menuitem. This is also available in their documentation under menu item. Menu item 6 a few different properties to start. One, we can give it a label, and we want to label it ToggleDevTools. That's what it'll list in the menu.

[04:40] Then, we're going to give it a click handler, and the click handler will handle when it's clicked and take the action. If win, and here's another method on window, .IsDevToolsOpen, we're going to want to close them. Win.CloseDevTools, and otherwise, we're going to want to show those dev tools.

[05:08] Now, that will toggle it, and we need to now add the menu item to the menu. We use a method called Append, it's like an array. We're going to add the toggle item to it, and now, we're good to go. Now, we need to append this to the main window.

[05:32] This is where it gets a little confusing, because you have menus and menu items, and there's a lot of nesting going on. But it's not too bad once you actually get it set up and you actually realize what it's doing. We'll do Win.Menu.Append, and we're going to do NewGUI.MenuItem.

[05:54] This menu item is now going to have a submenu of the develop menu that we just created. We're going to call this "develop," which will be the main header that you see at the top, like edit and window. And then, we're going to give it a submenu of develop menu, OK?

[06:11] Now, when you're going to run this, it should be all hunky dory. Let's run it, bring it over, and you can see that we now have a develop drop down next to our edit and window, and you can toggle the dev tools like so and make them go away.

[06:29] It's pretty easy, but it can be a bit of a pain if you're first starting this. You might even get a few run-time errors from the operating system if it's finicky about how you add menu items natively.

[06:43] But don't worry, you'll get it to work with a little bit of patience.