Object Oriented Programming -I (3140705)

Unit-08
JavaFX UI Controls
& Multimedia
 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.

#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);
}
}

#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.
#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();
}

#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.

#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();
}

#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.

#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();
}

#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();
#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();
}

#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.

#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();
}

#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.

#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();
}

#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.

#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();
}

#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.

#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();
}

#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();
}

#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();
}

#3140705 (OOP-I)  Unit 08 – JavaFX UI Controls & Multimedia 22