Your SlideShare is downloading. ×
Introduction to JavaFX 2
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to JavaFX 2


Published on

Published in: Technology, Education

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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;
  • 15. Base classes pbi casTetalXetnsApiain{ ulc ls weWlF xed plcto pbi sai vi mi(tig]ag){ ulc ttc od anSrn[ rs Apiainluc(,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*> ?mot aaln.? <ipr ?mot aaxsee*> <ipr*> ?mot aaxseeefc.? <ipr ?mot aaxseeiae*> <ipr ?mot aaxseecnrl*> <ipr*> ?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( 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 . ; 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( . ; 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
  • 51. Thank you