Graphical User Interfaces (GUIs)

JavaFX GUI Basics

CSE 114: Introduction to Object-Oriented Programming
Paul Fodor
Stony Brook University
[Link]
 Contents
 GUI Examples
 Graphical User Interfaces (GUIs)
 What does a GUI framework do for you?
 JavaFX vs AWT and Swing
 How do GUIs work?
 GUI Look vs. Behavior
 Basic Structure of a JavaFX GUI
 Layout Panes, UI Controls, and Shapes
 Display Shapes
 Helper classes: The Color and Font Classes
 Line, Rectangle, Circle, Ellipse, Arc, Polygon and Polyline
 The Image and ImageView Classes
 JavaFX CSS styles
2
(c) Paul Fodor and Pearson Inc.
GUI Examples

3
(c) Paul Fodor and Pearson Inc.
Graphical User Interfaces (GUIs)
 Graphical User Interfaces (GUIs)
 provides user-friendly human interaction
 they were the initial motivation for object-oriented programming
 predefined classes for GUI components, event processing interfaces
 Building GUIs require use of GUI frameworks:
 JavaFX (part of JSE 8, 2014)
 Older Java frameworks:
 Abstract Window Toolkit (AWT):
[Link].*, [Link].*,
[Link].*
 SWING:
 [Link].*, [Link].*

4
(c) Paul Fodor and Pearson Inc.
What does a GUI framework do for you?
 Provides ready, interactive, customizable components
and event handling management
 you wouldn’t want to have to code your own window class, label class,
text fields and text areas classes, button class, checkbox, radio buttons,
lists, geometrical figures, containers/layout managers, etc.

5
(c) Paul Fodor and Pearson Inc.
 JavaFX vs AWT and Swing
 Swing and AWT were older Java frameworks replaced by the
JavaFX platform for developing rich Internet applications in JDK8.
 When Java was introduced, the GUI classes were bundled in a library
known as the Abstract Windows Toolkit (AWT).
 AWT was prone to platform-specific bugs
 AWT was fine for developing simple graphical user interfaces, but not for
developing comprehensive GUI projects.
 The AWT user-interface components were replaced by a more robust,
versatile, and flexible library known as Swing components.
 Swing components were painted directly on canvases using Java code.
 Swing components depended less on the target platform and used less of the
native GUI resource.
 With the release of Java 8, Swing was replaced by a
completely new GUI platform: JavaFX.
6
(c) Paul Fodor and Pearson Inc.
 How do GUIs work?
• GUIs loop and respond to events:
• Example: a mouse click on a button
• The Operating System recognizes mouse
click, determines which window it was Construct GUI Components
inside and notifies that program by
putting the event on that program's input
buffer/queue
• The program runs in loop: Render GUI

• renders the GUI

• checks input buffer filled by OS Check to see if any input
• if it finds a mouse click, determines
which component in the program,
respond appropriately according to
Respond to user input
handler

7
(c) Paul Fodor and Pearson Inc.
GUI Look vs. Behavior
 Look: physical appearance
GUIs components
containment and layout management
 Behavior: responding to events
event programmed response through
event handlers that we define

8
(c) Paul Fodor and Pearson Inc.
 Stage
Scene
Basic Structure of a
Button JavaFX GUI
 [Link] is
the entry point for JavaFX applications
 JavaFX creates an application thread for running the
application start method, processing input events,
and running animation timelines.
 We override the start(Stage) method!
 [Link] is the top level JavaFX
container (i.e., window)
 The primary Stage is constructed by the platform.
 [Link] class is the container
for all content in a scene graph in the stage.
 [Link] is the base class for
9
scene graph nodes (i.e., components).
(c) Paul Fodor and Pearson Inc.
 import [Link];
import [Link];
import [Link];
import [Link];

public class MyFirstJavaFX extends Application {

@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a button and place it in the scene
Button btOK = new Button("OK");
Scene scene = new Scene(btOK, 200, 250);
[Link](scene); // Place the scene in the stage
[Link]("MyJavaFX"); // Set the stage title
[Link](); // Display the stage
}

