Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java...

60
Introduction To JavaFX CSC 295-01 Spring 2019 Howard Rosenthal

Transcript of Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java...

Page 1: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Introduction To JavaFXCSC 295-01Spring 2019

Howard Rosenthal

Page 2: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Course References� Materials for this course have utilized materials in the following documents.

Additional materials taken from web sites will be referenced when utilized.1. http://www.programmedlessons.org/Java9/index.html2. Anderson, Julie and Franceschi Herve, Java Illuminated 5TH Edition,, Jones and

Bartlett, 20193. Bravaco, Ralph and Simonson, Shai, Java programming From The Ground Up,

McGraw Hill, 20104. Deitel, Paul and Deitel, Harvey, Java, How To Program, Early Objects, Tenth

Edition, Pearson Publishing, 20155. Gaddis, Tony, Starting Out With Objects From Control Structures Through

Objects, Pearson Publishing, 20166. Horstmann, Cay, Core Java For The Impatient, Addison Wesley- Pearson

Education, 20157. Schmuller, Joseph, Teach Yourself UML In 24 Hours Second Edition, SAMS

Publishing, 20028. Urma, Raoul-Gabriel, Fusco, Mario and Mycroft, Alan, Java 8 in Action:

Lambdas, Streams, and Functional-Style Programming, Manning Publishing, 2014

9. Wirfs-Brock, Rebecca, Wilkerson, Brian and Wiener, Laura, Designing Object-Oriented Software, Prentice Hall, 1990

2

Page 3: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Lesson Goals

� Introduce JavaFX� Introduce and Basic Terms of JavaFX� Introduce the Stage and the Scene paradigm� Understand the Graphics Coordinate System� Understand the Color class� Understand the JavaFX Application class and the

structure of a JavaFX application program� Take a deeper look at The Stage class� Take a deeper look at The Scene class� Look at some simple graphics programming

3

Page 4: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

4

Page 5: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

JavaFX – The Latest Version Of Java Graphics� Throughout the years Java has provided several graphics systems including the

Abstract Window Toolkit and Swing.

� Java’s current system is called JavaFX and this is the graphics application that we will use

� JavaFX is a collection of packages for writing graphics applications.

� It replaces older Java graphics packages and should be used for all new projects.

� JavaFX comes as part of the Java Development Kit 8 (JDK 8).

� With JavaFX you can create a window (called a Stage), and put a Scenecontaining geometrical shapes into it.

� The geometrical shapes can be lines, ovals, rectangles, and other shapes. You can pick the colors for the border and area of the shapes.

� JavaFX is really big.

� This lesson is meant to provide an introduction only.

� JavaFX uses a mixed performance/art metaphor.

� We start with a Stage (a window) to which we add one or more Scenes.

� To produce graphical output, we add a canvas to our scene, and we draw shapes and text on the canvas.

� When our application begins, the window opens and displays whatever we have

drawn on the canvas.

5

Page 6: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The JavaFX Architecture

6

Page 7: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

JavaFX Features (1)� Java APIs

� JavaFX is a Java library that consists of classes and interfaces that are written in native Java code.

� The APIs are designed to be a friendly alternative to Java Virtual Machine (Java VM) languages, such as JRuby and Scala.

� FXML and Scene Builder� FXML is an XML-based declarative markup language for

constructing a JavaFX application user interface. � A designer can code in FXML or use JavaFX Scene Builder to

interactively design the graphical user interface (GUI). � Scene Builder generates FXML markup that can be ported to an IDE

where a developer can add the business logic.� WebView

� A web component that uses WebKit HTML technology to make it possible to embed web pages within a JavaFX application.

� JavaScript running in WebView can call Java APIs, and Java APIs can call JavaScript running in WebView.

7https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html

Page 8: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

JavaFX Features (2)� Swing interoperability

� Existing Swing applications can be updated with new JavaFX features, such as rich graphics media playback and embedded Web content.

� Built-in User Interface(UI) controls compliant with the Cascading Style Sheet (CSS) � JavaFX provides all the major UI controls required to develop a full-featured

