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)

Relative Positioning

Button in

Center of UIButton in

Center of UI

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

Example:

Using JavaFX to build JGrasp

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”));