JavaFX Basics

I3305 - Chapter 1

i3305
GUI, Graphical User Interface
• Users interact with application using graphical components
• Buttons
• Windows
• Dialogs
• Text fields
• Etc.

i3305
History of GUI in Java
• AWT (1996)
• Heavyweight
• Swing (1998)
• Lightweight, powerful, huge library
• JavaFX 1.0 (2008)
• Scripting language, deprecated
• JavaFX 2.0 (2011)
• Java code
• Rich internet applications, modern UI, CSS styling

i3305
Getting and Running JavaFX
• Already included in Oracle JDK 7 and up
• JavaFX Scene Builder
• Eclipse: e(fx)clipse plugin, available in the Eclipse Marketplace

i3305
Separation of concerns in JavaFX

User Experience

i3305
JavaFX without FXML

i3305
Empty JavaFX window
import javafx.application.Application;
import javafx.stage.Stage; Stage
import javafx.scene.Scene; Scene
import javafx.scene.layout.BorderPane; Bord
erPa
BorderPane
ne
(root)
public class Main extends Application {
@Override
public void start(Stage stage) {
BorderPane root = new BorderPane();
Scene scene = new Scene(root,400,400);
stage.setScene(scene);
stage.show();
}
}
i3305
Key concepts of JavaFX
• Stage: top-level container (~ window)
• Scene: container of nodes (~ page)
• Node: element in a scene, with a visual appearance and an interactive
behavior

i3305
General class diagram

i3305
Types of nodes

i3305
Adding a control node (button)
import javafx.scene.control.Button;
public class Main extends Application { Stage
@Override Scene
public void start(Stage primaryStage) { Bord
primaryStage.setTitle("Hello World!"); StackPane
erPa
StackPane root = new StackPane(); (parent)
ne
Button btn = new Button(); Button control
btn.setText("Say 'Hello World'"); (node)
root.getChildren().add(btn);
primaryStage.setScene(new Scene(root, 300, 250));
primaryStage.show();
}

i3305
Multiple stages
public void start(Stage primaryStage) {
primaryStage.setTitle("Primary Stage");
Button btn = new Button("Stage");
Scene scene = new Scene(btn, 200, 250);
primaryStage.setScene(scene);
primaryStage.show();
//Create a new stage
Stage stage = new Stage();
stage.setTitle("Second Stage");
//Set a scene with a button in the stage
stage.setScene(new Scene(new Button("New Stage"), 100, 100));
stage.show();
}

i3305
Creating a shape node (circle)
import javafx.scene.shape.Circle;
public void start(Stage primaryStage) {
Circle circle = new Circle();
circle.setCenterX(100);
circle.setCenterY(100);
circle.setRadius(50);
circle.setStroke(Color.BLACK);
circle.setFill(Color.WHITE);
Pane pane = new Pane();
pane.getChildren().add(circle);
Scene scene = new Scene(pane, 200, 200);
x

primaryStage.setTitle("ShowCircle"); (0, 0) X Axis

Y Axis

primaryStage.setScene(scene); y
(x, y)
(0, 0)
X Axis
primaryStage.show(); Java
Coordinate
Conventional
Coordinate
System System
Y Axis

} i3305
Property binding
• Bind a target object to a source object
• Change in source object is automatically reflected in target object

i3305
Binding circle center to pane
public void start(Stage primaryStage) { Circle is centered as window resizes
Pane pane = new BorderPane();
Circle circle = new Circle();
circle.centerXProperty().bind(pane.widthProperty().divide(2));
circle.centerYProperty().bind(pane.heightProperty().divide(2));
circle.setRadius(50);
circle.setStroke(Color.BLACK);
circle.setFill(Color.WHITE);
pane.getChildren().add(circle);
Scene scene = new Scene(pane, 200, 200);
primaryStage.setTitle("ShowCircleCentered");
primaryStage.setScene(scene);
primaryStage.show();
}
i3305
Common methods to nodes
• setStyle(stylename:value)
• style properties : JavaFX CSS
• http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html

• setRotate(degrees)

i3305
The Color Class

i3305
The Font Class

i3305
Font demo
public void start(Stage primaryStage) {
Pane pane = new StackPane();
Circle circle = new Circle();
circle.setRadius(50);
circle.setStroke(Color.BLACK);
circle.setFill(new Color(0.5, 0.5, 0.5, 0.1));
pane.getChildren().add(circle);
Label label = new Label("JavaFX");
label.setFont(Font.font("Times New Roman",
FontWeight.BOLD, FontPosture.ITALIC, 20));
pane.getChildren().add(label);
Scene scene = new Scene(pane);
primaryStage.setTitle("FontDemo");
primaryStage.setScene(scene);
primaryStage.show();
i3305
}
The Image Class

Image encapsulates information about images

i3305
The ImageView Class

ImageView is a node for displaying an image

i3305
Showing an image
public void start(Stage primaryStage) {
Pane pane = new HBox(10);
pane.setPadding(new Insets(5, 5, 5, 5));
Image image = new Image("image/flag.jpg");
pane.getChildren().add(new ImageView(image));
ImageView imageView2 = new ImageView(image);
imageView2.setFitHeight(100);
imageView2.setFitWidth(100);
pane.getChildren().add(imageView2);
ImageView imageView3 = new ImageView(image);
imageView3.setRotate(90);
pane.getChildren().add(imageView3);
Scene scene = new Scene(pane);
primaryStage.setTitle("ShowImage");
primaryStage.setScene(scene); flag.jpg

primaryStage.show();
i3305
}
Layout panes
• For organizing nodes in a container

i3305
Layout panes

i3305
FlowPane

i3305
Using FlowPane
public void start(Stage primaryStage) {
FlowPane pane = new FlowPane();
pane.setPadding(new Insets(11, 12, 13, 14));
pane.setHgap(5);
pane.setVgap(5);
pane.getChildren().addAll
(new Label("First Name:"),new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
tfMi.setPrefColumnCount(1);
pane.getChildren().addAll(tfMi, new Label("Last Name:"),new TextField());
Scene scene = new Scene(pane, 200, 250);
primaryStage.setTitle("ShowFlowPane");
primaryStage.setScene(scene);
primaryStage.show();
}
i3305
GridPane

i3305
Using GridPane
public void start(Stage primaryStage) {
GridPane pane = new GridPane();
pane.setAlignment(Pos.CENTER);
pane.setPadding(new Insets(11.5, 12.5, 13.5, 14.5));
pane.setHgap(5.5); pane.setVgap(5.5);
pane.add(new Label("First Name:"),0, 0);
pane.add(new TextField(), 1,0);
pane.add(new Label("MI:"),0,1);
pane.add(new TextField(),1,1);
pane.add(new Label("Last Name:"),0,2);
pane.add(new TextField(),1,2);
Button btAdd = new Button("Add Name");
pane.add(btAdd, 1, 3);
GridPane.setHalignment(btAdd, HPos.RIGHT);
Scene scene = new Scene(pane);
primaryStage.setTitle("ShowGridPane"); primaryStage.setScene(scene);
primaryStage.show();
i3305
}
BorderPane

i3305
Using BorderPane
public void start(Stage primaryStage) {
BorderPane pane = new BorderPane();
pane.setTop(new CustomPane("Top"));
pane.setRight(new CustomPane("Right"));
pane.setBottom(new CustomPane("Bottom"));
pane.setLeft(new CustomPane("Left"));
pane.setCenter(new CustomPane("Center"));
Scene scene = new Scene(pane);
primaryStage.setTitle("ShowBorderPane");
primaryStage.setScene(scene);
primaryStage.show();
}

i3305
Using BorderPane
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));
}
}

