ok so let's now implement a way for the user to delete items by pressing the delete
key now when the user selects an item and presses the the delete key we
could do exactly what we do when they right click and select Delete from the
context menu and that's probably the easiest way to do it so let's do that
now so to achieve this we want to start listening for when a user presses a key when
the list view itself has got focus so typically a controller is given focus when
the user clicks on it or clicks within it now for example when the user clicks
within a text field it would be given focus when the user presses a key a key event
is raised and a key event handlers associated with the text field will then
be called and if their are key event handlers associated with other controls they won't
be called at that point so the focus determines which controls event handlers
are called when an event is raised so to associate a key event handler with a list
view what we need to do is set its on key press property in the fxml
then we'll call upon our event handler once that is done so lets go to our fxml
for the main window because that of course is where the list view is and
on here on line 26 we want to add that so we needed an ID which we've already got
there we need to put the set the on key press property and call our method
which is.....
....
.....
....
.....if the selected item isn't null what we need to do is check to see if
the user has press the delete key so let's go ahead and add the code for that so...
....
...so once that's done if they have pressed it so we have determine
that we got a valid selected item and they have pressed the delete key we confirm that
then we can call the delete item passing the selected item which was the
item that is currently beyond
that we have selected on the screen so let's try running to see if it works so first we should be able to
click on some things and do a right click that still works but now if I come down
here say to this one here and press the delete button del button on my keyboard we get
the same pop up dialog which we would expect for delete and note that in that case
that's the equivalent of this one so this one's got an extra option the
context menu press delete then it brings up the dialogue but when we actually press Delete of course
we get the confirmation dialog straightaway and just confirming if I delete
that by click ok the items get deleted successfully
and just incidentally those confirmation dialog if I select it again on the screen they
can sometimes irritate users and the thing also the user can develop a
blindness towards those dialogue that often pop up
in other words they just stop reading them and click OK very common to see that
and what you probably want to do in a real-world application will have a way for the user
turned off the confirmation dialogs now possibly by offering a settings a
setting rather in the Settings dialog or in a Settings dialog
but we won't worry about that right now because at this point we got a functional UI and it's not
pretty and we certainly wouldn't leave it like this but learned quite a few things not the
least is how to layout a main window populate a list view control handle
selection and key events create menus provide a cell factory and even
create context menus in addition to that we've also learn that using data binding means we
don't have to explicitly update the UI when the data backing control changes
and that's obviously a good thing and the other good thing to note is that everything
we've learned in relation to the ListView control can also be applied
applied to controls like the table view the TreeView and the tree table view
and these all display data collections so let's do a few more enhancements to our UI
just so that we can see how to do some other common tasks what we gonna do
is we want to start by adding a tool bar to our application now its only gonna have the new
item on it but that's ok because it will still serve as a good example how to
add a tool bar to an application now since we want both the menu and the toolbar
to display at the top of our application we are going to move our menu into a VBox so let's go back to our FXML
looking at implementing that change back to main window we got our menu here so let's go ahead and put the menu bar in a Vbox and move the menu itself
into the Vbox....
now we are gonna add our tool bar
below the menu because that is a conventional position when both exist we are
gonna layout our toolbar items within an Hbox
so.....and within the tool bar
we want this new item to be a button and the good news is that we can reuse the event handler that
we have coded for the new menu item now there isn't any code in the event handler the
assumes that the event was raised so the handler doesn't care enough in other words whether
the user click the Menu Item tool bar item will perform some other action and
speaking about that that is a really good idea to always keep in mind with this sort of
thing when you are coding event handlers trying to make them as generic as
possible so in other words always be thinking about reusing that code in some
way so to add the button to the toolbar we add...
...
....so that should be all we need to do now to add the toolbar
until we have re-positioned things so they both appear on the screen you can see we still got our file menu
it should still work which you can see we've now got our toolbar I can click on new and that
does the same thing that also brings up the dialog box so that we can add a new
to-do item that's great and it's working but we usually display icons on the
tool bar so let's go back and change our button to display an icon
rather than the text and what we do is we used the same icon jar file
we use in the JavaFX controls lecture I'm gonna close it down so let's go ahead now and
add that same jar file to the projects class so we can go back in a couple of way we can go to file project
structure and select modules and click on the +
button down here and click on jars or directories
and what we wanted to do their is navigate to the folder that contained our
earlier project which is the JavaFX controls lecture so in my case i believe i called
it controls so scroll up here
controls if I click into that project this is the file we want their
jlfgr-1_0.jar so select that click on ok and IntelliJ pops up and asks what's
inside the jar file we select classes even though the jar contains icons and that's
because certain classes adds the jar file to the class path so that those icons can be
basically found by IntelliJ and that is what we want to do here so click on ok
and you can see its has been added successfully so clicking ok will close the dialog so I want
to do is now change it so we're using that graphic so come back here
to button leave the text new for now but we're going to open this up here so we are gonna remove the
closing tag for now and I'm going to add a section in here we are gonna add...
...
....
...
....and the other thing
here is with the text now actually let just run it first we get this error because of the import and its having a
problem with this reference on line 27 to graphic
and that will probably fix if I close the button tag so.... that fixes it like their because
it was obviously part of the that was obviously associated with button so if we try running it again now
and incidentally that's normal I think you saw in previous video IntelliJ complains
that it can't find the icon we found that in that previous example so long as you type it
exactly like this it will still work at run time that's more or less an IntelliJ
bug their so we run it again and we can see its now working we've got our icon our new icon we've also got the text as
well and I think we should remove this text to the right of the icon but if we do we
move it the user might not understand what that button is for even though its
probably fairly clear that its a button to create something new what we should
probably do in its place after we removed the text is to add a tool tip that pops up
when they hover their cursor up the toolbar button to tell them what the
functionality of the particular button is and lets close it down and do that
button itself has got a tool tip property so let's go ahead first and remove the
texts property...
....
...so when we run that we get an error and
if we scroll up that is the error their
we get unable to coerce add a new to do item to class Javafx.scene.control.tooltip
now this is one case where the obvious way isn't the way to do it and
it's where IntelliJ can lead us astray so what's happening here why we
are getting that error its because it looks like we've done the right thing we just introduced
the tool tip property and set it correctly why it isn't working well the thing is the
buttons tool tip property expects to be assigned an instance of the tool tip
class not a string then we run the JavaFX runtime loads the FXML it's
going to convert the value we've assigned
which is a string into an instance of the tool tip class it obviously
can't do that because they're separate classes and consequently the reason why
throw an exception now what's interesting here is that IntelliJ didn't complain
about the FXML and actual fact that suggests tool tip when we start typing our button
element if remember I just delete that briefly tool tip so IntelliJ
it telling us giving us a tip that's its the right thing to type put it back and the reason for that it
knows that tool tip is valid and does that from inspecting the button class that
there is a tool tip property in there but for some reason didn't understand that
the tool tip property expects a class and not a string now you may have noticed some
FXML elements begin with a capital letter and others don't
with generalyl start with the capital letter when defining a class we start with a
lowercase letter when referring to a property within a class for example
let's take a look at the button element and you can see that button on screen
on line 21
is a class and so begins with a capital B text is a property of button
which we've now deleted but its obviously started with a lowercase T previously and on action is another
example is still on the screen there start with the lower case letter and
expects a method name and graphic is also a property of button that we've used to
surround our image view in and that expects a Node instance for its value
and we can't directly assign it in our case of course you can see on the screen on line
23 we assing an ImageView and the ImageView image properties expects the instance of the
image class and fxml allows us to define without having to put up with an image
tags so FXML seems to be inconsistent about this in other words sometimes when
assigning a property that takes a class instance we have to write the definition
within the properties tags
sometimes we don't as in this case so the image class has a URL property which was
set to the path for the icon that we want to see there you can see that on line 24 so
it's all this mean well it means we have to assign the tool tip for our button in the same way
that we assign its graphic so we are gonna remove the tool tip from this line here...
...
....
so let's run that and see that it works you can see its now working we haven't got
an error anymore if we hover over it theirs our tool tip on the new to do item
obviously if we click its still working so I'm going to finish the video here now in the next video let's look at
enhancing this UI in some other ways see you in the next video