Scratching the Surface with JavaFX

Jim Weaver

Java Technology Ambassador

Oracle Corporation

@JavaFXpert

james.weaver@oracle.com

Multi-touch considerations for JavaFX

Touch Gestures

– Swipe, Scroll, Rotate, Zoom

Touch Event and Touch Points

The Pagination Control

Accommodating Fingers

Introduction to JavaFX 3D

Example app: ZenGuitar3D

3

Please note

The following 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.

Touch Gestures

The Swipe Gesture

Commonly a finger drag in one direction

A single event is produced for the gesture

May be left, right, up, or down

Handling the Swipe Gesture (SwipeEvent)

Note: Lambda expressions from JDK 8 are used here to simplify event handling

Handling the Swipe Gesture (SwipeEvent)

The Scroll Gesture

User turns mouse wheel, drags finger on

touch screen, etc.

Scroll events are continuously generated,

containing x/y position-related info

Events are pixel-based or character/line-

based

If inertia is supported, scroll events may

be generated after user quits scrolling

Handling the Scroll Gesture (ScrollEvent)

The Rotate Gesture

User typically drags two fingers around

each other

Rotate events are continuously generated,

containing angle-related info

Handling the Rotate Gesture (RotateEvent)

The Zoom Gesture

User typically drags two fingers apart or

closer together

Zoom events are continuously generated,

containing zoom factor-related info

Handling the Zoom Gesture (ZoomEvent)

Touch Event and Touch Points

Thomas Laenner - http://thomas.laenner.dk/

Handling Touch (TouchEvent/TouchPoint)

A TouchEvent contains information about

a touch, including:

– Event type: Pressed, released, moved, or

stationary

– Touch points: The TouchPoint instances

that represent each of the points that were

touched

Each TouchEvent has a unique ID to identify the

events and touch points in a multi-touch action

Responding to Touch Events

A Touch Demo from the JavaFX Community

Touchyfxy app by Danno Ferrin http://speling.shemnon.com/

Touchfxy is an open source JavaFX

application developed by Danno Ferrin to

demonstrate gestures and touch events

To obtain Touchfxy, see Danno’s blog at

http://speling.shenmon.com

The Pagination Control

Using the Pagination Control

The Pagination control is used for

navigation between pages

Each page is a Node subclass

Numeric page indicators, or bullet-style

indicators, may be set with the style class STYLE_CLASS_BULLET

Using the Pagination Control

Accommodating Fingers

Making UI Controls Larger for Touching

The default sizes for

JavaFX UI controls are

conducive to using a

mouse as a pointing device

An easy way to modify the

default sizes is to use CSS

Making UI Controls Larger for Touching

Specify an -fx-font-size

property in the #root selector

Introduction to JavaFX 3D

“JavaFX 3D gives you the ability to use 3D geometry, cameras, and lights in JavaFX.”

Mesh Geometry (3D Shapes)

■ Predefined shapes

■ Box

■ Cylinder

■ Sphere

■ User-defined shapes

■ Using TriangleMesh / MeshView

26

27

Creating Primitive Shapes and Materials

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

28

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

Duke’s nose has a Diffuse Map texture

29

This planet has a Bump Map texture

30

UV Mapping Textures to Shapes

31

Tip: A texture is a 2D image to be mapped on a 3D surface

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

Placing a Texture on a Sphere

32

Placing a Texture on a Sphere

33

3D Lights

■ Lights are nodes in the scene graph

■ PointLight

■ AmbientLight

■ Default light provided if no active lights

34

35

Lights, Camera, Action!

Example multi-touch app: ZenGuitar3D

37

Showing the Picker (TouchEvent)

38

Rotating Instrument Picker with Scroll Gesture

39

Playing Strings (TouchEvent / TouchPoint)

40

Switching Modes (TouchPoint#belongsTo)

41

Setting up to Rotate on Three Axes

42

Using Scroll Gesture for X/Y Rotate

43

Using Rotate Gesture for Z Rotate

44

Using Zoom Gesture for Scaling

45

Using Timeline to Transform to Home Position

46

ZenGuitar3D Uses the JFugue5 Library

■ An open-source Java API for

programming music without the

complexities of MIDI

■ Developed by David Koelle

■ Available at http://JFugue.org

47

Start Here: http://javafxcommunity.com

48

Download JDK 8 Early Access Release

49

Visit Here: http://fxexperience.com

Tip: This site is authored by Oracle JavaFXEngineers

Questions?

Scratching the Surface with JavaFX

Jim Weaver

Java Technology Ambassador

Oracle Corporation

@JavaFXpert

james.weaver@oracle.com