A pane can be added into another pane

i3305
HBox

i3305
VBox

i3305
Using HBox and VBox
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
BorderPane pane = new BorderPane();
pane.setTop(getHBox());
pane.setLeft(getVBox());
Scene scene = new Scene(pane);
primaryStage.setTitle("ShowHBoxVBox");
primaryStage.setScene(scene);
primaryStage.show();
}
i3305
private HBox getHBox() {
HBox hBox = new HBox(15);
hBox.setPadding(new Insets(15, 15, 15, 15));
hBox.setStyle("-fx-background-color: gold");
hBox.getChildren().add(new Button("Computer Science"));
hBox.getChildren().add(new Button("Chemistry"));
ImageView imageView = new ImageView(new Image("image/flag.jpg"));
hBox.getChildren().add(imageView);
return hBox;
}

private VBox getVBox() {

VBox vBox = new VBox(15);
vBox.setPadding(new Insets(15, 5, 5, 5));
vBox.getChildren().add(new Label("Courses"));
Label[] courses = {new Label("i2210"), new Label("i3305"),
new Label("i4404"), new Label("i4408")};
for (Label course: courses) {
VBox.setMargin(course, new Insets(0, 0, 0, 15));
vBox.getChildren().add(course);
}
return vBox;
} i3305
Case study

i3305
ClockPane

i3305
Formulas
• 3 hands with 2 ends each:
• 1st end: (centerX, centerY)
• 2nd end: (endX, endY)
• endX = centerX + handLength . sin(θ)
• endY = centerY - handLength . cos(θ)

• Second’s hand: θ = second . (2π/60)

• Minute’s hand: θ = (minute + second/60) . (2π/60)
• Hour’s hand: θ = (hour + minute/60 + second/(60 . 60)) . (2π/12)

i3305
Exercises

i3305
Exercise 1 : Display a checkerboard
• Write a program that displays a checkerboard in which each white
and black cell is a Rectangle with a fill color black or white

i3305
Exercise 2: Display a bar chart
• Write a program that uses a bar chart to display the percentages of
the overall grade represented by projects, quizzes, midterm exams,
and the final exam.
• Use the Rectangle class to display the bars.

i3305