JavaFX Java GUI Tutorial - 32 - Controllers in FXML Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

alright guys so now that we know the
basics of how an FX ml project is set up
in structured we can hop back in here
and start learning what all of this code
actually means now since F XML is based
on the XML language the first line of
code that we should have is this XML
declaration pretty much saying what
version we're working with what type of
character encoding and this is pretty
much just a standard stuff and I say
that we need it but in fact we can
delete this and it's going to run fine
and that's because by default if it
doesn't have this line of code right
here is just going to assume that you're
working with 1.0 and utf-8
so you can delete this if you want to be
explicit you can put it in but since
we're just using the defaults then I'm
going to go ahead and leave it out make
it a little bit cleaner now let me go
ahead and show you guys alright so
without you know learning anything any
specifics at all just looking at this we
can already see basically what's going
on we have a V box of vertical layout
and inside we have two items a label and
a button alright looks cool so anytime
you want to use any of these items a
label a button this layout we first need
to import those classes so just like in
regular Java whenever you want to use
something you of course need to import
it we have to do the same thing in F X
ml now whenever we're importing
something we can do so in one of two
ways so let's say that we wanted to
import the button so we can use buttons
we can explicitly type out button right
like here and it looks in this package
for a class called button or if we want
to be lazy then we can just use this
asterisks and this means import every
class from this package in other words
import every control in a single
statement and this imports every single
layout so we don't have to type all the
classes manually so that's how we can
actually import classes to use them and
once we have them imported we can
actually add them
to our layout now just like Java has
properties whenever you want to add a
property to let's say this label
probably shouldn't have closed that for
example the text the label and the
button have a property called text that
you can of course set you can add it as
an attribute so write the attribute name
and set it equal to whatever value now
there's actually an alternative let me
clean this up alternative way that you
can my freaking mouse fell over again my
vertical mouse it's like a foot tall
alright I'll show you guys another way
so you can either add it through
attributes or you can embed the
attributes as separate tags OMG are you
going to autofill for we are not house
alright so you can add another label be
like okay this is label two now if you
run this check it out
so again this and this accomplish the
exact same thing
however this uses the attribute syntax
and this just adds another element
inside and actually like the first one
because it's a little bit cleaner so
this is what I'm going to do most of the
time this syntax right here now as I
said the brains behind every single F
XML file is a controller now anytime you
want to make a controller or link this F
XML file to brains behind it you use
this attribute right here now every
single F XML file can only have one
single controller that's an important
part that we need to remember we can't
add two controllers to this every
template only has one single controller
so of course use FX controller the
package name which is in this case
sample and whatever the class name is in
this case controller alright sounds
simple enough so now let's actually
learn how to use this to handle user
interaction and for this first example
I'll just say whenever they click this
button
we'll just you know print something out
on the screen so in our button the first
thing we need to do is we need to give
it an ID so this ID can be used by the
controller to pretty much link these
together so it's going to reference this
ID and it's pretty much a variable name
I'm just going to name it button and now
that we can have a reference to button
we can just call some math method like
arm I'm gonna like handle button click
or something so handle button click so
in other words I'll show you guys what's
going on so in your controller what you
can do is you can now have a variable
called button in recourse if I highlight
that there we go if we import button
alright so whenever we start our F XML
project what it's going to do is it's
going to look through and find all of
the IDs and we found one ID called
button so then it's going to hop over to
to the controller and it's going to say
ok so you have a variable called button
I know that whenever you use this
variable or your controller that it's
pretty much referring to this button
right here so now we can say something
like button set text and it's going to
set the text of this button they're now
linked together now whenever you want to
use a button to perform in action or in
other words call a method you need to
call on action and the value of this is
pound sign whatever your method name is
so now if we were to do something like
public void what I call it like handle
button click it's out I called it copy
that make sure I got it right alright so
now we can have a method right in here
to handle the button click and of course
whenever you do that our error goes away
so that's how you tie items in actions
to your controller so now we can just
say something like a system
out print line and we'll just say like
God run some code the user doesn't see
since this is going on our controller
and actually since we have a reference
to button remember this is referring to
the button on the user interface we can
just say something like set text equal
to what do we want the text to say on
the bottom like stuff um touching me
kind of weird and perverted but oh well
so now if I run this you got my old one
to run in and start up a new one check
it out we can now say I love bacon
whenever we click it this code runs
behind the scenes so you can do
something that the user doesn't see and
also through your button or reference
you can do something like change the
text in other words change the user
interface so that's the basics of how to
use a controller again right your
controller right here so it knows what
class is supposed to look to whenever
it's looking for IDs the ID of any item
refers to the variable and the action
refers to what method you want to call
whenever an action is performed on that
item simple enough so yeah for now
thank eyes for watching see you next
time