1.
JAVA IN THE BOX Y. SAKURABA

2.
WHAT'S JAVAFX

3.
(( W Standard
:33 Java FX GUI Lib.
oflava SE8
” = Swing
+ Java 2D
+ Java 3D

4.
' _ . E1Z<§§G)r"€—“/ "’£$, $
l ‘ M m
. .;- . ,
- T - "“ 1 ss; Fm;1m
24 B-’rFfiL; lr/ ‘J
1@mum
1 ma rm
1 mum
rfl . —a , W
‘T’; g} . .
fi*' gk. %2—a
,
»
‘
I
— ~— Ea —_—»-
L- a"
.1ay3FX - '3 1%”? E1 T
Jawiklpedna org"wxkxv'JavaFX v
JavaFX(i. '-1*. ’ IT-‘I-: '_‘| I3 Ja'. 'a1'. E*'_-E7‘
§, ‘»GU| _ , . _ , ’_3§. §¢. |a-'a SE .7 Updale 2 . ,
ii‘? xr~. «1L: Css&1'#5 I? " '_; »z§E*: “:5
133 -JavaFX 1 »JavaFX 2 - JavaFX 8
, J.a. LaEXi2.zLZl: “.3_-££'i1?. ’~: :§; —_O1acJs3
www oracle comftechr

5.
FEATURES
Browser
Animatir ‘

6.
FEMWES
_/ >.
I A . .
. .., -_, .. .,
B ‘ _j.
, . . ‘
V fut. v. _,'.
t. _.
v
n‘ V
‘lo: .“ E
‘ '’L-5. " I
.
* . ._. . ; .-_, ’_ ‘ u

7.
FEAT
U
22*
Bro.
Amma Ion
v A r
I
Effect
3D

8.
'1‘ 5|
. . ' 4“ 3:. ,A A. , .‘. I | _,
, . _ _ _ - _ _ > -
I . - , -R I , , ’ Q; hi 1'. -.1 .1 ‘V
¥ E W J = : U _‘L7_E'_; ~.. .j~‘= ’,I L} U _|

9.
DIFFERENCE
Structure
GUI Parts
Layout
Asysnc Task

10.
Swing
Java
STRUCTURE JavaFX

11.
1
LV
Scene Builder 3

12.
MAIN CLASS
public class Hello extends Application {
@0verride
public void start(Stage stage) throws Exception {
stage. setTitle("Hello JavaFX");
// Loading FXML
VBox root = FXMLLoader. load(
getClass(). getResource("HelloView. fxml"));
Scene scene = new Scene(root);
stage. setScene(scene);
stage. show();
}
public static void main(String. .. args) {
launch(args);
}
}

13.
FXML
<VBox xmlns: fx= "http: //javafx. com/ fxml/1"
xmlns= "http: //javafx. com/ javafx/8"
fx: controller= "HelloViewController">
<children>
<Button text= "Say Hello" onAction= ”#say" / >
<Label fx: id= "label" / >
</ children>
</ VBox>
public class HelloJavaFXViewcontroller {
@FXML
private Label label;
@FXML
private void say(ActionEVent event) {
label. setText("Hello, JavaFX! ");
}
} CONTROLLER OLASS

14.
SCENE ORAPH
<container>
Stage = Scene W VB“ = Button
E Label

15.
llabel
lButton
. lTextFleld
lComboBox
l0pfionPane
1 List
. lTab| e
simlar
different
Label
Button
Textfield
ComboBox
Dialog/ Alert
Llstlliew
Tablelliew

16.
LAYOUT
| :|
—+@
Container Layout
Manager
F| owLayout
Borderlayout
BoxLayout
Springlayout
| :|
| ]|: ||]
nil
Container
F| owPane
BorderPane
HBox/ VBox
AnchorPane

