This document provides an introduction to JavaFX 2. It discusses the history of desktop applications in Java, including AWT, Swing, and issues with the old approaches. It then summarizes the announcement and initial challenges of JavaFX 1. It outlines the core concepts of JavaFX 2, including the architecture with Application, Scene, Stage, and FXML. It also briefly discusses controllers, properties, bindings, collections, charts, animation, effects, media, and tools like SceneBuilder and Scenic View.

1. Introduction to
JavaFX 2
Thierry Wasylczenko
@twasyl

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

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

4. The big button syndrome

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

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

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

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

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

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

11. And now ...

12. JavaFX 2
EOL of JavaFX 1.2 & 1.3
December, 20th 2012

13. JavaFX architecture

14. 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();

15. Base classes
pbi casTetalXetnsApiain{
ulc ls weWlF xed plcto
pbi sai vi mi(tig]ag){
ulc ttc od anSrn[ rs
Apiainluc(weWlF.ls,ag)
plcto.anhTetalXcas rs;
}
@vrie
Oerd
pbi vi satSaesae trw Ecpin{
ulc od tr(tg tg) hos xeto
/ D yu sufhr
/ o or tf ee
Seesee=nwSee ..)
cn cn
e cn( . ;
saestcn(cn)
tg.eSeesee;
saeso(;
tg.hw)
}
}

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

