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