ok so moving on we are now going to talk about layouts now what with JavaFX layouts allow
us to add controls which are UI components to a container without having
to write the code required to manage the positioning and also the resizing
behaviour of those controls now the layout will manage all of that for us which is
pretty cool so JavaFX has got 8 layouts and you don't need to memorize this but the eight
layouts are called the grid pane the anchor pane the stack pane h box v box flow pane
tile pane and also the border pane now before we get into playing with
layouts I just want to discuss what I mean by the preferred size for JavaFX controls
because preferred sizes is actually an important concept so every control
computes its preferred size based on its contents so what i'm talking about
preferred size what I mean is the preferred width and height of the
control when it's displayed as an example JavaFX has got a button control
now obviously if your familiar with buttons especially ones for ok and cancel which
we've seen in applications in the past by default the button control will size itself so
there's enough room to display its content whatever is actually in their you know text
in other words so if we were working with an ok button the button control
will size itself so that it's border fits around that text ok in this example
so it wouldn't stretched itself across the width of the entire window for example it will only be just
wide enough to accept that text so layouts often used a preferred size of the
controls they are laying out to determine how much space I control I ultimately
get so when the controller is placed into a layout it becomes a child of that
layout so some layouts will ensure that their children display at the preferred
widths or heights and sometimes it would depend on where controllers place
within the layout so that's the theory let's actually get started and go through
what some of this looks like in code so
so I'm gonna start a new project now click on new project and as before I'm
gonna choose JavaFX here making sure I got the correct project SDK as you can see and I'm
gonna call this one layouts put in the right folder for me for my Java programs and click on finish ok to
create the folder and what we are going to do firstly you will see as per normal what
IntelliJ has done is it has created a default project for us you can see it is a default code that has been added which
we talked about in the previous example so that's the default you can see on line 15
at the moment it is set to 300 275 and if we run that to confirm what it does their is our window so that's
fine let's give ourselves a bit more space to work with so I'm going to change that
so lets change this 300 being the width to 500 run it again so you can see the window
now stretches wider because we've told it to increase the width from 300 to
500 so that's good so lets now take a look at some code and what we are going do is look at the grid pane and the
reason for that is that's the layout used in the generator project by default
so we don't have to change it to see that now from the grid pane
documentation grid pane lays out its children
inflexible rows and columns in other words it lays out its children in a grid
hence the name grid pane now each position in a grid is called a cell
by default rows and columns will be size again to fit their content which we've
talked about and a row can be as tall as the tallest controller it contains and a
column will be as wide as the widest control it contains so switching back
to the fxml and you can see on line 2 we got an import their for grid pane and obviously line 6
relating you can see the word grid pane their so that's basically a grid pane layout that has been
configured
so what we're going to do is add 5 buttons to this grid pane so we used the
button controller in JavaFX to create ok buttons cancel buttons or any other
type of button the application needs we are gonna use the Text property in this example
to set it to different values so that we can see what they look like so I'm gonna
go ahead now and add that so I'm going to come down here within the grid pane because
we're saying we're adding a child of the grid pane layout so we're adding a
button which is part of that layout and will type.....
.....
..so if we run this application now so you can see what's
happened their the actual buttons are stacked on top of each other and that's
the reason that is we didn't specify a row and column for each button so because
we are using a grid pane we need to do that in order to get them to appear
how we would expect them to do in the right area without overlapping each
other so I'm gonna close it down again and incidentally running it again by not specifying a
row and column for each button the grid pane is adding all the buttons in the default
position so in that case you are wondering why this is happening why this is overlapping the
default position is row 0 column 0 and basically the buttons have all appeared in that same
row and columns and that's why they're actually overlapping so going back to the fxml
we can actually change so we can come in here for each part so we can
type...
...so what I'm going to do
is just copy that now for each of the other buttons then adjust the row number and
the column number for each after we have done that so........ok so the first one we're going to put at
row
index 0 column index 0 which is the default as we saw and the second one we are going to put on column 1 for the third one
lets go to a new row because we only want 2 buttons on the same row so it's gonna be row one
remembering the counts starts from 0 so we start on column index 0 for that one and in the second one
we are gonna put.....and finally the 5th button 5th and last button we're
going to put on row 2 and also leave that in column index 0 so if we run that now we should find
we can see all the buttons and again if I just put this down so we can see the code a little
bit as well we are now seeing what we expect though we got button 1 and 2 on row 0 which of
course is because we've coded it that way on lines 8 and 9 button 3 and 4 are both
on row index 1 which is the second row as you can see and the button 5 is on row index 2 and obviously from a
column position[ going left to right when we are adding them as we increase the column index the
controllers get added automatically left to right in the column and of course row as you
can see is adding them top to bottom so it's basically doing what would expect
the other thing to note is that each column is the width of the widest controller in that
column so that's another important thing to keep in mind their so you can see
that it's keeping enough space to hook this button in forward places as well now as for the
rows we can't really see this here because our buttons have the same height so we can't
see whether it's actually made them longer or anything
on those lines but each row is the heigh of the tallest controller in the row so
if we had a taller control in one of the rows for argument sake the rows height
would be greater than the other rows now when IntelliJ IDEA generates the
grid pane definition for us as we created a new project it set the I'm
talking on the code on line 7 it has set the h gap the v gap the alignment properties and now we are where
what we can now start seeing what they actually do so the alignment is set to
center and so the grid is centred with the grid panes width and height and you can see
that basically it's using the middle part of the Windows so in other words the
grid pane is occupying the entire window and the grid is centred within
that window is the point I'm trying to make their so we can see that
we probably can't see easily but there is actually a 10 pixel gap between
the rows and the reason that's happening is of course we've got h gap and
v gap set to 10 up here on line 7 and that's also taking into
account the gaps between rows there you can see or you can't see but their is 10
pixels between each row and again that's got to do with the v gap we defined and looking at the
the gap their is also a 10 pixel gap between the columns in the second row as
specified by h gap so the gap looks larger for the first row because
the first button doesn't occupy the entire width of it cell so help us see
this we can use a debugging property that grid pane has so we will set the grid lines
visible property to true and now when we run the application you will be able to see this little bit more
details so I'm going to close it down then come ahead here on to line 7 and I'll just press
enter their and tab over and do....
....so we can actually see this a little bit more detailed so if I run this now
so now you can see that the grid lines and the 10 pixel gap between the rows and
columns buttons 1 3 and 5 have stretch to fill the width of their cells so
that's why it appears it has a larger gap between the first and third columns but there
really isn't as you can see so the grid lines properties useful when the children in a
grid pane don't appear the way we expect so any time you've got difficulties and things
that aren't aligning the way you think they should be make sure you do something like on line 8 where I
added gridlines visible equals true and you can see these lines appearing quite helpfully
sort of showing you what's going on so it does help you debug the actual
problem the next thing to think about now is what happens when we resize the
window containing the grid pane so we'll see that the grid remains in the
center so lets just do that and notice the grid is actually staying in the center so as we go
smaller or larger its still centering itself automatically the reason for that
is its alignment is set to center but that said it doesn't resize because its
already large enough to accommodate the children in all its cells so let's add
some more text another button to make it really really long and see what
actually happens so come back here to our already ;long one really long button
4 i'm just gonna put more text....
that should be enough so if we run this again now so you can see the text for most other buttons have been cut off particularly
the ones now in the first column but when we resize the window see that the
grid pane will resize until it's large enough to accommodate all its children so once its
resize to that level it doesn't try resizing anymore so again just going back
down smaller you can see that with the three dots is indicating that its not feeting but if I keep
resizing eventually it will get to that size and now it's just changing or just
moving the alignment to be centred but its not actually resizing anymore and the reason for that
is that it's large enough to contain all the text for each child so right now the
rows and columns have been sized based on the grid panes default behaviour so when we
change button four's text to be really really long as you saw it
just put it down a little bit so you can see the code so initially grid pane gave more space to the second column because the text was so
long as before we resize it but I'll just run it again just to confirm what I'm talking about here so obviously it gave more a more
of a small size here to try and accommodate as much of the texts as it
can actually fit in now what if we always want each column to be given fifty percent of the
grid panes width for argument sake that can be quite handy to do we can actually
do that easily we can use the columns constraints class so lets just to have a look at
that's so closes this down and the way we do that is we actually come here
after grid pane before our 1st button press enter their and type....
......
....so what we doing there is we are using the column constraints class to set the initial
width of each column and we can actually use pixels or via percentage now the thing here to
remember is that the ordering is important we add a column constraints child
element to the grid and within it we add a column constraints element for each
columns so each one of these that we're adding within this column constraints
sort of block is the column the percentage width for the column in order
so the ordering is actually important here so the first column
contraints element will apply to the first column the second to the second column
etc so lets run that so you can see columns each column now occupies
50% of the width we also notice that the grid occupies the full width of the window
and I can make it bigger if we want...but notice when I'm making it bigger it is still utilizing the entire space of the window
that's the important point here that's because we told to grid pane that we want each column
to be fifty percent of its width rather than being only large enough to
accommodate the widest controls preferred width so lets now delete the columns
constraints again actually I'm just gonna comment that out and run it again to make sure it's working
and we are back to the behaviour we want before and we can make this a bit bigger and is now
aligning to the center and the notice how it is not using the full columns spacing again because we
removed the column constraints alright I'm gonna end the video here in the next one we are gonna
continue on and we are gonna start looking at alignment at the moment we've got alignment
working by default based on what was generated the cpde that was
generated by IntelliJ going to the center but will look at moving this around
and aligning it at different areas in the next video