---
description: 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.
---
<h1 style='border: none'><center>Programming II Lab 10</center></h1>
<h2 style='border: none'><center>JavaFX Table View & Media Elements</center></h2>
<h5><center>The Islamic University of Gaza<br>Engineering Faculty<br>Department of Computer Engineering</center></h5>
<h6>Author: Mohammed Nafiz ALMadhoun<span style="float:right">2021/05/08</span></h6>
---
<p style='text-align:justify'>
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.
</p>
## 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!
<center>
Media View Example
</center>
### Media Class
The media class will define the media source for the elements, so it will contain the path of the media.
```java=
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.
```java=
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!
```java=
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.
<center>
Table View Example
</center>
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.
```java=
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.
```java=
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.
```java=
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.
```java=
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.
```java=
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:
```java=
table.getSelectionModel().getSelectedItem()
```
You could enable multipale selection like this:
```java=
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.
<center>
Task 1 Expected Output
</center>
**Note:** Don't panic when you implement seek bar XD.
###### tags: `Programming` `Java` `IUG`
<center>End Of Lab 10</center>
Sign in with Wallet
Connect another wallet