This document contains slides from a presentation given by Peter Pilgrim on JavaFX 2.0. It includes information on Peter's background and experience, headlines about JavaFX, demos of JavaFX features, and tips and best practices for writing JavaFX components and containers. The presentation covers topics like the scene graph, properties, layouts, events, and tools. It provides guidance on designing JavaFX user interfaces and testing them with target users.

1. Peter Pilgrim
Oracle Java Champion
10/15/2011 XeNoNiQUe.co.uk (c) 2011 1

2. Blog: www.XeNoNiQUe.co.uk/blog/
Industry: Financial Services, London, UK
Education: London South Bank University
Languages: Scala, Java, Groovy, Clojure
Conferences: JavaOne, ACCU, QCon, Devoxx
10/15/2011 XeNoNiQUe.co.uk (c) 2011 2

3. “At the end of the day, on the one
hand we have computer systems,
and on the other, people. Connecting
them together, and allowing people
to interact with computer systems in
a compelling way, requires graphical
user interfaces
Chris Oliver, Creator of F3
http://blogs.oracle.com/chrisoliver/entry/epitaph
10/15/2011 XeNoNiQUe.co.uk (c) 2011 3

4. Headline News
 “Something that no one has mentioned and
surprises me very much is that JavaFX 2.0 will
only be supported on Windows...” - Max Katz,
March 2011
 “The major difference in the new version is that it
provides Java APIs for JavaFX, allowing you to
use JavaFX from within your normal Java
applications” - James Sugrue, JavaLobby, May
2011
 “You can write Pivot applications in Java or any
other JVM language (you are not limited
to JavaFX Script). ” – Greg Brown, Apache Pivot,
Mailing List, Sept 2010
10/15/2011 XeNoNiQUe.co.uk (c) 2011 4

5. Demo
10/15/2011 XeNoNiQUe.co.uk (c) 2011 5

6. The Plan
 What is a component?
 What types of component?
 How does binding work?
 Design Adaptive Process
 Future Work
10/15/2011 XeNoNiQUe.co.uk (c) 2011 6

7. JavaFX
2.0
10/15/2011 XeNoNiQUe.co.uk (c) 2011 7

8. The Basics
10/15/2011 XeNoNiQUe.co.uk (c) 2011 8

9. The Scene-graph is King.
10/15/2011 XeNoNiQUe.co.uk (c) 2011 9

10. Customers want applications
that work like today’s popular
mobile devices.
10/15/2011 XeNoNiQUe.co.uk (c) 2011 10

11. JavaFX forms, controls and
layouts provide reinvestment .
10/15/2011 XeNoNiQUe.co.uk (c) 2011 11

12. The Java platform is proven
10/15/2011 XeNoNiQUe.co.uk (c) 2011 12

13. We know how to make Java
run fast and it will get faster.
10/15/2011 XeNoNiQUe.co.uk (c) 2011 13

14. Demo
10/15/2011 XeNoNiQUe.co.uk (c) 2011 14

15. How much work must we do
to reinvigorate a platform?
10/15/2011 XeNoNiQUe.co.uk (c) 2011 15

16. Java Virtual Machine is the
crown jewels
10/15/2011 XeNoNiQUe.co.uk (c) 2011 16

17. JavaFX is written in Java,
Java runs on the JVM
10/15/2011 XeNoNiQUe.co.uk (c) 2011 17

18. Every Node …
 Every Node can have a clip node
 Effectively generate a bitmap mask
 Easy to create a “PortHole” widget
 Invert the selection of the clip node, you
can create a “Punch” out widget
10/15/2011 XeNoNiQUe.co.uk (c) 2011 18

19. Image View
1
Image View
2 Media
Image View
3
Image View
4
10/15/2011 XeNoNiQUe.co.uk (c) 2011 19

20. Media View
1
Media View
2 Media Player Media
Media View
3
Media View
4
10/15/2011 XeNoNiQUe.co.uk (c) 2011 20

