My slides presented during SoftShake 2013 (October, 24th)

1. JavaFX
because you're worth it
Thierry Wasylczenko
@twasyl

2. me.getInfo();
Software & quality engineer @ GE Healthcare
JFXtras contributor
OpenJFX in progress
Former Java Full Professor & teacher @ SUPINFO
Speaker

3. We all know this...

4. But also this...
p ia ec as MF a ee tn sJ r m {
r vt ls y rm x e d Fa e
pi ae vi i iC mo e t( {
rv t o d n t op nn s)
j ae 1= nw J ae (;
Lbl
e L bl )
j et il 1= n wJ et il ( ;
T x Fe d
e T x Fe d)
j ae 2= nw J ae (;
Lbl
e L bl )
j et il 2= n wJ et il ( ;
T x Fe d
e T x Fe d)
j ae 3= nw J ae (;
Lbl
e L bl )
j ai Bt o1 = nw Ja iB t o( ;
R d ou tn
e R do ut n)
j ai Bt o2 = nw Ja iB t o( ;
R d ou tn
e R do ut n)
j ut n =n wJ ut n )
B t o1
e Bt o( ;
j co la e =n wJ c ol ae )
S r lP n1
e Sr lP n (;
j al 1= nw J al (;
Tbe
e T be )
s te al Co e pr to (i d wo sa t. XT O _L S)
e D fu tl sO ea i nW no Cn tn s EI _N CO E ;
j ae 1s te t "e sn nm : )
L b l. eT x( Pr o a e" ;
j ae 2s te t "e sn fr t nm : )
L b l. eT x( Pr o i s ae " ;
j ae 3s te t "e : )
L b l. eT x( Sx " ;
j ai Bt o1 s te t" ae )
R d ou tn .e Tx ( Ml ";
j ai Bt o1 a dc in it n r
R d ou tn .d At o Ls ee (
nw At oL s ee ( {
e c in it nr )
p bi v i at oP ro m dA to Ee te t {
ul c o d ci n ef re (c in v n v)
/ TD
/ OO
}
};
)
/ T B CN IU D
/ O E OT N E
}
}

5. To get this...

6. The big button syndrome

7. Desktop apps in Java
Abstract Window Toolkit (AWT)
Swing
Event Dispatch Thread (EDT)
Complex
L&F
Old looking
Nimbus
Synthetica, JGoodies Looks, SWT Ribbon, Quaqua,
Substance, ...

8. Some tools "helped" us ...
Visual Editor
Eclipse plugin
How many JARs do I need to start creating a
UI??!!
NetBeans

9. ... or not !
So much junk code !!
Not even editable
Except outside the IDE

10. A hope shined ...
JavaOne 2007
JavaFX is announced
Rich Internet Applications (RIA)
"Seems" promising

11. ... but ...
Java + Flash + Flex
=
JavaFX
=
???

12. I am a Java developer !!
Scripting language
Similar to Flash scripting language
Unusable Java API
JARs? What's that?
Hey, I'm a Java developer !!

13. Look through the Windows
Windows Presentation Foundation
(WPF)
Works above DirectX
Introduced with .NET 3.0
XAML
Hey, I'm still a Java developer !
eface

14. And now ...

15. JavaFX 2

17. JavaFX architecture

18. Base classes
Application
The entry point of your app
Application.launch()
Override start()
Scene
Like the content pane in Swing
Hosts a root element
Stage = JFrame
Contains a scene
stage.show();

19. Base classes
p bi c as Te ta lX e tn sA pi ai n {
u lc l s we W lF x ed pl ct o
p bi s ai v i m i (t ig ]a g) {
u l c t tc o d an Sr n [ rs
A pi ai n lu c( we W lF .l s, ag )
pl ct o. an h Te ta lX ca s r s;
}
@ vr ie
O e rd
p bi v i s a tS ae sa e tr w Ec pi n {
u l c o d tr (t g t g) h os x et o
/ D yu s uf h r
/ o o r tf e e
Se es ee = n wS ee . .)
cn cn
e cn ( . ;
sa es tc n( c n)
tg . eS ee se e;
s ae so ( ;
tg .h w)
}
}

20. FXML
V
M C
Markup-based language
CSS styling
JavaScript capabilities
Component binding
Controller concept
URL locator
I18N

21. FXML
< xl vr in ". " ec dn =U F 8?
? m e so =1 0 no i g" T- ">
< ip r jv .a g* >
? mo t aa ln . ?
< ip r jv f. cn .?
? mo t aa xs e e* >
< ip r jv f. cn .f e t* >
? mo t aa xs e ee fc .?
< ip r jv f. cn .m g .?
? mo t aa xs e ei ae *>
< ip r jv f. cn .o t o. ?
? mo t aa xs e ec nr l* >
< ip r jv f. cn .a o t* >
? mo t aa xs e el yu .?
< nh ra ex ls f=h t: /a a xc mf m" i=m iP nl f :d "n hr a e p e
A co P n mn :x"t p /j vf .o /x l d "a na e " x i=a co Pn " r
s ye "f -a kr u dc lr l na -r de t #9 44 0, # 00 91 0) ">
t l=- xb cg on -o o : i e rg ai n( 6B E % 0 7B 0 % ;
< hl rn
c i de>
<mg Ve i=t i tr tc e" ft i t= 18 f te gt "2 " ly uX "0
Ia ei w d" wt eS i kr i Wd h " 2 " i H ih =1 8 ao t =3 "
<mg >
ia e
<m g u l"/ o/ ws lt e ta lx rs u cs ia e/ wt e Si k
Ia e r=@c m ta y/ we wl f /e or e/ mg s ti tr tc e
<ia e
/m g >
<Ia ei w
/m gV e >
<ae t x=Te t al X pe Wd h " 04 s ye " f- ot sz :1 0 t - x
Lb l e t"w eW lF " rf it = 12 " tl=- xf n- i e 0p ; f
<ut n i= bt o"tx = Sa c"oA to = #t rT et al s ye " f- o
Bt o d" ut n e t " er h n ci n " sa t we Wl " tl =- xf n
<ci de >
/h lr n
<Ac oP n >
/nh r ae

22. JavaFX CSS
Properties prefixed with -fx
-fx-text-fill
-fx-background-color
...
linear-gradient
radial-gradient
rgb / rgba
Effects
dropshadow &
innershadow

23. JavaFX CSS
Inline CSS
< ae t x= Te ta lX p eW d h" 04 s ye "f -o t sz :1 0t - xt x- i
L bl e t" we W lF " rf it=1 2" t l=- xf n- ie 0 p ; f - et f

24. JavaFX CSS
Stylesheets and CSS classes
< nh ra e. .
A co P n .>
< tl se t>
s y eh es
<R vl e " /o / ws lD fu tc s /
UL au = @c mt ay / ea l. s" >
<sy eh es
/t ls et >
< hl rn
c i de>
<ae s ye ls = co -l s"/
Lb l t l Ca s" ol c as >
<ae >
Lb l
<tl C as
sy el s >
<t ig f: au = vr -o lc as /
Sr n x vl e" ey co - ls " >
<t ig f: au = aa ig ca s /
Sr n x vl e" mz n- l s" >
<sy e ls >
/t lC as
<Lb l
/a e >
< hl rn
c i de>
<Ac oP n >
/nh r ae

25. JavaFX CSS
Java code
m Bt o. eS ye l s( .d Al " ol ca s, "e y co -l s" ;
y ut n gt tl Ca s) a dl (c o- ls " v r- ol c as )
m Bt o. eS ye " f- ak ru d cl r w i e)
y ut n st tl(- xb c go n- oo : ht ";

26. Controller
Similar to master pages in ASP
Similar to a Managed Bean
Used to
manage events
update the view dynamically
...
Referenced by fx:controller in the FXML
Initializable
Used to initialize the controller after the root
element

27. Controller
p bi c as Te ta lX o to lr ip ee t Ii i lz be {
u lc l s we W lF Cn rl e m lm ns n ta ia l
/ ..
/ .
@ vr ie
O e rd
p bi v i i i il z( R ag ,R su c Bn l ag ){
u l c o d nt ai e UL r 0 eo re ud e r1
/ ..
/ .
}
}

28. @FXML
Component binding
Like JSF
Each attribute must be strictly named as the fx:id
in the FXML
Controller Method Event handler
onAction, onClosed, ... attributes
Referenced with # in FXML

29. @FXML
The controller
/ ..
/ .
@ XL pi ae Pn a co P n;
F M r vt a e nh ra e
@ XL pb i vi s at we Wl ( ci nv n e {
F M u lc od t rT e ta lA to Ee t )
/ ..
/ .
}
/ ..
/ .

30. @FXML
The FXML
< nh ra e. .f : d" nh ra e .. f: o to lr "o . ws lt et al x cn r
A co P n . xi=a c oP n" . x cn rl e =c mt ay .w e wl f. ot o
< hl rn
c i de>
<ut n i= bt o"oA t o= #t rT et a l . . /
Bt o d" ut n n ci n " sa t we Wl " . >
<ci de >
/h lr n
<Ac oP n >
/nh r ae

31. FXMLLoader
Load a FXML file
ResourceBundle can be defined
Get the controller

32. FXMLLoader
U Lf mU L= gt l s( .e Rs u c( /y pc ae m Fl .x l)
R xlR
e Ca s) g te or e" m/ a kg /y ie f m" ;
F ML ae f m = n wF ML ae ( xl R)
X Lo d r x l
e X L od rf mU L;
/ Gt t er o e e et o te fl
/ e h o t lm n f h i e
P rn r o = (a e t f m .o d)
a et o t
P rn ) xl la ( ;
/ Gt t ec nr le a sc ae t t eF M
/ e h o to l r s o it d o h X L
M Cn rl e m = ( yo to lr f m. eC n rl e( ;
y ot o lr c
M Cn r le ) xl gt ot ol r )

33. Properties
Expand & improve the JavaBeans concept
"Observe" a value
Event delivery
Listeners
Convention
private property fields
public final getter / setter for the value
public getter for the property

34. Properties
p bi c as Fo {
u lc l s o
pi ae Du lP o et l tr OC fe = nw Sm l Du lP oe t( ;
rv t o be rp ry i es f of e
e i pe ob e rp ry )
pb i fn ld ul g ti es f of e) {
ul c ia o b e e L tr OC fe (
r tr t i. ie sf o fe gt)
e u n h sl t rO Cf e. e(;
}
pb i fn lv i st ie sf o fedu l vl e {
ul c ia o d eL t rO Cf e(ob e au )
t i. ie sf o fe stvl e ;
h s lt rO Cf e. e(a u)
}
pb i Du lP oe t lt rO C fe Po et ( {
ul c ob er p ry i es fo fe rp r y)
r tr t i. ie sf o fe
e u n h sl t rO Cf e;
}
}

35. Bindings
Observes dependencies
Properties
Updates itself according changes
High-Level API
Low-Level API
Kind of Observer / Observable pattern
Example:
Could be used to synchronize the UI and the
business
Refresh a chart data

36. Bindings
I tg rr pr yn m =n w Sm lI tg rr p ry 1)
n ee P oe t u1
e ip e ne eP oe t( 0 ;
I tg rr pr yn m =n w Sm lI tg rr p ry 2)
n ee P oe t u2
e ip e ne eP oe t( 0 ;
I tg rr pr yn m =n w Sm lI tg rr p ry 3)
n ee P oe t u3
e ip e ne eP oe t( 0 ;
I tg rr pr yn m =n w Sm lI tg rr p ry 4)
n ee P oe t u4
e ip e ne eP oe t( 0 ;
N me Bn ig oe a in =B ni g.d (u 1m li l(u 4, nm .i i en m) ;
u br i dn p rt o
id nsad nm . ut pynm ) u 2d vd (u 3 )
S se .u .r nl ( Hw mc ?"+ oe ai ng ta u()
y tm o tp it n" o u h
pr to . eV le);
n m. eV le 10 ;
u 1s t au(0 )
S se .u .r nl ( Ad nw " +o ea ing ta u( )
y tm o tp it n" n o ?
pr to.e Vl e );

37. Bindings
How much? 400.67
And now? 4000.67

40. FXCollections
Extension of Collections
Observable
Interfaces
ObservableList, ObservableMap
Listeners
ListChangeListener, MapChangeListener
FXCollections
Utility class

41. FXCollections
L s< ti g sr nL t= n wA ry itSr n >)
i t S r n> ti g s
e r a Ls<t ig (;
/ Ce t a os ra l ls
/ r ae n be v be i t
O sr al Ls <t i g s r nO ss 1= FC l et os os r al Ls (t ig s )
b ev b ei tS rn > ti gb L t
X ol ci n .b ev be it s rn Lt ;
O sr al Ls <t i g s r nO ss 2= FC l et os os r al Ls (;
b ev b ei tS rn > ti gb L t
X ol ci n .b ev be it )
s rn Os s1 ad i tn rn wL s Ca gL se e<t ig ( {
t ig b Lt .d Ls ee ( e it hn ei t nr Sr n >)
@v ri e
Oe r d
pb i vi oC a gd Ca g< e tn sS r n> ee t {
ul c od n hn e( h ne ? xe d ti g v n)
w ie ee tn x () {
h l (v n. et )
i( vn .a A dd ) {
f ee tw sd e( )
/ ..
/ .
}e s i( vn .a R mv d) {
le fe e tw se oe ( )
/ ..
/ .
}
}
}
}

42. Chart API

44. Chart API

46. Animation

48. Animation
KeyValue
Represent a "fixed" position of a Node
KeyFrame
A duration
Some KeyValues
Animation
Could contain some KeyFrames (Timeline)
Play

49. Animation
N d n d =. .;
o e oe
.
K ya u k = nw K ya u( oe l yu Xr pr y ) 1 0;
e Vl e v
e e Vl e nd .a ot Po e t ( , 0)
K yr m k = nw K yr m( e Dr to (0 0 ,k )
e Fa e f
e e Fa e nw u ai n5 0) v ;
T ml n tm ln = nw Tm ln ( f;
i ei e ie ie
e i ei ek )
t ml n. eC ce o n( nm to . NE II E;
i ei e st yl Cu tA i ai nI DF NT )
t ml n. eO Fn s e( .. )
i ei e st ni ih d . ;
t ml n. ly)
i ei e pa(;

50. Effects
Lot of effects available
Blur, blend, reflection, shadows, ...
Input property
Chain of effects

51. Media
Long way from JMF
Audio
MP3, AIFF, WAV, AAC,
m4a
Video
FLV, MPEG-4
(H.264/AVC)
Metadata
Listeners

52. Media
F l m S n = nw F l( /y og m 3)
i e yo g
e i e " m Sn .p ";
M da mM da =n w Md am Sn . oR (. ot ig) ;
e i y ei
e ei ( yo gt UI ) t S rn()
M da ly rp ae = nw M da ly rm Md a ;
e iP a e ly r
e e iP a e( ye i)
p ae .e OE df e i( nw Rn a l( {. . };
l yr s tn nO Md a e u nb e)
. )
p ae .o ue rp r y) ad it n r . .)
l yr v lm Po et (. d Ls ee( . ;
p ae .l y)
l yr p a( ;
/ ..
/ .
i(l yr sa uP o et (. e( = S au.L YN ) {
fpa e .t ts rp ry ) gt ) = t tsP AI G
/ ..
/ .
}

53. SceneBuilder
UI builder tool
Useful for RAD
FXML generation
CSS support
Previewer

54. SceneBuilder

55. Scenic View
Understand current state of your application
Manipulation of the scenegraph
Manipulation of properties

56. Scenic View

58. Tools / API
JFXtras
FX Experience tool
Theming
e(fx)clipse
GroovyFX
ScalaFX
...

59. Useful resources

60. http://thierrywasyl.wordpress.com
http://docs.oracle.com/javafx/index.html
https://forums.oracle.com/forums/forum.jspa?
forumID=1385
http://fxexperience.com
http://jfxtras.org

61. Thank you