Dr Walid M. Aly

CS244 Advanced programming Applications

Lecture6

Building Graphical user interface using JavaFX

10:35

JavaFX vs Swing and AWT§ When Java was introduced, the GUI classes were

bundled in a library known as the AbstractWindows Toolkit (AWT).

§ The AWT user-interface components werereplaced by a more robust, versatile, and flexiblelibrary known as Swing components.

§ With the release of Java 8, Swing is replaced by acompletely new GUI platform known as JavaFX.

2

10:35

Basic Structure of JavaFX

✦ Application

✦ Override the start(Stage primaryStage) method

✦ Stage, Scene, and Nodes

3

Stage

Scene

Button

§ Every JavaFX program is defined in a class that extends javafx.application.Application

§ A JavaFX program can run stand-alone or from a Web browser

10:354

import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.stage.Stage;

public class MyJavaFX extends Application {public void start(Stage primaryStage) {

Button btOK = new Button("OK");Scene scene = new Scene(btOK, 200, 250);primaryStage.setTitle("MyJavaFX"); // Set the stage titleprimaryStage.setScene(scene); // Place the scene in the stageprimaryStage.show( ); // Display the stage

}public static void main(String[] args) {

launch(args);}

}MyJavaFX

10:35

Notes on MyJavaFX.java

✦ The launch method (line 22) is a static method defined in theApplication class for launching a stand-alone JavaFX application.

✦ The main method (lines 21–23) is not needed if you run theprogram from the command line. It may be needed to launch aJavaFX program from an IDE with a limited JavaFX support.

✦ When you run a JavaFX application without a main method, JVMautomatically invokes the launch method to run the application.

5

public static void main(String[] args) { launch(args);

}

10:35

Notes on MyJavaFX.java

✦ The main class overrides the start method defined injavafx.application.Application

✦ After a JavaFX application is launched:-– the JVM constructs an instance of the class using its no-arg

constructor and– invokes its start method.

✦ The start method normally places UI controls in a scene anddisplays the scene in a stage

6

public void start(Stage primaryStage) {// Create a button and place it in the sceneButton btOK = new Button("OK");Scene scene = new Scene(btOK, 200, 250);primaryStage.setTitle("MyJavaFX"); // Set the stage titleprimaryStage.setScene(scene); // Place the scene in the stag, ,stage dimensions will adapt to sceneprimaryStage.show(); // Display the stage

}

10:35

Stage-Scene✦ A Stage object is a window.✦ A Stage object called primary stage is

automatically created by the JVM when theapplication is launched

✦ You can create additional stages if needed✦ Class Button is subclass of class Parent

7

javafx.stage.Stagepublic final void setScene(Scene value)Specify the scene to be used on this stage.

Stage ( )Creates a new instance of decorated Stage.

public final void show()show this Window by setting visibility to true

javafx.scene.SceneScene(Parent root, double width, double height)Creates a Scene for a specific root Node with a specific size.

10:35

Example:Multiple Stages

8

public void start(Stage primaryStage) {// Create a scene and place a button in the sceneScene scene = new Scene(new Button("OK"), 200, 250);primaryStage.setTitle("MyJavaFX"); // Set the stage titleprimaryStage.setScene(scene); // Place the scene in the stageprimaryStage.show(); // Display the stage

Stage stage = new Stage(); // Create a new stagestage.setTitle("Second Stage"); // Set the stage title// Set a scene with a button in the stagestage.setScene(new Scene(new Button("New Stage"), 100, 100)); stage.show(); // Display the stage

}MultipleStageDemo

10:35

✦ When you run MyJavaFX, The button is always centered inthe scene and occupies the entire window no matter howyou resize it.

✦ You can fix the problem by setting the position and sizeproperties of a button.– a better approach is to use container classes, called panes, for

automatically laying out the nodes in a desired location and size.– You place nodes inside a pane and then place the pane into a

scene.

9

Panes, UI Controls, and Shapes

10:35

qA node is a visual component such as a shape, an image view, a UIcontrol, or a pane.q A shape refers to a text, line, circle, ellipse, rectangle, arc, polygon, polyline,

etc.q A UI control refers to a label, button, check box, radio button, text field, text

area, etc.

q A node can be placed only in one pane. Otherwise an exception is thrown

q a pane is a node. So a pane can be added into another pane.

10

Panes, UI Controls, and Shapes

10:35

Panes, UI Controls, and Shapes

11

• Stage can have only one Scene but will own solely its reference• Scene can have only one Parent but will own solely its reference• Pane can have many nodes, but will own solely each reference of them

10:3512

Panes, UI Controls, and Shapes

10:35

javafx.scene.layout.Panepublic class Pane extends Region§ This class may be used directly in cases where absolute positioning of children is

required since it does not perform layout beyond resizing resizable children to their preferred sizes.

§ It is the application's responsibility to position the children since the pane leaves the positions alone during layout

13

Pane pane = new Pane();pane.getChildren().add(new Button("-------------------"));pane.getChildren().add(new Button("Hello World"));pane.getChildren().add(new Button("W"));

