so we've now seen some of the controls that we can use to build our
UIs and then also the layout managers that manage those controls
for us but when we interacted with the controls in the controls project
that we work on last time we could see sometimes that the state of a control
changed but the application was unaware of this for example nothing happened when
we press the click me button and nothing also happen when we selected a
radio button or type text into the text field so we build a user interface so
that the user can interact with it and provide information or data for the application
to process and when we press the run button in IntelliJ then IntelliJ runs the
application we're working on and we type into the editor area
IntelliJ does actually syntax checking and colors the code to make it easy for
us to read so we can ask IntelliJ to open projects to show us the Settings
and dialogs etc so how does IntelliJ know what code to run when we press one
of its toolbar buttons so this is where events and event handling start coming
into play when the application wants to do something because the users interacted
with a control it will run a method that's known as the event handler
so what we gonna do here is write an event handler for a button just to see how this
works so I've created a new JavaFX project so do that as you would
normally do and I've used events for the name here so we are going to start by adding a button
to our grid pane and we go to the FXML and add a button with the text that has a
message and we are gonna placed it in the first row so lets go to the sample.fxml
...I'm gonna add this button so....
.....
...and when we run this the first time as you've seen in previous
videos we got a button nothing actually happens when we click the button that's because we
haven't added any event handling for that at this stage close that down so in other
words we haven't added the code its gonna make our application pay attention to
when the button is clicked now before we do we have to talk about the concept
of a procedural driven program versus an event driven program so console
applications that we've used primarily in this course prior to this section or
other ones that don't have a user interface are procedural driven so in other
words they run from the entry point of the application to the last line of the
code so it may be conditional statement that influence exactly which code is
executed but when the application runs we'll know roughly what order each method and
line of code will actually be executed but UI applications are event driven
and that's because the user dictates what code will be run and when and that's by
clicking on particular controls on the screen so to use an analogy let's think
about IntelliJ again so when we run IntelliJ it doesn't run it's code
from beginning to end and then stop executing the window remains up and the
application has no idea what the user i.e. us the programmers want to do with it so
one user might start by creating a new file but another user might open
the settings dialog someone else might create a new project the go to help then
rearranged the layout of the main window perhaps so IntelliJ will only close or
stop executing when the user tells it to by closing the main window of course by
going into file and selecting exit which no doubt you have done before
so typically the life cycle of a UI program is as follows you will run the
initialization code it will then build the main user interface and it will then
wait for user input when the user does something for example pressing a
button or typing something into a field
or perhaps selecting a menu item the application will run the code that handles
that particular event based on what the user has actually done what they have click or
what they interacted with the controller on the screen so its gonna run
event handler for that particular event when the user closes the main window
or indicates that in some other way that they like to exit the application any cleanup
code will run and the application will then exit at that point so in this lecture
we are interested in that part of the cycle where the application is waiting for user
input
so in JavaFX the JavaFX application thread also known as the UI thread waits for
user input so later on and we'll come back to this thread and actually the later
section of the course we will be going to threads in more detail but for now lets go
back to this example that we've got our say hello app button so when the user
presses a button or interacts with any type of control an event is actually
raise on the UI thread so in other words the UI thread notices that the users
done something and then check to see if any part of the application has
expressed interest in handling whatever the user is done for that or
interacted with for that particular control so if it finds something its
going to run the event handler the application has associated with that
event in our case what we like to do is we like to run an event handler when the
user presses the say hello button so the first step is to write the event handler so do we
put this method in main.java well actually no we don't do that this is
where the controller.java file comes in and I'll put it on the screen now and we haven't really
done anything with this in the past so far it has remained empty for pretty well
everything that we've done that in this section of the course but now we're at
the stage of needing to use it you probably recall that JavaFX was
designated with the MVC or model-view-controller patent in mind so
the control if you recall is the part of the application that handles user input
so obviously makes sense then that our event handlers are actually put into the
controller class for that reason so we've got the controller.java class
open on the screen now so lets add a method called
OnButtonAction and what we're going to do is when this method is run its just going to
print a simple message on the console so we're gonna go into the their and type....
...so if we run this now click on say hello nothing happens so
why does anything happen well its because we haven't associated the event handler with the button yet so
we created our code we've created our event handler but we haven't added that the
association so the button knows to call that particular method
when it's actually pressed to do that we need to go back to our FXML file and
select the button's on action property in the event handler so lets go and have a look at that
....so going back to our button we need to add.....
......and that IntelliJ is way of telling us that there was
actually a method their called on button clicked so if we run this now we've written the event handler and we've
associated the event click on say hello notice the hello is appearing on the console down the bottom
left hand corner of the screen so we've now got an association and that code has been
invoked each time the button is clicked so that is so we've now written that event handler
and we have associated with our button and when we press the button the UI thread checks to see
if there's an event handler for that particular event so in our case there
is so it dispatches that event to the event handler and as you saw on the screen our
method then runs so another way of saying that an application is interested in handing
our even is saying that its listing for an event and for that reason event
handlers are sometimes referred to as event listeners and you'll see that terminology
a lot an Android app development and I've talk about that extensively in my
android course so let's continue on now so go back to FXML I'm going to close the application
down and lets add a text field to our grid pane so we are going to move our button down to
the second row
and place a text field into the first row so I'm going to make the button now....
....
....and lets now change our event handler so that when the button is pressed
hello comma followed by whether it was typed in the fields is going to be written to
to the console so I'm gonna go back to controler.java to modify this event handler so lets do
that for the moment you can see its only printing hello but now we can reference the
text field in our code but actually before that will go back to our FXML
for the text field because what we're gonna do is change it now so whatever has been typed
into the text field is shown on the console so we are gonna put hello comma and whatever the content was type
to the text field so to do that we need to know how to associate and retrieve
the value in the text field so what we need to do is to go to the text field and we need to
assign and fx id to it so we do that by typing...and whenever you
want to assign it to I'm just gonna call it name field....so we've now got that ID and then we go back now to our controller now we've done
that and we're going to create an instance variable or field for this
controls ultimately we can actually retrieve the data out of it now the important thing
here is to make sure that the variable has the exact same name as the fx ID
which we have assigned so we do....
...
...and just being careful to make sure the ID matches exactly to whats in here and we will come back to
this particular error and why that's coming up in a minute so we will go back to the controller
code and now what we can do is on button click is we can put hello...
...and then we can get data basically from
text field by doing that
so if we try to run this and type in say Tim so it should come up and say hello
comma space Tim click on that we actually get an exception we actually
get a null pointer exception basically on line 9 and that's because we're going to
talk about why that is but that's the namefield.gettext which is
actually erroring out at the moment so we need to tell the Java Runtime that when
we run our application it then creates the instance of our controller class it
should have assigned the text field it created from the fxml to the
name field instance variables just to make that clear we've got a field we have created here
instance variable name field we've also got one in the fxml but at the moment
there's no real association with the two because they're actually separate things
so theirs one that's been created in the fxml and effectively one that's
been created in our controller.java but we haven't really associated that's
and that is what what we need to do we need to tell the JavaFX runtime that when
we run our application it creates the controller class instance of it needs to assign
the text field it created from the fxml to the name field instance variable
and the way we do that is we annotate the instance variable declaration we
the @fxml in the controller code so will come up here and we actually type it....
.....and accept the import
we just have a look at our fxml again notice that error disappeared and if
run our code now and type in something Tim you can see it actually worked on the screen now
....so when the JavaFX runtime instantiated our controller what it
did was it assigned or another term for this is injected the reference to
the text field into the name field variable so it matches fxml definitions
to variables by looking for exact name matches between the fx ID values
and the variable names so in other words you need to make sure that this is
type exactly so we could this one name field 2 and run this again
notice how that's now assigned now if we run that.....we actually get an error and that's because this name
here name field is different to this name in their but if I delete that notice how that is now
folded which we know the association their and of course when we run it actually works just fine so that said
it's also a good idea
to annotate event handlers its not actually a requirement but it really helps
developers who might read our code at a later time and then this includes
yourself as well and the reason for it is that they will be able to see at a glance the
method is an event handler associated with the controller and the fxml
so lets add the annotation to the event handler now so we come up here and we put...
...so I'm gonna end this video here in the next video we're
going to continue on we are gonna start looking at using parameters for event
handlers and will actually start by modifying this method actually the on
button click method to have a parameter and so we can understand a little bit more
about the events and so forth that are
actually passed to this method so let's get cracking on that in the next video