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

21,750
views

Published on

Published in: Technology, Education

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
21,750
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
60
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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