17.
IVVCIILY YCCJIJKJI I| l|IJ V u u I v --
Coming soon.
/
IN ‘FUN 1‘ ~‘ ~ ~ J , ,iTA_l‘‘ LN,
ll 3 billion devices
IT l ‘i . 7 V ’ 5 7 ‘ Ii ‘
L iii/ "Fi7‘V€ S , S
» 9 million developers I V
F H on“:1l§ lam T" 81 CCj_i"’”l: +’l-_A‘§: A5*”'? tiIM-"‘oFi; .'5:: :~: _;i:
L . I
- J13 it; ill; in Ta‘ Li’; 4 ~ «

18.
.: :n1'1'ififi. mtift.1i5} V
iii
Tl
J).
J/1.1.
own
all.
1:. .. . .
. . . c
; ,.
C, ... ..
i
, _t l
~—i V

19.
Twitter Query
Date User Text
r14r‘11i'15 U418 @l| .Lgahmed 7 RT @VJer1g/ :13 Installation de #Java8 #JA/4-. F>'terrnine'e i? v‘Ec| ip 7 A_
15 0417 @JPeredaDnr RT @Sean_l1liPhiiiips @_JPeredaDnrtriis 15 a garvie ariangerior
@S_ean hi @JPeredaDnrthi5 is a garne changeridrJavaF'A 3D usage You
@Sean. hi RT @_gPeredaDnr M0»/ IVTQ contour plot with #JavaFX r‘=3D, variant
@Jer12B3 Installation de #Java8 SJ‘-. Vf. F'/ {TETTTTIHEE 1 ‘Eclipse 3¢Read_r_FdrP
@S_eanl, liPhi RT @_r_ecursive_chaos @weiq_igao great presentation tonght at
@rnagui| apps RT @ioseig_e| gado Para #Java #JavaF. >< : ¢JavaEE #EA#BP1;1 SS
@C_onsunecT| RT @yoseideig3do Para #Java #Ja@F. >< : ¢JavaEE §E~‘w‘¢E! Pl.1 SS
@io_seide| ga Para ‘Java #JavaF)‘ #JavaEE #EA€v‘EFjl. l #SOA#Sdt_1wareDeweio
@Dv: aiiRarn J3v3F. ’< Dependency Iniedion with Gdogleggce http tit cdr‘EHnR
@D_v: aiiRarn Hand gawing efiectwitn JavaFX http tit coi‘ll_vvr_pv: iCrEO
@wei_gigao RT @ionanvd5. 1 am verr privileged to speak atthe r‘= Devdxx closi
15 0135 @l. L:Hec>: RT @JFere_daDnr A‘l9v'ITT§ contour plot with #JavaFX €v‘3D, variant
15 0125 @helrwarninc Posted update to #yavaf>r dependency iniedion post to show ma
1512 55 @ti_rn_vates RT @_t_iendri~: E:hers How to create a hand drawing efiectwitn 36
141143 @wowehod>: Pro JavaF)< 8 A Definitive Guide to Building DESMGD litohiie an
A14r11i141133 @JET3dv RT @nend >' hers How to create a hand GLBWIHQ efiectwitn :6
A 141129 @: afldea “@hendnirEh: er5 How to create a hand drawing efiectwith #J
141115 @w§i i__gao RT @_r_ecursive_chaos @weiqigao great presentation tonight at
141 @Vsugarli1e RT @)‘aSuenag fa/ pt#L£; JauaF. ><t, T)§§’¢'E1-_! "(t, 7'; ?£ Q gai:
@Teci_i*. ".'ar5 We cdnlpared fiyavafyvs Wswt » see results http ht coi‘DARHrarni
A14v‘11i‘1410:3 @r_nichae| _at RT @E: iipseP| anet Torn Scriindi A-JTITTTSTEGDaihmOTp71Ii1g| i1J :
’1ii1mi1_o, =.
/ ‘tlfllr
DT(‘ti mm lamii r ma “Mu gu ; n:_

20.
1. Main Class
2. FXML
3. Controller Class
Event Processing
4. Controller Class
Very Different Controls from Swing
5. Model
Async Task
6. Look & Feel/ CSS

21.
<B3:S: :"r“e> FXML Skeleton
<AnchorPane>
<children>
<TextField onAction= "#searchActionPerformed" / >
<ImageView onMousePressed= "#searchImagePressed" / >
</ children>
</ AnchorPane>
</ top>
<center>
<AnchorPane>
<children>
<TableView>
<columns>
<TableColumn text= "Date" / >
<TableColumn text= "User" / >
<TableColumn text= "Text" / >
</ columns>
</ TableView>
</ children>
</ AnchorPane>
</ center>
</ BorderPane>

22.
Event Processing
@FXML
private void searchImagePressed(
MouseEvent event) {
search();
}
@FXML
private void searchActionPerformed(
ActionEvent event) {
search();
}
private void search() {
/ / Async Query Processing
}

23.
*i"i“i"lS°° 1/-on
(stations Iis‘ V i E 701* it if V _ ,7 I
- - , , - , . ’onew. a RoudTrip peszinaoon Station joncwziy ’ /3:1 g
licgstmm SW0’ ' H by 10.80 luaigyene ‘’ 9*. ‘-‘ll _.
16, 9 1o_2o 1 _e‘. i1_Ig| _l !1A'itt , ,.. ..__——gagtrrj~q«3p)e-r—“tfy/ .1,’
19, 0 10.80 Mac/ ‘.. :nur , ,_, /,. ~‘V/ Ep‘~rf~‘rP1;r1‘Y§r-'*Ffy/ ~
241 3 10.00 if/ niibrae gf+_1l; f;. §.E. _.L. ..§. £r; r;, [r—-~“ri-'/ / L : »
Asl ) 11.20 / Montgorr/ iery . l 5.15 10.30 5
i3aiooa—1-ameeono ‘ 9.40 «luonn :1 5t-: <eiey 5‘) 5.79 i/ ‘1__1 _
Bay Fair 6.20 12.40 4* "* " z N
Castro vaiie7 f 16.45 12.90 _. _.mr ‘ A
Civic Center _ 5.15 10.30
Coliseum 5.80 11.60 ‘
Colma 4.35 8.70 5.
Concord 2/: 7.10 14.20 {
Dal, ‘Pity L . .5 3 9.00 Rockridge 5.
0on_M, ’r. _l_. C.l_A5";2§l. Nl, Nl§) 3N3-3] ‘11.3o San Bruno 3.95 7.90
Dublin/ Pleasanton 7.35 14.70 San Francisco lntl’ Airport Wm: r: I:l= :1,-jl: t;1
ElCerrito delNorte {(3.00 12.00 San Leandro '6.05 12.10’
El Cerrito Plaza 5.85 11.70 South Hayward 6.70 13.40
Embarcadem ‘ A: 1: 1n an o. ... .._ n-_ r_- ---. - -— — - -

24.
fl
5: ii)i; ‘lil/ ~f»-'i*1'1.i'~‘. . ; 't. l.‘rr'5l ; ~¢+"r: P.'r*r~g': ~-—~ . 'r‘‘. *.*/ ‘T *' 1 1 :1
* . .’ .1,’ H , ‘ A 2‘ —~ V, _ -‘— ' ‘ “i - _ ", 4*‘ g 1 '—“‘ " Ai ""‘lT /
gr. *~L. i;e1,; .L, ;'hr. i.s-, ii; i‘; r>ii= s~. sr. e£1sci: *ei.1tema*eioi: aI Ai: ipe1it. Ite*.1*— 1 W 1 > 1.
r= ~'e= rir1°r**ir r'°"rfr+: fr= t:? =.1°*’
Destination Station 7 V T Way RomdTr£p Destination Station 000 Way : R<= IndT"’9
12th Street-OakIand ‘ 5.40 10.80 Lafayette V 6.35 12.70
. [ E 16th Street-Mission 5.10 10.20 Lake Merritt 5.40 10.80
19th Street-Oakland V 5.40 10.80 MacArthur 5.50 11.00
(= l,r<r- ; '€‘i"’, '.‘~ §l'. '.iFI"i°i . i*Tsi. °3.; v4t71}. .§i€P‘l. ‘Y? '5n| Gl. .l. l'? ‘AFN| £FNTeEl-if 1 1"‘*/ 1 « 1'50 3'00
0‘ 0‘ " ’Ashbyi 0 _ 5.60 11.20 Montgomery_ ‘5.15 ‘10.30
. _ « _ r, _ . ._ ii, <,. ~- i _
5'g)L= _), !ilPar§’. i"'119'? ‘i ‘r.3/‘M5: b«. kL—‘r «N. -o. Ei: .een‘/ eiey 1 ‘L. -«l C-5:70 rl1'l. o.0
‘ 4| Bgy Farr H C 4|” 6.? _k _ rvl>gr’th, (3io)ri’c: oYrcl_/ _lIAfi| rtineNz)N 725 14.50
‘lF"«l‘V- 31'}. -.sE. b alto. » Pl 9"? ‘ V‘i~: .‘4o ~'. “2.sU ’ore; ld. Sr '1 P‘ ‘ P 6.‘05 12.10
r—' ; T5lv_iq iC}agrr1er rjrr ; .‘lil/ FF ’. -‘lUI.3r1‘S -, '-110.50 T l 1 It~, ‘:tt"$b= .li'<'_? §l, lB, h,»_‘riV. oi1'. lt? ‘lil/ ,. I LA 521 ‘SE13-E30 l l
l
coima‘ ‘ 4.3%} . fPoweii_ 5‘ _} ‘ A '_. 5:.15 10.30
Concord l'1L= .irt: "1 .111‘. -gj10.t‘, .9z. éi. ‘—‘ ‘Fi= E.tiirno-nlo. i‘. F"? l“l *7~‘«lTT‘ ‘7Ufi. l5 12.30
oniy City 14.50 1 9.00 Rockridge 5.60 11.20
fl Ddwntown Berkeley 5.65 l11.30 San Bruno _ 3.95 7.90
_’r‘ . 'Dublin/ Pleasanton 7.35 |14.70 San Francisco Intl’ Airport ~'M| w:1:l'= :l, -', l#L=1
‘.3. 1 V3 ElCerrito delNorte £6.00 l12.00 San Leandro 6.05 12.10’
’ EICerrito Plaza ‘; 5.85 l11.70 South Hayward 6.70 13.40
Embarcadem A: 1: |1n on o. ... .._ n-_ . -_- , - --
C'°"i5°l‘~'FlQ1"? la”d»"}'l?9'U5'8°"r‘/ ;‘§9r. :ii[Pt? §i1i ? 'fi‘i'= r*t: .= cl . ‘ti 5-1:l‘l. :“-. -". =.r-. i‘i. i ‘-1 it
. « . — V f 7 ’ ”

25.
ASYNO TASK
Service/ T ask
public class Queryservice
extends Service<QueryResult> {
private TwitterQuery twitterQuery;
private String keyword;
protected Task<QueryResult> createTask() {
return new Task<QueryResult>() {
protected QueryResult call() throws Exception{
return twitterQuery. search(keyword);
}3
}
}

26.
SYNO T K
Service/ T ask
public class Queryservice
extends Service<QueryResult> {
private TwitterQuery twitterQuery;
private String keyword;
protected Task<QueryResult> createTask() {
return new Task<QueryResult>() {
protected QueryResult call() throws Exception{
return twitterQuery-search(keyword);
};
}
}
Queryservice service
= new Queryservice(twitterQuery, queryText);
service. set0nSucceeded(e -> {
QueryResult result = service getValue();
// Some Other execution
})3
service. start();

27.
OSS
Vender Prefix: -fX-
. text-field {
-fx-background-radius: 12px;
-fx-padding: 0px 12px 0px 12px;
}
Scene Builder CSS Analyzer

28.
CONCLUSION
GUI Structure n
Some Components Q Some Cotrols
BUT
JTable ! = TableView

29.
OONOLUSION
Basical Idea is SAME
Easy for Swing Developer
to Use JavaFX
https: //github. c0m/ skrb/ SwingTwitterQuery
https: //github. com/ skrb/ FXTwitterQuery

30.
MIORATION
from
to
JAVA IN THE BOX Y. SAKURABA