Chapter 14
JavaFX BasicsDR. JONES
KENNESAW STATE UNIVERSITY
CS 2302
SUMMER 2015
slides created by Rashaad Jones
AWT vs. Swing vs. JavaFX
Abstract Windows Toolkit (AWT)
Simple GUI library
Prone to bugs
Platform specific
Swing
More comprehensive GUI library
Platform independent
JavaFX
Functionality for 2D, 3D, animation, video, mobile
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
public class MyJavaFX extends Application
{
@Override
public void start(Stage primaryStage)
{
Button btOk = new Button("OK");
Scene scene = new Scene(btOk, 200, 250);
primaryStage.setTitle("MyJavaFX");
primaryStage.setScene(scene);
primaryStage.show();
}
//Only needed with IDEs with limited support.
//In JGrasp, this can be omitted using the Build > Run as application
/*public static void main(String [] args)
{
Application.launch(args);
}*/
}
Stage Window
use the setTitle method to display a title
Scene Object that attaches to the stage (via the setScene
method)
Pane Container class to hold all visual components
Specifies location and size of all components
In most cases, you will use a layout pane class
Node Visual components
Best practice: Scene > Pane > Node
Absolute Positioning
Java Coordinate System
Conventional Coordinate
System
(0, 0) x-axis
y-axis
(50, 10)
(10, 50)
5010
50
10
Example without a Layout Class:
Absolute Positioningimport javafx.application.Application;import javafx.scene.Scene;import javafx.stage.Stage;import javafx.scene.layout.Pane;import javafx.scene.paint.Color;import javafx.scene.shape.Circle;
public class ShowCircle extends Application{
@Overridepublic void start(Stage primaryStage){
init(primaryStage); primaryStage.show();
}
private void init(Stage primaryStage){
Circle c = initCircle();Pane p = initPane(c);
Scene s = initScene(p);
primaryStage.setTitle("Show Circle");primaryStage.setScene(s);
}
private Scene initScene(Pane p){return new Scene(p, 200, 200);
}
private Pane initPane(Circle c){
Pane p = new Pane();p.getChildren().add(c);
return p;}
private Circle initCircle(){
Circle circle = new Circle();circle.setCenterX(100);circle.setCenterY(100);circle.setRadius(50);circle.setStroke(Color.BLACK);circle.setFill(Color.WHITE);
return circle;}
}
Limitation with Absolute Positioning
Nodes are specific to the size of the window set in code
If window is resized, nodes will remain in their original position
Options to resolve this limitation:
Disable the ability for the user to resize the window
Useful for pop-ups
Property Binding
Use relative positioning layouts
Property Binding
Setting a target object to a source object where a change in the
source object will be automatically reflected in the target object.
Example:
Property Binding to resize UI:
Limitations
Difficult to do with comprehensive UIs
Requires several mathematical functions
May need a maximum and minimum values set
Alternative: Let Java handle the resizing (via LayoutPanes)
Layout Panes
Panes that automatically have constraints to define how to use
relative positioning to lay out nodes
Resolves absolute positioning limitations from the Using the Pane
class
Layout Panes Classes:
StackPane
FlowPane
GridPane
BorderPane
HBox
VBox
import javafx.application.Application;import javafx.scene.Scene;import javafx.stage.Stage;import javafx.scene.layout.*;import javafx.scene.control.Button;
public class PaneExamples extendsApplication{
@Overridepublic void start(Stage
primaryStage){
init(primaryStage); }
private void init(Stage primaryStage)
{setStage(primaryStage, new
FlowPane(), "FlowPane");setStage(new Stage(), new
StackPane(), "StackPane");setStage(new Stage(), new
GridPane(), "GridPane");setStage(new Stage(), new
BorderPane(), "BorderPane");
setStage(new Stage(), new HBox(), "HBox");
setStage(new Stage(), new VBox(), "VBox");
}
private void setStage(Stage stage, Pane p, String title)
{p.getChildren().addAll(new
Button("Btn1"), new Button("Btn2"), newButton("Btn3"));
Scene s = initScene(p);
stage.setTitle(title);stage.setScene(s);stage.show();
}
private Scene initScene(Pane p){
return new Scene(p, 200, 200); }
}
Layout Panes StackPane
Places nodes on top of each other
Useful when nodes have different sizes
FlowPane
Places nodes left to right, up and down
Similar to reading
GridPane
Places nodes in a 2D grid
Need to set constraints to see all nodes
Very powerful and flexible
BorderPane
Places nodes in regions
Need to set constraints
Hbox
Places nodes in a single row
Vbox
Places nodes in a single column
Layout Panes: Best Practices
Use multiple panes
One root pane where all other panes are attached
Typically a borderpane
For each “region” in the root pane
Include a subroot pane that attaches nodes for the specific region
Example
rootpane: borderpane
left
a VBox subroot
For a side menu
center
a GridPane subroot
for the main area
top
a Hbox subroot
for Menu
bottom
a FlowPane subroot
for buttons
Displaying text in JavaFX
Labels
Default behavior: read-only
new Label(“text to display”);
TextBox and TextArea
Default behavior: editable
TextField – single line text field
TextField(): empty text field
TextField(“text to display”): displays text message
TextArea – multiple line text area
TextArea(): empty text field
TextArea(“text to display”): displays text message
Text
Text(xpos, ypos, “text”)
Use the Font class to set font for textual nodes
Displaying images in JavaFX
Use the Image class to create an image object
Example: new Image(“image/us.gif”);
Remember to use relative filepath
Use the ImageView class to display the image in the UI
Image image = new Image(“image/us.gif”);
ImageView imageView = new ImageView(image);
or
ImageView imageView = new ImageView(new Image(“image/us.gif”));