Transcript Lecture 7:Introduction to JavaFX

Lecture 7:Introduction to
JavaFX
Michael Hsu
CSULA
A New Era

You’ve learned most of the basic concepts of Java

You should be able to pick up any library, do some research, and use it in your
project

From now and on, there are too many methods available in the libraries that
we’re covering, we will not go over all of them in class

It’s up to you to figure it out
GUI Applications


So far, you’ve probably only worked on console applications

Provide input from keyboard

Read input using java.util.Scanner

Do something

Print result to System.out
It’ll be nice to have a GUI application

Examples: Microsoft Word, Apps on your phone, Your browser

We cover the basic material before covering GUI programming because it
requires use of all the basic knowledge you’ve learned so far

We will cover JavaFX in this class
Why JavaFX

JavaFX is a new framework for developing Java GUI Programs



Some Java History

Ancient code: AWT

Until Java 7: Swing (Will never die, most current application still use it)

Java 8 and later: JavaFX
Good way to review and use all the knowledge you acquired so far


Graphical functionality is provided by the library, no need to write your own
Object Oriented Programming
The principles you learn in this class will apply to many UI frameworks you
learn in the future
Getting JavaFX to work on your
computer

Couple of options:

Download the all-in-one eclipse package


Install the e(fx)clipse plugin in your existing eclipse



http://www.eclipse.org/efxclipse/install.html#for-the-lazy
http://www.eclipse.org/efxclipse/install.html#for-the-ambitious
Modify the Java Compiler Option for a JavaFX Project (not recommended)

The reason why eclipse shows an error is JavaFX may not be available on all machines, it
is part of the “extended API”

Go to Window -> Preferences -> Java -> Compiler -> Errors/Warnings. Then under
Deprecated and restricted API, change “Forbidden reference (access rules)” to ignore.
Compiling from command line should work as long as you’re using the latest
JDK
JavaFX HelloWorld Example
public class HelloWorld extends Application {
public static void main(String[] args) {
launch(args);
}
// Override the start method in the Application class
@Override
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
Button btOK = new Button("OK");
Scene scene = new Scene(btOK, 200, 250);
primaryStage.setTitle("MyJavaFX"); // Set the stage title
primaryStage.setScene(scene); // Place the scene
primaryStage.show();
}
}
JavaFX HelloWorld Example: Start
public class HelloWorld extends Application {
public static void main(String[] args) {
launch(args);
}
// Override the start method in the Application class
@Override
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
Button btOK = new Button("OK");
Scene scene = new Scene(btOK, 200, 250);
primaryStage.setTitle("MyJavaFX"); // Set the stage title
primaryStage.setScene(scene); // Place the scene
primaryStage.show();
}
}
• Starting Point of a JavaFX
application
• Main Method can be
omitted when running from
console/with e(fx)clispe
installed
• A primary stage is created
automatically
JavaFX HelloWorld Example: Controls
public class HelloWorld extends Application {
public static void main(String[] args) {
launch(args);
}
// Override the start method in the Application class
@Override
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
Button btOK = new Button("OK");
Scene scene = new Scene(btOK, 200, 250);
primaryStage.setTitle("MyJavaFX"); // Set the stage title
primaryStage.setScene(scene); // Place the scene
primaryStage.show();
}
}
• Individual UI components
are called controls
• Example: Labels, Buttons
Some Terminologies



Stage

Represents windows, top level container

Many setter methods: setTitle(), setWidth()

You can create multiple stages and use one or another
Scene

Each stage has a scene

Scene holds controls (buttons, labels, etc)
Pane

You can put controls in Scenes directly, but we usually Panes for better layout

Examples: StackPane, BorderPane, HBox, VBox
JavaFX HelloWorld Example: Creating the Stage
public class HelloWorld extends Application {
public static void main(String[] args) {
launch(args);
}
// Override the start method in the Application class
@Override
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
Button btOK = new Button("OK");
Scene scene = new Scene(btOK, 200, 250);
primaryStage.setTitle("MyJavaFX"); // Set the stage title
primaryStage.setScene(scene); // Place the scene
primaryStage.show();
}
}
• Place the scene in the
Stage
• Stage.show() makes
window appear
Example: Multiple
Stages
Examples: Using Panes
http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm
Basic Structure of JavaFX

Application

Override the start(Stage) method

Stage, Scene, and Nodes
Stage
Scene
Button
13
Layout Panes
JavaFX provides many types of panes for organizing
nodes in a container.
14
Panes, UI Controls, and Shapes
15
http://docs.oracle.com/javafx/2/scenegraph/jfxpub-scenegraph.htm
Display a Shape
This example displays a circle in the center of the pane.
x
y
Y Axis
X Axis
(0, 0)
(x, y)
(0, 0)
Y Axis
Java
Coordinate
System
X Axis
Conventional
Coordinate
System
ShowCircle.java
16
Binding Properties




JavaFX introduces a new concept called binding property
Enables a target object to be bound to a source object.
If the value in the source object changes, the target
property is also changed automatically.
The target object is simply called a binding object or a
binding property.
ShowCircleCentered.java
BidrectionalBinding.java
17
Binding Property:
getter, setter, and property getter
18
Common Properties and Methods for
Nodes
19

style: set a JavaFX CSS style

rotate: Rotate a node
The Image Class
20
The ImageView Class
21