This course is out of date and does not reflect our standards or industry best practices.
Transcript from the "Global Keyboard Shortcuts" Lesson
[00:00:00]
>> Steve Kinney: So I can read, I can write from the clipboard, out of the box, pretty easily. But this application's kinda tedious that I have to go, all right, I've got something on the clipboard, I wanna save it, so I can paste some stuff in a second, and do some other stuff.
[00:00:15] It's kind of like, not a great user experience that I have to go into UI, click some stuff, click some stuff again. I'm a power user. I don't know about the rest of you. But like, I would like to just be able to hit different keystrokes on my keyboard, and have stuff happen.
[00:00:34] So that seems pretty legit. We can register global shortcuts, as I've alluded to previously. We can basically say, hey, when the application is ready, tell the OS that I want to respond to any, in this case we're gonna go with something that, the fun part when you do this with friends is trying to guess a keyboard shortcut that somebody doesn't already have defined by their operating system.
[00:01:01] So that's fun. So we're gonna go with the incredibly intuitive.
>> Steve Kinney: Command, or control, depending on the operating system, exclamation point. So command or control shift one. You're like yeah that means copy, right? Listen [LAUGH], had to go with something that I thought no one would have. Command option c and v was probably a little much so I went with this.
[00:01:29] So we'll register those and we'll unregister them when we go ahead and do this. So first I'm gonna do the one to create a new clipping, and you're going to do the one that is going to write to the clipboard. So I will add one that adds one to the UI, and saves it, and then you're going to go ahead and you're going to do the one that takes whatever the most recent one is and goes ahead and grabs it.
[00:01:53] Cool. All right.
>> Steve Kinney: So let's go ahead and try this out. We're going to go to our main process. And when the application is ready. They called it create window. Well let's put it in there for now. So what we'll do is we'll say, first well, we need to bring in the global shortcut module.
[00:02:28]
>> Steve Kinney: All right, and we'll do it in here. And we'll say,
>> Steve Kinney: CreateClippingShortcut is globalShortcut.register. And then, remember those accelerators from the menu items? We're gonna just use one of those, so we'll say CommandOrControl+! That involves a shift, technically, as well cuz it's an exclamation point. If you wanted to add an alt in there too you probably could.
[00:03:08] You can add an option in there, and alt as well. We'll go with that. And then we're gonna give it a function that should be called when that happens.
>> Steve Kinney: And we'll say in this case, we're gonna say mainWindow
>> Steve Kinney: We'll send a message over that says, create-new-clipping.
[00:03:32] Thank you, Predere, for that. And we do wanna know if it failed for some reason. If it was already registered, if there is any reason that it couldn't do that, we wanna at least log it to the console. In a full application we might go really nitty gritty, of like building a whole UI where they can define them, and showing them an error if they can't define it, so on and so forth.
[00:03:51] We're gonna keep it really simple right now, we'll just say console_error Registration Failed.
>> Steve Kinney: Create-clipping. So we'll know which one failed and that it failed at all. So now when someone hits command shift 1, it will send a message. Let's also do a console log in here.
>> Steve Kinney: Create a new clipping.
[00:04:29]
>> Steve Kinney: All right, sweet. And now we just need to listen for that in the renderer and do the right thing. We already have an add clipping method, so we just basically need to call that with, really with nothing cuz it's gonna read from the clipboard itself. So let's go ahead and get that in place.
[00:04:53]
>> Steve Kinney: So what we'll do is, when the component mounts, we will begin listening for it. This application is never gonna unmount that application component, so we don't necessarily need to be nice and clean up after ourselves. But we will.
>> Steve Kinney: We'll say componentDidMount, so as soon as application component, it's effectively the same as app.ready but for our component.
[00:05:13] We'll say bring in the ipcRenderer.
>> Steve Kinney: And we'll do ipc
>> Steve Kinney: Renderer on the create-new-clipping.
>> Steve Kinney: This.add
>> Steve Kinney: Clipping. All right. This should do the trick, famous last words. Let's go ahead and kill the application and start it back up.
>> Steve Kinney: Let me copy this checking your system thing over here.
[00:05:54] Let's try that out.
>> Steve Kinney: This could be hacking your system because I missed one.
>> Steve Kinney: Command shift 1, and you can see we're adding it in there. I can go ahead, let's put this window over here. Just to [LAUGH] make a point, I'm gonna go to some other application.
[00:06:18]
>> Steve Kinney: You can see that even from another application, we are adding it to the UI, it all works.
>> Steve Kinney: So let me just set you up for the exercise, and then we will be able to get the other part working. So we really just need to, I need to give you to a little bit a plumbing.
[00:06:38] Cuz sending a write new clipboard, you're missing one piece which is like, which one? So we'll grab whatever the top-most one is. And so that will be
>> Steve Kinney: We'll make one more method called handleWriteToClipboard. And all that's gonna do is it's gonna go ahead and get the first clipping
[00:07:10]
>> Steve Kinney: Off the front of the array.
>> Steve Kinney: And if there is a clipping on there, cuz there could be no clippings technically in there, if there is a clipping it's gonna say writeToClipboard with that clipping.
>> Steve Kinney: Cool, and I'm just at this point gonna bind it just in case.
[00:07:39]
>> Steve Kinney: Because it's the event loop, you might lose track of this, so I'm just binding them as we construct it.