Programming II Lab 10

JavaFX Table View & Media Elements

The Islamic University of Gaza
Engineering Faculty
Department of Computer Engineering

Author: Mohammed Nafiz ALMadhoun2021/05/08

---

In this lab, we are going to explore some components in JavaFX, we will first talk about media elements, and how we could play a video, or music in JavaFX, and then we will talk about Table Views, which will enable us to show tabular data.

Media Elements

The media elements in JavaFX are pretty straightforward, you will add the element, then you will set the path for the element to play and that's it!

Media View Example

Media Class

The media class will define the media source for the elements, so it will contain the path of the media.

Media media = new Media("File URI");

Notice that you could get the file URI from a resource, or use the File class.

The media element doesn't play anything on its own, it will just define the resource and a helper for reading the file.

Media Player

The media player class will allow us to play and control a media file, notice that this will control it but never view it, so it is the player, not the viewer.

MediaPlayer mediaPlayer = new MediaPlayer(media);
mediaPlayer.play();

Try to create a media player to play something, you will notice that the sound will stop after 5 seconds or so, this is due to the garbage collector deleting our media player, so be sure to define it somewhere safe!

Media View

The media view element is responsible for showing the media (e.g video), this is a regular component you can add anywhere you want and it will show the video for you!

Media media = new Media("file:///D:/TA/Programming/Portal2.mp4");
MediaPlayer mediaPlayer = new MediaPlayer(media);
MediaView mediaView = new MediaView(mediaPlayer);
mediaPlayer.play();

You could now create your control elements to control the media player!

Table View

The table view is a very common and useful component, Table view will allow you to view data as a table, sort data, edit data, and more.

Table View Example

The table view is a generic class, which takes the type of each row in it, which makes it easier for the developer to work with.

TableView<Student> table = new TableView<Student>();
table.getItems().add(new Student("Mohammed", 25));

Now, let create a colume for the data we want to view.

TableColumn<Student, String> nameColumn = new TableColumn<>("Name");
table.getColumns().add(nameColumn);

Notice that the column will not show the data, we should define for the column how to get the value of Name from Student class.

We could do that by extending CellDataFeatures, or we could easily use PropertyValueFactory, which will try to get an observable property or use the get method to get the data.

nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));

Cell Factory

You could change how the cell gets viewed, for example, you could display a checkbox instead of the string true, false, or you could create a combo box.

TableColumn<Student, Boolean> testColumn = new TableColumn<>("Test");
testColumn.setCellValueFactory(new PropertyValueFactory<>("test"));
testColumn.setCellFactory(CheckBoxTableCell.forTableColumn(testColumn));

You could use TextFieldTableCell, which will allow you to show a text field to edit string data or use ComboBoxTableCell to create a combo box.

Editable Table View

You could make the table view editable using the method setEditable, which will allow the user to edit the values.

If you used a Property, the table view will know how to handle edits, but if used regular classes, you will have to handle it yourself.

TableColumn<Student, String> nameColumn = new TableColumn<>("Name");
nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));
nameColumn.setCellFactory(TextFieldTableCell.forTableColumn());
nameColumn.setOnEditCommit(cellEditEvent -> {
    cellEditEvent.getRowValue().setName(cellEditEvent.getNewValue());
});

Notice that because we're using generics, we get the row as the type of the data Student.

So use StringProperty to make your life easier!

Selection Model

The table selection model is responsbable for the selection of rows, you can get the selected row like this:

table.getSelectionModel().getSelectedItem()

You could enable multipale selection like this:

table.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

Lab Tasks

Task 1: Video Player

Create a video player with controls, the video player should have the following:

• Open button: Which let you open a file.
• Pause/Play Button: The button should allow you to pause and play the video.
• Volume bar: This allows you to control the volume.
• Seek bar: This allows you to seek to a certain time.

Task 1 Expected Output

Note: Don't panic when you implement seek bar XD.

tags: Programming Java IUG

End Of Lab 10