so if we re-run our application from the last video again we can see now that the
label is correctly aligned and centered at the top and we can make the window large
or small and remains centered so its a combination of specifying top but also
the borderpane.alignment = center so let's move on now
to the border panes left and right positions now the controls in these
positions will be sized to their preferred widths andwill occupy the
entire height of the position now that's different not including the height of
the border pane because the top and bottom positions occupy the entire width
of the border pane itself and that means that they occupy part of the left or
right hand side of the border pane if that makes sense what we gonna do is add some
labels into these positions using the left and right child elements so come down
here after top and clear up some of these lines here....so come down here at the end
of top element and we're gonna add....
.....
......
.......
..and if we run this
so you can see what's happening their now we got the label size to their preferred
widths and place at the top of the left and right positions and obviously we can
maximize this and they still stay in those positions now we still have the center
position so that's add a label there and give it some text so that it will be too long to fit in
the remaining spaces just to see what happens
remember that the center position will get any space that's left over after
controls have been placed in the other positions so let's go ahead and do that
and......
.....
...making it really long just to see what happens ok so that's our label for center
and again remember that the center position will get any spaces left over after
controls have been placed in the other positions so lets run this and what you can
see strait away is that the center label text is cut off so if
we widen the window you can see eventually the center area is expanding but the
left and the right don't expand because the labels in those positions are already at
their preferred widths
so if we now make the window taller you will see the same behaviors so we take it back to what it was
and if I make it taller...so we got more positions for the Center more Space there but the left and right
positions aren't moving again because they are already at their preferred heights so if
the controls in the top bottom left or right positions weren't already at the
preferred widths and heights they would expand before space was given to the
center position so that's the border pane layout that's all we are going to look at
for that so close it down now the anchor pane is another popular top level layout
and it allows use to anchor children to edges which can
influence what happens when the pane is resized now for example you might
wanna anchor a title to the top of the pane so that when the window is resized
a bunch of space isn't added between the title and the Windows title bar or we
could anchor a h box containing buttons to the bottom of the pane so we are gonna look
at anchor pane in more detail in the later lecture but next we are gonna actually look at
another layout which is the flow pane layout now this layout is very similar to the
h box and v box layouts we talked about and used but it does differ in that
it wraps its children so with a h box the children are laid out horizontally as a
single row now if the window is re-sized so there isn't enough room then the children
will be cut off and that principle applies to v box layout
so its lays out its children vertically and if there isn't enough height to fill them all then some children will
actually cut off
now when using a flow pane children won't be cut off unless the user
resizes the window so that it's not possible to show them all so when the
orientation of the flow pane is set to horizontal and the user resizes the
window so that all the children can't fit into a single row the layout will
actually wrap the children to the next row that's really the difference with
flow pane now if the user then increases the width of the window the children will pop
back to the previous row
the same applies when the flow panes orientation is set to vertical if
there isn't enough height for the children to fit into a single column some
children will wrap into the next column so lets try this out what we gonna do is
we're going to set up a flow pane with 10 buttons and have a bit of a play around with the
orientation just to see how this works so I'm going to comment this out so that this will
be available in the source code in case you need to use that we're gonna start on
line 1 again up here and start from scratch so we are going to start with the flow pane
so....
.....
.....we are gonna add 10 buttons so.....
....and lets do a copy paste for the rest....
....
......
..so what we've done is we've set of a flow pane
we set the orientation to horizontal although horizontal is the default so we don't
really have to do that so that's the code on line 4 we could have left that out but often
it can be a good idea to spell out what you trying to achieve anyway so here
it's clear that what we try to do without having to sort of remember what
the defaults are so if we run this now we see that the window size we set in main java is in 2 rows
now based on the size that we specified again the size we specified
in main.java here on line 15
so running it you can see the buttons one two three four and five fit in the
first row button 6 7 8 9 10 fit in the second row and that's because there's
enough room to show five buttons in the first row and then flow pane wrap
buttons 6 through 10 to the second row but if we widen the window you'll see that the little
pop back to the first row so if I come over here now and just make this bigger you can see now they are popping back
automatically so no code changes required from your point of view for that to happen its just sizing it's actually moving
automatically we can go right down here if you wanted to so the flow pane layout
is doing that for us as well now what we could do there as well we could add a
gap between the buttons if we wanted to do that and you've seen that previously so I won't
actually do it again there now so let's try the same thing but with a vertical
flow pane as well and to do that I'm gonna closed this down and you guess it I'm going to go to
orientation and set that two vertical like so and if we just run it again you can see by default it
stack them 1 to 10 and its different row and again we can just go up and it's gonna try
and make them fit based on how wide the window is so let's quickly change the
flow pane back to a v box to see that the children will be cut off if we resize
the window too small
where's that wasn't the case with flow pane so make that a v box and we need to remove the
orientation because that's not part of v box...and if you run this....
and of course that should be capital V...and run it again now
or will just add the import sometimes IntelliJ takes a while to pop that up now I will accept the import
I could have just type that in and now third time lucky will try running it again and it should actually work and you
can see that as I move up notice how unlike the
flow pane the buttons are actually getting cut off as I'm making it smaller than the
v box so that's the difference between that and a flow pane the flow pane will seek to make the
buttons fit as much as it can
whereas the v box layouts quite happy to actually stop those buttons or actually to not
show the buttons and and for them to disappear off screen so maybe a question
now is that why would you use a flow pane or when would you use a flow pane
rather than a h box or a V Box layout well it makes sense to have the children wrap
or if your not sure how many children their will be for example your adding children
pragmatically based on records you reading from a data base then using flow pane
would make perfect sense but when you don't want the children to wrap for
example when adding buttons to the bottom or right-hand of a dialog you'd
use h box or v box in that scenario so the tile pane layout is similar to a
flow pane the difference is that it lays out its children in a grid and every cell or
tile in the grid will have the same size so tile pane will wraps its children just
like flow pane does so to see the difference lets switch back to a
horizontal flow pane so I'm just gonna undo the changes undo them to go back to where we
were
...ok we got our flow pane back and I just change the to a horizontal again so if we run this again to confirm now we can obviously see in this scenario that button 7 for example
is wider than button 2 button six and there's no space between the buttons so
that's the default functionality with flow pane but if you changes to tile pane so gonna change
flow pane to tile pane and accept the import and we need to remove
the orientation again and if you run this you will noticed a couple of things that
are different their first you see that every cell been allocated the
same width so there are gaps between the buttons because some buttons aren't wide
enough to occupy the width of their cell now because each tile has a width
of the largest button there are three rows when we first run the application rather
than 2 that we saw when using flow pane also the buttons are centered within
each cell when we resize the window we'll see the buttons wrap and unwrap
just as I did with flow pane so let me do that now and notice how they are moving again as we saw with flow pane so
that's tile pane so finally now we get to the last layout and that is the stack pane layout
now the stack pane places all of its children in a stack in other words the
control in a stack pane occupy a single cell and are piled on top of each other
so let's add a label and a button to a stack to see what this looks like so I'm going to
just comment that out again so that when you download the source code if you want to
those code that I have worked on is their and copy a bit of this code to save a bit of typing....
but we are not going to use tile pane we are gonna use stack pane...
.....ok lets add a button first so....
.....
....so if we run this is you can see the button and the label are on top of
each other so is the button on top of the label or the label on top of the
button so to see that let's change or set the background of the button color
to red and the labels background to color green
so gonna do....
....
...so you can see now that the labels on top of the button and just to confirm that
if I swap the order now and put the label at the top and run this you can see now the buttons on top of the label and actual
fact we can't see the label anymore because of that so let's add another label
after the buttons and set its background to blue just to see what's going on so if add another
label just copy this one here...and will put the second
label text and color for that one is blue.......so if I run that and then we can see that the second label is
now on top of the button so the order in which we add the controls to the fxml
will determine the order in which the control is added to the
stack pane so the first control end up at the bottom of the stack and the last
control we add will be at the top of the stack or as the stack pane documentation
puts it the 0th child being the bottom and the last child on top now the same is going to be true if you
do this through code first child you add to the layout using .getchildren
.add will end up at the bottom of the stack and the last child you
add will basically be at the top of the stack
you might be wondering why you'd use stack pane layout because it seems to create a
mess
now in our example obviously that is true it is quite messy but supposedly we added and image to the
stack and then place the label on top of it would end up an image with text
imposed on it we can also style the texts so that its surrounded by border etc
so if you're familiar with layers in Photoshop for example or similar
software the concept is the same here so that's what be using a stack pane for
ok so othat's it now for layouts as we've seen JavaFX offer a variety of
layouts that we can use to create our user interface and we can just design the UI we want
by using these layouts either alone or by nesting them and you saw an example
of nesting layouts in previous videos its also possible to create custom layouts but
that's really an advance topic that I won't be covering here so that's the end of this
section on layouts next we are gonna take a closer look at some of the JavaFX
controls that we can actually use in our user interfaces so see you in the next
video