Check out a free preview of the full Electron Fundamentals, v2 course:
The "Update Title Bar Solution" 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 live codes the solution to the previous exercise, then goes further and enables buttons based on the editing state, and introduces some MAC-specific integrations

Get Unlimited Access Now

Transcript from the "Update Title Bar Solution" Lesson

[00:00:00]
>> Steve Kinney: All right, so our mission was to update the title bar based on whether or not the application was in an edited state. And then we're gonna take that one step further by enabling or disabling the buttons based on the editing state. And then we'll kind of do a bonus run for some MAC OS specific integration.

[00:00:24] We have it in this update user interface, we just need to basically do something similar to what we have above. So we could say, if isEdited, we can further modify that title, and we'll say, again, I left it up to you on exactly how you wanted to do that.

[00:00:43] If you want to put an asterisk, if you want to put edited, colon, whatever, I'm gonna go with edited. If yours is slightly different, that is very okay. We'll go ahead and refresh this, and I can see that as soon as I start typing, I have that edited.

[00:00:59] If I delete it all the way back to its original state, and those strings match again, it's no longer edited. Let's go ahead and open a file.
>> Steve Kinney: Edited, not edited, it's oddly gratifying to change the window title. I understand that I'm doing that multiple times but it makes me feel good and sometimes this is about me, all right.

[00:01:23] So let's do a few other things, we wanted to enable those buttons so we have the saveMarkdownButton. And we have to do a little bit of reverse logic here, cuz the property is disabled.
>> Steve Kinney: And we'll do the same for the,
>> Steve Kinney: SaveHtmlButton. Go ahead and refresh that.

[00:01:52]
>> Steve Kinney: So save file and save html. Actually save html should always be enabled. We actually want a revert button.
>> Steve Kinney: All right, so now our user interface responds based on whether or not we edited the state. We can see the file name in there as well.
>> Steve Kinney: Cool, all right, next view, little tricks that we're gonna do are Mac OS specific.

[00:02:26] Now even if you're on a Windows computer or Linux computer, there is a nonzero chance that the person running the application could be on Mac OS but you won't be able to see anything on your system currently. That's okay, cuz later when we get to application menus, the roles will be reversed.

[00:02:42] And the Mac users will have to do extra work to have a very simple, easy functionality. So it's all even. It's all a game of give or take here. But right now, we're gonna do one or two things just to make it feel a little bit more like a native application.

[00:02:55] If I open up a true Mac app, this is TextMate. This is a text editor, and I save a file,
>> Steve Kinney: Yeah, show untitled. Save it to the desktop. You can see a few things going on here. One is I have this little file icon here, and if I actually hit Cmd+Click, this will work in any native Mac app.

[00:03:19] You can kind see the entire file tree and open that up in finder. And you can also see that if it's unsaved, I got a little dot here in the Close button. This signify I have unsaved changes. That is built in to native MacOS. It would be cool if our application had the same thing.

[00:03:42] So we can do that pretty easily, cuz Electron has access to those APIs in the same way that it had access to open up a file dialogue on Windows or Mac OS or Linux or anything along those lines. So what we can do is that little file icon here, it's called the represented file.

[00:04:01] And so what we can basically say is,
>> Steve Kinney: currentWindow.setRepresentedFilename(filePath), and we can do currentWindow.
>> Steve Kinney: SetDocumentEdited to isEdited, right? And these will just further modify that title bar to make it basically fit in a little bit more with the Mac OS operating system. So now we'll go ahead.

[00:04:37] Let's open a file.
>> Steve Kinney: You can see, I've got the little icon up here. And I can click it and I can see where it was in the file system just like if it was an application built on Cocoa. And if I change it, you can see that I've got the little dark dot here as well.

[00:04:54] So basically it fits in, right. Now we could listen for a Window close event and alert them about unsafe changes. It's very much the same that we would do it in the client as well. That'll work, right. You can have an event listener for that. We're not gonna do that right now, cuz we're going to do some more Electron specific stuff but I'll leave that as an exercise to the reader