Object Oriented Programming -I (3140705)

Unit-08
JavaFX UI Controls
& Multimedia

Prof. Jayesh D. Vagadiya

Computer Engineering Department
Darshan Institute of Engineering & Technology, Rajkot
[email protected]
9537133260
✓ Outline
Looping

✔ Label
✔ Button
✔ CheckBox
✔ RadioButton
✔ TextField
✔ TextArea
✔ ComboBox
✔ ListView
✔ ScrollBar
✔ Slider
✔ Video
✔ Audio
Label
Label is used to display a short text or an image, it is a non-editable text control.
It is useful for displaying text that is required to fit within a specific space.
Label can only display text or image and it cannot get focus.
Constructor for the Label class are:
Constructor Description
Label() Creates an empty Label
Label(String text) Creates Label with supplied text
Label(String text, Node graphics) Creates a Label with the supplied text
and graphic.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 3
Label Example
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

public class LabelExample extends Application {

@Override
public void start(Stage primaryStage) throws Exception {

Label label = new Label("Welcome to JavaFX");

Scene scene = new Scene(label, 200, 200);

primaryStage.setTitle("JavaFX Demo");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 4
Button
Button control enables an application to have some action executed when the application user
clicks the button.
The button control can contain text and/or a graphic.
When a button is pressed and released a ActionEvent is sent. Some action can be performed
based on this event by implementing an EventHandler to process the ActionEvent.
Buttons can also respond to mouse events by implementing an EventHandler to process the
MouseEvent.
Constructor for the Button class are:
Constructor Description
Button() Creates a button with an empty string for its
label.
Button(String text) Creates a button with the specified text as
its label.
Button(String text, Node graphic) Creates a button with the specified text and
icon for its label.
Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 5
Button Example
@Override
public void start(Stage primaryStage) {
Button btn = new Button();
Label lbl = new Label();
btn.setText("Click Me...");
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
lbl.setText("Button Clicked");
}
});
HBox root = new HBox();
root.setMargin(btn, new Insets(20,20,20,20));
root.setMargin(lbl, new Insets(20,20,20,20));
root.getChildren().add(btn);
root.getChildren().add(lbl);
primaryStage.setTitle("Button Demo");
primaryStage.setScene(new Scene(root, 250, 100));
primaryStage.show();
}
Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 6
Checkbox
The Check Box is used to provide more than one choices to the user.
It can be used in a scenario where the user is prompted to select more than one option.
It is different from the radiobutton in the sense that, we can select more than one checkboxes
in a scenerio.
Constructor for the Checkbox class are:
Constructor Description
CheckBox() Creates a check box with an empty string
for its label.
CheckBox(String text) Creates a check box with the specified
text as its label.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 7
Checkbox Example
@Override
public void start(Stage primaryStage) throws Exception {
Label l = new Label("What do you listen: ");
CheckBox c1 = new CheckBox("Big FM");
CheckBox c2 = new CheckBox("Radio Mirchi");
CheckBox c3 = new CheckBox("Red FM");
CheckBox c4 = new CheckBox("MY FM");
HBox root = new HBox();
root.getChildren().addAll(l,c1,c2,c3,c4);
root.setSpacing(5);
Scene scene=new Scene(root,450,100);
primaryStage.setScene(scene);
primaryStage.setTitle("CheckBox Example");
primaryStage.show();
}

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 8
RadioButton
The Radio Button is used to provide various options to the user.
The user can only choose one option among all.
A radio button is either selected or deselected.
It can be used in a scenario of multiple choice questions in the quiz where only one option
needs to be chosen by the student.
Constructor for the RadioButton class are:
Constructor Description
RadioButton() Creates a radio button with an empty string
for its label.
RadioButton(String text) Creates a radio button with the specified text
as its label.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 9
Checkbox Example
public void start(Stage primaryStage) throws Exception {
Label lbl = new Label("Which country is origin of Corona Virus?");
ToggleGroup group = new ToggleGroup();
RadioButton button1 = new RadioButton("Italy");
RadioButton button2 = new RadioButton("China");
RadioButton button3 = new RadioButton("Spain");
RadioButton button4 = new RadioButton("USA");
button1.setToggleGroup(group);
button2.setToggleGroup(group);
button3.setToggleGroup(group);
button4.setToggleGroup(group);
VBox root=new VBox();
root.setSpacing(10);
root.getChildren().addAll(lbl,button1,button2,button3,button4);
Scene scene=new Scene(root,400,300);
primaryStage.setScene(scene);
primaryStage.setTitle("Radio Button Example");
primaryStage.show();
}

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 10
TextField
Text input component that allows a user to enter a single line of unformatted text.
Constructor for the TextField class are:
Constructor Description
TextField() Creates a TextField with empty text content.
TextField(String text) Creates a TextField with initial text content.
Label user_id=new Label("User ID");
Label password = new Label("Password");
TextField tf1=new TextField();
TextField tf2=new TextField();
Button b = new Button("Submit");
GridPane root = new GridPane();
root.addRow(0, user_id, tf1);
root.addRow(1, password, tf2);
root.addRow(2, b);
Scene scene=new Scene(root,300,200);
primaryStage.setScene(scene);
primaryStage.setTitle("Text Field Example");
primaryStage.show();
Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 11
TextArea
Text input component that allows a user to enter multiple lines of plain text.
Constructor for the TextArea class are:
Constructor Description
TextArea() Creates a TextArea with empty text content.
TextArea(String text) Creates a TextArea with initial text content.
@Override
public void start(Stage primaryStage) throws Exception {
TextArea textArea = new TextArea();
VBox vbox = new VBox(textArea);
Scene scene = new Scene(vbox, 300, 100);
primaryStage.setTitle("TextArea Demo");
primaryStage.setScene(scene);
primaryStage.show();
}

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 12
ComboBox
A combo box is a typical element of a user interface that enables users to choose one of
several options.
A combo box is helpful when the number of items to show exceeds some limit, because it can
add scrolling to the drop down list.
Constructor for the ComboBox class are:
Constructor Description
ComboBox() Creates a default ComboBox instance with an empty items list and default
selection model.
ComboBox(ObservableList<T> items) ComboBox(ObservableList<T> items)
Creates a default ComboBox instance with the provided items list and a default
selection model.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 13
ComboBox Example
@Override
public void start(Stage primaryStage) throws Exception {
Label lbl = new Label("Select Captain: ");
ObservableList<String> options =
FXCollections.observableArrayList(
"M.S.Dhoni",
"S.R.Tendulkar",
"S.C.Ganguly"
);
ComboBox<String> comboBox = new ComboBox<String>(options);
HBox hbox = new HBox();
hbox.getChildren().addAll(lbl,comboBox);
Scene scene = new Scene(hbox, 200, 120);
primaryStage.setTitle("ComboBox Experiment 1");
primaryStage.setScene(scene);
primaryStage.show();
}

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 14
ListView
A ListView displays a horizontal or vertical list of items from which the user may select, or with
which the user may interact.
Constructor for the ListView class are:
Constructor Description
ListView() Creates a default ListView which will display contents stacked
vertically.
ListView(ObservableList<T> items) Creates a default ListView which will stack the contents retrieved from
the provided ObservableList vertically.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 15
ListView Example
@Override
public void start(Stage primaryStage) throws Exception {
Label lbl = new Label("Select Players: ");
ObservableList<String> options =
FXCollections.observableArrayList(
"Dhoni","Tendulkar","Sehwag","Ganguly"
);
ListView<String> list = new ListView<String>(options);
list.setPrefSize(200, 50);
HBox hbox = new HBox();
hbox.getChildren().addAll(lbl,list);
Scene scene = new Scene(hbox, 400, 300);
primaryStage.setTitle("List Demo");
primaryStage.setScene(scene);
primaryStage.show();
}

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 16
ScrollBar
JavaFX Scroll Bar is used to provide a scroll bar to the user so that the user can scroll down the
application pages.
Either a horizontal or vertical bar with increment and decrement buttons and a "thumb" with
which the user can interact. Typically not used alone but used for building up more complicated
controls such as the ScrollPane and ListView.
Constructor for the ScrollBar class are:
Constructor Description
ScrollBar() Creates a new horizontal ScrollBar.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 17
ScrollBar Example
@Override
public void start(Stage stage) {
ScrollBar sc = new ScrollBar();
sc.setMin(0);
sc.setMax(100);
sc.setValue(50);
Group root = new Group();
Scene scene = new Scene(root, 250, 100);
stage.setScene(scene);
root.getChildren().add(sc);
stage.setTitle("ScrollBar Demo");
stage.show();
}

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 18
Slider
The Slider Control is used to display a continuous or discrete range of valid numeric choices
and allows the user to interact with the control.
It is typically represented visually as having a "track" and a "knob" or "thumb" which is dragged
within the track. The Slider can optionally show tick marks and labels indicating the different
slider position values.
The three fundamental variables of the slider are min, max, and value. The value should always
be a number within the range defined by min and max. min should always be less than or equal
to max. min defaults to 0, whereas max defaults to 100.
Constructor for the Slider class are:
Constructor Description
Slider() Creates a default Slider instance.
Slider(double min, double max, double value) Constructs a Slider control with the specified slider min, max
and current value values.

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 19
Slider Example
@Override
public void start(Stage primaryStage) throws Exception {
Slider slider = new Slider(1,100,20);
slider.setShowTickLabels(true);
slider.setShowTickMarks(true);
StackPane root = new StackPane();
root.getChildren().add(slider);
Scene scene = new Scene(root,300,200);
primaryStage.setScene(scene);
primaryStage.setTitle("Slider Example");
primaryStage.show();
}

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 20
Video
In the case of playing video, we need to use the MediaView node to display the video onto the
scene.
For this purpose, we need to instantiate the MediaView class by passing the Mediaplayer object
into its constructor. Due to the fact that, MediaView is a JavaFX node, we will be able to apply
effects to it.
public void start(Stage primaryStage) throws Exception {
String path = "G:\\demo.mp4";
Media media = new Media(new File(path).toURI().toString());
MediaPlayer mediaPlayer = new MediaPlayer(media);
MediaView mediaView = new MediaView(mediaPlayer);
mediaPlayer.setAutoPlay(true);
Group root = new Group();
root.getChildren().add(mediaView);
Scene scene = new Scene(root,1366,768);
primaryStage.setScene(scene);
primaryStage.setTitle("Playing video");
primaryStage.show();
}
Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 21
Audio
We can load the audio files with extensions like .mp3,.wav and .aifff by using JavaFX Media
API. We can also play the audio in HTTP live streaming format.
Instantiate javafx.scene.media.Media class by passing the audio file path in its constructor to
play the audio files.
public void start (Stage primaryStage) throws Exception {
String path = "G://demo.mp3";
Media media = new Media(new File(path).toURI().toString());
MediaPlayer mediaPlayer = new MediaPlayer(media);
mediaPlayer.setAutoPlay(true);
primaryStage.setTitle("Playing Audio");
primaryStage.show();
}

Prof. Jayesh D. Vagadiya #3140705 (OOP-I) ⬥ Unit 08 – JavaFX UI Controls & Multimedia 22