- [Instructor] The menu class in Electron allows you
to create menus for your application.
And it's actually quite simple.
If you scroll down all the way to this section right here,
you can see a template that has the default menu
that you get whenever you run Electron.
And what you need to do is create something
that looks like this but has your own menus.
Notice that for certain things like cut, copy, and paste,
all you have to do is include a role attribute,
and then refer to that menu element.
You don't really need to do anything more,
and that makes it pretty simple
to use things that are already created for you
in the operating system.
You may also notice that there's a difference
between the menus that you see
during development and when you actually build
an application, so you do need to make sure
that you add these; don't assume that what you see
in development is going to be what's available
to your application at the end.
We'll need to be in the background.js file
and in here we'll add another item here
called menu, and then I'm going to scroll down
to after this section where I create a window.
And I'm going to create a constant here called
menuTemplate, and this is going to be an array
with a number of elements, so whenever we want to name
the element, we put in a label item,
and then we give it a name.
And then, if we want something
to be beneath that, we add a submenu item here
and this becomes another array of elements
and then if you want the specific item to appear
in that menu, then you could just simply add
the role element, and then put in the name of
the menu item, that would normally appear there.
Again, use that website for the reference of what
Let's add something different here; let's say
that I want to go ahead and add a link to my website,
so I'm going to add a label here
for this next item and call it visit my site
and I need to put a comma here.
And then in addition to that label,
I'm going to institute an event here,
so I'm going to say when somebody clicks on this item,
I want to do something and what I'll do is
load up Electron, so I'll use a require statement here
to load up Electron.
And then I'm going to use this shell method
to open an external application,
so this is actually a way that you
can open external applications and send them commands.
Here we'll just go ahead and load a website.
And the operating system should take care of bringing up
a website when you click on that menu item.
Great.
In addition to the closed menu and this new menu
that we created, and let me just
go ahead and copy this one.
I'm going to put in a quit item.
If you don't put a quit item it
is going to put one in there for you,
except that it's going to be labeled
something like quit and then the name of the application.
If you just wanted to say quit, you can also
go ahead and include an existing role but then just
override what it's called; you can say label, quit,
and then give it a role of quit, so now
you've created a label that's different than
what the default is going to be,
and you've given it a role that will
take care of doing the same thing that the normal item
would have done.
All right, let's do an edit menu now.
And, again, we'll put a submenu
and this is really just going to be a number
of default roles you, you can just copy this
from the previous website.
So I'm just going to copy a few of these roles here.
I want to make sure that I can do certain things
like undo, redo,
cut, copy,
paste, and I'll put in there select all.
So I don't really need these other ones.
And finally we'll add a sample view menu,
and then in this view menu, we'll add
a few roles as well, and they're just some of the defaults
that you can use when working
with an application, so reset, zoom,
zoom in, et cetera.
Now, if you want a separator, you can also put in
it type of separator, and your menu will have
a nice little separator.
And then we can put in here; toggle full screen.
Get rid of that comma here, save this,
and hopefully I didn't type anything wrong,
but we do need to do one more thing here.
And that is to activate these menus.
So we'll create a constant called my app menu,
it's going to be equal to the menu class
build from template, using our menu template
that we just created.
And then we'll say menu set application menu,
my app menu.
All right, so that should do it.
So if we typed everything correctly.
All right, let's check out our menu.
Looks like I didn't quite put these
in the right place, noticed that because
it thinks of it as submenus, it actually
put everything under the Electron menu,
so it's definitely something I need to fix.
Probably a little bit of spacing that I need
to manage here.
It's fairly easy to get that object a little bit confused.
So, yeah, looks like I have a submenu here,
and I put all of these items inside that submenu.
So, let's go ahead and get rid of this.
And also that,
take 'em out of that array.
And we'll put a comma here, and I think
if I just paste that, it should work,
getting this object just right is a little bit tough.
Let's check that out now.
Let's clear this out.
All right, so you can see now that we have
Electron, edit and view, and we have a separator
here but this didn't quite get a proper label
so let's make sure we fix that.
And looks like I just misspelled toggle.
It's not tog-gel, it's toggle, so that's definitely
something I need to fix there.
Let's clear this out.
All right, that's looking pretty good now.
And I can even choose this visit my website,
it should open a browser, with the website
that I specified in that menu.
So menus are pretty cool, they're a little bit difficult
as you can see to get just right
because it's an array of objects and submenus,
but it's actually quite easy
once you've realized that most of the commands
are just going to be roles, you can substitute labels,
and you can even issue commands from within your menus.