application. � Canvas API

� The Canvas API enables drawing directly within an area of the JavaFX scene that consists of one graphical element (node).

� This is a separate paradigm with an alternate set of methods that I will briefly discuss at the end of this lesson

� Multitouch Support. � JavaFX provides support for multitouch operations, based on the capabilities of

the underlying platform.� Hardware-accelerated graphics pipeline

� JavaFX graphics are based on the graphics rendering pipeline (Prism). � JavaFX offers smooth graphics that render quickly through Prism when it is

used with a supported graphics card or graphics processing unit (GPU). � If a system does not feature one of the recommended GPUs supported by

JavaFX, then Prism defaults to the Java 2D software stack.

8

Page 9: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

JavaFX Features (3)

� High-performance media engine. � The media pipeline supports the playback of web

multimedia content. � It provides a stable, low-latency media framework that is

based on the GStreamer multimedia framework.� Self-contained application deployment model.

� Self-contained application packages have all of the application resources and a private copy of the Java and JavaFX runtimes.

� They are distributed as native installable packages and provide the same installation and launch experience as native applications for that operating system. � See the Deploying JavaFX Applications document.

9

Page 10: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The JavaFX Hierarchy

10

Page 11: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The JavaFX Hierarchy – Another View

11

Page 12: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

12

Page 13: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Stage� Graphics programs put graphical components inside a window.

� Of course, in software the components are software objects. � The objects live in memory and are connected to each other in various

ways. � The graphics system has the job of using the objects and their

connections to produce a picture on the monitor.� The class of a window object is Stage.

� The stage is the outer frame for a JavaFX application. � The stage typically corresponds to a window.

� The window has nice borders, buttons along the top border, and other features. � A Stage is the container that holds the other graphics components.

� Like all software objects, a Stage object is a section of main memory that holds information and methods. � Each stage is represented by a Stage object inside a JavaFX application. � A JavaFX application has a primary Stage object which is created for you

by the JavaFX runtime. � A JavaFX application can create additional Stage objects if it needs

additional windows open. For instance, for dialogs, wizards etc.� With the help of the operating system and the graphics board, Java

paints a picture on the computer monitor for the window. � What you see on the monitor is a graphical rendering of the Stage and

the objects it contains. 13

Page 14: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Scene (1)� To display anything on a stage in a JavaFX application, you need a

scene. � A stage can only show one scene at a time, but it is possible to

exchange the scene at runtime. � Just like a stage in a theater can be rearranged to show multiple

scenes during a play, a stage object in JavaFX can show multiple scenes (one at a time) during the life time of a JavaFX application.

� You might wonder why a JavaFX application would ever have more than one scene per stage. � Imagine a computer game. A game might have multiple "screens" to

show to the user. For instance, an initial menu screen, the main game screen (where the game is played), a game over screen and a high score screen.

� Each of these screens can be represented by a different scene. When the game needs to change from one screen to the next, it simply attaches the corresponding scene to the Stage object of the JavaFX application.

� A scene is represented by a Scene object inside a JavaFX application. A JavaFX application must create all Scene objects it needs.

14

Page 15: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Scene (2)� Scene Graph

� All visual components (controls, layouts etc.) must be attached to a scene to be displayed, and that scene must be attached to a stage for the whole scene to be visible.

� The total object graph of all the controls, layouts etc. attached to a scene is called the scene graph.

� Nodes� All components attached to the scene graph are called nodes.

All nodes are subclasses of a JavaFX class called javafx.scene.Node.

� There is only one root node, which is the parent of all the other nodes in the scene graph.

� There are two types of nodes� A branch node is a node that can contain other nodes (child nodes). � Branch nodes are also referred to as parent nodes because they can

contain child nodes. � A leaf node is a node which cannot contain other nodes.

15

Page 16: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

JavaFX Components (1)� JavaFX comes with a set of built-in ready-to-use chart

components, so you don't have to code charts from scratch every time you need a basic chart. � Area, Bar, Bubble, Line, Pie, etc.

