so continuing on we now want to populate our ListView so let's go back to the
fxml file we created in the previous video so we need to go back to
our list view set up on line 11 and we need to add an ID firstly so....
....so that we can access it from the Java
code that so lets go back to the code controller so what we need to do is create the
ListView so that we can access the XML that we just modified then we just added
the ID to so we are going to add that variable....
....
...and because that's part of our fxml we are going to annotate it with....
...so now we've done that we can now populate the list view from code and we can do that down here after
we've created the ArrayList and added the 5 items to it by typing...
...
of course is the list of items we created in the lines above this one then the
other thing we need to do is set the list view selection mode to single selection
and if you think about it doesn't make much sense to have more than one item
selected because we are only showing the details for a single one on the screen
in the right hand side to the right of the list view and the list view can be set to multi-select
and that would mean that the user could select more than one item at a time but
it wouldn't make sense in the application so we are going to set that to single and we do that by
typing...
...and you can see we got
multiple and single singles is the one we want I'm going to select that one so that ensure that
we can only select one item at a time so lets just run that and see what happens
..and you can see we got some items appearing on the left hand side in our ListView but its displaying the
object reference for each of the to do items which isn't what we
want obviously we really want to display each item short description in this window on the
right hand side the extended description as well by default the list view will display the result
of each items to toString method so what we really need to do to see that data in
the list view is override the to do string method int the to-do item class so that it
returns in this case the short description so lets just go ahead and do that so
get back to our to-do item and we are just going to override toString
and we only want to include in this case the short description because that's what we want
to see in the left hand side so I'm selecting just that and I'll changed all of this so
it hasn't got any headings so it's just going to return just short description which
makes sense here because its going straight to the ListView ok so now lets run that again and we should
see the short description now appearing we can now see our descriptions and
holding down shift and I can't select multiple ones I can only select a single one so that is
also working as well as which is good so lets go back to looking at the border pane
center position now when the user clicks on item on the list as you can
see here what we want to do is to display the selected items details and deadlines on
the right hand side of the window here so to do that we're going to use a text
area control to display the to-do item details now first one will add the control
to the border pane center position by adding a text area element in their so
lets go and do that
so under the left we are gonna add...
....
....and if run that you don't see much
difference here on a Mac but if your running on Windows you should see that
was white where it wasn't before and the reason for that is that it now contains an
empty text control area so lets populated the areas so we can just see for sure that it
is doing something and in terms of this we added to the center
position rather than to the right position because we want the details area
to use all the remaining available space in the window and if you recall from the
layouts videos the center position of the border pane is given all the
leftover space again sometimes that text area import you saw that their were some difficulties
for that automatically finding and import if you are finding the text area import is not coming
up you may have to type this line manually yourself so in terms of functionality
when the user selects an item to do item in the list we want to show its details in
that text area that we just added to our interface so we went ahead with the mouse click
event so we gonna do is add our handle click list view event handler to the
controller then we could have more than one control in a window that wants to
handle mouse clicks so we are going include something in the method name that
identifies which control this event handlers is for so lets go to the controller so
what I"m going to do is I'm going to call it....
...which makes it clear that we are working on the list view....
....so how do we get
the selected item well JavaFX control displays many items are backed
by a selection model and that's a class that tracks which item is selected in the controller
you can see on line 40 I used get selection model when we dictated that the
list view will only be able to be clicked and its single item at a time so this
is a classic tracks which are item is selected in the control this is the selection
model that I am talking about so we have to get the selected item for the selection
model so to do that we call get selection mode which we started using
on line 40 but then we call get selected item to retrieve the current item or
the selected item from the model so we will start up by just doing just that so...
...
...and notice how their is an items at items so if we had multiple
selections enabled you could use that to get all the items that were selected but in
our case because we've selected to use a single selection mode only we just need
to get to get selected item and that is going to return in our case the to-do item object that
is at that position in the list view and just to confirm its working lets start
by just writing out to the console so we will put....
...lets run that to make sure that it is selecting the right item so click on it now
we should see that in the console and of course we're not seeing that in the
console reason is I haven't widen up the event handler what I done is I've created the event handler set up
to code on line 44 but what I haven't done is gone back to the FXML
and told the list view to used the handler of the on mouse lick that I created so lets go and do that
so in the list view put...
....now
when I run that we should find that it works
click on an item you can see down the bottom left the selected item is my birthday
card pick up doug selected item is finished
doctors that is all working as you can see so that's good so now that we have done that we want to
change the mouse click handling so that instead of writing to the console we are gonna
add the details and the deadline to the text area and in the handle click live view method which I'll
just open up on the screen you can see we are outputting it currently at the moment now I'm just gonna disable that comment
that out so we need access to the text area on the screen to do that so before we
start writing from code in here will come up and assign that variable
its gonna be....and we need to go back to our FXML and assign
that ID so I'm just going to take a copy that to make sure that the I've defined the right name
looking at a text area we need to add the ID for that so...
...and I've got an error and that's because it should either be public or
annotated with an ampersand FXML and of course I didn't do that so I'm going back
there now and add the annotation keep it happy....and that should be happy when we go back
the errors disappeared so that's good so go back to the controller code now we are back to handle click
list view so what we need to do after we got the selected item which we got on
line 49 looking at this notice I had to cast this here so if I delete the cast here on line 49 we get an
error
and the error that is looking for a java.lang.object
but we wanted to be a to-do item so the reason that's coming up is because
we didn't specify a type when we declared our list view so what we need to do or should do
is go back to a ListView and mention which
type that we are using and we just used that.... and that then happily fixes that error on line 49 because
of course that's what we're using the to-do item so now we've done that we can come back here
and just type in....we should be able to
just do.....
...so now if we run that we hopefully find that we see the description as well as the short
sort of details so click on that you can see we are now getting the extended description on the to-do list so
that's great that's working nicely but we've still got some work to do we are only half
way their really because what we want to do we want to display the details as well as the deadline so what we'll do
is we'll add the details to a StringBuilder append 4 new lines to give some
space between it and the deadline and then append the string due to show sort of
date due and of course the deadline so lets do that now so.....
....change it to just use the item
get details so that is our first part of the string builder....
....
...
...so let's have a look at that and see if that works and you can see its working quite nicely so we got the
description the detailed description got some new lines the word due and the
date that was specified you can see that all working and changing as appropriate
that's great I'm going to end the video here in the next video we're going to
continue on and what we're going to do is sort of a look at enhancing this
output a little bit we are going to make the text bold for the due label etc and to do that we
need to start adding a v box and sort of positioning things correctly so lets do
that in the next video