Programming II Lab 6

Introduction to JavaFX

The Islamic University of Gaza
Engineering Faculty
Department of Computer Engineering

Author: Mohammed Nafiz ALMadhoun2021/03/19

---

In this lab, we are going to talk about JavaFX, and how to write GUI applications in Java using JavaFX, then we will talk about JavaFX containers, finally, we will talk about JavaFX components.

Theoretical Introduction

In this section, we will talk about the basic skeleton of a JavaFX application.

Application

What we are creating right now is an application, this application has a known flow from the start of it until the end, so the creator of JavaFX created a class named Application, this
class provides you with the methods you need to create an application, so you can override some methods in it to create the basic functionality of an application.

The first method you should know about is the start method, this method will be called at the start of your application, and will give you something called Stage, we will talk about Stage later, the signature of this method is:

public void start(Stage primaryStage)

Stage

The stage in JavaFX is the window, the window itself contains a lot of things, the first things you will notice is the buttons on the title bar, the title bar contains the title, minimize, maximize, and close buttons, as we have talked before the application provides you with a stage to start from, you can create stages in any life point of the application (You will need to create new windows)

Scene

The scene is the root for every component in JavaFX, so if you want to create a button you will need to add this button to a scene, the scene has a width and a height and a fill color.

JavaFX Application ^[1]

import javafx.application.Application; 
import javafx.scene.Scene;
import javafx.stage.Stage; 
import javafx.scene.layout.StackPane;

public class Test extends Application {
   @Override
   public void start(Stage stage) {   
        Scene scene = new Scene(new StackPane());
        stage.setTitle("Test JavaFX");
        stage.setScene(scene);
        stage.show();
   }
   public static void main(String args[]){ 
        launch(args);
   } 
}

Containers

HBox

Arrange components in a horizontal line

VBox

Arrange components in a vertical line.

Stack

The components will go on top of each other.

Grid

A grid is just a table, you can put the component in any cell you want.

Note that all images above are from Tutorials Point You can look at other containers
examples here: https://www.tutorialspoint.com/javafx/javafx_layout_panes.htm

Notice that your scene will have a root container, this could be any of the containers above.

UI Components:

• Label: A Label object is a component for placing text.
• Button: This class creates a labelled button.
• ColorPicker: A ColorPicker provides a pane of controls designed to allow a user to manipulate and select a color.
• CheckBox: A CheckBox is a graphical component that can be in either an on(true) or off (false) state.
• RadioButton: The RadioButton class is a graphical component, which can either be in an ON (true) or OFF (false) state in a group.
• ListView: A ListView component presents the user with a scrolling list of text items.
• TextField: A TextField object is a text component that allows for the editing of a single line of text.
• PasswordField: A PasswordField object is a text component specialized for password entry.
• Scrollbar: A Scrollbar control represents a scroll bar component to enable the user to select from a range of values.
• FileChooser: A FileChooser control represents a dialog window from which the user can select a file.
• ProgressBar: As the task progresses towards completion, the progress bar displays the task's percentage of completion.
• Slider: A Slider lets the user graphically select a value by sliding a knob within a bounded interval.

Here is a small list of UI components that you can find in javafx.scene.control, note that all the description is by Tutorials Point.
https://www.tutorialspoint.com/javafx/javafx_ui_controls.htm

Lab Tasks

Task 1: Your First JavaFX Application

In this task, you should create the layout below, try to make it as close as possible to the image.

Task 1 Expected Output

Task 2: Use FileChooser Compoenent

In this task you should learn how to use FileChooser component, this component will let you open/save files, read this post to solve the task
https://www.javatpoint.com/javafx-filechooser

Your application should open a file open dialog on lunch, then if the users choose a file, you should print the content of this file to the terminal or a TextArea component.

Task 2 Expected Output

tags: Programming Java IUG

End Of Lab 6

---

1. JavaFX 2 Tutorials and Documentation ↩︎