JavaFX Java GUI Tutorial - 8 - Embedding Layouts Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

already houses welcome back in in this
video I'm going to show you how to spice
up your layouts so they look a little
bit better than what we just learned
before because we already know we have a
couple default layouts I mean for
example we have V box which stacks
everything vertically and this is really
good for like armed well for example
this right here where you have a menu
where everything is stacked vertically
and we also have H box which might be
good for putting things left and right I
know maybe some of this crap up here we
can use H box but another layout that I
use a bunch is this this is called a
border pane and you see this in pretty
much every single piece of software
where you have a top section left center
right usually you only have two of these
maybe three columns and a bottom which I
don't know might be this little thing
down here so you guys are like alright
well you know what would it be cool if I
could actually put V box right here H
box right here and then have my main
content right here but how am I supposed
to do that because I can only pick one
of these layouts either border pane H
box or Reeboks
right well not exactly so let's go ahead
and learn how to use multiple layouts by
embedding them so essentially what I'm
going to do in this tutorial is I'm
going to show you guys how to use this
border pane as your main layout template
and then we're going to stick a V box
layout right here in H box right here
now by the way before I go any further
whenever I show you guys how to like
make a real quick menu at the top I'm
going to show you how to do that using H
box like this but don't actually use H
box whenever you're making a real
application
JavaFX comes with a bunch of different
libraries just for making really cool
files or drop-down menus so again this
is just a demonstration using H box to
demonstrate embedded layout panes but
don't actually make you know file menus
this way so let's go ahead and do this
so make it H box layout and we'll call
it top menu even though again like I
said you should never use H box for this
and we just set this equal to Nu hbox
now let's just make a bunch of buttons
and put in there so like a button I'll
just name this one button a and then
we'll just do some sweet copying and
pasting so new button and what word
begins with a apple's actually let's
make this right here file edit and view
so file and let me just do some of my
magic copying the pasted in alright so
file edit and view and I'll name it bun
a B and C all right so now we got a H
box so what we can do from here is this
we can take our entire layout which is
called top menu and we need to get all
the children at all and we'll just add
them one by one so button a button B and
button C so now we added all of the
children to the layout and we'll just do
the same exact thing for V box so I'm
going to copy this change this H box to
V box movie box instead of top menu I'll
name it like a left menu so again you
might use this for actually why does it
give me if you just select this in hit
alt enter it'll import everything that
you need alright so instead of button a
a B and C will say D E and F and let me
just pick three words I'll just actually
say D E and F and now add all of those
children to the left menu so d E and F
alright so we now have two layouts one
is horizontal where our three buttons
left and right and we have another one
called left menu and these are just
three buttons stacked on top of each
other nothing new here but now what we
want to do is we actually want to make a
new boarder pane which is a completely
different layout
name in bored urbane and set this equal
to new border pain so from here we're
going to call two methods the first
method is this set top and inside here
we can actually pass in an entire layout
so for the top we're going to throw our
top menu in there and again the top of a
border pane is this section right here
so we're taking this entire layout which
is three buttons side by side we're
sticking it in the top and now we can
take our vertical left menu and just
stick it in there for the left so again
really simple stuff your border bein set
left and we'll just set this equal to
left menu simple enough and now we can
get rid of this because we don't want it
we actually want to stick in there is
just a border pane so pretty simple
let's go ahead and run this and check it
out so again this entire layout is a
border pane in the top section as you
guys can see is the beginnings of a
little menu even though you know like I
said just want to repeat this do not use
a H box for top menus ever and check it
out we now have the beginnings of a left
little section using embedded layouts
pretty sweet and again there's a lot of
different layouts that are given to us
by default and a lot of these such is I
don't know like stack pane great pain
that's fun one I'm gonna go over an
entirely separate tutorial because
there's a bunch of different little
nuances I gotta cover but for now
hopefully you guys understand that if
you want to start making more complex
layouts then one technique that you can
do is is embedded or embedding layouts
within another so yeah that's it for now
thing guys for watching my little quick
tutorial I'll see you guys next time