Edit Menu Exercise

[00:00:00]
>> So you might be thinking to yourself, I can't even quit this application from the menu right now. Cmd+Q doesn't do anything, right? Cmd+W, nothing does anything, right? I didn't put an accelerator on here, so nothing works. So you're like, well, I guess I have to build this menu from scratch?

[00:00:20]
Ish, it's kind of nice if you don't want the ability to copy, which if you're one of those monsters, y'all ever use a website where you go try to copy something and they disable your ability to copy something? So then you have to go into the Chrome Dev Tools and put it back, right?

[00:00:34]
Yeah, where there's a will, there's a way. I guess if you wanted to get rid of certain things, that's doable. So you would think that your job is now to re-put everything in there. The nice part is that Electron's got your back in this case. It has a list of things that we'll call menu roles, which can better be described as things that you probably wanted to do, right?

[00:01:06]
So I will do one and then I will give you a minute to try out another one, which is for that application menu, right? If I go to it now, it's a very cool menu. But if I said role is appMenu, which is like, hey, I have this menu, It's roughly an app menu now I get At least the ability to quit and the like MacOS accoutrements that you would find in here, right?

[00:01:38]
Don't have the ability to copy and paste, right? So take about two or three minutes just to do a little quick exploration I will push up this branch as well. Can you get us back in and you edit menu please. Right on, so we can kinda acquiesce a little bit.

[00:01:56]
If we've shifted up this label appName with the appMenu, one would hope that, theoretically, the label, we can call it Edit, and the nice part is you can call it whatever you want. We can give it the role of editMenu, but I also will show you real quick.

[00:02:18]
With TypeScript, we have a bunch of, you can pull in the full fileMenu that you had to begin with. You pull in a whole editMenu, the app menu that we saw before, a help menu. There are also very specific like, I just want paste, or just paste and match style, or just quit, or something along those lines.

[00:02:38]
So you can do an entire menu, cuz honestly, some of these, like remove from recent documents, how will you really gonna do that? But a lot of these, you can see that there's a whole bunch. If you want to have undo, so on and so forth. And so you can kind of like, yes, you're on the hook for creating your own application menu if we replace the default one.

[00:03:00]
But all the component pieces are still lying around for you, with all of the native OS functionality built in. So for us if we just did editMenu, we will theoretically get an Edit menu in place there. And now if we go over to my awesome application, the ability, I can't pull up the Dev Tools after I close them anymore because I've gotten rid of that menu.

[00:03:26]
And that's what we were talking about earlier, but the default Edit menu is back. My File menu, it'd be great if I could do Cmd+O here or Ctrl+O, depending on the OS, and I'll show you how to do that. And then we'll probably leave this one where it is for a little bit, cuz I think we've made our point in this case.

[00:03:45]
So the one final tweak is adding a keyboard shortcut or, in Electron terms, an accelerator, to a menu item. And that is super easy to do, we simply type accelerator. And you can kinda see, you kind of give a string that means what it should be. And you can do Cmd+O, you can do Ctrl+O, but as anyone who has used both a Windows PC or Linux PC as well as a Mac knows that it is Ctrl on Windows and Linux.

[00:04:13]
It is Cmd on macOS, and you could write a whole bunch of processes if that platform is Darwin, and think about all that yourself. Or you can simply write this and Electron, under the hood, will figure out what it was supposed to be for that OS, and it will make total sense.

[00:04:27]
So we can save that. And you can do this for anything in your application. All those IPC calls that we send back and forth, right? You can simply call them, I mean, that's why we kinda broke them up. You can go ahead, you can get any of those and call any of them from menu, give them a different accelerator.

[00:04:44]
You can do any keystroke you want to do, any of the functionality that we had in there, and it will all just kind of work. But just to kind of verify that in terms of our application, so now it's got Cmd+O, as you can see, and I can hit that.

[00:05:01]
And I get the window, and now I can open. So we're getting dangerously close, in a relatively short amount of time, considering the amount of talking I did, right? Dangerously close to what is starting to feel and behave like a full desktop application, right? And I won't lie to you, some of this is like the 80-20 principle here, right?

[00:05:21]
Like all the little tweaks are, where a part of this is super important. But like I said, all things said and done, relatively fast for the amount that we have, for as close as we've gotten to a full desktop application.