so now that we've learned how to use layouts and controls to create a user interface
and also how to handle user interaction using event handlers we're going to put
this all together and build a UI application that someone might actually
use let's do some level setting first so this won't be a real world application in a
sense that we would sell it the UI is gonna be rough because we're not going
to spend time fiddling with insets spacing and layout in addition we won't do
any validation of the user input
we won't handle exceptions and we won't perform many of the other tasks that we would do in a real-world
application because there are strictly related to coding a user interface what
we gonna do is spend our time driving home what we've already learned and
introducing new concepts and controls in addition as well in a nutshell the UI
won't be pretty but it will be functional now the application code won't
be comprehensive and since this section isn't about application architecture will also takes some
shortcuts that we wouldn't take if your designing and coding a real-world
application with that in mind let's get started so we are gonna write a application that
will keep a todo list and when we finish the application is gonna look something like this I'm just
gonna bring up a screenshot on the screen here and you can see that we've got a to do
list so we got the ability to enter in items with the date that they are due
and you notice the color coding when things become close to being due or over due the
color-coding charges and the information is recorded and saved as
well so what you need to do is create a new project so I've created that I've
called it to do list so you want to create a new Java
fx project we're gonna change this package to something more meaningful I'm
going to do is refactor and rename it and I'm gonna call mine....
....
now you can of course call that whatever you like but that's just what I come up
with for this demo now the FXML file that we've got on board is for our main
Windows we are gonna call that main window so I'm gonna right click that refactor rename call it...
and if we double-click into main you notice that IntelliJ was smart enough to handle the
renaming so it took the change the refactor named main window and
applied it their which is exactly what we want in this case so gonna use a border pane
as a top-level layout so we are gonna switch back to our FXML file and change that so
lets go to main window we are gonna change the grid pane
to a border pane so we are going to type that in...and of course h gap
and v gap properties is no longer apply to a border pane so we need to
remove those and of course we also learned previously that an alignment property
doesn't work with a border pane so we remove that as well
now we just fix the closing tag their and let's go back to main now just before we run it to make sure
it works and will change the title instead of hello world well change that to to do list
because that is the name of our application and we will change size and lets make it 900 by 500 and run it quickly to make sure it
still works now from time to time when you're running programs this will come up now if it
does come up what we need to do is just go back to the run window
edit configurations I can actually go into main
but I will click on edit configuration and select main over here and notice how its still looking for the main
class sample.main so we just need to delete in this case the sample and change it
to what I've
called it....and notice IntelliJ is helping us as I type that...
....
you can see that is the one their once we do that and ok it...and
now when we run and it should work ok we got a base application working so that is good so we want to close that run window down
next thing we are going to add is a list view control and that is there to display a list of items that is what the list view does
does in our case its just gonna display a list of to-do items so we'll learn how to use the list
view as we go along
creating this application so let's add it to the left position on the border pane so
go back to our FXML main window and within the border pane so gonna add it to the left
hand side of the screen as you saw in the screenshot earlier so.....
then within their we are going to add... and just a closing and I'm going to
accept the import and just to confirm if you run this you can see now we've got this little list view area here to
the left hand side that is going to contain our to do list
or our to do list items so that's working good
now of course we want to populate the list view with our to-do items so what we need to do you need to
start thinking about our data model so what we'll do is we'll create a new
package called data models so let's go ahead and do that so I'm gonna come in to here so click
on the package name here right click new package I'm gonna type...
and notice how it has created this new package from their I am going to create a new class we are gonna
call it to do items so right click on data model new Java class.....now each to do item has
got a short description that will show in the list view so we need an instance variable
of type string and in addition we are gonna allow the user to enter more details about to do
item and that will also be a string and lastly we will also use a local date field
that will store the due date or deadline for the to do item as well so let's do that so
let's create these three field so the first one's is gonna be...
....
....that's the description that appear in the list view....
....
...so what we want here is local date so make sure you select local date from java.time....
....and I think we are getting an error because this is 1.7 and my packages i still looking at an older
version so right click the package and going to module settings project and make sure that is
set to 8 click on ok and that has now fixed that error as well we also need to create a constructor and also
some getters and setters so do the constructoir first and all three
fields are going to be part of the constructor and lets also add the
getters and setters as well.....so that we can use those elsewhere in the
program now we need to go back to the controller and start doing some work in
their so remember the controller also handles the interaction
between the user interface and the data model so we wanna go ahead and add....
....
...
....so lets add now the initialize method for our controller and that's going to
initialize our application with some sample data so....
...we talked about that in previous videos and lets creates some to do items
so.....
.....
...
....
.....
....and lets add several more what I'll do is another 4 so we got a few items to show in our interface
....
.....
....
...
....
...ok so we got our 5 items now so we are gonna create initialize the ArrayList that
we created on line 11 so....
...
....
....so really the exact data doesn't matter this is just placeholder data until we
coded the UI that will let the users add the to do item because that is what we are going to do in this application but
for now we want to be able to test the UI with some sample data so really
whatever whatever you put in here doesn't really matter it's just
their for testing purposes so we can now populate our list view so will start work on
doing just that in the next video