- [Instructor] On some projects
you're going to want to work with more than one window,
so let's take a look at how that would work.
So I'm going to take this index.html file
and I'm going to copy it, so I'm going to right click here
and duplicate this file.
And I'll call this
about
.html here,
and what I'll do is take off this second paragraph
and I'll give this a different title.
And then the
index.html,
I'm just going to take off
that first paragraph.
'Cause it's really a description of what BinaryVille is,
so we'll take that out of here.
Let's go ahead and save both of them
and now we have essentially two HTML pages.
They still have all the Bootstrap code in them,
so I'm going to actually make
another change on this about page,
and just to make sure that everything
is vertically centered here,
I'm going to add some classes.
So let's go ahead and do the flex,
so these are Bootstrap classes,
I'm going to use flexbox to control
how the content is displayed within this window right here.
I'm going to say viewport height is going to be 100%,
so it's going to take up the full height of the container,
and then I'll do
align
items
center.
So that's just going to center the content on this window.
And let's go ahead and save that again.
So now it's time to incorporate that into our index.js file.
It works pretty much like what we've done here already.
So we are going to take the appWindow
or we're going to create a new browser window for
this new window that we'll be loading.
So I'll do that right here because
I am going to need to open the windows
and I'm opening the other window right here.
So right after this on closed we'll create
a new window and we're going to call this aboutWindow.
So I'll create new browser window here
and this is going to get a brand new configuration object.
And this is going to be pretty short
so the width is going to be 300 pixels.
Height is going to be 275 pixels.
And what I can actually do it make this
a transparent and frameless window.
So frameless window is a window
with essentially no top part so
you'll see it in a minute.
This part of the window will be gone
so this sort of area that lets you drag the window
because all this is going to do
is sort of display a little bit of info
about the project and eventually it's
going to disappear as well.
So we'll say frame, false,
and we'll also make this a transparent window.
And then we're going to also hide it.
Actually for right now lets just go ahead and show it.
Not even sure I need this transparent
thing right here so lets take that out.
It's sort of may be a little bit redundant
with the frame and being false.
So you would probably want to use
transparent if you wanted to have maybe
put the content of the stuff maybe in a card.
You can actually have the white part of the rest of
the window be transparent and then have a circular etch
to the window.
So there's a lot that you can do with
combing all those things but lets
just leave it at frame, false for right now.
And then what I'll do here is defined the window
so in addition to showing the app window
I'm going to show the about window.show also.
And I'll need to go ahead and load the html here as well.
So aboutWindow, loadFile,
and I'll show about.html here.
And we'll also need to clean up the window
when it is closed.
It's just always a good idea.
So we'll do that afterwards.
We'll say
aboutWindow
on closed
and then set aboutWindow
to null just like we did
with the other one.
So that's already a lot of stuff,
lets go ahead and save this and we will
pull up are terminal.
Run the npm start command and take a look at what we get.
So you can see now that we have a slightly
different kind of window.
This is a frameless window.
You can still move it around
but it looks sort of nice as an about
information window here
and you can see
that the other window appears right below it.
So that's cool we can still close the windows
but I want to do some more interesting things
with these two different windows.
We'll pick it up in the next video.