Summer 2019

JAVAFX OVERVIEW

JAVAFX INTRO

• JavaFX is a different approach to graphics than Swing or AWT

• With JavaFX, the work is not entirely done in your .java source code files, instead

some of the work is done using CSS and FXML

• The main features (and the top layer of the JavaFX architecture) are a scene graph and

some Java APIs

• You may notice the API links in this lecture are not from the Oracle website, but from

openjfx.io, this is because JavaFX is now handled as an open source project not explicitly

part of the JDK

JAVAFX SCENE GRAPH

• In JavaFX, the visual elements of the application are represented by a hierarchical tree of

nodes called the scene graph

• Each node has an ID, style class, bounds, a single parent (except the root node

which has no parent), and possibly any of the following:

• Children

• Effects

• Opacity

• Transforms

• Event Handlers

• State

• The JavaFX scene graph includes controls, layout containers, images, etc. like that of

Swing, but also includes the graphic primitives (rectangles, ellipses, etc.)

JAVAFX SCENE GRAPH

• Nodes in the tree (and objects in your program) are categorized into three basic groups

• Root – the root node is the base that everything is attached to, always some subclass of the Parent class, which fall into three categories.

• Group – has a list of children, any transform, effect, or state applied to the

Group is applied to all of its chldren

• Region – base class for Node-based UI controls and layout containers, is

resizable and can be styled through CSS

• WebView – a node that manages a WebEngine and displays its content (based

on WebKit)

• Branch Node – has children, again a subclass of the Parent class

• Leaf Node – cannot have children

CREATING A JAVAFX APPLICATION

• All JavaFX applications extend the class Application

• The main method should invoke a call to the launch() function, passing in the

command line arguments as the parameter

• You will do the basic work in the start() method, which will receive a Stage object as

its parameter

• First you will create the root node

• Then, in order to create a scene graph, you create a Scene object (passing in at least the

root node as a parameter)

• You also will want to set the stage’s title, scene, and visibility

• From there you will add nodes and work with them

BASIC JAVAFX APPLICATION

• This will just create a blank 400 X 400 window:import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.layout.BorderPane;import javafx.stage.Stage;

public class Main extends Application {

public void start(Stage primaryStage) {BorderPane root = new BorderPane();Scene scene = new Scene(root,400,400);primaryStage.setScene(scene);primaryStage.show();

}

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

}}

GRAPHICS IN JAVAFX

• There are a couple of ways to draw graphics depending on whether you want 3D or 2D

• One option for graphics is using the JavaFX 3D graphics features, including the

Shape3D API, lighting, and other 3D graphics features

• Another is using the Canvas API for drawing 2D graphics

• Both of these allow both built-in shapes and user-defined shapes

• Additionally, you can work directly with individual pixels using the Image Ops API

UI IN JAVAFX USING JAVA API

• In JavaFX you can actually work with UI components in 2 ways, directly in the Java code or using FXML

• Using the Java code API works similar to Swing in that you have containers and add the UI components to the containers

• In practice, it is different in a few key ways• Generally, your choice of container determines the layout. If you want a border layout, you

use BorderPane, if you want a grid, you use a GridPane.• Adding components is not always done use the add method (for example, to add a

component to the left region of a border pane, you use the setLeft() method and to add to a VBox, you have to call getChildren().add())

• There is not a 1-to-1 correlation between Swing components/layouts and JavaFX UI components

• JavaFX handles events differently. providing convenience methods to work with common events and provides a generic EventHandler<T extends Event> functional interface that you can use with most events (rather than having to remember each event’s particular interface)

• JavaFX also offers event filters that handle events during a slightly different time (event capturing phase as opposed to the event bubbling phase)

EFFECTS

• JavaFX has a number of effects that all inherit from the Effect class

• These can be applied to any Node, which includes nearly every graphic or UI component

you create in JavaFX

• These include many of the common effects you see in graphic design software, including:

• Blend – The blend mode determines how a node’s color is combined with that of all

node’s beneath it

• Blur – JavaFX provides different types of blurring that you can apply to objects

• Drop Shadow – a drop shadow is a shadow below/to the outside of the object

• Inner Shadow – this is a shadow inside the object

• Lighting – simulates a light source on the object

EXAMPLE OF UI USING JAVA API

• As an example, I will discuss the button class in JavaFX, appropriately named Button

• Creating a Button is simple, with the constructor accepting a String for the text of the

button and an Image to specify the icon (there are also methods to manually set these)

• To set the action event handler for a button, you call the setOnAction(EventHandler<ActionEvent>) method and pass it an event handler

• There is also a more generic addEventHandler(EventType<T>, EventHandler<?

super T>) method

• You can also add effects using the setEffect(Effect) method

