ok so now that we've integrated scene
builder into intellij let's go ahead ok so now that we've integrated scene
and create a new javafx project and builder into intellij let's go ahead
see it working and click on create new and create a new javafx project and
project I'm going to select javafx see it working and click on create new
making sure javafx supplication is project I'm going to select javafx
selected and for this one we're just making sure javafx supplication is
going to call this scene builder the selected and for this one we're just
project click on finish making a space going to call this scene builder the
here let's expand this out so we can see our project click on finish making a space
files i'm going to double-click the here let's expand this out so we can see our
sample . fXML and the first thing you files i'm going to double-click the
should notice down here at the bottom sample . fXML and the first thing you
now is that we've got this new should notice down here at the bottom
scene builder tab in the past we've only now is that we've got this new
had text but with now got a scene scene builder tab in the past we've only
builder tab as well if we click on the had text but with now got a scene
scene builder you notice that it's builder tab as well if we click on the
actually popped up scene builder you notice that it's
we've scene builder now within IntelliJ actually popped up
that's almost the same user interface we've scene builder now within IntelliJ
that we saw when we run this the that's almost the same user interface
standalone scene application but the that we saw when we run this the
good thing here now is that scene builder is standalone scene application but the
actually aware of our sample . fxml file good thing here now is that scene builder is
that's actually already loaded the actually aware of our sample . fxml file
contents of that file and any changes we that's actually already loaded the
make within the scene builder will be contents of that file and any changes we
saved to the sample fxml file and also make within the scene builder will be
vice versa saved to the sample fxml file and also
now when running the application vice versa
standalone we also could have loaded the now when running the application
sample fxml file from our standalone we also could have loaded the
project and then any changes will be sample fxml file from our
saved to sample . fxml but I think project and then any changes will be
you'll agree it's far more convenient to saved to sample . fxml but I think
do it all with IntelliJ the ide makes you'll agree it's far more convenient to
the Association without us actually do it all with IntelliJ the ide makes
having to tell the scene builder which of the Association without us actually
fxml file we're working on and its pretty having to tell the scene builder which of
cool fxml file we're working on and its pretty
one thing to point out that with this cool
integration with IntelliJ is that can be one thing to point out that with this
a bit flaky sometimes for example integration with IntelliJ is that can be
sometimes we can change the property and a bit flaky sometimes for example
sometimes we can't and we've got to go to sometimes we can change the property and
the fxml file to do it but fortunately its sometimes we can't and we've got to go to
really easy to flip between the scene the fxml file to do it but fortunately its
builds and the fxml file in really easy to flip between the scene
IntelliJ and just by matter of clicking builds and the fxml file in
on text in scene builder so it's pretty IntelliJ and just by matter of clicking
quick anyway and the two tabs are kept on text in scene builder so it's pretty
in sync and again as a backup you can quick anyway and the two tabs are kept
also use the scene builder stand alone in sync and again as a backup you can
executable if your prefer outside of IntelliJ also use the scene builder stand alone
now if you've got a window open down the executable if your prefer outside of IntelliJ
bottom which you shouldn't have now if you've got a window open down the
make sure you close it to give the scene bottom which you shouldn't have
builder as much room as possible within make sure you close it to give the scene
the ide let's start taking a bit of a builder as much room as possible within
look at the scene builder user interface the ide let's start taking a bit of a
now can click on the scene builder tab look at the scene builder user interface
again obviously the largest area is this now can click on the scene builder tab
middle content area that's the area we again obviously the largest area is this
used to build our user interface on the middle content area that's the area we
left-hand side up here to the top left used to build our user interface on the
we can see all the controls and elements left-hand side up here to the top left
that we can actually use in the user we can see all the controls and elements
interface now some of this should be that we can actually use in the user
familiar if we scroll down the list interface now some of this should be
there because we actually use those in familiar if we scroll down the list
various videos in this section there because we actually use those in
containers which we currently got open lists various videos in this section
the you know all the layouts and containers which we currently got open lists
other classes that will contain ui the you know all the layouts and
controls such as scroll pane grid pane other classes that will contain ui
and h box and next to click on controls such as scroll pane grid pane
controls that contains the controls such and h box and next to click on
as button and label underneath going controls that contains the controls such
down menu that contains all the UI as button and label underneath going
classes we can use to build menus and down menu that contains all the UI
also got a miscellaneous section classes we can use to build menus and
there it's really containing items that also got a miscellaneous section
don't really fit anywhere else like the there it's really containing items that
tooltip class for example and obviously don't really fit anywhere else like the
we've got these other ones shapes charts tooltip class for example and obviously
and the 3d section and we haven't really we've got these other ones shapes charts
covered those in this section because and the 3d section and we haven't really
they're more advanced topics but they covered those in this section because
are there if you want to start using them at they're more advanced topics but they
the bottom of the left hand side you can are there if you want to start using them at
see this area here that's separate from the bottom of the left hand side you can
the list of UI elements right now see this area here that's separate from
you can see it contains a grid pane the list of UI elements right now
zero by zero so this area displays the you can see it contains a grid pane
scene graph for the user interface in zero by zero so this area displays the
the content area if we switch back to scene graph for the user interface in
the contents of the fxml file by clicking the content area if we switch back to
on the text tab down here at the bottom the contents of the fxml file by clicking
we can see that we can see the grid pane on the text tab down here at the bottom
and IntelliJ always generates by we can see that we can see the grid pane
default now since the scene builder is and IntelliJ always generates by
displaying the contents of this file it default now since the scene builder is
of this fxml file it knows displaying the contents of this file it
about the grid pane so just to confirm of this fxml file it knows
that lets actually change the grid pane about the grid pane so just to confirm
to a border pane in the file in the fxml that lets actually change the grid pane
file so make that a border pane to a border pane in the file in the fxml
like so now we switch file so make that a border pane
back to the scene builder tab at this like so now we switch
point will actually get this error and back to the scene builder tab at this
sometimes this will work and display the point will actually get this error and
border pane in the scene graph area with sometimes this will work and display the
a warning icon but other times you'll border pane in the scene graph area with
see what a warning icon but other times you'll
happen here the actual exception the see what
stack trace for an exception and if you happen here the actual exception the
think about it you'll recall that the stack trace for an exception and if you
border pane doesn't support the h gap think about it you'll recall that the
and V gap properties so when the scene border pane doesn't support the h gap
builder tries to load the changes we and V gap properties so when the scene
made to the fxml file its builder tries to load the changes we
actually failing and we are getting the exception made to the fxml file its
so we go back to the fxml file and if you actually failing and we are getting the exception
remove remove the h gap and the v gap so we go back to the fxml file and if you
properties from the border pane as remove remove the h gap and the v gap
well as the alignment delete those all properties from the border pane as
out because obviously those three aren't well as the alignment delete those all
supported by border pane and if in fact out because obviously those three aren't
intelliJ was telling us about supported by border pane and if in fact
highlighting them in red that was the case intelliJ was telling us about
but now that we've done if we switch highlighting them in red that was the case
back to the scene builder notice now but now that we've done if we switch
that we see the scene builder user back to the scene builder notice now
interface and will see that the scene that we see the scene builder user
graph down here to the left hand bottom interface and will see that the scene
of the screen displays the border pane graph down here to the left hand bottom
and all its positions so let's actually of the screen displays the border pane
switch our layout back to the grid and all its positions so let's actually
pane back to text again I'm just going switch our layout back to the grid
to undo those changes go back to how it pane back to text again I'm just going
was by default before making those to undo those changes go back to how it
changes theirs our grid pane again and again was by default before making those
back to the scene builder again and you changes theirs our grid pane again and again
can see we can see the grid pane back to the scene builder again and you
showing again in the scene graph area can see we can see the grid pane
right at this point let's now a select showing again in the scene graph area
the grid pane in the scene graph the area right at this point let's now a select
by clicking on it now when we do so you the grid pane in the scene graph the area
probably saw that to the area on the by clicking on it now when we do so you
right hand side of the content area probably saw that to the area on the
displays the properties we can actually right hand side of the content area
set on the grid pane in my case and displays the properties we can actually
maybe in your case you might have to set on the grid pane in my case and
adjust the screen so you can actually maybe in your case you might have to
read all the various properties and their adjust the screen so you can actually
names i'm just going to expand it out so read all the various properties and their
I can read it all names i'm just going to expand it out so
that's probably enough to see what we I can read it all
need to see it in terms of the contents that's probably enough to see what we
on this right-hand pane which will call need to see it in terms of the contents
the settings pane we've got what's on this right-hand pane which will call
actually going to show up will depend on the settings pane we've got what's
whatever selected in the scene graph and actually going to show up will depend on
it's actually divided into three areas whatever selected in the scene graph and
under properties the first component it's actually divided into three areas
here will find the various properties under properties the first component
that don't actually affect how the here will find the various properties
controls are laid out within the pane that don't actually affect how the
for example you can see the gridlines controls are laid out within the pane
visible property doesn't alter the for example you can see the gridlines
positioning of the controls within the visible property doesn't alter the
grid pane now the layout section which positioning of the controls within the
you can get access to by clicking on grid pane now the layout section which
over here and opening that up you can get access to by clicking on
well that's got all the properties that over here and opening that up
do affect the positioning of the well that's got all the properties that
controls and it's here that we can find do affect the positioning of the
that controls and it's here that we can find
h gap and the v gap properties and that
the final section down here which I click is the h gap and the v gap properties and
code section and that's where we can the final section down here which I click is the
actually assign an fx ID and also code section and that's where we can
associated event handlers within the actually assign an fx ID and also
user interface element associated event handlers within the
alright so that's a bit of a whirlwind user interface element
tour of the basics of scene builder alright so that's a bit of a whirlwind
going to finish the video here in the tour of the basics of scene builder
next video we're going to start actually going to finish the video here in the
generating something creating a bit of a next video we're going to start actually
layout just to see how the tools work so generating something creating a bit of a
let's start working on that in the next layout just to see how the tools work so
video let's start working on that in the next