Introduction to JavaFX 2

28,904 views

Published on

Published in: Technology, Education

Introduction to JavaFX 2

  1. 1. Introduction to JavaFX 2 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. 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. 4. The big button syndrome
  5. 5. Some tools "helped" us ... Visual Editor Eclipse plugin How many JARs do I need to start creating a UI??!! NetBeans
  6. 6. ... or not ! So much junk code !! Not even editable Except outside the IDE
  7. 7. A hope shined ... JavaOne 2007 JavaFX is announced Rich Internet Applications (RIA) "Seems" promising
  8. 8. ... but ... Java + Flash + Flex = JavaFX = ???
  9. 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. 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. 11. And now ...
  12. 12. JavaFX 2 EOL of JavaFX 1.2 & 1.3 December, 20th 2012
  13. 13. JavaFX architecture
  14. 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. 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. 16. FXML V M C Markup­based language CSS styling JavaScript capabilities Component binding Controller concept URL locator I18N
  17. 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. 18. JavaFX CSS Properties prefixed with ­fx ­fx­text­fill ­fx­background­color ... linear­gradient radial­gradient rgb / rgba Effects dropshadow & innershadow
  19. 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. 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. 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. 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. 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. 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. 25. @FXML The controller / .. / . @XLpiaePn acoPn; FM rvt ae nhrae @XLpbi vi satweWl(cinvn e { FM ulc od trTetalAtoEet ) / .. / . } / .. / .
  26. 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. 27. FXMLLoader Load a FXML file ResourceBundle can be defined Get the controller
  28. 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. 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. 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. 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. 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. 33. Bindings How much? 400.67 And now? 4000.67
  34. 34. Bindings
  35. 35. FXCollections Extension of Collections Observable Interfaces ObservableList, ObservableMap Listeners ListChangeListener, MapChangeListener FXCollections Utility class
  36. 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. 37. Chart API
  38. 38. Chart API
  39. 39. Animation
  40. 40. Animation KeyValue Represent a "fixed" position of a Node KeyFrame A duration Some KeyValues Animation Could contain some KeyFrames (Timeline) Play
  41. 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. 42. Effects Lot of effects available Blur, blend, reflection, shadows, ... Input property Chain of effects
  43. 43. Media Long way from JMF Audio MP3, AIFF, WAV, AAC, m4a Video FLV, MPEG­4 (H.264/AVC) Metadata Listeners
  44. 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. 45. SceneBuilder UI builder tool Useful for RAD FXML generation CSS support Previewer
  46. 46. SceneBuilder
  47. 47. Scenic View Understand current state of your application Manipulation of the scenegraph Manipulation of properties
  48. 48. Scenic View
  49. 49. Tools / API JFXtras FX Experience tool Theming e(fx)clipse GroovyFX ScalaFX ...
  50. 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. 51. Thank you

×