21. Breaking Glass
1. Divide a bounded area into four
triangles
2. Are we there yet?
3. For each triangle
A. Choose a random side and split it to two
rectangles
B. Recursive descend the two triangles (step
2)
10/15/2011 XeNoNiQUe.co.uk (c) 2011 21

22. Express
Yourself
10/15/2011 XeNoNiQUe.co.uk (c) 2011 22

23. JavaFX Properties.
10/15/2011 XeNoNiQUe.co.uk (c) 2011 23

24. Properties
 Primitive Properties
 Object Properties
 FX List Collection Properties
10/15/2011 XeNoNiQUe.co.uk (c) 2011 24

25. Listeners
 Change Listener
 Observable, old value, new value
 Invalidation Listeners
 Observable
10/15/2011 XeNoNiQUe.co.uk (c) 2011 25

26. Property Listener Example
10/15/2011 XeNoNiQUe.co.uk (c) 2011 26

27. Properties of Component
10/15/2011 XeNoNiQUe.co.uk (c) 2011 27

28. Code Generate JavaFX
Properties
e.g. Groovy
10/15/2011 XeNoNiQUe.co.uk (c) 2011 28

29. Hey Ho! This is all just to say:
var temparature: Integer = 23 on replace oldValue {
println(“temperature={temperarture},
oldValue={oldValue}”
}
// JavaFX Script 1.3
10/15/2011 XeNoNiQUe.co.uk (c) 2011 29

30. JavaFX
Components
10/15/2011 XeNoNiQUe.co.uk (c) 2011 30

31. A pad, a paper and a pen,
first!
10/15/2011 XeNoNiQUe.co.uk (c) 2011 31

32. A JavaFX component is an
encapsulation that binds a
particular tree set of nodes with
the operations that act on those
nodes
10/15/2011 XeNoNiQUe.co.uk (c) 2011 32

33. Component Types
 Non-Resizable
 javafx.scene.shape.Shape
 javafx.scene.Group
 Resizable
 javafx.scene.layout.Pane
 javafx.scene.layout.Region
 javafx.scene.layout.Control
10/15/2011 XeNoNiQUe.co.uk (c) 2011 33

34. Group based
 Particularly using the JavaFX primitive
nodes under javafx.scene.shape.*;
 Design is not meant to be resized
 Layout is fixed at construction /
initialisation time
10/15/2011 XeNoNiQUe.co.uk (c) 2011 34

35. Region based
 Region is the sub class of
javafx.scene.Parent
 Adds the ability to resize a node, layout
a particular set of children
10/15/2011 XeNoNiQUe.co.uk (c) 2011 35

36. Control based
 Allows particular subclass of Region that
permits skinning of node with a
stylesheet
 You need 3 classes
 The Control
java.scene.control.Control type
 The Skinnable
java.scene.control.Skinnable
 The Behaviour
com.sun.javafx.scene.control.BehaviorBase
10/15/2011 XeNoNiQUe.co.uk (c) 2011 36

37. Control based
 Allows particular subclass of Region that
permits skinning of node with a stylesheet
 Control is a direct type of Parent
 You need 3 classes
 The Control
java.scene.control.Control type
 The Skin
java.scene.control.Skin
java.scene.control.Skinnable
 The Behaviour
com.sun.javafx.scene.control.Behavior
10/15/2011 XeNoNiQUe.co.uk (c) 2011 37

38. Control based contd
 See JFXtras.org for more examples of
skinnable components written for
JavaFX 2.0 beta 45
 A Skin can be a Region (?)
com.sun.javafx.scene.control.BehaviorBase
com.sun.javafx.scene.control.SkinBase
10/15/2011 XeNoNiQUe.co.uk (c) 2011 38

39. Layout Children Method
void layoutChildren()
 Layout all of the children of a Region
based component
10/15/2011 XeNoNiQUe.co.uk (c) 2011 39

40. Layout Children Method
void layoutChildren()
 Layout all of the children of a Region
based component
 Compute the preferred width and height
of the children (first)
 May cache those values internally as
part of the component or use
Constraints
10/15/2011 XeNoNiQUe.co.uk (c) 2011 40

41. Layout Boundaries
 SDK will make a request to find out the
best width and height of your
component.
 Your component must do the same for
its children
 Implement at least compute pref width
and pref height methods!
10/15/2011 XeNoNiQUe.co.uk (c) 2011 41

42. Layout Methods
10/15/2011 XeNoNiQUe.co.uk (c) 2011 42

43. Pedantic Complete
Implement the other four methods too
 computeMinWidth(v)
 computeMinHeight(v)
 computeMaxWidth(v)
 computeMaxHeight(v)
10/15/2011 XeNoNiQUe.co.uk (c) 2011 43

44. Demo
10/15/2011 XeNoNiQUe.co.uk (c) 2011 44

45. Writing JavaFX
Containers
10/15/2011 XeNoNiQUe.co.uk (c) 2011 45

46. Event Input on Node
 Mouse Events fall under the pointer
iteraction (single)
 Clicked, Entered, Exited, Pressed, Dragged,
Released, Wheel
 Target Entered, Target Exited
 Key Events
 Clicked, Pressed, Released
10/15/2011 XeNoNiQUe.co.uk (c) 2011 46

47. Event Input on Node
 It is possible to consume an event and
stop it bubbling further down the
scenegraph hierarchy
 You can block a component from event
interaction
 Using clever tricks (opaque shape) you
can implement dialog / focus / modal
behaviour
10/15/2011 XeNoNiQUe.co.uk (c) 2011 47

48. Layout Secrets
10/15/2011 XeNoNiQUe.co.uk (c) 2011 48

49. Reuse SDK Methods
10/15/2011 XeNoNiQUe.co.uk (c) 2011 49

50. Some SDK Methods
 Region#layoutInArea()
 Region#positionInArea()
 Node#resize()
 Node#resizeRelocate()
10/15/2011 XeNoNiQUe.co.uk (c) 2011 50

51. Demo
10/15/2011 XeNoNiQUe.co.uk (c) 2011 51

52. Tips
 When Dragging a Node prefer to
translate (X,Y)
 When Laying Out a Node prefer to set
the position with layoutX, layoutY
 Given steady state conditions you can
swap layout (X,Y) for translation (X,Y)
10/15/2011 XeNoNiQUe.co.uk (c) 2011 52

53. Tips 2
 Use blocking boolean flags to prevent
conflict when you animating children in a
container
 If you are unsure about MT concurrency
you can always use AtomicBoolean
 Prefer JavaFX Properties
10/15/2011 XeNoNiQUe.co.uk (c) 2011 53

54. Tools
10/15/2011 XeNoNiQUe.co.uk (c) 2011 54

55. Tools
 We badly need a JavaFX Property plug-
in for various IDE
 Otherwise the Groovy script will do for
now
 Scene Builder is coming
 FXML is always
10/15/2011 XeNoNiQUe.co.uk (c) 2011 55

56. Alternative JVM Languages
 Still new to comment on the best
practice for writing component in other
languages other than Java
 Consider using a Java interface
 Prefer to use and expose JavaFX
Properties
 Learn JavaFX against Java, First!
10/15/2011 XeNoNiQUe.co.uk (c) 2011 56

57. Six Months, 2012 … Okay!
10/15/2011 XeNoNiQUe.co.uk (c) 2011 57

58. Design
 Think of JavaFX as a sophisticated
composition engine
 á la PhotoShop without the pixel access
 Learn U/I/X design from elsewhere
10/15/2011 XeNoNiQUe.co.uk (c) 2011 58

59. Boagworld.com
10/15/2011 XeNoNiQUe.co.uk (c) 2011 59

60. Books
10/15/2011 XeNoNiQUe.co.uk (c) 2011 60

61. End Game
10/15/2011 XeNoNiQUe.co.uk (c) 2011 61

62. Blow your toe off now!
10/15/2011 XeNoNiQUe.co.uk (c) 2011 62

63. However, we are behind the
wave! Let us learn from the web
technologists and the mobile
app leaders and ran past them!
10/15/2011 XeNoNiQUe.co.uk (c) 2011 63

64. Test JavaFX 2.0 User
Interface against your target
users BEFORE and AFTER
10/15/2011 XeNoNiQUe.co.uk (c) 2011 64

65. Learn more
http://xenonique.co.uk/blog/
peter.pilgrim@gmail.com
http://javafx.com/
twitter:peter_pilgrim
10/15/2011 XeNoNiQUe.co.uk (c) 2011 65

66. Professional Services
peter.pilgrim@gmail.com
JavaFX 2.0 in Enterprises
Contracting
Training with Consultancy
Technical Leadership
10/15/2011 XeNoNiQUe.co.uk (c) 2011 66

67.  Can I have a HIRES JavaFX logo
please?
 A work in Progress
 Source Code to be added
 Demos to be completed in September
10/15/2011 XeNoNiQUe.co.uk (c) 2011 67

68. Attributions
All images are Creative Commons (CC) License from Flickr.com
– “You must attribute the source and you cannot change the content”
Tim Ellis http://www.flickr.com/photos/tim_ellis/
Lego Basics http://www.flickr.com/photos/tim_ellis/338755101/sizes/l/
*PaysImaginaire* http://www.flickr.com/photos/nevrlndtink/
Variable Plastic Bag http://www.flickr.com/photos/nevrlndtink/232906118/sizes/m/
~Deiby http://www.flickr.com/photos/deiby/
Expression http://www.flickr.com/photos/deiby/5489382677/sizes/l/
Lisa Sinclair http://www.flickr.com/photos/plumandjello/
fruit http://www.flickr.com/photos/plumandjello/2333263539/sizes/l/
Nerovivo http://www.flickr.com/photos/dominik99/
http://www.flickr.com/photos/dominik99/407716865/sizes/z/in/photostream/
10/15/2011 XeNoNiQUe.co.uk (c) 2011 68

69. Attributions
All images are Creative Commons (CC) License from Flickr.com
– “You must attribute the source and you cannot change the content”
.Guilty http://www.flickr.com/photos/roll_initiative/
Arbitrary Function Generator http://www.flickr.com/photos/roll_initiative/3278642272/
Loop Oh Rupert Grazer http://www.flickr.com/photos/loop_oh/
Pattern at the Senckenberg Museum in Frankfurt am Main / Germany.
http://www.flickr.com/photos/loop_oh/4571485915/
Lili Vieira de Carvalho, Vancouver, Canada http://www.flickr.com/people/lilivc/
Composition of Bowls http://www.flickr.com/photos/lilivc/367582911/sizes/l/
Mykl Roventine http://www.flickr.com/people/myklroventine/
19/365 Game Over http://www.flickr.com/photos/myklroventine/3210068573/sizes/l/
superciliousness / Bentley Smith http://www.flickr.com/people/superciliousness/
200510 carpenter's tools - inside the workman's shed - all his old tools
http://www.flickr.com/photos/superciliousness/57486288/
10/15/2011 XeNoNiQUe.co.uk (c) 2011 69

70. Attributions
All images are Creative Commons (CC) License from Flickr.com
– “You must attribute the source and you cannot change the content”
You’ve got a fast car http://www.flickr.com/photos/coreforce/5910961411/
Core Force http://www.flickr.com/photos/coreforce/
GAME AT MARBLES http://www.flickr.com/photos/9619972@N08/928099769/sizes/l/in/photostream/
(Author unknown, from an antique children's boo
Lucs Game http://www.flickr.com/photos/9619972@N08/928099769/
just.Luc http://www.flickr.com/people/9619972@N08/
DIY Easel http://www.flickr.com/photos/68888883@N00/2744696593/in/photostream/
Judy of the Woods http://www.flickr.com/people/68888883@N00/
10/15/2011 XeNoNiQUe.co.uk (c) 2011 70

71. Beyond Java Today
10/15/2011 XeNoNiQUe.co.uk (c) 2011 71

72. Beyond Java Future 2016?
10/15/2011 XeNoNiQUe.co.uk (c) 2011 72