ok so let's now move on to the UI we're
going to start with the main window and ok so let's now move on to the UI we're
that's what's obviously defined in our going to start with the main window and
main.fxml file so i'm going to open that's what's obviously defined in our
our main.fxml now our UI is always going main.fxml file so i'm going to open
to consist of a table that occupies the our main.fxml now our UI is always going
entire window so an anchor pane or border to consist of a table that occupies the
pane layout would work so let's actually entire window so an anchor pane or border
use a border pane since it's simple to pane layout would work so let's actually
use and also worked with it before I'm use a border pane since it's simple to
going to change our grid pane to border pane use and also worked with it before I'm
so let's start by the deleting some going to change our grid pane to border pane
of these unused imports and actually so let's start by the deleting some
delete grid pane because we are about to change that to a border of these unused imports and actually
pane so added that again automatically so delete grid pane because we are about to change that to a border
change to border pane and remove the pane so added that again automatically so
import and we need to remove these change to border pane and remove the
properties that aren't appropriate for border import and we need to remove these
pane so we just got the basic border properties that aren't appropriate for border
pane defined now ok now since the table pane so we just got the basic border
as I mentioned will occupy the entire pane defined now ok now since the table
window let's add it to the center as I mentioned will occupy the entire
position so I'm going to add that so i'm window let's add it to the center
going to do a center.... position so I'm going to add that so i'm
and mentioned in the slide for the challenge we're going to do a center....
going to use a table view control now we and mentioned in the slide for the challenge we're
want to access that in code so let's going to use a table view control now we
add it and also assigned and ID to it as want to access that in code so let's
well so within the center table view and add it and also assigned and ID to it as
... well so within the center table view and
alright so define the table ...
columns using the columns element and alright so define the table
the table column class so will set the columns using the columns element and
text property for each table column to the table column class so will set the
the text that we want the column heading text property for each table column to
to display so start by doing that so the text that we want the column heading
this is under the table view to display so start by doing that so
I actually set this up like that so within this is under the table view
the table view itself I actually set this up like that so within
we're gonna have columns the table view itself
and within the columns you are going to have we're gonna have columns
a table column for each one for each one of and within the columns you are going to have
our fields it's going to be.... a table column for each one for each one of
... our fields it's going to be....
...then within that we ...
want to actually have a cell value ...then within that we
factory so do the first one and will want to actually have a cell value
do all of these and we'll talk factory so do the first one and will
about it..... do all of these and we'll talk
... about it.....
... ...
alright now because I wanted to take ...
advantage of data binding and have the alright now because I wanted to take
table automatically updated when a advantage of data binding and have the
contact is added deleted or changed we table automatically updated when a
needed to assign a cell value factory contact is added deleted or changed we
for each column and I've assign needed to assign a cell value factory
instance of the property value factory for each column and I've assign
class which is specifically designed to instance of the property value factory
be used with the cell value class which is specifically designed to
factory of a table column this is how we be used with the cell value
use data binding with tables ultimately factory of a table column this is how we
and we assigned use data binding with tables ultimately
self-explanatory labels to each column and we assigned
where the value assigned to the property self-explanatory labels to each column
field of property field value must match where the value assigned to the property
the name of the corresponding field in field of property field value must match
the contact class since this is the the name of the corresponding field in
field we want to tie in to each table the contact class since this is the
column for example for the first name field we want to tie in to each table
column we assign property the column for example for the first name
value first name column we assign property the
this is the code in line 13 which value first name
matches the name of the field in the this is the code in line 13 which
contact class come back to contact class matches the name of the field in the
theirs our first name field so i have to contact class come back to contact class
actually match for this to actually work theirs our first name field so i have to
via data binding now once we actually match for this to actually work
associated the table with our contacts via data binding now once we
list the table column will notice when associated the table with our contacts
the first name value of a contact list the table column will notice when
changes and we'll update the value is the first name value of a contact
displaying in other words you would have changes and we'll update the value is
to explicitly update the table ourselves displaying in other words you would have
which is pretty cool to explicitly update the table ourselves
alright so at this point let's try which is pretty cool
running the application to make sure alright so at this point let's try
that everything is working as it should running the application to make sure
be at this point so I'm going to run it that everything is working as it should
run our main we can expand a little bit be at this point so I'm going to run it
and we can see the table column heading run our main we can expand a little bit
and the text here that actually and we can see the table column heading
says no content in table now you saw and the text here that actually
that the column widths aren't ideal but says no content in table now you saw
we won't actually fix that right now but that the column widths aren't ideal but
the next step will be the UI that allows we won't actually fix that right now but
a user to add a contact so we need the next step will be the UI that allows
something to display in the table though a user to add a contact so we need
note that we could load some dummy data in our something to display in the table though
contacts data class just to get ourselves note that we could load some dummy data in our
started and that's often how i contacts data class just to get ourselves
recommend you do it when you're started and that's often how i
developing a real-world application but recommend you do it when you're
here we're just going to keep it simple developing a real-world application but
and start from scratch now we need a here we're just going to keep it simple
dialogue that allows us to provide the and start from scratch now we need a
information for a contact and a way to dialogue that allows us to provide the
get to the dialogue so if you go back information for a contact and a way to
now and look at the challenge image get to the dialogue so if you go back
for the application we're trying to now and look at the challenge image
generate we see that we've got a menu for the application we're trying to
there with a single item called contacts generate we see that we've got a menu
when we pull down that menu will also there with a single item called contacts
want an add item to appear so let's when we pull down that menu will also
add that menu in this item now i'm going want an add item to appear so let's
to put the menu into the top position of add that menu in this item now i'm going
the border pane so go back to our code to put the menu into the top position of
and I'll close this down back to our main dot the border pane so go back to our code
FXML so I'm going to add this at the top and I'll close this down back to our main dot
so we are actually going to put it in the FXML so I'm going to add this at the top
top part of the border pane top position so so we are actually going to put it in the
... top part of the border pane top position so
... ...
...top ...
position is going to be our menu but we do ...top
have one more step here we have to add position is going to be our menu but we do
an action handler to open the dialogue have one more step here we have to add
so let's do that add it here an action handler to open the dialogue
... so let's do that add it here
... ...
we'll get it showing in red to indicate ...
that we need to add that let's go ahead we'll get it showing in red to indicate
and do that i'll just take a copy of that we need to add that let's go ahead
that and go back to our controller and and do that i'll just take a copy of
we'll add the action handler.... that and go back to our controller and
... we'll add the action handler....
... ...
what I might do is click on add to be ...
consistent I did say its going to be add so what I might do is click on add to be
do add instead of new but either will suffice consistent I did say its going to be add so
alright now for this dialogue do add instead of new but either will suffice
that we're going to get to pop up when alright now for this dialogue
the show add contact dialogue that we're going to get to pop up when
method is invoked when the menu selected the show add contact dialogue
we need to write that fxml method is invoked when the menu selected
first let's create a new fxml file in the we need to write that fxml
same package as the existing UI classes so first let's create a new fxml file in the
i'm just going to because the main .fXML same package as the existing UI classes so
is in there i'm just going to add in the i'm just going to because the main .fXML
same place under sample new file will is in there i'm just going to add in the
call this one contact dialogue dot FXML same place under sample new file will
so for this one we're going to be using call this one contact dialogue dot FXML
a dialogue pane so that's going to be so for this one we're going to be using
the root layout now we also have to a dialogue pane so that's going to be
create a controller for the dialogue but the root layout now we also have to
we'll do that shortly create a controller for the dialogue but
let's just add the dialogue first so.... we'll do that shortly
... let's just add the dialogue first so....
... ...
...and we ...
also need to add some xml ...and we
namespace xml.... also need to add some xml
.... namespace xml....
... ....
... ...
ok that should be our dialogue so let's create ...
that controller as i mentioned as well ok that should be our dialogue so let's create
and that will also be in the sample package that controller as i mentioned as well
right click new java class and add our and that will also be in the sample package
contact controller if we go back there right click new java class and add our
to our contact dialogue . FXML it's now contact controller if we go back there
happy that we've got the controller to our contact dialogue . FXML it's now
associated alright so firstly with this happy that we've got the controller
dialogue we need to add some associated alright so firstly with this
instructions for the user in the header dialogue we need to add some
text area instructions for the user in the header
let's start by adding that... text area
... let's start by adding that...
... ...
...now below that we ...
need to several labels and fields all ...now below that we
lined up nicely need to several labels and fields all
so what we're going to do in that content lined up nicely
is going to add a great pane for the so what we're going to do in that content
dialogue panes content area so we'll is going to add a great pane for the
start with content... dialogue panes content area so we'll
.... start with content...
...then within ....
the grid pane ...then within
we need to add for each one of our the grid pane
fields a label and a text field so we need to add for each one of our
firstly first one will be label... fields a label and a text field so
... firstly first one will be label...
.... ...
....
... ...
....so that's our ...
....so that's our
... ...
ok so i set the grid panes v gap and ...
h gap properties to 10 now for each ok so i set the grid panes v gap and
piece of contact information you can see h gap properties to 10 now for each
I added a label followed by an input field piece of contact information you can see
the text field now i'm using a text I added a label followed by an input field
field for all the values possibly you the text field now i'm using a text
might have considered using a text area field for all the values possibly you
for the notes value but since we're might have considered using a text area
displaying each contact in the table we for the notes value but since we're
want the notes to be kept short and for displaying each contact in the table we
that reason I'm using a text field but want the notes to be kept short and for
in a real world application you might that reason I'm using a text field but
will limit the number of characters the in a real world application you might
user can enter into the notes field will limit the number of characters the
we might not display the notes in the user can enter into the notes field
table at all you know maybe the user we might not display the notes in the
will have to click something to see the table at all you know maybe the user
notes and that way we could allow them will have to click something to see the
to enter longer notes using a text area notes and that way we could allow them
obviously there's a multiple there are to enter longer notes using a text area
multiple ways that we could have obviously there's a multiple there are
designed the UI and you saw that I also multiple ways that we could have
assigned an fxml id to each field because designed the UI and you saw that I also
we need to get the values the user assigned an fxml id to each field because
inputs ultimately to be able to process we need to get the values the user
them alright so let's finish the video inputs ultimately to be able to process
here in the next video will start them alright so let's finish the video
writing the code for the action handler here in the next video will start
that will show this dialogue see you writing the code for the action handler
in the next video that will show this dialogue see you