JavaFX
because you're worth it
Thierry Wasylczenko
@twasyl
me.getInfo();
Software & quality engineer @ GE Healthcare
JFXtras contributor
OpenJFX in progress
Former Java Full Profess...
We all know this...
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...
To get this...
The big button syndrome
Desktop apps in Java
Abstract Window Toolkit (AWT)
Swing
Event Dispatch Thread (EDT)
Complex
L&F
Old looking
Nimbus
Synthe...
Some tools "helped" us ...
Visual Editor
Eclipse plugin
How many JARs do I need to start creating a
UI??!!
NetBeans
... or not !
So much junk code !!
Not even editable
Except outside the IDE
A hope shined ...
JavaOne 2007
JavaFX is announced
Rich Internet Applications (RIA)
"Seems" promising
... but ...

Java + Flash + Flex
=
JavaFX
=
???
I am a Java developer !!
Scripting language
Similar to Flash scripting language
Unusable Java API
JARs? What's that?
Hey, ...
Look through the Windows
Windows Presentation Foundation
(WPF)
Works above DirectX
Introduced with .NET 3.0
XAML
Hey, I'm ...
And now ...
JavaFX 2
JavaFX architecture
Base classes
Application
The entry point of your app
Application.launch()
Override start()
Scene
Like the content pane in ...
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...
FXML

V

M C
Markup-based language
CSS styling
JavaScript capabilities
Component binding
Controller concept
URL locator
I1...
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 ...
JavaFX CSS
Properties prefixed with -fx
-fx-text-fill
-fx-background-color
...
linear-gradient
radial-gradient
rgb / rgba
...
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=...
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 ...
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 )...
Controller
Similar to master pages in ASP
Similar to a Managed Bean
Used to
manage events
update the view dynamically
...
...
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...
@FXML
Component binding
Like JSF
Each attribute must be strictly named as the fx:id
in the FXML
Controller Method Event ha...
@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 ...
@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...
FXMLLoader
Load a FXML file
ResourceBundle can be defined
Get the controller
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...
Properties
Expand & improve the JavaBeans concept
"Observe" a value
Event delivery
Listeners
Convention
private property f...
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 p...
Bindings
Observes dependencies
Properties
Updates itself according changes
High-Level API
Low-Level API
Kind of Observer /...
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...
Bindings
How much? 400.67
And now? 4000.67
FXCollections
Extension of Collections
Observable
Interfaces
ObservableList, ObservableMap
Listeners
ListChangeListener, M...
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...
Chart API
Chart API
Animation
Animation
KeyValue
Represent a "fixed" position of a Node
KeyFrame
A duration
Some KeyValues
Animation
Could contain some ...
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 y...
Effects
Lot of effects available
Blur, blend, reflection, shadows, ...
Input property
Chain of effects
Media
Long way from JMF
Audio
MP3, AIFF, WAV, AAC,
m4a
Video
FLV, MPEG-4
(H.264/AVC)
Metadata
Listeners
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 (...
SceneBuilder
UI builder tool
Useful for RAD
FXML generation
CSS support
Previewer
SceneBuilder
Scenic View
Understand current state of your application
Manipulation of the scenegraph
Manipulation of properties
Scenic View
Tools / API
JFXtras
FX Experience tool
Theming
e(fx)clipse
GroovyFX
ScalaFX
...
Useful resources
http://thierrywasyl.wordpress.com
http://docs.oracle.com/javafx/index.html
https://forums.oracle.com/forums/forum.jspa?
fo...
Thank you
JavaFX, because you're worth it
JavaFX, because you're worth it
JavaFX, because you're worth it
JavaFX, because you're worth it
JavaFX, because you're worth it
JavaFX, because you're worth it
JavaFX, because you're worth it
Upcoming SlideShare
Loading in...5
×

JavaFX, because you're worth it

2,859

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,859
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavaFX, because you're worth it

  1. 1. JavaFX because you're worth it Thierry Wasylczenko @twasyl
  2. 2. me.getInfo(); Software & quality engineer @ GE Healthcare JFXtras contributor OpenJFX in progress Former Java Full Professor & teacher @ SUPINFO Speaker
  3. 3. We all know this...
  4. 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. 5. To get this...
  6. 6. The big button syndrome
  7. 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. 8. Some tools "helped" us ... Visual Editor Eclipse plugin How many JARs do I need to start creating a UI??!! NetBeans
  9. 9. ... or not ! So much junk code !! Not even editable Except outside the IDE
  10. 10. A hope shined ... JavaOne 2007 JavaFX is announced Rich Internet Applications (RIA) "Seems" promising
  11. 11. ... but ... Java + Flash + Flex = JavaFX = ???
  12. 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. 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. 14. And now ...
  15. 15. JavaFX 2
  16. 16. JavaFX architecture
  17. 17. 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();
  18. 18. 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) } }
  19. 19. FXML V M C Markup-based language CSS styling JavaScript capabilities Component binding Controller concept URL locator I18N
  20. 20. 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
  21. 21. JavaFX CSS Properties prefixed with -fx -fx-text-fill -fx-background-color ... linear-gradient radial-gradient rgb / rgba Effects dropshadow & innershadow
  22. 22. 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
  23. 23. 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
  24. 24. 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 ";
  25. 25. 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
  26. 26. 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 / .. / . } }
  27. 27. @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
  28. 28. @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 ) / .. / . } / .. / .
  29. 29. @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
  30. 30. FXMLLoader Load a FXML file ResourceBundle can be defined Get the controller
  31. 31. 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 )
  32. 32. 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
  33. 33. 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; } }
  34. 34. 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
  35. 35. 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 );
  36. 36. Bindings How much? 400.67 And now? 4000.67
  37. 37. FXCollections Extension of Collections Observable Interfaces ObservableList, ObservableMap Listeners ListChangeListener, MapChangeListener FXCollections Utility class
  38. 38. 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 ( ) / .. / . } } } }
  39. 39. Chart API
  40. 40. Chart API
  41. 41. Animation
  42. 42. Animation KeyValue Represent a "fixed" position of a Node KeyFrame A duration Some KeyValues Animation Could contain some KeyFrames (Timeline) Play
  43. 43. 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(;
  44. 44. Effects Lot of effects available Blur, blend, reflection, shadows, ... Input property Chain of effects
  45. 45. Media Long way from JMF Audio MP3, AIFF, WAV, AAC, m4a Video FLV, MPEG-4 (H.264/AVC) Metadata Listeners
  46. 46. 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 / .. / . }
  47. 47. SceneBuilder UI builder tool Useful for RAD FXML generation CSS support Previewer
  48. 48. SceneBuilder
  49. 49. Scenic View Understand current state of your application Manipulation of the scenegraph Manipulation of properties
  50. 50. Scenic View
  51. 51. Tools / API JFXtras FX Experience tool Theming e(fx)clipse GroovyFX ScalaFX ...
  52. 52. Useful resources
  53. 53. 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
  54. 54. Thank you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×