JavaFX Java GUI Tutorial - 19 - Editable Tables Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

alright guys so now that we know how to
set up a simple table I want to show you
how to do a couple cool things to it
specifically how to add and delete table
rows so right now we just have something
like this and we can you know sort the
columns look at all of our stuff but
what if we wanted to add a new row well
obviously we could do it through code
but whenever we're making an actual
piece of software we don't want to have
the user you know make them write some
code to change it you want to give them
some cool controls to use that is a kind
of the point of software so actually let
me get rid of it and by the way this is
um you know nothing to do with JavaFX
but anytime you want to get rid of this
gutter you see all these tabs right here
in this IDE you can click this little
button and it will toggle them on and
off so again I just want to give myself
some more room so you guys can see
what's going on alright so the first
thing we're going to do is this I'm
going to build a little area at the
bottom here and it's going to have three
little inputs and the first one is where
you can type the name of a product the
second one the price and the third one
the quantity and then on the right hand
side I'm going to have a button that
says add and whenever you click it it
adds whatever you typed in as a new row
and I'm also going to have a button
called delete so you can actually select
one of these for example if you're like
are a I don't have any toilets in my
store anymore you can select it hit
delete and that will delete it from your
spreadsheet so let's go ahead and get
started alright so again like I said the
first thing I'm going to have is three
inputs in those are called text fields
so I'm going to have one for the name
input price input quantity inputs all
right now let me scroll down and I'll
start building them right under the
columns right here and these are our are
going to be a you know really similar
and actually already know how to make
all these inputs so name input equals
new
text field name and put in what I'm
going to do instead of having a label
I'm just going to have prompt text so
inside the actual input I'll just have a
light grey on bit of text and it'll just
say um set prompt text I don't just say
name so the user actually has a little
indication of what they're actually
supposed to be typing in there and an
optional thing that you can do a lot of
people like to do this is if you set the
min width for each one then odds but
like this at 100 so right now we're just
making the basic inputs and we're going
to have to add them to the layout later
on alright so for the price in the
quantity quantity alright so this would
be called price input and I'll put price
right there and quantity input quantity
right there so again we have our three
inputs name price quantity a place so
the user can type in whatever you know
new item that they want to add to their
store and now let me just make the
buttons the add and delete buttons now
I'm going to pretty much set our layout
up first so I'm going to be building the
user interface and then once I have
everything built in looking exactly how
I want it to look then I'm going to go
and actually add the functionality to
these buttons and the rest of our
program but for right now just want to
get everything built so button the Add
button so these are just new button and
it'll say add on it and I'll make a
delete button forever whatever the user
wants to delete an item
all right so since you're on this real
quick so since this entire layout is a V
box in other words if we just place
items they would appear as stack on top
of each other up and down we want the
inputs in the buttons to appear left and
right so we're going to have to make a H
box and we'll stick it at the bottom of
here so after you start or after you're
done in my mouse fell over by the way I
have a vertical mouse go ahead and
Google vertical mouse right now and if
you guys really how can your mouse fall
out how does a mouse a computer mouse
fall over look at vertical mouse and you
guys will see what kind of weird Mouse
I'm using art so I'm just going to make
a quick H box layout going to name an H
box set equal to new h box by the way
does this remind anyone else of HBO it
does me one else do you see the letters
HBO together instead of H box and HBO I
don't know by the way you guys ever see
um I think it's called Silicon Valley on
HBO it's a very good show it's about
like computer programmer nerds and stuff
anyways you guys are here to learn not
here to hear me talk alright so we now
have a horizontal layout that we can
stick all of these items in and the
first thing I want to do is actually set
padding so what this is going to allow
us to do if we throw a Newton set in
here we can type four different values
top right bottom left and this is just
going to be padding around your entire
layout not the items themselves inside
your layout but it's going to give us a
little bit of area so the items don't
look like they're butted right up
against the edge so now we can do that
but the items within the layout is still
going to be pressed up against each
other so in order to take care of that
I'll explain exactly what I'm doing
whenever you guys actually see this but
set spacing equal to ten and now for
each item for example the inputs are
going to be separated from the buttons
with a padding of or not a padding a
spacing of 10 pixels so now we pretty
much set up our layout set up all the
items we just need to add all the items
to the layout so hbox get children at
all and what do we have name input price
input quantity inputs Add button and a
delete button and at all adding is for
one at all is for many of them and now
all we have to do is add this entire
layout to the VBox layouts alright so we
run this and see if I mess anything up
look in good alright so this is our
horizontal layout that hbox that we just
made again as you can see everything has
a padding of 10 pixels and also in
between these little items right here
that has a spacing of 10 so the padding
is all the way around and the spacing is
in between each individual one and now
the user can type on they'll type
something like bacon the price is like
$5.99 and the quantity you know they
have 60 packs of bacon and they're going
to hit add and it's going to pop up
there but we need to create that
functionality so let's do that right now