1. Scratching the Surface with JavaFX
Using JavaFX 3D & Multi-touch APIs
James Weaver
Java Technology Ambassador
@JavaFXpert
james.weaver@oracle.com

2. Author of several Java/JavaFX books

3. Co-leader of IoT & JavaFX communities at java.net
javafxcommunity.com
iotcommunity.net

4. 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

5. 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.
5

6. Touch Gestures

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

8. Handling the Swipe Gesture (SwipeEvent)
Note: Lambda
expressions from JDK
8 are used here to
simplify event handling

9. Handling the Swipe Gesture (SwipeEvent)

10. 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/linebased
 If inertia is supported, scroll events may
be generated after user quits scrolling

11. Handling the Scroll Gesture (ScrollEvent)

12. The Rotate Gesture
 User typically drags two fingers around
each other
 Rotate events are continuously
generated, containing angle-related info

13. Handling the Rotate Gesture (RotateEvent)

14. The Zoom Gesture
 User typically drags two fingers apart or
closer together
 Zoom events are continuously
generated, containing zoom factor-related
info

15. Handling the Zoom Gesture (ZoomEvent)

16. Touch Event and Touch Points
Thomas Laenner - http://thomas.laenner.dk/

17. 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

18. Responding to Touch Events

19. The Pagination Control

20. 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

21. Using the Pagination Control

22. Accommodating Fingers

23. 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

24. Making UI Controls Larger for Touching
Specify an -fx-font-size
property in the #root selector

25. Introduction to JavaFX 3D

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

27. Mesh Geometry (3D Shapes)
■ Predefined shapes
■ Box
■ Cylinder
■ Sphere
■ User-defined shapes
■ Using TriangleMesh / MeshView
27

28. Creating Primitive Shapes and Materials
28

29. 3D Materials and Textures
https://wikis.oracle.com/display/OpenJDK/3D+Features
■ PhongMaterial has these properties
■ Ambient color
■ Diffuse color, diffuse map
■ Specular color, specular map
■ Specular power
■ Bump map
■ Self-illumination map
29

30. Duke’s nose has a Diffuse Map texture
30

31. This planet has a Bump Map texture
31

32. UV Mapping Textures to Shapes
Tip: A texture is a 2D
image to be mapped on
a 3D surface
Source: http://en.wikipedia.org/wiki/File:UVMapping.png
32

33. Placing a Texture on a Sphere
33

34. Placing a Texture on a Sphere
34

35. 3D Lights
■ Lights are nodes in the scene graph
■ PointLight
■ AmbientLight
■ Default light provided if no active lights
35

36. Lights, Camera, Action!
36

37. Example multi-touch app:
ZenGuitar3D

38. Showing the Picker (TouchEvent)
38

39. Rotating Instrument Picker with Scroll Gesture
39

40. Playing Strings (TouchEvent / TouchPoint)
40

41. Switching Modes (TouchPoint#belongsTo)
41

42. Setting up to Rotate on Three Axes
42

43. Using Scroll Gesture for X/Y Rotate
43

44. Using Rotate Gesture for Z Rotate
44

45. Using Zoom Gesture for Scaling
45

46. Using Timeline to Transform to Home Position
46

47. 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

48. Questions?

49. Scratching the Surface with JavaFX
Using JavaFX 3D & Multi-touch APIs
James Weaver
Java Technology Ambassador
@JavaFXpert
james.weaver@oracle.com