- [Instructor] There's two things happening
when you run an Electron application.
There is a process
that handles what's going on in the application
and there's a separate process
that handles the rendering of your application.
Now you can have access to those two processes
in a couple of different methods
that are available for you in Electron.
The first one is called ipcMain,
for Inter-Process Communication Main,
and this is the process that handles
generally what's going on in your application
and most of the time is what you're doing
when you're working with this index.js file.
The other one is called ipcRenderer and this is what handles
what's being drawn by your application.
In order to do certain things, you're going to have
to be able to communicate between these two processes.
You have to tell something
that is getting drawn by your application
to do something in the main part of your application.
So we're going to go ahead and do that now.
And what I'm going to do is just create a way
for you to close this aboutWindow
instead of automatically closing it on a timeout.
So first, I'm going to add an item here at the very top
that refers to what I want to do in the other process.
So I'm going to say that I need access to ipcMain
so that I can execute something
when something in my Renderer
wants to communicate with this main process.
And I'm going to scroll down here, almost towards the end,
and add another event after this aboutWindow.
I'll say ipcMain
and I'll trigger an event.
This event is going to be called closeInfoWindow.
And
then
I can run a function here
that closes out aboutWindow
or just hides it
because we don't really need to close it,
just hide it just in case we need to show it again
at some other point.
So this is an event that I'm actually making up myself.
This event doesn't really exist.
So that means that something
is going to trigger this event in the renderer
and then it'll be captured by this ipcMain method,
and once that event takes place,
then this will get executed here.
So I'm also going to make
a couple of minor adjustments here.
I don't really need
the timeout
that happens after three seconds
'cause I don't really want to hide the window
after three seconds any more.
So I'm going to show it,
but I'm never going to hide it unless somebody,
say, clicks on a button to hide the window.
Now you don't need to do this
in
this version 4.x of Electron,
but you may want to do this if you're trying to work
on a newer version of Electron,
and that is set some webPreferences here.
So this is another object,
and I briefly talked about it before.
This lets you set up a few preferences for your application
that normally runs in the Chromium or the Chrome browser.
So what I'll do here is type in nodeIntegration,
and turn that to true.
That is so that I can execute some Node.js type methods
in the main part of the application.
That is so I can some Node-type things
in the index.html
or the about.html files.
I'm also going to make the window a little bit bigger
because I'm going to add a button,
so I'll just make it 300 by 300.
Let's go ahead and save this.
And what I want to do is go into my about.html file here
and now I need to go ahead and do something
to trigger that event in the main process,
but I'm actually in right now what would be consider
the renderer process, right.
This is a thing that is being rendered by Electron
so in order to take care of this,
I'm going to create another script tag here
and I'll create a constant.
And now and here, I'll use ipcRenderer
and I'll use a require statement
to bring in electron into this HTML page.
This is also why I need to use that webPreferences option
because normally Node.js is not going to be available
to this regular HTML document.
All right, so now what I can do
is just issue some JavaScript
or jQuery depending on what I'm using
to go ahead and send an event
to ipcMain through this method called ipcRenderer.
So we'll say document,
and actually before I do this,
let's go ahead and add a button.
So right here at the bottom of this div,
I'm going to add a link.
We'll give it an id so we can target it
and
we'll give it a class.
This could actually be a button, so let's try btn-secondary.
These are some Bootstrap classes so that it looks nice.
And
then we'd say Close here.
So,
now I can target that
just using JavaScript document.querySelector,
and what I want to do is pick the item
with the id of closeBtn.
We're going to add an event listener here
and look for a click event,
and
we will use
the ipcRenderer method here
to send a method to the main part of the application,
and this event is going to be called closeInfoWindow.
Again, I'm just making this up,
but that's what we called it in the main process,
so this renderer process
is sending something to the main part of the application.
Just go ahead and save that.
And
now we will run this again.
Wait a second.
This appears,
and now I have my window with the info.
And I'll hit this Close button, and that window now hides.
So this is how you communicate in between processes
and this is also how you would handle things
like communicating between two windows.
You would just do something on that window
and then you would pass something along
from the window that you're working with
to the main process
using ipcRenderer,
and then trap something or an event in the main method,
deal with it, and then you can pass things along
onto the windows themselves.