� 2-D and 3-D components� Audio and Video Components� JavaFX contains a WebView component which is

capable of showing web pages � The WebView component makes it possible to mix a

desktop application with a web application. � There are times where that is useful.

� For instance, if you already have a decent web application, but need some features which can only be provided sensibly with a desktop application

16

Page 17: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

JavaFX Components (2)There are a whole host of components available in JavaFX, some of which we will discuss now, other may be delayed to a later date or class.� JavaFX controls are JavaFX components which provide

some kind of control functionality inside a JavaFX application� Control such as buttons, check boxes, radio buttons, menus,

etc.� JavaFX layouts are components which contains other

components inside them. � The layout component manages the layout of the components

nested inside it. � JavaFX layout components are also sometimes called parent

components because they contain child components, and because layout components are subclasses of the JavaFX class javafx.scene.Parent.

� It is possible to nest layout components inside other layout components. This can be useful to achieve a specific layout.

17

Page 18: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

18

Page 19: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Graphics Coordinate System (1)The example on the next page has a width of 700 (0-699) and height of 400 (0-399)� The x and y values say where to place objects.

� This is like graph paper. � The (0,0) location is the upper left corner of the drawing area.

� X values increase to the right.� Y values increase going down.� There are no negative values

� Distance is measured in pixels. � A pixel is one of the graph paper squares that the video screen has been

(conceptually) divided into. � If your monitor is set to a resolution of 1920 by 1080, then the whole screen is

divided into 1920 horizontal squares and 1080 vertical squares. � A window will usually cover only part of that area, perhaps an area 400 pixels

horizontal by 300 vertical. � It is the responsibility of the graphics card and its driver to implement this idea

of graph paper on the actual electronics of your computer system.� A pixel is not one of the little, glowing dots of phosphor on the monitor screen.

� A pixel is a conceptual measurement. � Depending on the resolution you are using, an image pixel may correspond to

several of these dots or a fraction of one dot.

19

Page 20: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Graphics Coordinate System (1)

20

Page 21: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Graphics Coordinate System – An Example

21

Page 22: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

22

Page 23: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Color (1)

� The current background color is by default white.� Can be changed

� There are also two foreground colors: the fill color and the stroke color (default for both is black).

� All drawing is done in current stroke or fill colors; the current colors are in effect until changed.

� To use color, import the Color class from the javafx.scene.paint package.

23

Page 24: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Color (2)

� The Color class defines colors using the RGB (Red, Green, Blue) system.

� Any RGB color is composed of red, green, and blue components. Each component’s value can range from 0 to 255 (00 to FF in hexadecimal).

� The higher the value, the higher the concentration of that component in the color.

� For example:

� Red is: red = FF, green = 00, and blue = 00

� Yellow is: red = FF, green = FF, and blue = 00

24

Page 25: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Graphics Context And Color (3)� White, Gray and Black

� The color white is (FF, FF, FF).� The color black is (00, 00, 00).� Gray consists of equal amounts of each component. � The higher the value of the components (that is, the

closer to white), the lighter the color of gray. � Similarly, the closer the gray value gets to 00

(approaching black), the darker the color of gray.

25

Page 26: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Static Color Constants

26

There are many other predefined colors including:

Color.BEIGE Color.BROWN Color.CORNFLOWERBLUE Color.DARKBLUE Color.DARKGREEN Color.FUCHSIA Color.GOLD Color.LIGHTBLUE Color.LIGHTGREEN Color.PURPLEColor.TRANSPARENT

Page 27: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Color Constructornew Color(double red, double green, double blue, double opacity)

All values are >= 0.0 and <=1.0� Creates a new Color directly� When a new Color object is created it is immutable� Note:� The opacity of a color determines how much of an

underlying color is allowed to show through.� An opacity of 1.0 allows none of the underlying color to

show through. � An opacity of 0.5 allows half of the underlying color to

show through. � An opacity of 0.0 is completely transparent. � The predefined colors have opacity 1.0.

27

Page 28: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Custom Colors Using Color MethodsName Return value Description

