ok so continuing on just run our program again to see where up to and we still got
some long buttons as you can see there a long button and we've now that we've
commented out the column constraints again we've got to the width to the left hand side and the
right hand side so I mentioned that we're going to start looking at alignment
so let's start looking at doing that now at the moment you can see in the grid
pane on line 8 the alignment is set to center and obviously that was centered
in the middle of the entire window so we can change that lets try changing center to
top center.......and if you run that you can see what's happened
there is and lets just span it so its big enough to contain the full columns you can see it is now
at the top of the screen but still centered in the middle so top center
means just that top and then centre now one of the things you might notice by doing
that is that there is no gap between where the title ends the top of
the window and where the actual columns start or where the row starts in
other words so it would be nice to have some padding at the top there to do we
actually add a padding element to the grid pane itself and within that we add a
inset child element to the padding element so what I mean by that if I just go
here and do that so close that down just to see what it does and in here within the
grid pane we add padding then we add the inset so......
...and does this like we think it will do basically its add a ten pixel gap between the first row and the title bar so if we run
that we should see that has worked you can see that gap at the top but again
between the title bar and the first row thats good now that is working so lets try now moving the 4th button
down to the fourth row so we are going to change the grid pane row index to
3 come down here and add it to the fourth one make that 3 their and get rid of some
of the actual text now because we don't need it anymore we just go back to the really
long button before so I don't have to expand so much each time I run it
so if we run that
..so the spacing is now reasonable again now I've actually put it down into that row by itself
and that brings up another interesting thing to note is that we don't need to have
these in order so I've got row index three here then we would skip back to row
index 2 and the fxml is quite happily will render things in the
right order so in other words you don't need to define it just row 0 row 1 row 2
row 3 and so on you can put that in any order and likewise for the column
index as well then the other thing you can do is children can also span
across multiple rows so we haven't seen that working yet and we just need to set
the grid pane.row span property to do that and this is might be where you want this
button here to take both columns columns 0 and column 1 up so you do that we just
add a col span or a row span property and we do that on the actual
button itself so down here and add that......
..and if we run that you can see how it is taking up two columns and what we want to do now is changed
that column index to 0 so it starts in the very first columns so if we do that
run that again you can see that is now correctly not adding a new row its actually starting on a new
column starting on column 0 and moving over including column 1 as well
so that's what the column span does enable you to span more than one column
now right now looking at the screen all the buttons are left aligned in their
cells so let's change the horizontal alignment of button 1 so that it's right align just to see
what that looks like and to do that we use the h alignment properties so close this
down and set that now so in here for button 1 and we use the.....
...if you run that we should be able to see that the first
button is now right aligned and you can see there within the
cell it's now right aligned within that cell and just there is a h alignment their is also a
v alignment property that you can use as well that let's us change controls vertical
alignment within a cell if you want to do that
ok so that's it that's only basic overview of grid pane and I'm just gonna close it down so
next we are going to take a look at the h box lay out now h box lays out its children horizontally
in a single row and sizes its children to their preferred widths now if there's any
horizontal space left over it is gonna stretch itself to fill the excess rather than
stretching its children if that makes sense so what it does with any extra height
will depend on the fill height property and we will see this in action shortly but when
fill height is true which is by default the h box is gonna stretch itself to fill
any height and if it's false its gonna try to resize its children to fill
that extra height now some children can't be resized that way and in that case
the extra height's gonna remain empty so we often use a h box layout to lay out a
set of buttons in a dialogue because of the layout inherit from the same parent
class which is pane they share a lot of the same properties so we won't go over
properties that we have already covered for grid pane but bear in mind that everything we
do with layouts can also be done in code using the appropriate set methods and then
we can check the documentation for the layout to see what properties it
actually support so in the fxml let's remove all the buttons in
the padding element and change grid pane to h box so close the run window so gonna remove
all the buttons we don't need those anymore and also the padding and also remove the commented out column constraints which
we are not gonna be using so we left just with the standard grid pane we are gonna change grid pane to h box now so
make that h box......
...and you will see now that h gap v gap and grid lines visible don't actually exist
for h box so we need to remove those as well because they aren't applicable
for this layout so now we have done that we are gonna live alignment to top center let's actually add three buttons three
simple buttons an ok cancel and a help so.......
...and if we run this you can see our 3 buttons laid out
horizontally at the top center of the window and that's happening of
course because as you see we've got on line 9 alignment set to
top_center so it's doing that as we talked about previously
and that also there's no space between the three buttons and now because the
h box fill height property is set to true which is by default it would
have herself to take up any extra height in this case the extra height is
actually below the buttons so to see that the h box has stretch itself to fill any
excess width and height lets actually add a border around the h box and I'm
gonna do this using CSS which were gonna cover in more detail on a later lesson
but for now we just type in these commands and will be able to see a border
around it so close it down close the run window and we are gonna be adding it to the
h box line after the alignment I'm gonna start on a new line and
gonna type....which add some CSS commands to the h box and you might be familiar with CSS
for web development which is a way to sort of style a website similar
principles so we type in a style which in this case is going to be
......
....and notice how IntelliJ is picking that for us first one is color...
.....and again IntelliJ is helpfully picking that up for us the semicolon their because we want issue
another couple of commands here next one is.....
...and notice on line 10
in red which its showing us what the color is that we have selected which is very
nice just here in this next to the line number so now if we run this you can see a lot better now
you can see clearly that the h box is occupying the entire width and height of
its parent so adding border around layouts and their children is a great way to
visualize how much space is being given to the child this can help tremendously
when a layout isn't behaving the way we expect and is usually happens because
we made assumptions about how much space will be allocated and turns out that the assumption isn't true let's so lets change
the alignment now to bottom right because that's what buttons often appear so will do that so we'll change
this now to bottom right.........and if you run this you see that h box has stretch itself
above the buttons to fill the extra height
and will also add a gap now between the buttons by setting the spacing properties
to 10 so the way we do that is within the set up for our h box and we can
set up we put....which tells us that we are gonna be adding 10
pixels between each child so if we run this we can see that 10 pixels are now in between
each child in the h box layout and note now if I resize the window the buttons are actually
remaining at the bottom right because the way we specified it
so we probably want to add some space now between the buttons on the bottom edge of the window and the
buttons on the right edge of the window so the way we do this its actually the same for was in grid pane
so we are gonna use padding and insets so we do the same thing here within the h box.....
.....
...and now if we run that we could see now that we have
at the bottom we have a 10 gap but also on the right hand side we also got a 10 gap
as well and that should stay the same no matter how small or how big we make it
its still going to maintain that now that we have set that up so the buttons are now spaced
much better than they were but it would be nice if they all had the same width just having
a consistent size for all buttons and we recalled that when controls are
place in a h box they take on their preferred width by default as long
as there's enough room for them to do so now to make all the buttons have the
same width will set the preferred width to the same value for
every button so let's go ahead and do that and we need to set the pref width
button to 90 so lets do that which is going to be approximately the right size
to handle the buttons so we go into the button set up and we change......
......
...and now if we run that you can see that they all got a uniform width and our little dialog screen is starting to
look good so that's actually it's for h box it's not really a complex layout and normally we
wouldn't be using it as a layout for top-level window as I mentioned is
commonly used in a dialogue situation would normally add the h box as a child of
another layout
now another layout is the V Box layout and as you might guess it's closely related to the
h box so rather than laying them out horizontally and its gonna lay them vertically rather than that
it's pretty similar
so that's it for this video in the next one we're going to start looking at the
border pane layout so we'll see you in the next video