• The next slide will contain code for creating a button which changes it’s text on click and

has different effects applied to it based on mouse events

BUTTON EXAMPLE CODE

Button b = new Button(“Off”);

b.setOnAction((ActionEvent e) ->

b.setText(b.getText().equals(“Off”) ? ”On” : ”Off”));

DropShadow ds = new DropShadow();

InnerShadow is = new InnerShadow();

b.setEffect(is);

b.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {

b.setEffect(is);

});

b.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {

b.setEffect(ds);

});

STYLING USING CSS

• Instead of setting things in code, you usually want to set the style of your JavaFX

components by using a separate CSS file

• This allows you to easily change the color, font, and other style attributes without having

to open a Java file

• This works like using a CSS file for your HTML style needs allowing you to style all

elements, specific types of objects (for example, all buttons), or even individual objects

• To style an individual object, you must create a CSS class (.)or ID (#) and assign it to the object by using the getStyleClass().add() or setId() methods respectively

• You can also set styles directly in the code by passing the specific attributes as a string to the setStyle() method

• Again, the format of the CSS file is the same as it would be for CSS used for HTML,

except property names for styles in JAvaFX file names start with -fx-

CSS EXAMPLE

• Let’s say we wanted to change a button in the previous example to have a gold

background color, garnet text color, and 15 pixels of padding while simultaneously setting

all buttons to use a 4 em Serif font, we would have the following in our CSS file:

#ggButton {

-fx-background-color: #cdc092;

-fx-text-fill: #940115;

-fx-padding: 15px;

}

.button {

-fx-font: 4em "Serif";

}

• Then we would also need to add the ID “ggButton” to the button in the Java code

FXML

• Rather than building your UI in Java code, you can choose to create your JavaFX UI in

FXML

• FXML is an XML-based language that can be used to easily build a UI

• Most JavaFX scene components can be represented as tags and many of the attributes

can be set directly in the FXML

• Instead of adding objects to a parent node, you actually just include them in between the

parent’s tag opening and closing.

• You can handle things like event handlers by either using the JavaScript (and the

<fx:script> tag) or by using a controller (a Java object created by the programmer

specifically for this purpose)

FXML

• So what are the advantages of FXML over Java code?

• FXML does not need to be recompiled to see changes as you make them

• It makes the scene graph clear, so it is easier to see the hierarchy of things and

design appropriately

• It allows for a very easy separation of the visual pieces and the rest of your program

(it is a very good fit for the MVC model of programming)

• It can actually be used with any language that runs on the JVM, not just Java (Scala,

Groovy, and Clojure are 3 high-profile JVM languages)

FXML EXAMPLE

• This portion creates a window that contains 2 buttons and 2 labels

<BorderPane xmlns:fx="http://javafx.com/fxml/1">

<top>

<Button fx:id="b" text=“Button“ onAction=“#doAction”/>

</top>

<left>

<Button fx:id="ggButton" text="OtherButton" />

</left>

<right>

<Label fx:id="l1" text="Label 1" />

</right>

<bottom>

<Label fx:id="l2" text="Label 2" />

</bottom>

</BorderPane>

FXML CONTROLLERS

• One thing to note in the previous code is the onAction property set to “#doAction”

• This tells the FXML to attach the method doAction() to the action event for that button

• In order to do this, the code needs to know what object that method will be in. For this, an

FXML controller is specified

• A controller is set using the fx:controller attribute, usually on a parent object. This

will contain the identity of the controller class, which will be created automatically

• The FXML has access to the public fields/methods of the controller class, as well as any that are private or protected and marked with the @FXML keyword

SCENE BUILDER

• Java has a GUI tool for creating JavaFX FXML more easily called Scene Builder

• The official page (including a download link) can be found here

• However, Oracle has stopped producing installers for scene builder (they still release

source code within the OpenJFX project), so downloading an installer directly from them

may be missing features

• One good open-source alternative is the Gluon Scene Builder, which can be found

here

EXAMPLES

• These two examples create the same application, a window that contains 2 buttons and 2

labels on a border pane with one button having an action event and two mouse events

• Both examples use the same CSS file: application.css

• The first example does everything in Main.java

• The second example has a very minimal Main.java and sets up the UI in MyFXML.fxml

and does the event handling in FXMLController.java

MORE INFORMATION

• A good intro to JavaFX can be found at the Oracle web site

• Oracle also has an intro tutorial for FXML

• OpenJFX has another good tutorial for JavaFX 11 (including how to install it)

• Some of the common packages used in javafx:

• javafx.application

• javafx.scene

• javafx.scene.effect

• javafx.scene.control

• Your book covers JavaFX in chapters 12 (examples here) and 13 (examples here)