rgb (int red, int green, int blue) Color Creates a color with an red component, green component, and blue component each from 0-255

rgb (int red, int green, int blue, double opacity)

Color Creates a color with an red component, green component, blue components each from 0-255 and opacity component, from 0 .0 (completely transparent to 1.0 (opaque)

color (double red, double green double blue)

Color Creates a color with an red component, green component, and blue component, each from 0.0 to 1.0

color (double red, double green double blue, double opacity)

Color Creates a color with an red component, green component, blue component and opacity component, each from 0.0 to 1.0

28

� The above methods are all static. So use is as follows:Color newColor = Color.rgb(2, 20, 200, .7)

Page 29: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Darker and Brighter Colors� You can use the darker and brighter methods to create new

colorsColor myBlue = new Color( 0.1, 0.3, 0.8, 0.85 ); // create a custom Color objectColor myLightBlue = myBlue.brighter(); // create a new Color object, based on the first� first creates a Color object using a constructor. The reference

variable myBlue points to it. � Then myBlue.brighter() creates a new color object with higher

values for red, green, and blue. � Note that the first color (pointed to by myBlue) does not change.

Color myDarkBlue = myBlue.darker(); // create a new Color object, based on the first� creates a second new Color object, darker than the first (less of red,

green, and blue).

29

Page 30: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

30

Page 31: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Simple Staging� Look at MyFxApp.java

� A JavaFX application needs a primary launch class.

� This class has to extend the javafx.application.Application class which

is a standard class in Java since Java 8.

� This means that you don’t need the main method to launch it.

� All subclasses of the JavaFXApplication class must implement the abstract start() method of the Application class (or be an abstract

subclass of Application itself).

� The start() method is called when the JavaFX application is started.

� The start() method takes a single parameter of the type Stage . The

stage is where all the visual parts of the JavaFX application are displayed. The Stage object is created for you by the JavaFX runtime.

� The example sets a title on the Stage object and then calls show() on it.

� That will make the JavaFX application visible in a window with the title visible in the top bar of the window.

� If you do not call show() on the stage object, nothing is visible.

� No window is opened.

