NW.js Basics: Overview of the Window and Manifest

[00:00] Let's talk a little bit about the window and the manifest. These two things are the base items that you're going to be starting with when you create your app. Window is a class that comes with node webkit. If you go to their GitHub Repo, you can find at their documentation. In the documentation, there is a class called window. There's an API around that. We're going to explore that a little bit. There are some configuration options that we can play with to make the app look a bit more native.

[00:35] You get a starter window when you create your app. We're going to be focusing on that one. You can actually use these on any window that you create later on in the application. In the beginning, you get this root window and you can configure it in the manifest.

[00:51] In the manifest, the manifest is actually your package JSON. You can add these properties to the window JSON item here. This is what we're going to do. We're going to go back to our initial package JSON in our application and we're going to add some stuff. I'm going to actually copy and paste this because there's a lot of stuff here, but I'm going to go through each item.

[01:15] We have show, which will automatically show the window. We want that to be true. Show in task bar. That's going to show on the task bar at the bottom as an icon. That's cool. We want that. Transparent, false. Transparent will allow you to remove the background from your HTML. You can see right through the application. That's actually very useful. We'll keep it at false right now, but later on, we might change that. Resizable, can you resize the window? We're going to keep that true.

[01:44] Toolbar. We're going to come back to this in little bit. This is where the URL is entered and all the buttons are. We're going to toggle that on and off to show that. Frame is where your minimize, and close, and full screen buttons are. On always on top is, if you want the window to be always on top or not. That's actually a pretty useful function too. Invisible on all workspaces is important as well if you have multiple monitors and I do so I keep that true.

[02:11] You can set the initial width, height, and a min and max widths. Let's go ahead and save this and then take a look at the app now. The app is starting in this size, 300 x 500. That's pretty cool. Now we can maybe create a type of app that requires this portrait type ratio.

[02:35] We're going to go ahead and try and resize it. You'll notice that it's limited to that min and max width and height. That's neat too. Just go ahead close that. What I want to do is actually turn off toolbar. When we turn that off, I want to show you just how the app starts to look a bit more native. We're going to run this again, pull it over, and now you can see that the tool bar is gone and it looks a lot more like a native app.

[03:02] From this point, we can actually start to dial in some other things like the menu bar at the top. That's what we'll be doing next.