This course is out of date and does not reflect our standards or industry best practices.
Transcript from the "Display the File in Title Bar" Lesson
[00:00:02]
>> Steve Kinney: We can show the file in here, and this feels good. But, there's some stuff missing in terms of we can polish this a little bit better. We can get to a little bit of a deeper sense of operating system integration. Which is, if you go ahead and look at Visual Studio Code behind me, I can see what the currently open file is,
[00:00:24]
>> Steve Kinney: Right? Here it's like Fire Sale, it would be awesome if we could do the same thing where we could see what the current file is. Also like Save File, I'm keeping disabled right now because I don't know the file's changed at all. I don't know if we've unsaved changes or anything on those lines, right?
[00:00:46] So being able to know if we have saved or unsaved changes, being able to show the current file in the menu bar, these are all useful things that we'd come to expect. As like, hey, Electron's really great, because we need to build these desktop applications. But you also have to do a certain amount of due diligence to like build the UI that the user expects, right?
[00:01:04] And what they're used to, cuz now you're playing on the game of like at least fitting in with the other applications. So, what we'd love to do is, we'd love to see if there's no file, if it's a brand new Windows, sure, show the name of the application, that's fine, right?
[00:01:19] But, if they've opened a file, I would love to show them a filename here. If it has unsafe changes, we should show that in some way. I'm curious what Visual Studio Code does, let's see.
>> Steve Kinney: So it doesn't show anything in the title bar, but we'll actually see the very subtle thing.
[00:01:35] It does show in the tab bar, in this case, right, so it does need to keep track of some of those things. All right, so what we'd love to do is show in the title bar, and the thing about Electron applications is we can change anything we want, right, we can edit this.
[00:01:51] This is from the title attribute in the HTML file. Right, but we can modify this programmatically with JavaScript. So let's go look at how we do that. You'll notice that when I was sending the contents over, I sent the filename even though we weren't using it. Mostly cuz I have a lesson plan and I know what we're doing next.
[00:02:12] So we're sending both over, it would be cool if we could keep track of all those things. So what I'm gonna do is in the render process, I'm gonna create two global variables.
>> Steve Kinney: I'm gonna have a file path called file, and that'll be an empty string.
>> Steve Kinney: And I'll have an original content.
[00:02:33] Actually, I'm gonna make file null. OriginalContent and empty string, right, cuz if they open up a brand new window, there is no file associated with it. But if I did the value of that empty text area, in the dom, I would get an empty string. All right, so these are effectively the two defaults, if you open up a brand new one.
[00:02:57] If we open a file, we're going to set these two variables, the file name into the original content. And what I'm gonna be able to do with the original content is at any given point, look at the current contents of that text area, look at the original content, do a string comparison.
[00:03:13] If they're different, guess who has unsaved changes? Right, the current user. Right, and if they're the same, guess who doesn't have unsaved changes? The user of the application. So, we'll do real quick is we'll go in here, and as soon as we get a file open, what we'll say is that the file,
[00:03:34]
>> Steve Kinney: I'm actually gonna rename this variable because I'm scared of insolent yelling at me. We'll call it filePath. We call it filePath = file, right, cuz scoping. And we'll say originalContent = this content that just came in. If you wanted to name this one filePath instead, you totally could, but they just can't be named the same thing, otherwise one variable overshadows the other one and nothing will work.
[00:04:01] And it will be one of those things where I sit here squinting at my screen for 25 minutes trying to find the bug. Let's not do that. All right so, we'll set those two global variables. Anytime a new file comes in, right? We'll be able to use that later.
[00:04:18]
>> Steve Kinney: There's a whole bunch of things we might want to do to the user interface whenever we open a file. We know that we wanna change the file, we'll see a few others in a second. So, let's give ourselves a function for this. Let's give ourselves a function called,
[00:04:33]
>> Steve Kinney: const update,
>> Steve Kinney: UserInterface.
>> Steve Kinney: Cool, and we'll call this originally whenever we open a new file. And we'll eventually call this a few other places cuz we're gonna need to change the state of the user interface in a few ways. Like for instance, if they have unsaved changes, maybe we enable that save button.
[00:05:00] Seems legit, right? May be we will enable the revert button, any of those things. So there is a few things we need to do based on something happening. But first and foremost, let's go ahead and figure out how to change that title. So the default title was Fire Sale.
[00:05:15] So we could say something like let title =,
>> Steve Kinney: Fire Sale, which will be the default case.
>> Steve Kinney: If filePath is a thing, right now, it's null. So null is falsy, which means this conditional will not happen. But if filePath is not null, we'll say the title is,
[00:05:46]
>> Steve Kinney: filePath plus the current title, which is Fire Sale.
>> Steve Kinney: Cool, and then, to set the title of the window, we need to get a reference to the window, and then we need to call a method to do it. So remote has a few other helpful tricks up its sleeve.
[00:06:14] We could say, in this case, const currentWindow.
>> Steve Kinney: = remote.currentWindow.
>> Steve Kinney: Right, and so that will go ahead and give us the contents of that. I believe that it's a function, let's call it doing from memory here. Luckily we can find out, remote =,
>> Steve Kinney: Yeah, or how to getCurrentWindow.
[00:06:56]
>> Steve Kinney: So I'll just fix that, getCurrentWindow, which will give me a reference to the window that this render a process is. Cuz main window has method called set title, but we need the reference to the main window. So hey, remote, tell me what this current window is, get me a reference to it.
[00:07:14] And so here we're gonna actually say,
>> Steve Kinney: currentWindow.setTitle.
>> Steve Kinney: I will set it to the title, right? So we start with the title being Fire Sale every time this function is called. If filePath is not null, we'll actually prepend the filePath and then- Fire Sale, and we'll set the window title.
[00:07:38] Now, you might notice in my VS Code setting that this is slightly dimmed out, it's cuz I'm not using it. So we'll say, whenever the user opens a file, do all that other stuff, and then update the user interface.
>> Steve Kinney: I was take it for a spin.
>> Steve Kinney: We'll open a file.
[00:08:06]
>> Steve Kinney: And you can see I get this long, nasty file name. Not nearly as nice as what I had in VS Code. So let's go ahead and fix that real quick.
>> Steve Kinney: Node has a useful library called path.
>> Steve Kinney: And I can use anything in the node standard library right next to all my dom manipulation, so that's cool.
[00:08:32] And,
>> Steve Kinney: We'll say path.basename(filepath), and that will just get the file name part of that long slash users, slash Steve Kinney, slash desktop yadda yadda yadda. It'll just get grocerylist.md.
>> Steve Kinney: So npm start.
>> Steve Kinney: Open a File.
>> Steve Kinney: Now it's just Grocery List.md- Fire Sale.