so now we're going to look at the border pane layout now the border pane
layout is one of the most commonly used layouts for top-level windows so when
you're using a border pane you can place controls into one of five positions top
bottom left right and center so here is a diagram of the layout taken from the
border pane documentation so you can see what I mean just bring over the screen their you can see
there now so the layout works well for typical client application now one
where you will often have a menu or a toolbar near the top
some type tree or list to the left and the central area that displays data or
allows the user to enter data a status at the bottom and sometimes an
information panel or something else to the right hand now border pane sizing
and resizing behaviour is usually what we expect as well which
is pretty good so children in the top and bottom positions will have
there preferred heights and extend the width of the border pane which we'll see
later that isn't always the case now children in the left and right positions
will have their preferred widths and extend the full height between the top
and bottom positions and the set position will get whatever spaces left over
and will fill that entire space now we don't have to place something to every
position when a position is empty then no spaces allocated to it to for example
if the right position is empty then whatever is placed in the center
position will extend to the right edge of the border pane sort of filling it
that entire right hadn section up so let's play around with border pane and I'm going to keep our
h box layout which we got on the screen their now but it's no longer gonna be the top level layout instead
what we gonna do is will place it inside a border pane by surrounding it by
opening and closing border pane tags and we're also going to remove the border for
now and will move the fx controller and XML ns attributes from the
h box to the border pane and will also move the alignment property from the
h box to the border pane and will also remove the padding and inset elements so lets go ahead and do that
i'm gonna start with putting the code here and clean this up a little bit we some things here we've had
because I've actually changed
layouts etc so starting on line 6 I'm gonna make that a border pane so....
.....
....
....because it no
longer has got this attributes because we put them into the border pane so delete some of those and we will actually
delete the style as well because we are not gonna be using the border as I mentioned we'll just leave the spacing
in though as it was before and we get rid of the padding we are using that anymore and we leave our buttons in so we've now got a border pane and we've now
made h box layout a child of the border pane layout and we put the major
attributes that were on h box onto border pane now so if we run it now you'll find
we actually get an error and you can see there that at about halfway down property
alignment does not exist or is read only so the thing to remember is when using
border pane we specify where control should go by placing them into one of
the border panes 5 positions
talked about earlier in this video so it wouldn't make sense to tell border
pane that we want its children at the bottom of the pane and align to the right as we
did for the h box in other words border pane doesn't support the alignment
property but as we see later we can align the border pane children
within their positions in the border pane itself so lets actually remove the
alignment that property and run the application again so remove this on line 8.....
...so if we run it now we should find it actually works this time and you see we now got something really weird going on with the
buttons in our h box that their positioned at the top left of the window as you can see and
it doesn't matter whether we try to resize it bigger or smaller nothing seems to
change they're not actually using their preferred widths that we set that's
really the point with all of this and obviously their
not actually moving at all and that seems to be a problems so the reason we get
this behaviour is because we haven't set the h boxes position within the
border pane and consequently the layout doesn't know what to do with it so let's
put our h box into the bottom position and will do so by placing the h box
within a bottom element and when we run the application we should hopefully see that
it actually works better so we need to come through here within the border pane before
the h box we need to specify bottom.......and we need to put out a h box within that
paste that so now we've told the border pane layout where we want our button or our h box
layout to be which contains our buttons within the border pane layout so
if we run it again now we've now actually got our buttons appearing on the screen so the buttons are their and
are now sized correctly because we can see they are all the same size and we can read the
text obviously but they are left aligned so one thing to mention here is that
with nesting layouts which we've done here we obviously we got our
our border pane and we got our nested layout
our h box is nested within the border pane this is the concept of nesting
layouts by adding h box where we have nested the layout within another layout
when using border pane nested layouts is the only way to add a row of buttons
into the bottom position we couldn't have added each button individually to the
bottom position and that's because each position can only have one child
so nesting layouts is a very common technique for positioning control where you
actually want them in and that really to help you get the behaviour you expect
when a window is resized so we'll see more of this technique in later videos
so what we are gonna do is we are gonna add the alignment property back to h box not
to the border pane because we established that the alignment properly doesn't
exist for the border pane so we add it back to the h box but this time we can set it to
the top right center or right or bottom right and we'll see the same result no
matter which one we use because the alignment property specifies how layouts children
should be aligned within it so let me run this and just explain and we can see what's going to do so going to create
try top left so....
.....
so now we run again and you can see it's now at the bottom right you might be wondering hang on I specified
top right so why is that happening well the thing to remember here is no matter
what we use the results is going to be the same and that's because of course we
specified for the border pane that h box is up here is being inserted into the
bottom part of the layouts so there is now it can be put up there when
we're very told the border pane layout what's coming into the bottom part of it
so the point I'm getting at here is that no matter which result we use top
right center-right or bottom right the alignment on line ten we gonna get it
showing in the right position and that's because the alignment property specifies
how our layout's children should be aligned within it and because the h boxes is in the
border panes bottom position which I was getting at its tall enough to fit buttons but no
taller so therefore aligning child as children vertically within won't
actually make a difference so lets quickly try all three alignments just to confirm that
so we set it to top right first so close it down lets also just to
confirm it try center right and see what happens
center-right run that....notice the same results still at the bottom right and the other one we can try bottom right and if we run that again
exactly the same result so clearly it doesn't make a difference that is
what is established because of the way we adding this ultimately to the border pane layout so basically
its the same each time we run it so lets put controls into the other border pane
position just to see what it looks like so what we're going to do is add firstly a label
to the top position
so lets go ahead and do that so how we do that well we close down this run window first and
I'm gonna move this down and stat on line 9 by typing....which tells the border pane layout that
were adding an element to the top
so we use labels so....
...so lets try running that
...and I didn't try import ok so I need to accept that import to obviously make this valid try again and
it didn't quite work as you can see we try to use alignment = center but obviously that's not centered
it still in the top left hand corner so it's left justified so why is the label is still
aligned to the left well the alignment property for a label control determines
where the labels content will sit when there's empty space within the
label so we place the label into the top position of the border pane and that
means that the layout has given the label the entire width the pane because of that
we expect that aligning the text to the center would mean that the text will
be centered within the top position but the thing to remember is most controls
won't stretch to fill the width they have been allocated and that's how the label
control behaves so this means that even though the border pane is given the
label the entire window width of the window in this case the label remains at
its preferred width which is the width it required to accommodate the texts and no more now
since their isn't any empty space within the label the alignment property doesn't do anything
now if the label did occupy the entire width of the pane their would be empty space within it
and setting the alignment to center would have centered the text so to see this we are gonna place a
border around the label so let's go ahead and do that too so we can sort of see whats happening and it
can be very useful to add a border in this situations where we are trying to figure out something so I'm going to do that and we need a
style....
....you can see the Blue is appearing on line 12
the little to the right of the line number telling us that is what is going to be used if
you run this to confirm you can see now the label isn't occupying the entire width
of the top position and you can see why hasn't centered because it's only used the
preferred width and just shown just useenough to make it
fit so well understand why centering the text didn't give us what we wanted so if we
widen the window the label remains the same size so if I try this you will see that
nothing's changing the label isn't actually moving even though our buttons
move when I'm resizing things so what we need to do is center the label itself within the top
position rather than centering its text now as I mentioned earlier we can't set
the alignment of the border pane itself but we can set an alignment for each
of its children so I'm going to use the border pane alignment property when we want to
align a child within its position in the border pane so we set the border pane alignment to center for
the label to so come down here to the label and I'm going to type....
...and now if we run it we should find it now that is centered you can see the text the label I should say is
now centerd in the middle of the window alright I'm gonna finish the video here in the
next video we are gonna continue on talking a bit more about border panes before we start
looking at a few other layouts as well so see you in the next video