so in the previous video we added our tool tip that popped up automatically
when we hovered over the toolbar button for a few seconds
so the cool thing about that was adding the toolbar as well as the button adding
both of those to the UI only requires us to change the fxml we didn't have to
touch a single line of java code which is pretty cool
so let's just move on now and look at enhancing our UI in another way the
right now we're coloring items in the list view based on their deadline values
instead of this or perhaps in addition to what we could do is display the items
in the order in which there due so that items due sooner or near to the top of
the list view and items due later are near the bottom
now javafx has got a sorted list class that will make implementation of this
you know really quite easy because our list contained to do instances and not
strings
what we'll need to do is provide the sorted list with the comparator now the
comparotr will tell the list how the items should be ordered
so we need to write the code for that to happen the sorted list will call the
comparators compare method when it's comparing one item one to do
item with another so in our case we want the comparotor to look at the deadline
of the two instances when it's comparing the two instances that it is comparing i
should say so to do this we need to open our controller class because we could be
making all the changes in there so we don't actually have to change or touch
the to do data class at all to implement this
so go back up to the code in the initialize method we're going to
come down to the code just before the first set items to do there to do data get
instance.get to do items just hear on line 69
now we're still going to use an observable arraylist to store the to do
list items but instead of using it to populate the list view what we'll do is
we'll wrap it in a sorted list instance and then use the sorted list itself to
populate the list view once we've done that any changes to our observable
arraylist
will be reflected in the listview just as they were before
and what's more the item their in the list view will remain sorted so let's
add the code and see this in action
so start off creating a sorted list so...
....
we need a couple of parameters here the first is the observable array list that
contains our to-do items and the second one is gonna be the comparator which
will write as an anonymous class and in order to do that then we'll have to
override the compare method
so first parameter to....
....
.....and press enter and it should implement the method for
us
you can see it's done there...
....
so in terms of how this compare method works we pass the to-do items to
be compared as the parameters o1 and o2 as you can see in the compare method on
line 74
so this has to return a negative value if object o1 is considered to be
less than object o2 so it must return 0 if the two objects are considered to be
equal and then it must also return a positive value if object o1 is
considered to be greater than o2
so usually we return negative 1 0 or 1 depending on the object that is pass
to us so in our case o1 and o23 again our to-do item drop objects and we want
to compare their deadline values the deadlines if you recall are instances
of the local date class so i'm going to use that class as compared to method to
compare the two deadlines
now since that returns a negative value when the first date is less the
second date 0 and the two dates are equal
and a positive value when the first date is greater than the second date
it actually does exactly what we want so our comparators compare method can just
return the value that they compared to method returns when we compared both our
dates
so to write that code it's really just one line of code changing the return
line to be o1 which was the first argument....
....and that does all the work of
using the local dates
compare to method and we return that in our compare method so that will
come
we've got away now to order our to do items by the deadline date
so let's run that and see what happens and everything seems to be exactly the
same but that's because we're still populating the list view using the
observable arraylist so let's look at changing that now so i'm going to close
it down
moving down to this line here we're currently doing an on line 79 going to
commit that out now
instead what we're going to do is put....
....
....and let's have a look
run it and see what happens we should now see that they're ordered in the
right date we can see in the first entry on march 23rd april
20 22 25th may 10 and obviously that's in order now
as you can see which is good right down to the last entry in may the 23rd
and just confirming that if I re comment in line 79 again comment out our
sorted list line and run it
we should see that the order was as it was before we now got an entry in
april may April March so clearly the ordering is working nicely
we closed it down and comment it again and put back our sorted list which we're
going to leave in
so that's good we can now see that our to-do items are now sorted with the
ones due sooner at the top and the ones due later at the bottom
so lets run it we did see that it was working let's just add a new entry just
to be sure that this is working as we think it should work so we got the first
entry there on march 23rd that's the is the earliest entries that I've got on file
i'm going to set a deadline prior to that date and just see what happens...
....and i'll just make it earlier as I said
I will put it to January the 13th
click ok and you can see immediately that's been added to the top of the list and
it done it automatically without us having to write any code beyond what's already
there so let's just add another item and we'll add one would lets say around...
let's add one on may 19 in my case I've got may 18 and may
19 so let's check that so we'll call this one....
....okay
you saw that got out of there so we got the 18 and the 17 and 20 may 19
that's clearly working which is good
alright so let's delete an item so what we do is say will delete
we got to the 18th lets delete that one
you can see our order is still being maintained so that's good
so when we first thought of this enhancement maybe you thought that you'd
have to add a lot you know like a ton of code that would manage the sorting for
us and keep the list sorted when items are added and deleted but as you can see
here that's clearly not the case
so it's always best not to reinvent the wheel where possible
so we're going to try something new what you should really do is check the javafx
documentation will search the internet to see if javafx has got classes already
to support what it is you're trying to do in this case is as you saw it was really
a simple matter of wrapping our data
in a sorted list encoding comparator and everything else just work for us
so sorting is the type of functionality that we might offer us an
option
we could also give the user you know the choice of sorting based on a
short description perhaps in which case would assign a different comparator when
we actually created a sorted list
that's another option we can offer the user i should say is
filtering
so let's actually go ahead and try and do that so let's add a toggle button to
the toolbar and that's going to let the user hide to-do items that aren't due
today so let's start by adding the toggle button to our effort fxml file
.....so let's add the toggle button to the toolbar as i mentioned and
we'll add it after the button
so let's go ahead and do that.....
....
....ok so that's our toggle button and you saw that i gave it the
text and when it's selected we're going to show items with a deadline of today
when it's not selected going to show all items now in a real world application
the button would probably display an icon but for this example just stick
with text will also be a good idea for the toggle button to have a tooltip as
you can see a valid one
and we could have the tool tip actually change depending on the state of the
toggle button but to keep things simple what I've just added is the text for
both up and down and the user can read that irrespective of whether they've got
the button pressed or not
so to implement this we need an event handler that adds or removes the
filtering when that toggle button is pressed
so let's actually add our ID to our
toggle button....
....
so we're going to put a hash....
of course we have written it yet so let's go back to our controller and we
need to add an instant for the toggle button first so we will add that
at the top and will annotate it as well....
....
...
....
.....and we need some generic code we need some code
if the button is selected and then we have an else if the button isn't selected
and based on either one of those conditions we need to perform some code
so the skeleton code will be if....
....
...so I'm going
to end the video here
the next video we'll come back and we'll implement this code to filter items
depending on the state of the button
see you in the next video