Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Introduction to
JavaFX 2
Thierry Wasylczenko
@twasyl
me.getInfo();
Software & quality engineer @ GE Healthcare
JFXtras contributor
OpenJFX in progress
Former Java Full Profess...
Desktop apps in Java
Abstract Window Toolkit (AWT)
Swing
Event Dispatch Thread (EDT)
Complex
L&F
Old looking
Nimbus
Synthe...
The big button syndrome
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

EOL of JavaFX 1.2 & 1.3
December, 20th 2012
JavaFX architecture
Base classes
Application
The entry point of your app
Application.launch()
Override start()
Scene
Like the content pane in ...
Base classes
pbi casTetalXetnsApiain{
ulc ls weWlF xed plcto
pbi sai vi mi(tig]ag){
ulc ttc od anSrn[ rs
Apiainluc(weWlF.l...
FXML

V

M
C
Markup­based language
CSS styling
JavaScript capabilities
Component binding
Controller concept
URL locator
I1...
FXML
<xlvrin"."ecdn=UF8?
?m eso=10 noig"T-">
<ipr jv.ag*>
?mot aaln.?
<ipr jvf.cn.?
?mot aaxsee*>
<ipr jvf.cn.fet*>
?mot a...
JavaFX CSS
Properties prefixed with ­fx
­fx­text­fill
­fx­background­color
...
linear­gradient
radial­gradient
rgb / rgba
...
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-et...
JavaFX CSS
Stylesheets and CSS classes
<nhrae..
AcoPn .>
<tlset>
syehes
<R vle"/o/wslDfutcs /
UL au=@cmtay/eal.s" >
<syehe...
JavaFX CSS
Java code
mBto.eSyels(.dAl"olcas,"eyco-ls";
yutngttlCas)adl(co-ls" vr-olcas)
mBto.eSye"f-akrudclr wie)
yutnsttl...
Controller
Similar to master pages in ASP
Similar to a Managed Bean
Used to
manage events
update the view dynamically
...
...
Controller
pbi casTetalXotolripeet Iiilzbe{
ulc ls weWlFCnrle mlmns ntaial
/ ..
/ .
@vrie
Oerd
pbi vi iiilz(R ag,RsucBnl a...
@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
/ ..
/ .
@XLpiaePn acoPn;
FM rvt ae nhrae
@XLpbi vi satweWl(cinvn e {
FM ulc od trTetalAtoEet )
/ ..
...
@FXML
The FXML
<nhrae..f:d"nhrae ..f:otolr"o.wsltetalxcnrlesTetalXoto
AcoPn . xi=acoPn" . xcnrle=cmtay.wewlf.otolr.weWlFCn...
FXMLLoader
Load a FXML file
ResourceBundle can be defined
Get the controller
FXMLLoader
ULfmUL=gtls(.eRsuc(/ypcaemFl.xl)
R xlR
eCas)gteore"m/akg/yiefm";
FMLae fm =nwFMLae(xlR)
XLodr xl
e XLodrfmUL;
/...
Properties
Expand & improve the JavaBeans concept
"Observe" a value
Event delivery
Listeners
Convention
private property f...
Properties
pbi casFo{
ulc ls o
piaeDulPoet ltrOCfe =nwSmlDulPoet(;
rvt oberpry iesfofe
e ipeoberpry)
pbi fnldul gtiesfofe)...
Bindings
Observes dependencies
Properties
Updates itself according changes
High­Level API
Low­Level API
Kind of Observer /...
Bindings
Itgrrprynm =nwSmlItgrrpry1)
neePoet u1
e ipeneePoet(0;
Itgrrprynm =nwSmlItgrrpry2)
neePoet u2
e ipeneePoet(0;
Itg...
Bindings
How much? 400.67
And now? 4000.67
Bindings
FXCollections
Extension of Collections
Observable
Interfaces
ObservableList, ObservableMap
Listeners
ListChangeListener, M...
FXCollections
Ls<tig srnLt=nwAryitSrn>)
itSrn> tigs
e raLs<tig(;
/ Cet a osral ls
/ rae n bevbe it
OsralLs<tig srnOss1=FCl...
Chart API
Chart API
Animation
Animation
KeyValue
Represent a "fixed" position of a Node
KeyFrame
A duration
Some KeyValues
Animation
Could contain some ...
Animation
Nd nd =..;
oe oe
.
Kyau k =nwKyau(oelyuXrpry) 10;
eVle v
e eVlend.aotPoet(, 0)
Kyrm k =nwKyrm(e Drto(00,k)
eFae ...
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
Fl mSn =nwFl(/yogm3)
ie yog
e ie"mSn.p";
MdamMda=nwMdamSn.oR(.otig);
ei yei
e ei(yogtUI)tSrn()
Mdalyrpae =nwMdalyrmM...
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/foru...
Thank you
Nächste SlideShare
Wird geladen in …5
×

Introduction to JavaFX 2

29.678 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Bildung
  • Als Erste(r) kommentieren

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

×