Electron Fundamentals, v2 Electron Fundamentals, v2

Loading HTML into the Main Window

Check out a free preview of the full Electron Fundamentals, v2 course:
The "Loading HTML into the Main Window" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve sets up a window to pop up when the application is ready, and fixes the flash of white with an event-emitter method.

Get Unlimited Access Now

Transcript from the "Loading HTML into the Main Window" Lesson

[00:00:00]
>> Steve Kinney: It'd be really great to actually get at least some kind of window in front of us. So let's go ahead and we need to pull in a second module off of Electron, and that is the BrowserWindow module. Let's go ahead and we'll say BrowserWindow, and BrowserWindow from JavaScript convention, you can see it's got a capital B and the capital B means that we're gonna use it as a constructor, right?

[00:00:23] So we're gonna create a BrowserWindow using the new keyword in JavaScript. And we could say something along the lines of like new BrowserWindow-
>> Steve Kinney: And we could even say like yeah, you might be tempted to call it window, which is totally safe because you are on the main process node side.

[00:00:42] But let's not get into bad habits here. We will call it main window because window means stuff in JavaScript. And you could call it there and if we start this application up-
>> Steve Kinney: You can see that now I get this really exciting user interface. There are some problems with the code right now, which might not even bite us in the small time that we're working together on this application right now, but could happen which is JavaScript.

[00:01:10] So this is an event listener, so here we have a function. JavaScript is function scoped, which means after this function fires, right? It's over and we leave it, which means everything that we created in this function is eligible for garbage collection, including our BrowserWindow, right? So, that means our BrowserWindow could get garbage collected.

[00:01:32] One way to solve that is to simply define the main window variable in an outer scope, and then we'll actually assign it here, right? So this will keep it from getting garbage collecting cuz that top level scope will be alive until the application quits, right? You could have left it in there, unclear if it would've bitten you today but let's not add entropy into the system, especially if we're going to be shipping this application to users.

[00:02:02] All right, so we've got that BrowserWindow and that's neat, but it was pretty empty and gray and sad. We do have this index.html, which has got some buttons, it's got our whole user interface. It's got the style sheet, it's really pretty. It'd be better if we showed that to the user instead.

[00:02:27] So, once we have the BrowserW indow, we basically just need to tell it to load an html file. So, we can take our main window, and we'll go ahead and say load file. And, what I'm going to to is I'm gonna use a template strain which are these back ticks.

[00:02:49]
>> Steve Kinney: So, you see this __dirname, this is a node convention, this is a variable that basically resolves to the current place that you are in your file system. So, in my case, this would be /users/SteveKinney/projects/firecell-FEM-V2/, right? And we'll say from there, and this will be app as well because it's the main JS, we'll say Index.html.

[00:03:17] So this will go ahead and load that file. All right, let's take that for a spin.
>> Steve Kinney: Ho! We've got a user interface. All right, ready to be eagle-eyed? I want you to stare at the screen. Don't look at your screen, just look at my screen. Cool, split the application.

[00:03:37] You notice that quitting the application also brings me back to the command line as well? So I can hit Ctrl + C and quit the application, either one will take care of it. All right, here's what you're gonna watch for. Windows is gonna open, there's gonna be a brief flash of white before we see the user interface, ready?

[00:03:55]
>> Steve Kinney: It was quick, right? A little like wash out of the projector screen, but that's stinky, right? We don't really love that. It would be great if we would load the content and then we would show the window, right? And it's normal, right? We made the window, and then we loaded an HTML file to it.

[00:04:13] There's no surprises that we had that brief flash of white, it's just better if we didn't. So one kind of nice thing that we could go ahead and do is, we can say hey, we're gonna create a new BrowserWindow, but don't show it to the user yet. Load the HTML file into it, once it's good and ready, then we'll show them the window.

[00:04:32] This is a quick re-factor here, and we can say basically show is false. Now, this will never show the window, which is problematic, and EventEmitter in node has this on, which will be theoretically every time the app is ready. Now, the app is only ready once, but EventEmitter also has another method to call it once, which will basically fire the event listener one time, and then not again after that.

[00:05:03] So we could say mainWindow.once ready to show is the event on the main window, and that is once the html file has been loaded and parsed, we'll say ready to show. And then we'll say mainWindow.show. So we'll hide it, we'll load the html, we'll get rid of it, we'll avoid that very brief flash of white.

[00:05:32] And then once the main window is totally loaded and ready to rock, then we will show the entire window to the user. All right, ready to be equalized? I mean this time there's nothing to see, so. [LAUGH] You can also just trust me, it's up to you.
>> Steve Kinney: All right, so the window opens just like that.