How To Create A ListView With Title Header That Expands & Collapses In Java FX

There is no component that does this within the API of Java FX and Google searches gave me nothing so instead, I created my own.

The concept is the same with tables where rows are grouped and row headers give you the option to expand and collapse them.

For List View, I had to make my own CellFactory in order to make this work. I was surprised that I was able to make one. If this was Swing, it might have been different.

This is how my component looks like.

javafx_listview_withexpandcollapse

 

I created an entity class that contains the title and description. Let us call the class, Note. The class has an extra boolean parameter which I use told hold the state of the title if it is expanded or not. 

 
And this is how I configured my List View

 
For each entry in the list, I used a vertical box to display the contents. When the title is clicked to expand the description, the VBox will add a child so that it will be shown. If it is collapse, it will be removed.

Simple, right? Cell factories are very handy and flexible in such a way that you can render what you want displayed to the user any way you want to.

If you noticed, there is a method called createArrowPath(). That is a convenience method I made to return an SVGPath object to be used as the arrow icon beside the title header. It takes a parameter height which should be the height of the List View

Related Posts Plugin for WordPress, Blogger...