Post on 22-May-2015
Peter Pilgrim Oracle Java Champion
10/15/2011 XeNoNiQUe.co.uk (c) 2011 1
10/15/2011 XeNoNiQUe.co.uk (c) 2011 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 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
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
10/15/2011 XeNoNiQUe.co.uk (c) 2011 5
Demo
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
JavaFX
2.0
10/15/2011 XeNoNiQUe.co.uk (c) 2011 7
10/15/2011 XeNoNiQUe.co.uk (c) 2011 8
The Basics
The Scene-graph is King.
10/15/2011 XeNoNiQUe.co.uk (c) 2011 9
Customers want applications
that work like today’s popular
mobile devices.
10/15/2011 XeNoNiQUe.co.uk (c) 2011 10
JavaFX forms, controls and
layouts provide reinvestment .
10/15/2011 XeNoNiQUe.co.uk (c) 2011 11
The Java platform is proven
10/15/2011 XeNoNiQUe.co.uk (c) 2011 12
We know how to make Java
run fast and it will get faster.
10/15/2011 XeNoNiQUe.co.uk (c) 2011 13
10/15/2011 XeNoNiQUe.co.uk (c) 2011 14
Demo
How much work must we do
to reinvigorate a platform?
10/15/2011 XeNoNiQUe.co.uk (c) 2011 15
Java Virtual Machine is the
crown jewels
10/15/2011 XeNoNiQUe.co.uk (c) 2011 16
JavaFX is written in Java,
Java runs on the JVM
10/15/2011 XeNoNiQUe.co.uk (c) 2011 17
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
10/15/2011 XeNoNiQUe.co.uk (c) 2011 19
Media
Image View
1
Image View
2
Image View
3
Image View
4
10/15/2011 XeNoNiQUe.co.uk (c) 2011 20
Media Player
Media View
1
Media View
2
Media View
3
Media View
4
Media
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
Express Yourself
10/15/2011 XeNoNiQUe.co.uk (c) 2011 22
JavaFX Properties.
10/15/2011 XeNoNiQUe.co.uk (c) 2011 23
Properties
Primitive Properties
Object Properties
FX List Collection Properties
10/15/2011 XeNoNiQUe.co.uk (c) 2011 24
Listeners
Change Listener
Observable, old value, new value
Invalidation Listeners
Observable
10/15/2011 XeNoNiQUe.co.uk (c) 2011 25
Property Listener Example
10/15/2011 XeNoNiQUe.co.uk (c) 2011 26
Properties of Component
10/15/2011 XeNoNiQUe.co.uk (c) 2011 27
Code Generate JavaFX
Properties
e.g. Groovy
10/15/2011 XeNoNiQUe.co.uk (c) 2011 28
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
JavaFX
Components
10/15/2011 XeNoNiQUe.co.uk (c) 2011 30
A pad, a paper and a pen,
first!
10/15/2011 XeNoNiQUe.co.uk (c) 2011 31
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
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
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
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
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
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
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
Layout Children Method
void layoutChildren()
Layout all of the children of a Region
based component
10/15/2011 XeNoNiQUe.co.uk (c) 2011 39
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
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
Layout Methods
10/15/2011 XeNoNiQUe.co.uk (c) 2011 42
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
10/15/2011 XeNoNiQUe.co.uk (c) 2011 44
Demo
10/15/2011 XeNoNiQUe.co.uk (c) 2011 45
Writing JavaFX
Containers
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
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
10/15/2011 XeNoNiQUe.co.uk (c) 2011 48
Layout Secrets
Reuse SDK Methods
10/15/2011 XeNoNiQUe.co.uk (c) 2011 49
Some SDK Methods
Region#layoutInArea()
Region#positionInArea()
Node#resize()
Node#resizeRelocate()
10/15/2011 XeNoNiQUe.co.uk (c) 2011 50
10/15/2011 XeNoNiQUe.co.uk (c) 2011 51
Demo
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
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
Tools
10/15/2011 XeNoNiQUe.co.uk (c) 2011 54
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
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
Six Months, 2012 … Okay!
10/15/2011 XeNoNiQUe.co.uk (c) 2011 57
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
Boagworld.com
10/15/2011 59 XeNoNiQUe.co.uk (c) 2011
Books
10/15/2011 60 XeNoNiQUe.co.uk (c) 2011
End Game
10/15/2011 XeNoNiQUe.co.uk (c) 2011 61
Blow your toe off now!
10/15/2011 XeNoNiQUe.co.uk (c) 2011 62
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
Test JavaFX 2.0 User
Interface against your target
users BEFORE and AFTER
10/15/2011 XeNoNiQUe.co.uk (c) 2011 64
Learn more
10/15/2011 XeNoNiQUe.co.uk (c) 2011 65
http://xenonique.co.uk/blog/
peter.pilgrim@gmail.com
http://javafx.com/
twitter:peter_pilgrim
Professional Services
10/15/2011 XeNoNiQUe.co.uk (c) 2011 66
peter.pilgrim@gmail.com
JavaFX 2.0 in Enterprises
Contracting
Training with Consultancy
Technical Leadership
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
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
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
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
Beyond Java Today
10/15/2011 71 XeNoNiQUe.co.uk (c) 2011
Beyond Java Future 2016?
10/15/2011 72 XeNoNiQUe.co.uk (c) 2011