1

Exploring JavaFX 8

Stephen Chin (@steveonjava)

Java Technology Ambassador

JavaOne Content Chair

♯jdt2014_A3

2

• Cross-platform Animation, Video, Charting

• Integrate Java, JavaScript, and HTML5 in the

same application

• New graphics stack takes advantage of hardware

acceleration for 2D and 3D applications

• Bidirectional integration with Swing applications

using JFXPanel and SwingNode

Immersive Application Experience

JavaFX Platform

3

How to Get JavaFX

Step 1: Download Java 8

4

How to Develop JavaFX Use Your Favorite IDE

5

Architecture of JavaFX 8

Java Virtual Machine

Java2D Open GL D3D

Prism Glass

WinTk

Media

Engine

Web

Engine

JavaFX Public API

Quantum Toolkit

6

Package Your Application Applets, Web Start, and Native Packaging

Good Better Best

7

New Features in JavaFX 8

Controls

9

DatePicker

Allows selection of dates

and ranges

Can use custom formats

and calendars

Supports Cascading Style

Sheets

10

TreeTableView

Combines a TreeView and a

TableView

Optional menu for hiding and

showing columns

Root can be hidden

Supports multiple selection

Supports CSS

11

New Modena UI Theme

12

13

Build Applications Visually JavaFX Scene Builder 2

14

15

Displaying HTML in JavaFX

public class WebViewTest extends Application {

public static void main(String[] args) {

launch(WebViewTest.class, args);

}

@Override public void start(Stage stage) {

WebView webView = new WebView();

webView.getEngine().load("http://google.com");

Scene scene = new Scene(webView);

stage.setScene(scene);

stage.setTitle("Web Test");

stage.show();

}}

16

Displaying HTML in JavaFX

17

Calling Javascript from JavaFX

String script = "alert('We have got a message, Houston!');”;

eng.executeScript(script);

18

JavaScript to Java Type Conversion

JavaScript Java

null null

undefined “undefined”

number java.lang.Number (Integer or

Double)

string java.lang.String

boolean java.lang.Boolean

object netscape.javascript.JSObject

19

Responding to Browser Events

Alert/Confirm/Prompt – Respond to JavaScript user interaction

functions

• Resize – Web page moves or resizes the window object

• Status – Web page changes the status text

• Visibility – Hide or show the window object

• Popup – Spawn a second web view/engine

20

HTML5 Features

Canvas and SVG

Media playback

Form controls

History maintenance

Interactive element tags

DOM

Web workers*

Web sockets*

Web fonts*

* = new in HTML5

21

The Java Conference Tour app

22

JAVAFX 3D

23

Mesh Geometry (3D Shapes)

■ Predefined shapes

■ Box

■ Cylinder

■ Sphere

■ User-defined shapes

■ Using TriangleMesh / MeshView

23

https://wikis.oracle.com/display/OpenJDK/SphereAndBox.java

24 24

Creating Primitive Shapes and Materials

25 25

Rotating the 3D Shapes

Tip: Use lambda expressions as

shown here to simplify event handling

26

3D Materials and Textures

■ PhongMaterial has these properties

■ Ambient color

■ Diffuse color, diffuse map

■ Specular color, specular map

■ Specular power

■ Bump map

■ Self-illumination map

26

https://wikis.oracle.com/display/OpenJDK/3D+Features

27

UV Mapping Textures to Shapes

27

Tip: A texture is a 2D image to

be mapped on a 3D surface

Source: http://en.wikipedia.org/wiki/File:UVMapping.png

28

Placing a Texture on a Sphere

28

29

Placing a Texture on a Sphere

29

30

UV Mapping on a Cube

30

31

Understanding TriangleMesh

31

8 points

12 faces

14 texCoords

12 faces

Image

0, 0

0, 1

1, 0

1, 1

Tip: Best practice

for texture map

dimensions is

powers of two

(e.g. 1024x512)

32

Using TriangleMesh Points

32

Tip: The API for points,

texCoords, and faces is

currently being modified,

primarily to hold this data

in different structures.

(For example)

33

Using TriangleMesh Texture Coords

33

(For example)

34

Using TriangleMesh Faces

34

0, 2, 1 are points[] indices

10, 5, 9 are texCoords[] indices

35

Using TriangleMesh Smoothing Groups

35

These are faces[] indices

(and putting all the pieces together of our user-defined shape)

36 36

Real-World Example of Mesh Geometry

37

3D Lights

■ Lights are nodes in the scene graph

■ PointLight

■ AmbientLight

■ Default light provided if no active lights

37

https://wikis.oracle.com/display/OpenJDK/3D+Features

38 38

Lights, Camera, Action!

Tip: The camera is also a node in

the scene graph, so it is moveable

39

=

Have Java With Your Dessert Raspberry Pi

40 http://elinux.org/File:Raspi-Model-AB-Mono-2-699x1024.png

41

Embedded Controls Theme

42

Virtual Keyboard

43

JavaFX on Raspberry Pi Gotchas

WebView Media

44

And you can do cool stuff like this… https://bitbucket.org/stephanj/tweetwall

45

Stephen Chin tweet: @steveonjava

blog: http://steveonjava.com

nighthacking.com

Real Geeks Live Hacking

NightHacking Tour

46

The preceding is intended to outline our general product direction. It is intended

for information purposes only, and may not be incorporated into any contract.

It is not a commitment to deliver any material, code, or functionality, and should

not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products

remains at the sole discretion of Oracle.