17. FXML
<xlvrin"."ecdn=UF8?
?m eso=10 noig"T-">
<ipr jv.ag*>
?mot aaln.?
<ipr jvf.cn.?
?mot aaxsee*>
<ipr jvf.cn.fet*>
?mot aaxseeefc.?
<ipr jvf.cn.mg.?
?mot aaxseeiae*>
<ipr jvf.cn.oto.?
?mot aaxseecnrl*>
<ipr jvf.cn.aot*>
?mot aaxseelyu.?
<nhraexlsf=ht:/aaxcmfm"i=miPnl f:d"nhrae peHih=78 peWdh
AcoPn mn:x"tp/jvf.o/xl d"anae" xi=acoPn" rfegt"6" rfit=
"04 f:otolr"o.wsltetalxcnrlesTetalXotolr
12" xcnrle=cmtay.wewlf.otolr.weWlFCnrle"
sye"f-akrudclr lna-rdet#9440,#00910)">
tl=-xbcgon-oo: iergain(6BE % 07B 0%;
<hlrn
cide>
<mgVe i=titrtce"ftit=18 ftegt"2"lyuX"0 lyuY"0>
Iaeiw d"wteSikr iWdh"2" iHih=18 aot=3" aot=3"
<mg>
iae
<mg ul"/o/wsltetalxrsucsiae/wteSikrpg /
Iae r=@cmtay/wewlf/eore/mgstitrtce.n" >
<iae
/mg>
<Iaeiw
/mgVe>
<ae tx=TetalX peWdh"04 sye"f-otsz:10t -xtx-il wie -xf
Lbl et"weWlF" rfit=12" tl=-xfn-ie 0p; f-etfl: ht; fotwih:bl; lyuY"0 /
n-egt od" aot=3" >
<utni=bto"tx=Sac"oAto=#trTetal sye"f-otsz:2p; /
Bto d"utn et"erh ncin"satweWl" tl=-xfn-ie 0t" >
<cide>
/hlrn
<AcoPn>
/nhrae

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

19. JavaFX CSS
Inline CSS
<ae tx=TetalX peWdh"04 sye"f-otsz:10t -xtx-il wie -xfn-eg
Lbl et"weWlF" rfit=12" tl=-xfn-ie 0p; f-etfl: ht; f-otwi
h:bl; lyuY"0 /
t od" aot=3" >

20. JavaFX CSS
Stylesheets and CSS classes
<nhrae..
AcoPn .>
<tlset>
syehes
<R vle"/o/wslDfutcs /
UL au=@cmtay/eal.s" >
<syehes
/tlset>
<hlrn
cide>
<ae syels=co-ls"/
Lbl tlCas"olcas >
<ae>
Lbl
<tlCas
syels>
<tigf:au=vr-olcas /
Srn xvle"eyco-ls" >
<tigf:au=aaigcas /
Srn xvle"mzn-ls" >
<syels>
/tlCas
<Lbl
/ae>
<hlrn
cide>
<AcoPn>
/nhrae

21. JavaFX CSS
Java code
mBto.eSyels(.dAl"olcas,"eyco-ls";
yutngttlCas)adl(co-ls" vr-olcas)
mBto.eSye"f-akrudclr wie)
yutnsttl(-xbcgon-oo: ht";

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

23. Controller
pbi casTetalXotolripeet Iiilzbe{
ulc ls weWlFCnrle mlmns ntaial
/ ..
/ .
@vrie
Oerd
pbi vi iiilz(R ag,RsucBnl ag){
ulc od ntaieUL r0 eoreude r1
/ ..
/ .
}
}

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

25. @FXML
The controller
/ ..
/ .
@XLpiaePn acoPn;
FM rvt ae nhrae
@XLpbi vi satweWl(cinvn e {
FM ulc od trTetalAtoEet )
/ ..
/ .
}
/ ..
/ .

26. @FXML
The FXML
<nhrae..f:d"nhrae ..f:otolr"o.wsltetalxcnrlesTetalXoto
AcoPn . xi=acoPn" . xcnrle=cmtay.wewlf.otolr.weWlFCnrl
lr ..>
e" .
<hlrn
cide>
<utni=bto"oAto=#trTetal ../
Bto d"utn ncin"satweWl" . >
<cide>
/hlrn
<AcoPn>
/nhrae

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

28. FXMLLoader
ULfmUL=gtls(.eRsuc(/ypcaemFl.xl)
R xlR
eCas)gteore"m/akg/yiefm";
FMLae fm =nwFMLae(xlR)
XLodr xl
e XLodrfmUL;
/ Gttero eeeto tefl
/ e h ot lmn f h ie
Prn ro =(aet fm.od)
aet ot
Prn) xlla(;
/ Gttecnrle ascae t teFM
/ e h otolr soitd o h XL
MCnrle m =(yotolr fm.eCnrle(;
yotolr c
MCnrle) xlgtotolr)

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

30. Properties
pbi casFo{
ulc ls o
piaeDulPoet ltrOCfe =nwSmlDulPoet(;
rvt oberpry iesfofe
e ipeoberpry)
pbi fnldul gtiesfofe){
ulc ia obe eLtrOCfe(
rtr ti.iesfofegt)
eun hsltrOCfe.e(;
}
pbi fnlvi stiesfofedul vle {
ulc ia od eLtrOCfe(obe au)
ti.iesfofestvle;
hsltrOCfe.e(au)
}
pbi DulPoet ltrOCfePoet( {
ulc oberpry iesfoferpry)
rtr ti.iesfofe
eun hsltrOCfe;
}
}

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

32. Bindings
Itgrrprynm =nwSmlItgrrpry1)
neePoet u1
e ipeneePoet(0;
Itgrrprynm =nwSmlItgrrpry2)
neePoet u2
e ipeneePoet(0;
Itgrrprynm =nwSmlItgrrpry3)
neePoet u3
e ipeneePoet(0;
Itgrrprynm =nwSmlItgrrpry4)
neePoet u4
e ipeneePoet(0;
NmeBnigoeain=Bnig.d(u1mlil(u4,nm.iienm);
ubridn prto
idnsadnm.utpynm) u2dvd(u3)
Sse.u.rnl(Hwmc?"+oeaingtau()
ytmotpitn"o uh
prto.eVle);
nm.eVle10;
u1stau(0)
Sse.u.rnl(Adnw "+oeaingtau()
ytmotpitn"n o?
prto.eVle);

33. Bindings
How much? 400.67
And now? 4000.67

34. Bindings

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

36. FXCollections
Ls<tig srnLt=nwAryitSrn>)
itSrn> tigs
e raLs<tig(;
/ Cet a osral ls
/ rae n bevbe it
OsralLs<tig srnOss1=FCletososralLs(tigs)
bevbeitSrn> tigbLt
Xolcin.bevbeitsrnLt;
OsralLs<tig srnOss2=FCletososralLs(;
bevbeitSrn> tigbLt
Xolcin.bevbeit)
srnOss1aditnrnwLsCagLsee<tig( {
tigbLt.dLsee(e ithneitnrSrn>)
@vrie
Oerd
pbi vi oCagdCag< etnsSrn>eet {
ulc od nhne(hne? xed tig vn)
wieeetnx(){
hl(vn.et)
i(vn.aAdd) {
feetwsde()
/ ..
/ .
}es i(vn.aRmvd) {
le feetwseoe()
/ ..
/ .
}
}
}
}

37. Chart API

38. Chart API

39. Animation

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

41. Animation
Nd nd =..;
oe oe
.
Kyau k =nwKyau(oelyuXrpry) 10;
eVle v
e eVlend.aotPoet(, 0)
Kyrm k =nwKyrm(e Drto(00,k)
eFae f
e eFaenw uain50) v;
Tmln tmln =nwTmln(f;
ieie ieie
e ieiek)
tmln.eCceon(nmto.NEIIE;
ieiestylCutAiainIDFNT)
tmln.eOFnse(..)
ieiestniihd . ;
tmln.ly)
ieiepa(;

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

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

44. Media
Fl mSn =nwFl(/yogm3)
ie yog
e ie"mSn.p";
MdamMda=nwMdamSn.oR(.otig);
ei yei
e ei(yogtUI)tSrn()
Mdalyrpae =nwMdalyrmMda;
eiPae lyr
e eiPae(yei)
pae.eOEdfei(nwRnal( {..};
lyrstnnOMda e unbe)
. )
pae.ouerpry)aditnr ..)
lyrvlmPoet(.dLsee( . ;
pae.ly)
lyrpa(;
/ ..
/ .
i(lyrsauPoet(.e( = Sau.LYN){
fpae.ttsrpry)gt) = ttsPAIG
/ ..
/ .
}

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

46. SceneBuilder

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

48. Scenic View

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

50. Useful resources
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

51. Thank you