Check out a free preview of the full Electron Fundamentals, v2 course:
The "Keyboard Shortcuts" 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 demonstrates how to create keyboard shortcuts for opening and saving files.

Get Unlimited Access Now

Transcript from the "Keyboard Shortcuts" Lesson

[00:00:00]
>> Steve Kinney: Let's say, what do we normally, depending on your operating system, open file is usually either Command O or Control O. Right now it's nothing. Now we got some for free before, but what happens if we want to actually define a shortcut for a menu item? Turns out we can do that as well,

[00:00:23]
>> Steve Kinney: We can give it an accelerator. In this case, we can do, it's just basically a string that says what you want the hotkey to be. Now, well, on MacOS, I want Command O on our Windows and Linus, I want Control O. So what I'll do is I'll make a turnery.

[00:00:47] Let me just do Command or Control O, right, and I'll take care of that for you. The comma here.
>> Steve Kinney: Now you can see it has the accelerator attached to it. So I can actually start hitting Command O, Open File, Open File, Open File, Open File, Open File, Open File, right?

[00:01:16] Be better if I did something with it. So let's go ahead and just change change this to,
>> Steve Kinney: The same thing that we did when we actually hit the Open File button.
>> Steve Kinney: Okay, Command O. I get the native file dialog, and go ahead, I can open that file, right?

[00:01:45]
>> Steve Kinney: In the way that we structure a application, opening a file is pretty much totally owned by the main process, right? We go ahead. We open a file. It sends it off. Saving a file. It's a little trickier because where do we store the file name and the content?

[00:02:05]
>> Speaker 2: The renderer.
>> Steve Kinney: The renderer, right? So we are going to need to figure out how to tell the renderer process. Hey, you, we need you to go ahead and send us the information we need to go ahead and save the file, right. So, this is going to be a little bit trickier, not necessarily because saving is trickier than opening, just generally in the way that we structure application.

[00:02:32] You're like well, dummy why don't we go ahead and just store it in the main process? That would work except if we had multiple windows open. It's a little tricky. It's better to talk to one window because there is a method on browser window called get focused window where you can get the most recently opened window and stuff along those lines which is the front most window.

[00:02:50] You can communicate by like letting the communication back and forth and this is kind of like why we set up that pattern a little bit earlier. Cuz we knew we'd have to like figure out how to talk. It's we're going to tell the main window hey, the user wants to save the file.

[00:03:05] Can you send me back the file name, and the content so I can go ahead and do that for the user? That's only gonna involve a tiny refactoring on the renderer process, which is if we go to this saveMarkdown button. This is an anonymous function that's part of the event listener.

[00:03:24] Which means I can't really call it separately. Well, that's easily solved.
>> Steve Kinney: A little bit of this action, cut.
>> Steve Kinney: Paste.
>> Steve Kinney: I will say saveMarkdown whenever they click that button. And then also, we can set up a listener, which is like ipcRenderer dot,
>> Steve Kinney: If you get something on the save-markdown channel, what I would really like you to do is also call that saveMarkdown function.

[00:04:09] So now we'll take the same function, if I hit the button in the UI, we will save the markdown. And if we receive a message from any other process saying, hey, we need you to save the markdown, it will go ahead and communicate back to the main process to do that.

[00:04:27] So now we can go ahead in here. We'll make,
>> Steve Kinney: You'll want to call it Save File.
>> Steve Kinney: I will send a message over that channel to tell the main window hey. Go ahead and save the markdown. So we'll send a message to the renderer process saying, hey I need you to save the markdown.

[00:05:02] Renderer process gets it, like cool, I know about the file, I know about the content. I will send that back to you so you can go ahead save it, right? So we're basically again, iterating on that communication between the two processes. Let's go ahead and verify that this works.

[00:05:23]
>> Steve Kinney: Awesome.
>> Steve Kinney: And we can save it with Command S. I can change the content in here.
>> Steve Kinney: Can save it, you can see it went back to a non-edited state. We go ahead and we find our brand new one. I've been very good with file names. There it is.

[00:05:43] Content is changed. Right so now we have keyboard shortcuts that are available within our application for opening and saving files.