TableView Cell Modify in JavaFX

Hello and Welcome . Today I would like to blog about the TableView of Javafx 2.0 beta b_45. If you are new to the TableView then please have a look at these class files.

The java documentation of those classes are very important for you when developing the application.

Let’s start here. First the thing what I’m going to show you is about the Cell which is the intersection of any row and column. Before going to TableCell , you can go for the TableColumn which helps to take control over the TableCell with cellFactory. The TableColumn is the column of any table which defines the new column with it’s defined named. Let’s make four columns our Test. I’m running these codes with compatible to JavaFX 2.0 build 45. So it might varies on future or on previous version of javafx.

TableColumn Defination

There is nothing hard. It’s all simple Object with setMethods. The PropertyValueFactory might be new for you. We are using the propertyvalueFactory with “album”, “title” , “artist” , “rating” because these properties are going to be implemented in our Object Class (Music.java).

Music.java

In above Music you may see Album Class which is another Class which defines brief of any album. Currently I’m just making these things easier for sample.The Album class is given below.
Album.java

We ‘ll be using Music class as the Generic Class which will be used in the TableView. So to make our TableView Object friendly we need to make the TableView like this:

CellFactory

I know you guys might be eager to make your TableCell more customize so to make cell more customizable there is the setCellFactory in Table Column. This function helps to set you own cellFactory. We’ll be customizing only two column’s cell. They are Rating and Album Art. Let’s do these stuffs one by one.

1. Rating Cell Customize

In above cell factory I’m using Music Generic class for TableColumn of Callback Object.Now we are making the TableCell Object overriding updateItem function. Here we’ve used inherited setGraphic function of TableCell class for setting the Graphics of any cell. In this way you can set any graphic for cell. I’ve used ChoiceBox for setting the graphics. The ratingSample is the final variable consisting the possible rating values of any music.

2. AlbumArt Cell Customize

In above cell factory, I’ve used my own kind of graphics. I this one cell factory is similar to previous one. Here I used the images resources of my own package “/img” .

Finally you ‘ve really customized the Cell of the table now it’s time for adding those columns and rows to table.

Fancy Stuffs

To make your table more fancy Let’s do some fancy stuffs.

You can implement these things in your Application start() function like this:

Finally your output will be like this:

Fancy Music Library Table

The full source code is here : MusicLibrary Project

Ok This much for day . If you have any problem then please comment. Have a good 🙂 day.

Thanks.

21 thoughts on “TableView Cell Modify in JavaFX”

  1. Narayan Gopal Maharjan

    Hi leojim,
    It’s not a big deal. We can easily save the rating of Avril disc by setting the value of ObservableList ‘musics’ item. You need to register a new listener of Mouse when the ComboBox of Avril is selected then change the value of ‘musics’ item according to the user’s selection.

    Thanks.
    Narayan

  2. Very good example. Does your code provide bidirectional binding? I wanted to use a cell factory to put checkboxes in a column of a tableView. When the checkbox is selected, the property associated with that column should be updated. It looks like your design would work, substituting the choicebox references with checkbox code.

  3. Hi Ryan,
    To make the event handling on the checkbox and it’s effect to real beans then you need to EventHandler to the control. Currently in the context of this post. I can add changelistener to the choicebox “value” inside which is declared inside CellFactory .

    Inside the listener override method you can edit the value of main ObservableList (variable “musics” in this context) and the effect will be in bi-directional.

    Thanks

  4. Great job. congratulations!
    I have a situation and would ask directions, I’m new to JavaFX and must develop a screen similar to an excel spreadsheet. I have a bean that stores the value of the cell and the position (x, y). Each cell is a value entered in the database, and spreadsheet size may vary, eg 16×16, 10×10 etc.
    How do I generate a dynamic table for this situation and take the position of each cell to enter the bean x,y atributes, for latter show and edit again?
    Would you like help-me with your experience with JavaFX to guide me.
    Thank you. Cheers

  5. Pingback: ListView Animation « Java and FX

  6. I would like to see an example where a cell is a URL Hyperlink, You can click and invoke a browser….

    Any hint?

    Thanks,

    Tan

  7. I know how to open web browser with URL.
    I would like to know how to add a Hyperlink in a table column. Or custom TableCell, so user can click the link and open browser with provided URL.
    Or like in your example, if we add another column with Hyperlink, when user click on the link, we will play the song with provided URL.

    Thanks,

    Tan

  8. In the section 2. when you are setting up Album Art cell drawing mechanism, you are creating a new ImageView every time cell is drawn. You should take the ImageView creation out of the updateItem method to avoid extra memory allocation and slowness.

  9. Hi Mr Narayan. I wish to know how fill a table with values coming from 2 or more different tables in database..

    I am stuck, please help.. I want to use joins and display the list in the table but after trying all d combinations, i ended up displaying a table with empty values.

    Please help

  10. Great tutorial , how would I be able to filter the data. Im having trouble . the content of some row that should be filtered still display .

Leave a Reply