javafx.scene.layout.PanePane( )Creates a Pane layout

protected ObservableList<Node> getChildren( )Gets the list of children of this Parent.

javafx.collections. ObservableList<E>boolean add(E e)Appends the specified element to the end of this list

10:3514

Ø StackPane lays out its children in a back-to-front stack.✦ The StackPane respects a node’s preferred sizeØ A StackPane places the nodes in the center and nodes are

placed on top of each otherØ The z-order of the children is defined by the order of the

children list with the 0th child being the bottom and last childon top

Ø Alignment property, :defaults to Pos.CENTER.

javafx.scene.layout.StackPaneStackPane( )Creates a StackPane layout with default CENTER alignment.

protected ObservableList<Node> getChildren( )Gets the list of children of this Parent.

javafx.scene.layout.StackPane

10:35

Example:using StackPane

15

import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.StackPane;import javafx.stage.Stage;

public class ButtonInPane extends Application {public void start(Stage primaryStage) {

// Create a scene and place a button in the sceneStackPane pane = new StackPane();pane.getChildren().add(new Button("Hello World"));pane.getChildren().add(new Button("OK.."));pane.getChildren().add(new Button("H"));

Scene scene = new Scene(pane, 200, 200);primaryStage.setTitle("Buttons in a stack pane"); // Set the stage titleprimaryStage.setScene(scene); // Place the scene in the stageprimaryStage.show( ); // Display the stage

}

public static void main(String[] args) {launch(args);

}}

ButtonInPane

10:35

Display a ShapeThis example displays a circle in the center of the pane.

(a) A circle is displayed in the center of the scene. (b) Using Pane,the circle is not centered after the window is resized.

ShowCircle

(0, 0) X Axis

Y Axis

(x, y)

x

y

Java Coordinate System

X Axis Conventional Coordinate System

(0, 0)

Y Axis

10:35

Display a Shape…..✦ If the pane was of type StackPane , the circle will

be centered will the pane is resized, Stack paneautomatically places nodes in the center of the pane

17

ShowCircleInStackPane.java

public void start(Stage primaryStage) {// Create a circle and set its propertiesCircle circle = new Circle();circle.setCenterX(100);circle.setCenterY(100);circle.setRadius(50);circle.setStroke(Color.BLACK);circle.setFill(null);

// Create a pane to hold the circlePane pane = new StackPane();pane.getChildren().add(circle);

// Create a scene and place it in the stageScene scene = new Scene(pane, 200, 200);primaryStage.setTitle("ShowCircle in Stacked Pane");

primaryStage.setScene(scene); // Place the scene in the stageprimaryStage.show(); // Display the stage

10:35

Common Properties and Methods for Nodes ✦ style: set a JavaFX CSS style✦ The syntax for setting a style is styleName:value.✦ Multiple style properties for a node can be set together separated by

semicolon (;). For example, the following statement– circle.setStyle("-fx-stroke: black; -fx-fill: red;");

sets two JavaFX CSS properties for a circle. This statement is equivalent to the following two statements.

– circle.setStroke(Color.BLACK);– circle.setFill(Color.RED);

– rotate: Rotate a node

18NodeStyleRotateDemo

javafx.scene.Nodepublic final void setStyle(java.lang.String value)A string representation of the CSS style associated with thisspecific Node. This is analogous to the "style" attribute of anHTML element

10:35

The Color Class

19

10:35

The Font Class

20

10:3521

Label label = new Label("JavaFX");label.setFont(Font.font("Times New Roman",FontWeight.BOLD, FontPosture.ITALIC, 20));pane.getChildren( ).add(label);

FontDemo

10:35

The Image and ImageView Classes

✦ the ImageView class can be used to display animage.

✦ The javafx.scene.image.Image class represents agraphical image and is used for loading an imagefrom a specified filename or a URL.– new Image("image/us.gif")– new Image("http://www.cs.armstrong.edu/liang/image/us.gif")

22

10:35

The ImageView Class

23

10:35

Example:Using ImageView

24

import javafx.application.Application;………………….public class ShowImage extends Application {public void start(Stage primaryStage) {Pane pane = new HBox(10);pane.setPadding(new Insets(5, 5, 5, 5));

Image image = new Image("image/us.gif");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"); // Set the stage titleprimaryStage.setScene(scene); // Place the scene in the stageprimaryStage.show(); // Display the stage

}………………..

}

ShowImage

The padding property can be set to manage the distance between the nodes and the edges of theHBox pane

10:35

✦ The program creates an HBox (line 14). An HBox is a pane that places all nodeshorizontally in one row.

✦ The setRotate method is defined in the Node class and can be used for any node.✦ an Image object can be shared by multiple nodes. In this case, it is shared by

three ImageView.✦ However, a node such as ImageView cannot be shared. You cannot place an

ImageView multiple times into a pane or scene.✦ Note that you must place the image file in the same directory as the class file, as

shown in the following figure.

25

Notes on previous program

10:35

References

✦ http://docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm

✦ http://docs.oracle.com/javafx/2/layout/jfxpub-layout.htm

✦ http://zetcode.com/gui/javafx/

26