public static void main(String[] args) {

launch(args);
}
}

10
(c) Paul Fodor and Pearson Inc.
// Multiple stages can be added beside the primaryStage
import [Link];
import [Link];
import [Link];
import [Link];

public class MultipleStageDemo extends Application {

@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
Scene scene = new Scene(new Button("OK"), 200, 250);
[Link]("MyJavaFX"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
Stage stage = new Stage(); // Create a new stage
[Link]("Second Stage"); // Set the stage title
// Set a scene with a button in the stage
[Link](new Scene(new Button("New Stage"), 100, 100));
[Link](); // Display the stage
}

public static void main(String[] args) {

launch(args);
}
}
11
(c) Paul Fodor and Pearson Inc.
 Panes, UI Controls, and Shapes

12
(c) Paul Fodor and Pearson Inc.
 Layout Panes
 JavaFX provides many types of panes for organizing nodes
in a container.

13
(c) Paul Fodor and Pearson Inc.
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class ButtonInPane extends Application {

@Override // Override the start method in the Application class

public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
StackPane pane = new StackPane();
[Link]().add(new Button("OK"));
Scene scene = new Scene(pane, 200, 50);
[Link]("Button in a pane"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}

public static void main(String[] args) {

launch(args);
}
}

14
(c) Paul Fodor and Pearson Inc.
FlowPane

