so just as a recap we've now got our program working with buttons being
enabled and disabled so I'm just running the app again obviously the buttons are now
disabled by default if we type something in you can see they are now enabled they actually work
and if I delete the content the button automatically get disabled in additionally if I use white space
characters like a space the buttons don't get enabled because we're specifically
trimming the contents before checking to see whether something in their so that is all
working well
close that so let's continue on a bit now and what we're going to do is going
to add a checkbox to our UI so go down here and put it below our button I'm gonna put
it on rowindex 2 so....
...
....
...and we need a col span of 2 because we got some text their so...
....now we could actually add an event handler that
listens for whenever the check box is selected or deselected but we wouldn't
typically do that for most controls we really only care about the state of the
control when the user indicates that they finished inputting data
typically they do this by pressing the ok button on a dialogue or perhaps
pressing the Save button on the toolbar or something along those lines so at
that point the event handler for the ok or save button would gather the state's
of all the controls so when we have a checkbox on a dialogue we only need to know
if it's selected when the user presses the ok button because that's when we'll
actually process the user input so we don't care how many times a user checks
and unchecks check box
up until that point
now of course like anything there are exceptions to this and you know sometimes when
the user clicks a checkbox that might change you know which radio button is
selected or perhaps it will change the position of a thumb on a slider and if that's the
case we want to change other parts of the UI like for example the user
could be using a slider to indicate how many tickets that want to buy and
the UI will update the total cost of the tickets when they let go of the sliders thumb so there
are scenarios where you do want to do that but most of the time we really only care about
the state of some controls when the user presses ok save or buy or does something
else that essentially means that I'm finished you can go ahead and process the
data now but with that said we are learning about event and event handlers
so we're going to listen for when the user checks and unchecks our check box
now as you may have guessed from the checkboxes text we also look at the
state of the check box when the user presses a button so if the checkbox is
checked we're gonna clear the text field after we printed the hello or bye mesage and if
it isn't checked we won't clear the text so first we need to do is go back to our
controller and we need to basically work on the event handlers so lets do that so
come back in here and first add our check box so....
...and notice how I selected the wrong because
I typed box with a lowercase b and of course it should be uppercase so I'm gonna undo
that change and come back here and change that to checkbox this is why
its often very important to check your imports to make sure you're selecting
the right controls and you can see basically it just got JavaFX in the package
name somewhere you need in the right place so that's the one we want so I'm
going to select that one and call this one....and then call our event handler for this
one....and the other things I need to do is put annotate it with
....
...ok so lets go down and write that method so the method is going to be handled change and all its gonna do
is print at the moment whether the check box is selected into the consoles so....
....
...is the method to determine whether it is selected or not
and put..... and the next thing we need to do is
switch back to our FXML and we need to assign and ID to our check box so that the
relationship between the control code and the fxml is set so
that our event handler can be invoked so that's going to be.....
....and notice how conveniently IntelliJ looked in our
controller code and found that so....
IntelliJ's is really clever for things like this it just saves you a lot of time and making sure that you
know you associations that you typing are actually correct which is great and
the other thing of course we need to add in addition to that is our on action
what event handler we want invoke when there is an action so put...
...so next
we are going to update our buttons event handlers so that actually checks the state of the check box and again if
the checkbox is checked
we're going to clear the text field after we print the hello bye message on
the console so lets go and do that back in controller and of course it's in on
button click method so gonna leave the code in here that actually prints out a
message hello or bye depending on which button was pressed but what we also want to do after that
will do a check...
so if it is checked in other words then we are just gonna do....to clear the
contents of the text field
so lets just test our code and see it is actually working so I'm gonna run this is and their our
example there's our checkbox on the screen so what I'm going do first is we are gonna leave the checkbox
unchecked and if we typed Tim....
click on say hello you get the message and nothing's changed the text remains in
the text field as you can see there and next we will check the checkbox clear that field
and say hello and bye click on that Iand noticed that we got the message to
say that the checkbox is checked so our event handler worked and now if we click on say hello
we notice the text field was actually cleared so the code is obviously working but did you
notice that we've now got a bug in our UI and looking at the screen can you guess
what's actually gone wrong what happened is our buttons is now
enabled but there's nothing in our text field we've written out previous code
that if the contents of the text field was empty then the buttons will
automatically be disabled so as a consequence what we really need to do is
go back to the event handler and we also need to disable the buttons when we
clear the text contents so lets do that and down here after the text fields cleared we
also want to do.....
....
...so that should now work and actually disables the buttons after the field
has been cleared so lets run that again now so again we will tests this type in
name or type anything click on say hello we get the message but the text field wasn't cleared so that's working
and now if I click on the check box click on say hello you can see that not only is
the text field cleared and but now the buttons are correctly disabled now this really bring up an
important point in that when you're coding the user interface UI you really
have to consider everything the user can do so we have to actually write a lot of
code to handle all the expected use cases to prevent and handle all the
possible error
cases and also of course to verify user input testing a UI can be a
quite challenging and that's because everything the user could possibly do
has to be tried and users can be quite inventive and do things we never really
expected them to do so never ever assume that a user will interact with a UI
in a certain way or even in a specific order so you never think I don't have to
worry about that because a user would never do it because believe me speaking from
personal experience some way out there will be user who will do that very thing
now the bug we just fixed wasn't a bug in a sense that our application would crash
or process data correctly and so it's the sort of thing that we really want to
fix in a real-world application so we've seen how to process user interaction and
input and we've listened for the events were interested in and when an event
is raised our associated error handler will run but at this point we've really
only scratched the surface of the events that controls can handle so every
control has a set of events that can raise when a user interacts with it so do
check the documentation for a control to find out which events it can raise and again as I've
shown you in previous videos you can find the documentation for a control by
searching for javafx 8 followed by the controller name in your favorite
search engine so just as an example I'm gonna open a browser up and if I type......
...we get the documentation their for the checkbox for JavaFX and in their you can research that and
find out what methods and capabilities are their and for the various types of events that
a particular control will support now we can't really leave the topic of events and event
handling without talking a bit more about the UI thread so in a previous
video I discussed how the UI thread sits and waits for user input so when the
user does something the UI thread sees if the applications listening for that
event
and if so it dispatches the event to the event handler now the event handler itself runs on that
the UI thread so what that means is the while an event handler is running the
user interface thread is busy and it is no longer paying attention to the user
input in other words the user won't be able to interact with the UI while
that's actually occurring and if he/she tries to do anything at that point the
application won't actually respond and more than likely if you run a program in the
past you had the experience of having an application freeze up and no matter
how you mash a button nothing happened and then suddenly the application became
responsive again so when that happens that's could be probably more likely due to
your system being too busy but it could also have been due to an event handler that has taken
too long to run and consequently the application is basically in limbo
until it was finished so lets actually see an example of this so what we are going to do is go
back to our code close this down so disconnecting and close the program down and
what we're going to do is actually add some code right here before we actually
do a check for our check box is selected so basically we're gonna put
thread to sleep for 10 seconds after we print a message to the console so what this
is going to do is effectively show you what will happen
and how the UI becomes unresponsive so we are just gonna put.....
....
...now exceptions I'm not gonna go through here there is actually a section on the
input-output section itself does talk about exceptions in details but just for now
think of an exception as a way for you trapped an error and you can go back to input
output section and check out the videos to find out more about exceptions
essentially what we're doing here is we're actually putting the user
interface UI thread to sleep for 10 seconds so we can simulate
this sort of lockup situation and you could see that we're writing it we are putting the
code in our button event handler so we need to click a button to actually get
this code to invoke so lets run the app and type something in so we can enable a button so now if I click on say hello and you notice at the moment
now we've got the spinning globe because I'm on a Mac but if you run on Windows
or Linux machine basically we can't do anything so its just sitting here absolutely doing
nothing and now we finally get our process back again and we can do the
same thing again and now I can't really do much I can move the window around a
bit but I can't interact too much with the controls or do much of anything at
all depending on the operating system that you're running on you may
actually have to kill the application
the bottom line here is that this is actually a bad situation to be in you can
see it's still causing problems there and we got ourselves into a bit of process here where we can't
actually accept we can't completely the event and that's because the and you can see what's
happening now I've got a full screen that's because I double clicked which is the
on a MAC is way to open and close the screen so eventually we will get
control back and we can closed it but you may have had to actually end the task if
you're on
a Linux machine or Windows machine the bottom line here is no matter what
actually had to happen this is obviously a bad user experience and what we gonna
do so I'm gonna pause the video here now and in the next video will continue on
talking about threads and why its really important to make sure that when we're
processing things in our event handlers that we want to return back as quickly as
possible to prevent situations like this happening so I'll see you in the next
video