JavaFX Java GUI Tutorial - 4 - Switching Scenes Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

r-ready hostas welcome back and in this
video I'm going to show you how to set
up multiple scenes and how you can
switch between them so you would want to
do this say that you're making like a
chat program like Skype you'd obviously
want one scene where the user could type
and see all the messages talk to their
friends and you might want to make
another scene to on alike allow the user
to edit their profile information or
something so again a scene is just a
different view the content inside the
window and if you're thinking about it
in like a website terminology it would
just be like a new page so that's what
we're going to be doing and also what
I'm probably going to do from here are
now is I'm going to take this primary
stage which we already know refers to
the entire window and I'm just going to
name rename it to window and that's just
because I think it's a little bit easier
to follow along and also just think you
know in your brain this is actually the
window might as well just call of that
and of course since this tutorial is
switching between scenes you probably
need two scenes so I'm going to name one
scene 1 and another scene 2 pretty
stinking creative now to rename your
primary stages put window equals primary
stage so now we can refer to the entire
window as window like I said it's easier
to I know it's just easier on my brain
now this program is going to be really
simple I'm gonna have one scene in all
its going to have inside it is a button
and the button is going to be okay um
welcome to scene 1 click the button to
go to scene 2 so that's what that's
going to do and in the next scene I'm
going to have another button and it
takes you back to scene 1 so really
basic demo but it's going to teach you
pretty much the foundation of how to
switch between scenes it's going to be
pretty cool
actually let me go ahead and add a label
I don't even know if I talked to you
guys about what a label is a label is
just a little chunk of text so static
text the users not going to interact
with it at all with just a plain string
essentially so I'll say welcome to
the first scene all right now for the
button I'll name the first one button
one and of course we'll set this equal
to new button and we're just set the
text right through the constructor and
scroll down here so this button will say
go to scene two since whenever they see
this obviously this will be the very
first scene and clicking it will take
them to scene two but of course we need
to add that functionality and thanks to
the last Itoro we know that we can just
use lambda expressions put a window
which is your main window the parent of
everything what we can call on here is
set scene now essentially what this does
is it changes the view or scene and
we're just going to eventually make
scene 2 so it'll go from scene one to
scene two so this is pretty much arm the
one thing if you only remember one thing
from this tutorial remember this little
line of code right there now I'm also
going to show you guys that you can use
multiple layouts or different layouts so
for the first scene I'll just say um
I'll lay out everything in a vertical
column and I know that um I didn't talk
to you guys about like the details of
different layouts or everything like
that but just for right now we can use
VBox and we can just name it like a
layout one and what this is going to do
of course is it's going to stack all the
objects on top of each other and I'm
going to be making um a layout tutorial
soon show you guys the difference
between VBox hbox stack panes going to
be explaining all that stuff but for
right now this is a pretty easy one and
also whenever you make it you can pass
in a value so again what VBox does is
it's a layout that stacks all the
objects on top of each other in the
column and it's going to space mount 20
pixels so they're not like buttered up
right up against each other so now that
we have a layout what we can do is we
can actually add the items to it so get
children at all now whenever you just
have one item you can just use ad but
whenever you have multiple you need to
throw a doll in there and we want to add
label one which is that text it's like
welcome to the scene and also button one
boom roasted now the last thing we need
to do is now that we have our layout we
can just pretty much set it for seen one
so scene one
alright and pretty much a new view so
new scene now you need to give me what
layout you're using how you want things
arranged
well how about layout one and also how
big am i well we'll just say you're 200
by 200 pixels so that is it for the
first scene created two objects a label
on the button added the action for the
button so it actually does something
when you click it said this is how we
want things arranged and pretty much set
everything up so now we can just speed
right through this button - it's going
to be real lazy and copy everything so
of course this is the button that's
going to be on the second scene so
button - I'll say what text am I going
to have on here I'll say this scene
sucks go back to scene 1
alright so now also you need to put
different action so I'm button 2
whenever you click it the window changes
to scene 1 alright looking good now
after here we need to make a real quick
a layout and just to switch things up a
little bit I'm actually going to use
stack pane which is a really easy one
I'm just going to name it layout - and
stack pane we don't need any parameters
at all and just like before a layout to
get children we essentially just want to
add this button to this layout so button
- and that it'll stick button - on our
layout of course and now we just set up
our scene so
for the second scene of course it's a
new scene a new view what layout are you
using
how about layout - and how big you want
me to be we'll have a little bit bigger
600 by 300 so simple enough now we have
one little chunk of code to do and that
is how does your window know to display
our first scene first because right now
we have two scenes set up with different
items inside but now it's asking alright
what one do you want me to display so by
default as soon as your program starts
we're going to say set scene and we'll
just say scene one it doesn't really
matter but we'll just pick scene 1 and
also you always should have a title even
if it's just something stupid like I was
right title here so you guys know where
you would put it and also window dot
show it's actually the splits there we
go that's what I wanted all right now
everything is looking good did I see a I
thought I saw error but totally not
let's run this bad boy fingers crossed
and check it out the worst allow ever
but whatever so this is our very first
scene welcome to the first scene click
button go to scene - of course this is
the dumbest program ever your window
gets bigger this scene sucks go back to
scene one yeah duh dot down I love
switch and scenes
I love suasion scenes alright so there
you go and yeah there you have it
there's the basics pretty much explained
everything no need to say it again so
thing guys for watching and uh well see
you later