now that we're seeing what the hellow
world application looks like out of the
box let's start changing a few things
we'll start with changing the title of
the window to Hello JavaFX
we can do that simply by changing line
14 instead of hello world we put Hello Java
FX exclamation basically passing
the string to the set title method to
invoke that change and moving up with
that now let's say welcome to Java FX
within the window itself we can do that
using code or by changing the FXML file
so let's change the application at the
moment so that it doesn't use the FXML
file at all
instead we'll start at doing everything
through code so I'm going to comment out
the fxml loader call on line
13 and then we'll add the code that'll
create a grid pane node and we'll set
the node as the root of our scene so to
do that we'll start here and start by
typing....
....
....then we keep our
other code in there our set title and
set scene etc so basically what we're
doing is looking at the FXML we're
setting the equivalent of these
attributes alignment hgap and vgap
but we're doing that in code instead the
alignment determines where the grid will
actually sit within the grid panes width
and height the set alignment method
takes a pos value a we're using
pos.Center so now that we've got a
grid pane that matches what was in the FX
ML file and we're adding it to our scene
as we did before when we run our
application now
we get the same result as before this
time without using the FXML file
alright so next what we're going to do
is add the welcome to JavaFX greeting to
the window let's go ahead and do that so
we're going to use the label control you
want to make sure that we add the import
for java.scene.control.label
if it asks for it I'm gonna type
...you can see javafx.scene.
control is coming up for me because
I've configured Auto imports and....
....
closing that off then....
....
...alright so you
can see now that on line 24 we've
actually added our label control to the
grid pane and we've done that by calling
the grid panes get children method which
returns a list of the children and then
we use the add method to add our label
control to the list we always have to do
it this way there isn't a shortcut we're
now ready to run the application again
so let's actually run this and confirm
that we can see the label okay we can now see
it says welcome to Java FX in the center
of the window alright so let's change
the color of the text to green now we do
this using the labels control set text
field method we passed the parameter
being the color that we want I'm gonna
go back and do that and add that after
the line that we've actually used to
create the greeting
object so it's....
...
....noting that the
import is javafx.scene.paint
make sure you import the color class if
you are getting an error dot in this
case green is the color we want so I'm
going to specify green there now we run
the application we can see now the text
is now showing in green alright so
let's now change the font and make the
font bold to do that we call the set
font method and set the
font to something we want in this case we'll
go with Times New Roman and I'm using
that because that should be available in
all systems and what we'll do is we'll
set the font weight to font weight.bold
and we'll also set the size to 70 so
lets actually try doing that just see
what happens and the way to do that is
on that next line we can type greeting
....then in parentheses we're
going to go....
....
....so make sure you type it exactly
like that with the capitals where
appropriate and I'm going to set the
font weight to bold as I mentioned by
typing...
....
....and that shouldn't be
a right parenthesis there we I'll get rid
of that and you can see now that
we've correctly set that and if you
run the application you can see that's
now quite large in fact the text is too
large for the window so we could reduce
the font size but instead let's increase
the size of the window by changing what
we passed to the same constructor so the
window Heights okay we just need to
change the width so let's just close this
down
so that's this argument here on line 33 let's
change that to instead of being three
hundred by two seven five let's changed
the 300 to 700 let's run that again you
can see now it actually fits correctly
alright so that's how to set things
manually with code so let's see how to
do the same thing in the FXML file so
first things first i'm going to
uncomment the previously commented out
loader so that's going to start using
our sample.fxml again I'm
going to comment out all these extra
commands that set the grid pane and then
set the various colors and then
added it comment all that out and just to
confirm when we run it again we should
now get an empty window again and note now
that the window is still wider but
because the welcome to Java FX message
is no longer there because we've commented
out that part of the code
alright so let's move over to sample.fxml
now alright so we want to start
by creating the label we want to add our
label control their we want it to be a
child of the grid pane so therefore we
need to insert the label element
anywhere between the opening and closing
tags so I want to go to the first part
there and just tab down a little bit and
I start typing label notice that
IntelliJ is being helpful here
select label there and what it should do
in this case you can see that it
highlighted the label import so that
wasn't there it should auto add that
import for us automatically alright so
next we need to type text being the text
attribute and set that to welcome to
Java FX and an exclamation mark there
add the closing tag there first if we
run that we can see we've got our
welcome to Java FX tag they're closing
that down again alright so now let's set
the text color and font so to set the
color to green we need to set the labels
text field property now IntelliJ will
offer a color drop-down when we go into
this value so back up here it'll be
after the text going to add....
....and notice how it's done
that for us quite helpfully and we can
either type it or we could just scroll
down to gray to green rather and choose
it from there and it will add it for us
automatically I could have typed that as
I said alright so that's the color next
we need to add a font and we need to do
that by adding a font child to the label
so we need to come down here
and type font...
....and then we need to
configure the font so....
....
...and we also want
....and I'll add
the closing tag for that automatically
so you can see there that the font
weight property doesn't actually exist
so this is one case where FML differs
from the way we do it in code so if we
want to actually get bold working then
what we do is we actually delete that
attribute I would change the font name
instead of Times New Roman that's gonna
be Times New Roman bold okay then we run
the application now we've got pretty
much the same application this time
using the FXML file instead of the
manual controls that we added in code
previously so when you define a UI
control using FXML we can still change
its properties in code
in fact that's often what we want to do
for example we might want to enable or
disable buttons to respond to a user
action and we'll cover how to work with
controls to find in the FXML in a
later video so as you see we can
create the UI by creating the UI
controls through code and setting their
properties and then adding them to the
appropriate parents or we can do it
through FXML for the rest of the JavaFX
videos we're going to focus on the FXML
route FXML forces us to separate our UI
from our business logic and data so it's
considered best practice to the definethe
UI through FXML as much as possible
an exception would be the stage that the
JavaFX runtime constructs for us and
passes to the start method we have to
work with it in code now another good
reason for our defining UI controllers
in FXML rather than through code is
that if we decide we want to change how
a UI control initially looks we don't
have to touch a line of Java code when
we added the greeting to the window and
change the color and the front of the
label using FXML you'll note that we
didn't have to touch the main Java file
so one of the strengths
JavaFX is that we can change how an
application looks without changing a
line of Java code which is something we
couldn't do with swing defining
the UI using FXML is also similar to
how UIs are coded in other
applications such as Android and Windows
the concepts are the same so
understanding and using FXML for our
Java FX applications will give you a
head start when it comes to learning how
to code other types of applications but I
wanted to show you that you can create
UI components using code but again we're
going to stick with FXML whenever
possible from now on
alright so that's been a brief
introduction to Java FX let's end the
video here into the next one we'll take
a look JavaFX layouts see you in the
next video