15
(c) Paul Fodor and Pearson Inc.
 import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowFlowPane extends Application {
@Override
public void start(Stage primaryStage) {
FlowPane pane = new FlowPane();
[Link](new Insets(11, 12, 13, 14));
[Link](5);
[Link](5);
// Place nodes in the pane
[Link]().addAll(new Label("First Name:"),
new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
[Link](1);
[Link]().addAll(tfMi, new Label("Last Name:"),
new TextField());
// Create a scene and place it in the stage
Scene scene = new Scene(pane, 210, 150);
[Link]("ShowFlowPane");
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}
public static void main(String[] args) {
launch(args);
16 }
(c) Paul Fodor and Pearson Inc.
}
 GridPane

17
(c) Paul Fodor and Pearson Inc.
 import [Link];
import [Link];
import [Link];
import [Link];
import [Link].*;
import [Link].*;
public class ShowGridPane extends Application {
@Override
public void start(Stage primaryStage) {
// Create a pane and set its properties
GridPane pane = new GridPane();
[Link]([Link]);
[Link](5.5);
[Link](5.5);
// Place nodes in the pane at positions column,row
[Link](new Label("First Name:"), 0, 0);
[Link](new TextField(), 1, 0);
[Link](new Label("MI:"), 0, 1);
[Link](new TextField(), 1, 1);
[Link](new Label("Last Name:"), 0, 2);
[Link](new TextField(), 1, 2);
Button btAdd = new Button("Add Name");
[Link](btAdd, 1, 3);
[Link](btAdd, [Link]);
// Create a scene and place it in the stage
Scene scene = new Scene(pane);
[Link]("ShowGridPane");
[Link](scene); [Link](); }
public static void main(String[] args) {
18 launch(args);
(c) Paul Fodor and Pearson Inc.
}}
BorderPane

19
(c) Paul Fodor and Pearson Inc.
 import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowBorderPane extends Application {
@Override
public void start(Stage primaryStage) {
BorderPane pane = new BorderPane();
[Link](new CustomPane("Top"));
[Link](new CustomPane("Right"));
[Link](new CustomPane("Bottom"));
[Link](new CustomPane("Left"));
[Link](new CustomPane("Center"));
Scene scene = new Scene(pane);
[Link](scene); [Link]();
}
public static void main(String[] args) {
launch(args);
}
}
class CustomPane extends StackPane {
public CustomPane(String title) {
getChildren().add(new Label(title));
setStyle("-fx-border-color: red");
setPadding(new Insets(11.5, 12.5, 13.5, 14.5));
}
20 }
(c) Paul Fodor and Pearson Inc.
Hbox and VBox

21
(c) Paul Fodor and Pearson Inc.
 import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowHBoxVBox extends Application {
@Override
public void start(Stage primaryStage) {
BorderPane pane = new BorderPane();
HBox hBox = new HBox(15);
[Link]("-fx-background-color: gold");
[Link]().add(new Button("Computer Science"));
[Link]().add(new Button("CEWIT"));
ImageView imageView = new ImageView(new Image("[Link]"));
[Link]().add(imageView);
[Link](hBox);
VBox vBox = new VBox(15);
[Link]().add(new Label("Courses"));
Label[] courses = {new Label("CSE114"), new Label("CSE214"),
new Label("CSE219"), new Label("CSE308")};
for (Label course: courses) {
[Link]().add(course);
}
[Link](vBox);
22 Scene scene = new Scene(pane); [Link](scene);
[Link](); (c) Paul Fodor and Pearson Inc.
 Display Shapes

 Programming Coordinate Systems start from the left-upper

corner

23
(c) Paul Fodor and Pearson Inc.
 Shapes
JavaFX provides many shape classes for drawing texts,
lines, circles, rectangles, ellipses, arcs, polygons, and
polylines.

24
(c) Paul Fodor and Pearson Inc.
 Text

25
(c) Paul Fodor and Pearson Inc.
 import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowText extends Application {
@Override
public void start(Stage primaryStage) {
Pane pane = new Pane();
[Link](new Insets(5, 5, 5, 5));
Text text1 = new Text(20, 20, "Programming is fun");
[Link]([Link]("Courier", [Link],
[Link], 15));
[Link]().add(text1);
Text text2 = new Text(60, 60, "Programming is fun\nDisplay text");
[Link]().add(text2);
Text text3 = new Text(10, 100, "Programming is fun\nDisplay text");
[Link]([Link]);
[Link](true);
[Link](true);
[Link]().add(text3);
Scene scene = new Scene(pane, 600, 800);
[Link](scene); [Link]();
}
26 ...
} (c) Paul Fodor and Pearson Inc.
 Helper classes: The Color Class

27
(c) Paul Fodor and Pearson Inc.
 Helper classes: The Font Class

28
(c) Paul Fodor and Pearson Inc.
 Line

29
(c) Paul Fodor and Pearson Inc.
 import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowLine extends Application {
@Override
public void start(Stage primaryStage) {
Pane pane = new Pane();
Line line1 = new Line(10, 10, 10, 10);
[Link]().bind([Link]().subtract(10));
[Link]().bind([Link]().subtract(10));
[Link](5);
[Link]([Link]);
[Link]().add(line1);
Line line2 = new Line(10, 10, 10, 10);
[Link]().bind([Link]().subtract(10));
[Link]().bind([Link]().subtract(10));
[Link](5);
[Link]([Link]);
[Link]().add(line2);
Scene scene = new Scene(pane, 200, 200);
[Link](scene);
[Link]();
}
public static void main(String[] args) {
launch(args);
}
30 }
(c) Paul Fodor and Pearson Inc.
 Rectangle

31
(c) Paul Fodor and Pearson Inc.
 import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class ShowRectangle extends Application {
public void start(Stage primaryStage) {
Pane pane = new Pane();
Rectangle r1 = new Rectangle(25, 10, 60, 30);
[Link]([Link]);
[Link]([Link]);
[Link]().add(new Text(10, 27, "r1"));
[Link]().add(r1);
Rectangle r2 = new Rectangle(25, 50, 60, 30);
[Link]().add(new Text(10, 67, "r2"));
[Link]().add(r2);
for (int i = 0; i < 4; i++) {
Rectangle r = new Rectangle(100, 50, 100, 30);
[Link](i * 360 / 8);
[Link]([Link]([Link](), [Link](),
[Link]()));
[Link]([Link]);
[Link]().add(r);
}
Scene scene = new Scene(pane, 250, 150);
[Link](scene); [Link]();
32 }
...// main (c) Paul Fodor and Pearson Inc.
 Circle

33
(c) Paul Fodor and Pearson Inc.
import [Link];
import [Link];
import [Link]; Circle in a Pane
import [Link];
import [Link];
import [Link];

public class ShowCircle extends Application {

@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a circle and set its properties
Circle circle = new Circle();
[Link](100);
[Link](100);
[Link](50);
[Link]([Link]);
[Link](null);
// Create a pane to hold the circle
Pane pane = new Pane();
[Link]().add(circle);
// Create a scene and place it in the stage
Scene scene = new Scene(pane, 200, 200);
[Link]("ShowCircle"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}

public static void main(String[] args) {

launch(args);
}
}

34
(c) Paul Fodor and Pearson Inc.
 Ellipse

radiusX radiusY
(centerX, centerY)

35
(c) Paul Fodor and Pearson Inc.
 Arc radiusY length

startAngle

0 degree

radiusX
(centerX, centerY)

36
(c) Paul Fodor and Pearson Inc.
 Polygon and Polyline

The getter and setter methods for property values and a getter for property
[Link] itself are provided in the class, but omitted in the UML diagram for brevity.

+Polygon() Creates an empty polygon.

+Polygon(double... points) Creates a polygon with the given points.
+getPoints(): Returns a list of double values as x- and y-coordinates of the points.
ObservableList<Double>

37
(c) Paul Fodor and Pearson Inc.
The Image and ImageView Classes

38
(c) Paul Fodor and Pearson Inc.
 import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class ShowImage extends Application {

@Override
public void start(Stage primaryStage) {
// Create a pane to hold the image views
Pane pane = new HBox(10);
[Link](new Insets(5, 5, 5, 5));
Image image = new Image("[Link]");
[Link]().add(new ImageView(image));
ImageView imageView2 = new ImageView(image);
[Link](100);
[Link](100);
[Link](90);
[Link]().add(imageView2);
Scene scene = new Scene(pane);
[Link]("ShowImage");
[Link](scene);
[Link]();
}
public static void main(String[] args) {
launch(args);
39 }
(c) Paul Fodor and Pearson Inc.
}
 JavaFX CSS style and Node rotation
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class NodeStyleRotateDemo extends Application {
@Override
public void start(Stage primaryStage) {
StackPane pane = new StackPane();
Button btOK = new Button("OK");
[Link]("-fx-border-color: blue;");
[Link]().add(btOK);
[Link](45);
[Link]("-fx-border-color: red; -fx-background-color: lightgray;");
Scene scene = new Scene(pane, 200, 250);
[Link]("NodeStyleRotateDemo"); // Set the stage title
[Link](scene); // Place the scene in the stage
[Link](); // Display the stage
}

public static void main(String[] args) {

launch(args);
}
}

40
(c) Paul Fodor and Pearson Inc.
 JavaFX CSS style and Node rotation
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

public class NodeStyleRotateDemo extends Application {

@Override
public void start(Stage primaryStage) {
StackPane pane = new StackPane();

/* The StackPane layout pane places all of the nodes within

a single stack with each new node added on top of the
previous node. This layout model provides an easy way to
overlay text on a shape or image and to overlap common
shapes to create a complex shape. */

41
(c) Paul Fodor and Pearson Inc.
 JavaFX External CSS style file
// Example to load and use a CSS style file in a scene
import [Link];
import [Link];
import [Link];
import [Link];

public class ExternalCSSFile extends Application {

@Override
public void start(Stage primaryStage) {
try {
BorderPane root = new BorderPane();
Scene scene = new Scene(root,400,400);
[Link]().add(getClass()
.getResource("[Link]").toExternalForm());
[Link](scene);
[Link]();
} catch(Exception e) {
[Link]();
}
}
public static void main(String[] args) {
launch(args);
}
42 }
(c) Paul Fodor and Pearson Inc.