� In case your JavaFX application does not become visible when launched, check if you have remembered to call the Stage show() method from inside start() (or from a method that has access to the Stage object

31

Page 32: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Importing Packages And Classes

� Even the simplest graphics application will require multiple import statements

� Depending on the resources that you wish to use this set can quickly grow

� A minimum set includes:import javafx.application.Application;import javafx.stage.Stage;import javafx.scene.Scene;Other import statements…

32

Page 33: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

How The Program Works

33

Page 34: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

How The JavaFX Program Works

� Import the JavaFX packages for Application and Stage.� Define a class that extends Application.� Define a start() method which overrides the abstract

method in the Application class� The start method has a single parameter of type Shape

� The runtime system automatically creates a Stage and calls the start() with a reference to it.

� Various methods of Stage may be invoked.� Call primaryStage.show() to put the window on the

screen.� Note: primaryStage is just a reference variable name for

an object of type Stage

34

Page 35: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Structure Of An Application

35

A start method thataccepts a Stageargument. This methodis called by the inheritedlaunch method.

A static main methodthat calls the inheritedlaunch method

A class that extendsthe Applicationclass

Necessary importstatements

import javafx.application.Application;import javafx.stage.Stage;import javafx.scene.Scene;Other import statements…

public class ClassName extends Application{

public static void main(String[] args){

// Launch the application.launch(args);

}

@Overridepublic void start(Stage primaryStage){

// Insert startup code here.}

}

Page 36: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The JavaFX Application Life Cycle (1)� All JavaFX programs must extend the Application class.

The JavaFX runtime system follows these steps when your program starts:

� Construct an instance of your extension of the Application class.� Your object will inherit the methods of Application. � You can override these methods.

� Call the init() method.� The init() method is a member of the Application class. � As defined in that class, it does nothing. � Your class (which extends Application) can override it to

perform initialization tasks on start-up. You might open a file, read parameters from the command line, or ask the user for values from the command line.

� If you don’t want to initialize anything, you can just ignore init().

� Create global variables and then set them in init().36

Page 37: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The JavaFX Application Life Cycle (2)� Call your start(Stage) method.

� The start() method, as defined in Application, is abstract, so you must override it.

� The start() method puts graphical objects in a Scene and puts a Scene on the Stage.

� User interaction can be set up. � The start() method runs to its end.

� Wait for the application to finish.� The window (Stage) stays on the screen until the close button

is clicked or it is closed by some other means.� Call the stop() method.

� This method is defined in Application, but does nothing. � You might implement it in your Application to close the files

or databases opened in the init() method. � For now, you can ignore stop().

37

Page 38: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Adding A Scene (1)� Look at MyFxAppWithScene.java

� The previous MyFXApp only open a window, but nothing is displayed inside this window.

� To display something inside the JavaFX application window you must add a Scene to the Stage object. � This is done inside the start() method, or a method called

from the start method.

� All components to be displayed inside a JavaFX application must be located inside a scene. � The names for "stage" and "scene" are inspired by a theater.

� A stage can display multiple scenes, just like in a theater play, but only one at a time.

� Similarly, a computer game could have a menu scene, a game scene, a game over scene, a high score scene etc.

38

Page 39: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Adding A Scene (2)

� Three lines have been added to this example. � First a Label object is created.

� Then a Scene object is created, passing the Label as parameter along with two parameters representing the width and height of the scene.

� The first parameter of the Scene constructor is the root element of the scene graph. � The scene graph is a graph like object structure

containing all the visual components to be displayed in the JavaFX application - for instance GUI components.

� The width and height parameters sets the width and height of the JavaFX window when it opened, but the window can be resized by the user.

39

Page 40: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

40

Page 41: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Stage In Detail (1)� A JavaFX Stage, javafx.stage.Stage, represents a

window in a JavaFX desktop application. � Inside a JavaFX Stage you can insert a

JavaFX Scene which represents the content displayed inside a window - inside a Stage.

� When a JavaFX application starts up, it creates a root Stage object which is passed to the start (Stage primaryStage) method of the root class of your JavaFX application. � This Stage object represents the primary window of your

JavaFX application. � You can create new Stage objects later in your

application's life time, in case your application needs to open more windows.

41

Page 42: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Stage In Detail (2)

� Creating a Stage� You create a JavaFX Stage object just like any other Java object

by using the new command and the Stage constructor.

Stage stage = new Stage();� Showing a Stage

� Simple creating a JavaFX Stage object will not show it. In order to make the Stage visible you must call either its show() or showAndWait() method.

stage.show();� The difference between the JavaFX Stage methods show() and

showAndWait() is, that show() makes the Stage visible and then exits the show() method immediately, whereas the showAndWait() shows the Stage object and then blocks (stays inside the showAndWait() method) until the Stage is closed.

42

Page 43: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Stage In Detail (3)

� Set a Scene on a Stage� In order to display anything inside a JavaFX Stage, you

must set a JavaFX Scene object on the Stage. � The content of the Scene will then be displayed inside

the Stage when the Stage is shown. Stage stage = new Stage(); stage.setScene(scene);

� Stage Title� You can set the JavaFX Stage title via the Stage setTitle()

method. � The Stage title is displayed in the title bar of the Stage

window. stage.setTitle("JavaFX Stage Window Title");

43

Page 44: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Stage In Detail (4)� Stage Position

� You can set the position (X,Y) of a JavaFX Stage via its setX() and setY() methods.

� The setX() and setY() methods set the position of the upper left corner of the window represented by the Stage.

Stage stage = new Stage();stage.setX(50);stage.setY(50);� Please note, that it might be necessary to also set the width

and height of the Stage if you set the X and Y position, or the stage window might become very small.

� Stage Width and Height� You can set the width and of a JavaFX Stage via its setWidth()

and setHeight() methods. Stage stage = new Stage();stage.setWidth(600);stage.setHeight(300);

44

Page 45: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Several Stage Constructors

� Below are several of the ways to construct a Stage.

45

Stage Constructors Stage Constructor DescriptionStage() Creates a new instance of decorated

Stage.Stage(StageStyle style) Creates a new instance of decorated

Stage of a specific style

The StageStyle Enumerated Types� DECORATED - Defines a normal Stage style with a solid white

background and platform decorations.� TRANSPARENT - Defines a Stage style with a transparent background

and no decorations.� UNDECORATED - Defines a Stage style with a solid white background

and no decorations.� UNIFIED - Defines a Stage style with platform decorations and

eliminates the border between client area and decorations.� UTILITY - Defines a Stage style with a solid white background and

minimal platform decorations used for a utility window.

Page 46: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Several Stage Methods (1)

46

Stage Specific Methods Stage Method Descriptionvoid setScene(Scene value) Specify the scene to be used on this stage.

(Remember – only one scene at a time on Stage.)

void show() Attempts to show this Window by setting visibility to true

void showAndWait() Shows this stage and waits for it to be hidden (closed) before returning to the caller. This method temporarily blocks processing of the current event, and starts a nested event loop to handle other events. This method must be called on the FX Application thread.A Stage is hidden (closed) by one of the following means:• The application calls the Window.hide() or

close() method on this stage• This stage has a non-null owner window, and

its owner is closed• The user closes the window via the window

system (for example, by pressing the close button in the window decoration)

Page 47: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Several Stage Methods (2)

47

Stage Specific Methods Stage Method Descriptionvoid initStyle(StageStyle style) Specifies the style for this stage. This must be

done prior to making the stage visible.

StageStyle getStyle() Retrieves the style attribute for this stage.

void setFullScreen(boolean value) Sets the value of the property fullScreen.Specifies whether this Stage should be a full-screen, undecorated window.The implementation of full-screen mode is platform and profile-dependent.When set to true, the Stage will attempt to enter full-screen mode when visible. Set to false to return Stage to windowed mode. An IllegalStateException is thrown if this property is set on a thread other than the JavaFX Application Thread.The full-screen mode will be exited (and the fullScreen attribute will be set to false) if the full-screen Stage loses focus or if another Stage enters full-screen mode on the same Screen

void setTitle(String value) Sets the value of the property title.

String getTitle() Gets the value of the property title.

Page 48: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

A Simple Example (1)Look at CircleScene.java1. Extend the Application class and define a start() method. The runtime

system creates your Application, creates a Stage and calls your start() method with a reference to it.

2. The program constructs a Circle object. The parameters are:Circle(double centerX, double centerY, double radius)Think of a sheet of graph paper. A location is described as (X, Y) where X and Y are integers. The (0, 0) location is at the top left.� These parameters are of type double. There are several constructors for

the Circle class (see below).3. Specify the fill color (the color that fills the circle) and the stroke color

(the color for the perimeter of the circle).4. The Circle is added to a Pane.

� Graphics objects must be part of a Pane or other container. There are several classes that work as containers. (More about this later.) For now, let's use Pane. The parameters for this Pane constructor are:

public Pane(Node... children)� This says that any number of Nodes can be added to a Pane. � A Circle is a kind of Node, as are other Shape objects.

48

Page 49: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

A Simple Example (2)6. The Pane is added to a Scene. Every JavaFX program needs one

or more Scenes. There may be several Scenes in a program, but only one is on stage at a time. The parameters for this Scene constructor are:

public Scene(Parent root, double width, double height, Paint fill) � The first parameter is the root of the scene graph. The scene graph

is a data structure that contains all the objects in the Scene. (More on this later.) For this program the root is a Pane. The width and height are the preferred size of the Scene. If this this is not large enough, the graphics system will make a bigger Scene.

7. The Scene is put on Stage. A title is provided for the Stage.� Remember - JavaFX roughly follows an analogy to a theater.

� A Stage is need for the performance (application). � The primary stage is created and passed to your start() method.

� That method can create additional stages if needed.� A Scene takes place on the Stage.

� There may be several Scenes used in the program, but only one at a time is on Stage.

� Graphics objects are placed in a Pane. � There may be several Panes used in a Scene.

49

Page 50: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

A Few Additional Notes

� You can create and place multiple stages on your screen.

� A Pane object can be in only one Scene object being shown

� A node can only be shown in one Pane at a time. That means the object can only be in one place at a time. � If the node (i.e. Circle is placed into a second pane) it

won’t cause an error. However it will only be in seen in the last Pane object is placed in.

50

Page 51: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

51

Page 52: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Scene In Detail (1)� The JavaFX Scene object is the root of the JavaFX Scene graph.

� It contains all the visual JavaFX GUI components inside it. � A JavaFX Scene is represented by the class javafx.scene.Scene. � A Scene object has to be set on a JavaFX Stage to be visible. In this

JavaFX Scene tutorial I will show you how to create a Scene object and add GUI components to it.

� Creating a Scene� You create a JavaFX Scene object via its constructor. � As parameter you must pass the root JavaFX GUI component that is

to act as the root view to be displayed inside the Scene. � Set Scene on Stage

� In order to make a JavaFX Scene visible, it must be set on a JavaFX Stage.

Scene scene = new Scene(pane, width, height, color);Stage stage = new Stage();stage.setScene(scene);

� A JavaFX Scene can be attached to only a single Stage at a time, and Stage can also only display one Scene at a time.

52

Page 53: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Scene In Detail (2)� The Scene Graph

� As mentioned in the JavaFX Overview, the scene graph consists of all the nodes which are attached to a given JavaFX Scene object.

� Each Scene object has its own scene graph.� The scene graph has a single root node. � Other nodes can be attached to the root node in a tree-

like data structure (a tree is a kind of graph).

53

Page 54: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

The Root Node

� In memory, the GUI objects in a scene are organized as nodes in a scene graph, which is a tree-like hierarchical data structure.

54

Scene

Stage

Page 55: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

An Example Of A Scene Graph

� Creating a scene with multiple objectsPane pane = new Pane( circleA, circleB, circleC ); Scene scene = new Scene( pane, rad*5, rad*3, Color.AQUA.brighter() );

55

Page 56: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Several Scene Constructors

� Below are several of the ways to construct a Scene. � You can find more in the Oracle Documentation

56

Scene Constructors Scene Constructor DescriptionScene(Parent root) Creates a Scene for a specific root Node

Scene(Parent root, double width, double height)

Creates a Scene for a specific root Node with a specific width and height.

Scene(Parent root, double width, double height, Paint fill)

Creates a Scene for a specific root Node with a specific width and height, and a background color

Scene(Parent root, Paint fill) Creates a Scene for a specific root Node with a fill.

Page 57: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Several Scene Methods

57

Scene Specific Methods Scene Method Descriptiondouble getX() The horizontal location of this Scene on

the Window.double getY() The vertical location of this Scene on the

Window.double getWidth() The width of this Scene.

double getHeight() The height of this Scene.

void setFill(Paint value) Sets the value of the property fill.

public final Paint getFill() Gets the value of the property fill.

Page 58: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Several Pane Constructors

� Below are several of the ways to construct a Pane. � You can find more in the Oracle Documentation

58

Pane Constructors Pane Constructor DescriptionPane() Creates a generic Pane

public Pane(Node... children) Creates a Pane layout with the initial set of children for this Pane

Page 59: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Several Pane Methods

59

Pane Specific Methods Pane Method DescriptionObservableList<Node> getChildren() Gets the list of children of this Parent

Many additional methods are inherited from the Class Node,

Page 60: Lesson 5 - Introduction To JavaFX CSC 295-01 Spring 2019 · JavaFX –The Latest Version Of Java Graphics Throughout the years Java has provided several graphics systems including

Putting It All Together

� Let’s look at the following two examples:� DrawingLine.java� DrawingLineParameterized.java

� Remember when parameterizing � Make global variables class variables� Use void init() to initialize

60