JavaFX Java GUI Tutorial - 16 - TreeView Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

alright guys in this video I'm going to
show you how to create a tree view and a
tree view is a special type of list in
JavaFX because what you can do is you
can actually take your list items and
arrange them in a hierarchy and this is
actually an example of a tree view right
over here and basically like I said what
you can do is you can have your list
items and then you can pretty much make
sub items and I'll give you guys a
terminology real quick of course
whenever you create your main tree you
always need a root so every tree has one
single root this is pretty much the main
trunk or the main overall tree itself
just think of it like that
so pretend this external libraries thing
isn't even in here
I want to confuse you guys so in this
example our route would be Bucky
now once we have our route we can start
adding branches to it so one branch
would be idea one branch would be out
one branch would be source so again they
just saw you know reference everything
kind of named it like a tree you have a
route and then you can have a bunch of
branches on it and of course your
branches can have other branches or you
can just have you know um a single item
on it and whenever you have an item that
doesn't have any children it's
technically called a leaf but you know I
don't want to confuse you guys too much
a lot of terminology so let's go ahead
and get started you guys are going to
see what I'm talking about so the first
thing we need to do is we need to create
an overall tree view and what data do we
want to stick on the tree well how about
a bunch of strings and I'm just going to
name this tree so this is pretty much
going to be the overall tree the all
encompassing everything so the next
thing you just add it right under here
50 all right alright so now I want to go
ahead and set up all of the items
including the route in any branch that
I'm going to make now all of those are
just tree items these are pretty much
generic stuff that you can add on your
tree and of course those are strings as
well
so again remember I told you guys we
have our main route which is our overall
trunk that we're going to be sticking
our branches on and then we can just
have some branches and I'll just say I
have a for this demo I'll just have two
branches and whenever you expand it
instead of you know Java files I'll just
say a list of like my favorite item so
like corn ice cream The Walking Dead and
Megan's will be like glitter makeup
girly stuff you know just a real simple
demo so again we're going to make a
Bucky and Megan branch and we're going
to be sticking these on the route so
let's go ahead and setup the route first
so for the route all we have to do is we
have to set this equal to a new tree
item now we don't need to do anything
fancy to this since all this routes
going to do is it's pretty much just
going to be a container for all of our
branches so we don't have to like you
know like I said do anything fancy the
one property that I do want to change is
set expanded and set that equal to true
and all this is going to do is whenever
a program first starts I'm going to set
everything equal to expanded and that
just means your program can first start
with everything collapsed like this I'm
just going to have everything expanded
by default so you know you guys know
what expanded means art so what I'm
going to be doing now is I'm going to be
building the Bucky branch and the megan
branch now whenever you're building a
branch to your tree it's actually really
easy you make an item and then you say
what do you want its parent to be so for
example production right here the parent
would be out
Bucky right here the parent would be
production main the parent would be
Bucky and whenever you have two items
kind of in the same location those are
called either siblings and whenever or
you can say like um main class is the
child of Bucky so this is the parent
this is the child in these two are
siblings so you know this is all just
really terminal
gee bud or not you know confuse you guys
and instead of having to rewrite the
same code over and over I'm going to
show you guys how to do this really
easily what I'm going to do is I'm going
to make a new method called make branch
now this is going to take two parameters
the first one is what do you want the
name of the item to be so you see
whether it's a parent or a child they
all have names source main whois lookup
bucky IML so this is just the name of
your list item and the second one is
what is the parent of it so I'm going to
make this route now notice every single
one of these items they all have parents
now all of them have children for
example who is look up this doesn't have
a child but they all have a parent you
see that so what I'm going to do is like
I said make a method and it's pretty
much just going to make all of these
branches for you really quick
so again Bucky and Meagan they're going
to be our two main branches they're just
going to stick right on the root and now
we can just add a bunch of items to
Bucky so I'll say um so one of my
favorite things is the new bus thin and
the parent of course would be Bucky now
let me just add two more items as well
so the new Boston YouTube like YouTube
and what else chicken now we can do the
same thing for Megan
except we need to change all these to
Megan Megan Megan Megan Megan Megan and
only had two items for her so what is
Megan like she probably likes I don't
know glitter and she probably likes
makeup all girls like makeup all right
so now we have our pretty much hierarchy
as we can visualize it right now
we're going to have our main route and
then we're going to have another branch
called Bucky and whenever we expand it
it's going to show my three favorite
items and whenever we expand Megan it's
going to show her two favorite items so
after that we can actually start putting
the entire tree together so say create
tree and a little bit all right so tree
remember we declared it way up here it's
our overall main encompassing everything
is equal to new tree view and the one
parameter that you need is the route so
remember all trees need a main trunk a
main route and ours is just named route
now after this what I'm going to do is
I'm going to take that tree and I'm
going to say set show route equal to
false because remember this route it
doesn't really show anything important
there's just a container for all the
good stuff so if we didn't um throw this
line of code in here and we just said
show route equal to true then we would
need to expand route before we saw Bucky
and Megan and it would pretty much be a
waste of time because why would we want
to make the user expand this every
single time just to get to this stuff
you know what extra step that they don't
really need now the last thing that we
need to do in order to actually display
this on the screen is we call layout and
we add it a little bit differently than
other items that we have been adding we
call get children add tree so this is
going to stick on the screen but
remember we didn't set up that method to
make our branches yet so let's go ahead
and do that too right now
and whenever we create our branches
again what we're doing is we're pretty
much just going to add all of these
items to whatever branch we're trying to
create so public
tree item string make branch so again
our branch is of course our tree items
everything on our tree is an item so
we're going to make one of these
branches and return that item so again
whenever we make the branch as we could
see it took two parameters the first one
is what is the text that you want to
appear for your list item and the second
one is what is the parent so I'll just
say string title and tree item parent
all right so the first thing we need to
do is we pretty much need to take that
title and create a new item so just saw
you know take the new Boston make it its
own list item YouTube make its own list
item and chicken make that its own list
item so again this is a tree item
everything in your trees in item string
and I'll just call it an item pull to a
new tree item accidentally hit cap locks
yes I did
title so that's going to take the first
value whatever we pass in glitter makeup
chicken and it's going to make it a new
list item and also another thing that I
want to do is I want to take item set
expanded and set this equal to true
because remember the first time we're
going to use this method for each branch
we're just going to be sticking it on
the root for example Bucky is going to
have sub items so by default I'm just
going to have all of these expanded and
I already already talked to you guys
about why that is
now the next thing I want to do is this
we're pretty much going to go through in
each of these items we're going to want
to stick on its main parent branch so
the parents get children
add item boom just like that in our tree
or excuse me our branch is now built at
this point so returned item and that's
going to return the branch so oh well
there you go alright so now that is it
let's go ahead and run this and check it
out so everything is expanded again our
route let me show you guys see look at
it right now how its set up pretty much
as we expected show you guys what
happens if we don't read so if we don't
have arm set so root equal to false you
see how we have an empty root and then
we pretty much need to expand it to get
to all our good stuff that is why I
decided to hide that kind of you know a
waste of time for the user so anyways
what we did is we made a tree set up our
branches and then we made a cool little
method that we can just go through and
start building our branch item-by-item
now there's no really logic or you know
behind the scenes cool functionality
taking place at this point so what we're
going to be actually doing is this I'm
going to set it up where you can
actually click one of these items and
it's going to print out right here now
we have the problem that we had with a
drop-down list where it doesn't emit any
action so what we're going to need to do
is we're going to need to stick a
listener on each of those items so in
order to that we can just put it right
under whenever we're done building the
tree use code tree get selection model
selected item property so for each item
on that tree what we can do is we can
add a listener to it and all this
listener is going to do is it's going to
pretty much be kicked off whenever you
click the item so you guys already know
how to do this it's going to pass in
three parameters the old value
in the new value and again what this
lambda is pretty much a shorthand way of
making a function your parameters go
right here and your body goes on the
right-hand side and if you just have a
single line of code they can you just
type it like that but I'm going to have
a couple lines in here so make sure to
stick them in curly braces and all I'm
going to say is this if the new value in
other words if the item that they
selected is not equal to null then just
print it out so system.out.print line
and the value of the item is just the
new value get value all right so now I
think everything looks good run it and
check it out so by default we have Bucky
selected that's why print out Bucky the
new Boston YouTube chicken you can even
click Bucky again it will print out
Bucky
Megan glitter makeup and if you ever
collapse one of these then it's not
going to print out because you didn't
select it but you can also collapse it
by double clicking it and whenever you
do that it counts as a selection so you
know I just want to point that out but
there you go um you know a lot of
terminology and a lot of weird things to
set it up but pretty much all the hard
work takes place in this method the rest
is this easy cheesy beautiful covergirl
that isn't all right got this makeup
stuck in my head now but anyways thank
guys for watching and all of this code
is going to be on my github page so
every time you make a tree you're not
going to feel like typing all this just
go over my github page copy app plop it
in your program and yeah thank you guys
for watching like I said see you later