alright so it's time now to start seeing if
we can build some sort of really basic alright so it's time now to start seeing if
user interface using scene builder so we can build some sort of really basic
what I'm going to do is with scene builder user interface using scene builder so
opened the scene builder what I'm going to do is with scene builder
tab opened going to drag some controls opened the scene builder
over so will click on controls and select tab opened going to drag some controls
the button and drag that in release over so will click on controls and select
the mouse like so they're going to the button and drag that in release
do the same for two more buttons i'm going to the mouse like so they're going to
click on do the same for two more buttons i'm going to
the button again drag it over to the click on
right of the first button release and do the button again drag it over to the
the same for third button on the right of the first button release and do
right-hand side move over move to the the same for third button on the
right hand side of the second button and right-hand side move over move to the
release and you can see we now got right hand side of the second button and
three buttons and note that the row and release and you can see we now got
column indicators are appearing now for three buttons and note that the row and
the grid pane and also the reference column indicators are appearing now for
here is changed to say that it's the grid pane and also the reference
consuming one row theirs now three elements here is changed to say that it's
in this case buttons 0 to 2 so let's consuming one row theirs now three elements
change the text now offer each for in this case buttons 0 to 2 so let's
to make it easy to know which button change the text now offer each for
we're dealing with now you can select the to make it easy to know which button
buttons into ways we can click on it we're dealing with now you can select the
within the content area like here for buttons into ways we can click on it
example the second button or i can within the content area like here for
notice when I do that that actually example the second button or i can
just selected here in the scene graph notice when I do that that actually
area just selected here in the scene graph
alternatively i can just click area
on there as well either way will alternatively i can just click
actually select the button once we've on there as well either way will
done that up here where the text is actually select the button once we've
showing as button going to change that done that up here where the text is
to ok and press enter and notice that the showing as button going to change that
user interface is updated to reflect to ok and press enter and notice that the
that also the scene graph on the left user interface is updated to reflect
hand side is updated to reflect that and that also the scene graph on the left
just if you're not seeing that make sure hand side is updated to reflect that and
you've got properties if you happen just if you're not seeing that make sure
to have layout open you'd see that so you you've got properties if you happen
click on properties because we want to have layout open you'd see that so you
to actually update those let's update click on properties because we want
the other two can will actually add the to actually update those let's update
text canceled for the second button and the other two can will actually add the
for the third button text canceled for the second button and
let's make that one help for the third button
so lets now switch back to the text let's make that one help
tab to see the code that scene so lets now switch back to the text
builder has generated and looking at tab to see the code that scene
that you can see that it's different builder has generated and looking at
from the code that we write by hand that you can see that it's different
it's actually very verbose and also from the code that we write by hand
note that scene builder has generated it's actually very verbose and also
some optional elements also since we note that scene builder has generated
only have one row it's actually relying some optional elements also since we
on just the default values for some of only have one row it's actually relying
the grid pane . row index and grid pane . on just the default values for some of
column index settings are not the grid pane . row index and grid pane .
specifically specified as we did in the column index settings are not
case of our code when were actually coding specifically specified as we did in the
it by head case of our code when were actually coding
let's go back to scene builder again it by head
now if it's not already selected in my let's go back to scene builder again
cases its not click on the grid pane over now if it's not already selected in my
here to the left and when I selected cases its not click on the grid pane over
the grid pane the color of the row here to the left and when I selected
column indicators changes to let us know the grid pane the color of the row
that we're now going to be working on the column indicators changes to let us know
grid pane itself and so what I can then that we're now going to be working on the
do is click on this button over here to grid pane itself and so what I can then
the left the row 0 indicator which is do is click on this button over here to
at the left of the ok button if click on the left the row 0 indicator which is
that you see that the settings area at the left of the ok button if click on
displays the row constraints that you see that the settings area
for that row if i click on the zero tab displays the row constraints
above the button notice how the column contraints for that row if i click on the zero tab
are now showing in the settings above the button notice how the column contraints
pane on the right hand side so if we are now showing in the settings
want to change the row or column pane on the right hand side so if we
constraints want to change the row or column
that's how you actually get to them constraints
alright so let's see what happens now if that's how you actually get to them
we add a label above the buttons so i'm alright so let's see what happens now if
going to do is open this controls and we add a label above the buttons so i'm
grab a label got going to do is open this controls and
a place above the ok button i'm just grab a label got
going to drag it over and place it above a place above the ok button i'm just
the ok button somewhere so you can see that going to drag it over and place it above
when I've done that the row index for the ok button somewhere so you can see that
the buttons is now been updated the when I've done that the row index for
buttons are now in the second row this the buttons is now been updated the
one down here at row index 1 alright so buttons are now in the second row this
with the label selected I'm going to one down here at row index 1 alright so
click here i'm going to click over here with the label selected I'm going to
to the left hand side to change its click here i'm going to click over here
properties or select this display its to the left hand side to change its
properties and change the text going to properties or select this display its
call that my label instead that's properties and change the text going to
reflected now as you can see on screen call that my label instead that's
and we go back to our text and take a reflected now as you can see on screen
look notice that the fmx generated by and we go back to our text and take a
the scene builder as we notice before look notice that the fmx generated by
it's still relying on default values so the scene builder as we notice before
the default value for grid pane . row it's still relying on default values so
index and grid pane . column index is 0 the default value for grid pane . row
and there's no obviously row index or index and grid pane . column index is 0
column index specified for that and there's no obviously row index or
label now scene buidler doesn't generate column index specified for that
these properties for the label because label now scene buidler doesn't generate
it's at position 0 comma 0 these properties for the label because
it also doesn't generate the column it's at position 0 comma 0
index for the ok button because it's at it also doesn't generate the column
column 0 so unfortunately this makes the index for the ok button because it's at
FXml more difficult to read because we column 0 so unfortunately this makes the
have to fill in the blank ourselves FXml more difficult to read because we
generally speaking it's better to spell have to fill in the blank ourselves
out all the properties and we obviously generally speaking it's better to spell
had been doing that and I've been out all the properties and we obviously
showing you how to do that when we've had been doing that and I've been
been writing fxml ourselves showing you how to do that when we've
in the case of scene builder it's using been writing fxml ourselves
these default properties in the case of scene builder it's using
alright so let's go back to scene builder these default properties
again notice the scene graph alright so let's go back to scene builder
area list all the controls we added on again notice the scene graph
the left-hand side here now to see what area list all the controls we added on
the graphic the grid pane ui the left-hand side here now to see what
when we run we just have to click the graphic the grid pane ui
on an empty part of the content area to when we run we just have to click
remove the row column indices in my case on an empty part of the content area to
just going back to the screen and reset remove the row column indices in my case
it and that's actually showing this is just going back to the screen and reset
basically representation at the moment it and that's actually showing this is
of what it would look like if we basically representation at the moment
actually run now since the label is of what it would look like if we
wider than the ok button is now more actually run now since the label is
space between the buttons and as we wider than the ok button is now more
typically do let's actually put the space between the buttons and as we
buttons into a h box by dragging a typically do let's actually put the
h box over the buttons so i'm going buttons into a h box by dragging a
to actually do that going to get a h box h box over the buttons so i'm going
and drag it over the buttons noting that to actually do that going to get a h box
I'm just selecting that area they're and drag it over the buttons noting that
releasing but you can see at the moment I'm just selecting that area they're
the h box hasn't wrapped the buttons releasing but you can see at the moment
instead it's actually added itself as the h box hasn't wrapped the buttons
you can see over here the scene pane and instead it's actually added itself as
we can see on screen at row index one you can see over here the scene pane and
column index one and just to confirm we can see on screen at row index one
that we get back to the text view and see column index one and just to confirm
that it's added itself column index one that we get back to the text view and see
row index one that isn't what we want we that it's added itself column index one
want the h box to go to row index one row index one that isn't what we want we
column index zero we want the buttons want the h box to go to row index one
added to the h box rather than added column index zero we want the buttons
directly to a grid pane added to the h box rather than added
let's get back to the scene builder and directly to a grid pane
what we're going to do is right-click let's get back to the scene builder and
the h box over here in the scene graph and what we're going to do is right-click
select delete to remove it the h box over here in the scene graph and
that's now deleted so how do select delete to remove it
we actually achieve this how do we that's now deleted so how do
actually get those buttons wrapped we actually achieve this how do we
within a h box actually get those buttons wrapped
well there's two ways to do this so we within a h box
can actually select all three buttons in well there's two ways to do this so we
the scene graph area and we can select can actually select all three buttons in
three buttons clicking on the first the scene graph area and we can select
button holding down shift and selecting three buttons clicking on the first
the third one and that's actually going button holding down shift and selecting
to highlight the three of them or i can the third one and that's actually going
also individually click on my command to highlight the three of them or i can
key to select them and you could use a also individually click on my command
ctrl key for windows or linux so key to select them and you could use a
basically want to select the three that ctrl key for windows or linux so
way and the other way of doing it would basically want to select the three that
be just to selected just too select way and the other way of doing it would
them here same principle holding a be just to selected just too select
command because i'm on a mac and you do them here same principle holding a
a similar thing with ctrl key on Windows command because i'm on a mac and you do
or Linux to select the three buttons a similar thing with ctrl key on Windows
at this point we've now got the three or Linux to select the three buttons
buttons selected in the scene graph at this point we've now got the three
and in the content area as you can see buttons selected in the scene graph
we then actually hover over that right and in the content area as you can see
click over here in the scene graph actually we then actually hover over that right
click select rather wrap in and then we click over here in the scene graph actually
gotta choose h box so go ahead and do click select rather wrap in and then we
that h box when we did that you can gotta choose h box so go ahead and do
see that the layout got screwed up if that h box when we did that you can
we switch back to the text view and have see that the layout got screwed up if
a look you can see that everything's we switch back to the text view and have
been placed in a single row so the point a look you can see that everything's
going to make here to you is that scene been placed in a single row so the point
builder isn't perfect so let's go going to make here to you is that scene
back to the scene builder and see if we builder isn't perfect so let's go
can fix this but do notice just over here back to the scene builder and see if we
now that I can click on the + and the can fix this but do notice just over here
three buttons are certainly in the h now that I can click on the + and the
box but again we've got this display three buttons are certainly in the h
issue so how do we actually go about box but again we've got this display
fixing that we're going to select the issue so how do we actually go about
h box over here in the scene graph fixing that we're going to select the
and we need to set it row index and h box over here in the scene graph
column index properties to what we need and we need to set it row index and
to do is come over and click on layout column index properties to what we need
you can see the row index and to do is come over and click on layout
column index will just make a little you can see the row index and
wider are both set to 0 at the moment so we're column index will just make a little
going to set the row index here to 1 wider are both set to 0 at the moment so we're
press enter and we can see now that the UI going to set the row index here to 1
will look the way that we want to look press enter and we can see now that the UI
and there when we look at the scene graph will look the way that we want to look
area you can see that the h box over and there when we look at the scene graph
here has been expanded to show area you can see that the h box over
the buttons and collapsed hide the here has been expanded to show
buttons would also like to do that if we the buttons and collapsed hide the
want to expand all or hide them and buttons would also like to do that if we
again the main thing is that interface want to expand all or hide them and
and click something somewhere outside of again the main thing is that interface
our controls we can see that we got our and click something somewhere outside of
three buttons showing nicely and our controls we can see that we got our
they're actually in the h box now one three buttons showing nicely and
caution here if we did decide at they're actually in the h box now one
this point I don't want these buttons in caution here if we did decide at
a h box if you thought that you this point I don't want these buttons in
actually just come over here and click a h box if you thought that you
on the h box right click and select actually just come over here and click
delete which i'm not going to do now on the h box right click and select
that would actually delete the container delete which i'm not going to do now
and the three buttons which you probably that would actually delete the container
definitely wouldn't want to do now there and the three buttons which you probably
is a there is also undo capabilities definitely wouldn't want to do now there
here and so I was going to show you that is a there is also undo capabilities
by actually clicking it and here and so I was going to show you that
selecting undo but unfortunately the by actually clicking it and
mac version undo seems to be broken selecting undo but unfortunately the
because every time i do that mac version undo seems to be broken
intellij seems to lock up and go a because every time i do that
little bit weird so I'm not gonna try to undo intellij seems to lock up and go a
ut you could actually try little bit weird so I'm not gonna try to undo
doing it and see whether it works just ut you could actually try
right click click on delete and once doing it and see whether it works just
you've done that you could do a command right click click on delete and once
z to undo on a mac or control z you've done that you could do a command
on a windows or linux machine or come z to undo on a mac or control z
up here and click on undo on a windows or linux machine or come
but again I'm not going to do that now up here and click on undo
because on my mac it seems to hang bottom but again I'm not going to do that now
line here is that you're deleting because on my mac it seems to hang bottom
container that's got embedded line here is that you're deleting
controls you are going to delete container that's got embedded
everything selected so be controls you are going to delete
very careful when you're selecting that everything selected so be
so how do you remove them well if you very careful when you're selecting that
want to actually remove them out of the hbox so how do you remove them well if you
instead what you do is you click on want to actually remove them out of the hbox
the h box you right click and click on instead what you do is you click on
unwrapped and that would actually take the h box you right click and click on
them out so I can do that now and you unwrapped and that would actually take
can see that's actually remove them from them out so I can do that now and you
the h box that h box has can see that's actually remove them from
disappeared completely from our layout the h box that h box has
in this case so i actually want disappeared completely from our layout
it back so lets actually fix this in this case so i actually want
up first we go back and change our it back so lets actually fix this
buttons which now actually in the up first we go back and change our
wrong row so let's put changes back to buttons which now actually in the
one we just add the h box back wrong row so let's put changes back to
and what I should probably been doing one we just add the h box back
they're changing the column index to 2 and what I should probably been doing
i'll do that to column 2 for the third they're changing the column index to 2
button for the second button change that i'll do that to column 2 for the third
to column index 1 alright so we're got our button for the second button change that
interface back here we had it again to column index 1 alright so we're got our
and we got this spacing issues interface back here we had it again
which are we going to be addressing in and we got this spacing issues
the next video but we go back and which are we going to be addressing in
add our hbox again come back here we can add the next video but we go back and
it and and that still not how we add our hbox again come back here we can add
want it and the moment it's not it and and that still not how we
wrapping so I'm just going to want it and the moment it's not
delete that and use the mechanism i wrapping so I'm just going to
recommend which is selecting the three delete that and use the mechanism i
buttons right clicking wrapping h box recommend which is selecting the three
then we need to do that last change buttons right clicking wrapping h box
which was changed the row index for the h box then we need to do that last change
to 1 and that leaves it wrap in a h box which was changed the row index for the h box
ok let's now select the ok button again to 1 and that leaves it wrap in a h box
i can click on here or i can expand this ok let's now select the ok button again
window over here in the scene graph i can click on here or i can expand this
expand the container should say click on window over here in the scene graph
ok so we've got the property showing now expand the container should say click on
button isn't a layout but it still has ok so we've got the property showing now
the layout area therefore controls we button isn't a layout but it still has
can use this area to set properties that the layout area therefore controls we
influence how the control behaves within can use this area to set properties that
its parent container now for containers influence how the control behaves within
the properties in the layout area affect its parent container now for containers
how the container is laid out within its the properties in the layout area affect
parent or how controls are laid out how the container is laid out within its
within the container that's actually parent or how controls are laid out
change the ok button the margin so what within the container that's actually
I'm going to do is over here now the change the ok button the margin so what
little graph i'm going to really expand I'm going to do is over here now the
this on the screen really quite largely little graph i'm going to really expand
you can see it we got these 4 little this on the screen really quite largely
fields here and notice that the little you can see it we got these 4 little
graphic above each input box is telling fields here and notice that the little
us which margin is going to set so graphic above each input box is telling
that's obviously the first one is the us which margin is going to set so
top margin the right margin the bottom that's obviously the first one is the
margin and the left margin going to the top margin the right margin the bottom
enter the value of five in the second box one here margin and the left margin going to the
which is the right margin if i do that enter the value of five in the second box one here
press ENTER we notice we now got a which is the right margin if i do that
space between the ok button and the press ENTER we notice we now got a
cancel button that's because i added 5 space between the ok button and the
pixel margin to the right of the ok cancel button that's because i added 5
button so that actually put some space pixel margin to the right of the ok
between the ok and cancel buttons but button so that actually put some space
another and perhaps better way to do it between the ok and cancel buttons but
would be to set the spacing for the another and perhaps better way to do it
h box so that all controls in the h would be to set the spacing for the
box h box so that all controls in the h
have the same amount of space between box
them so let's go ahead and try doing have the same amount of space between
that I'm going to get back here them so let's go ahead and try doing
change it back to zero again enter their that I'm going to get back here
to back to see what it was or to change it back to zero again enter their
the value that it was going to come over to back to see what it was or to
here and select the h box in the the value that it was going to come over
scene graph area and expand the layout here and select the h box in the
window if it's not already expanded in scene graph area and expand the layout
this case which already is window if it's not already expanded in
let's now set the left and right-hand this case which already is
margins over here to 5 for all controls let's now set the left and right-hand
also the left so that is the left and the right margins over here to 5 for all controls
margins but also to actually affect all also the left so that is the left and the right
the individual controls lets actually margins but also to actually affect all
change the spacing to 5 as well and you the individual controls lets actually
can see that is now affected the change the spacing to 5 as well and you
space between all three buttons now if can see that is now affected the
we actually click over somewhere space between all three buttons now if
outside of the user interface notice now we actually click over somewhere
there's a lot of space to the right of outside of the user interface notice now
the Help button and if we click on the there's a lot of space to the right of
h box you can see it's not the h the Help button and if we click on the
box is causing that because you can h box you can see it's not the h
actually see this sort box is causing that because you can
of margin here to the right and that actually see this sort
seems to be quiet ok if we click on the of margin here to the right and that
grid pane we can see that's the culprit seems to be quiet ok if we click on the
that's the grid pane is what is grid pane we can see that's the culprit
actually selecting or using that extra that's the grid pane is what is
space and if we have a look over here we actually selecting or using that extra
can see the problem here is in the space and if we have a look over here we
properties for the grid pane is that the can see the problem here is in the
horizontal gap settings 10 now we only properties for the grid pane is that the
have one column so we don't need a gap horizontal gap settings 10 now we only
that separates columns going to set the have one column so we don't need a gap
h gap back to zero and that then fix that separates columns going to set the
our problem if i click outside here now h gap back to zero and that then fix
we can see that in our problem if i click outside here now
terms of the buttons we can see that in
we've got a nicely sort of position in terms of the buttons
the middle there essentially the extra we've got a nicely sort of position in
space disappeared so a simple level the middle there essentially the extra
that's really all there is to building a space disappeared so a simple level
UI using scene builder you dragged that's really all there is to building a
components from the left-hand side on UI using scene builder you dragged
into the content area and we set their components from the left-hand side on
properties on the right-hand side and we into the content area and we set their
can select the component we want to work properties on the right-hand side and we
with by clicking on its content area or can select the component we want to work
in the scene graph area and we usually with by clicking on its content area or
select containers in the scene graph in the scene graph area and we usually
area when you wanna run the application select containers in the scene graph
we run it in the usual way by clicking area when you wanna run the application
on the run we run it in the usual way by clicking
and over here i can just right-click on the run
I could have just run over here as and over here i can just right-click
well run and there's our simple little I could have just run over here as
interface at the moment well run and there's our simple little
ok the other what I find annoying interface at the moment
little thing that this scene builder ok the other what I find annoying
does if you click on controls we go back little thing that this scene builder
to say the text and go back to the scene does if you click on controls we go back
builder it seems to lose the focus of to say the text and go back to the scene
where we're at and you got to builder it seems to lose the focus of
re-expand to get access to the where we're at and you got to
particular controls you want again but i re-expand to get access to the
will be talking I'll be talking about particular controls you want again but i
using the standalone scene builder in a will be talking I'll be talking about
future video probably in the next video using the standalone scene builder in a
depending on how long that takes to go future video probably in the next video
through some of the other things i want depending on how long that takes to go
to show you bottom line is that it's through some of the other things i want
still a very useful tool so let's end to show you bottom line is that it's
the video here now in the next video still a very useful tool so let's end
we're going to have a look at this code the video here now in the next video
menu we haven't really talked it more we we're going to have a look at this code
talked a little bit about it but haven't menu we haven't really talked it more we
done anything with it so let's start talked a little bit about it but haven't
working with that in the next video done anything with it so let's start