JavaFx Tutorials

8/12/2019 JavaFx Tutorials

1/56

A JavaFX Script Programming

Language Tutorial

Jim Weaver, JavaFX Script Author, Developer, Teacherhttp://JavaFXpert.com

TS!"#!


2/56

2008 JavaOneSMConference | java.sun.com/javaone | 2

Learn ho$ to %evelop &ich 'nternet

Application( in compile% JavaFX Script

programming )*+ looing at lot( o- co%e

JavaFX Script So-t$are Tutorial oal


3/56


Do a 0uic %emo o- a JavaFX Script technolog+

Sho$ (ome in(tructive co%e -rom the %emo )in mo(t ca(e(

&epeat -ir(t t$o (tep( until $e1re almo(t out o- time

2 3 A

JavaFX Script So-t$are Tutorial Agen%a


4/56


4urn into +our min% that JavaFX Script (o-t$are i( 5Simple, 6legant, an%Leverage( the Po$er o- ava7Sho$ +ou the coolne(( o- Declarativel+ Scripting the 8' )inclu%ingLa+out(, 4in%ing, Trigger(, an% Se0u ence(9onvince +ou that avaFX Script (o-t$are i( %e(peratel+ nee%e% in the(o-t$are %evelopment in%u(tr+, an% that it i( -un to %evelop&ant a little a*out ho$ the %ream o- a u*i0uitou( ava ;irtual , *ut i( happening in ?@@A,partl+ %ue to ava Plat-orm, Stan%ar% 6%ition ) ava S6 plat-orm. up%ate=@

Bi%%en Agen%a


5/56


9reating a 5-i(h e+e7 menu

http://JavaFXpert.com/weblog/2007/11/spotting-javafx.html
http://javafxpert.com/weblog/2007/11/spotting-javafx.htmlhttp://javafxpert.com/weblog/2007/11/spotting-javafx.htmlhttp://javafxpert.com/weblog/2007/11/spotting-javafx.html


6/56


9reating a picture thum*nail vie$er



7/562008 JavaOneSMConference | java.sun.com/javaone | 7

8(ing a Li(t component




http://java.sn.com/!eveloper/technical"rticles/scripting/javafx/ria#1/

A *eginning compile% JavaFX Script program
http://java.sun.com/developer/technicalArticles/scripting/javafx/ria_1/http://java.sun.com/developer/technicalArticles/scripting/javafx/ria_1/



/** HelloGoodbye.fx -* A "Hello World" style program that demonstrates* declaratively expressing a user interface.*/

pacage beatles!import avafx.gui.*!

#rame $

var phrase%&tring // 'he model title% "Hello( Goodbye" height% ) +idth% , visible% true content%

orderanel $ center% Canvas { content:

Text {

x: 50

y: 125

9omment(, pacage, import, %eclarative (cript



anvas $ content% 'ext $ x% 0 y% 120 content% bind phrase font% #ont $ si3e% )4

5 5 5 bottom% #lo+anel $ content% 6

Button { text: "Hello"

action:

function():Void {

// Te !utton as clic#ed

$%ase & "'ou say ello"

La+out(, event(, comment(, (tring(



utton $ text% "Hello" action% function78%9oid $ // 'he button +as cliced phrase : ";ou say hello..."! 5 5( utton $

text% "Goodbye" action% function78%9oid $ phrase : "and < say goodbye"! 5 5

= // end of content se>uence 5

55

Dra$ing, -ont(, o*Cect literal(



avafxc -d . HelloGoodbye.fx

avafx beatles.HelloGoodbye

9ompiling an% eecuting -rom comman%line



http://java.sn.com/!eveloper/technical"rticles/scripting/javafx/ria#1/

A (lightl+ more (ophi(ticate% mo%el



public class HelloGoodbye?odel $ public attribute phrase%&tring! public attribute color%olor!5

#rame $ var hg?odel : HelloGoodbye?odel $ phrase% "Hello( Goodbye lyrics" color% olor.G@B

5 ... content% orderanel $ center% anvas $

content% 'ext $ x% 0 y% 120 content% bind hg?odel.phrase fill% bind hg?odel.color

De-ining a cla((, an% more *in%ing



... bottom% #lo+anel $ content% 6 utton $ text% "Hello" action% function78%9oid $ hg?odel.phrase : ";ou say hello..."!

hg?odel.color : olor.@C! 5 5( utton $ text% "Goodbye" action%

function78%9oid $ hg?odel.phrase : "and < say goodbye"! hg?odel.color : olor.DE! 5 5 = // end of content se>uence

5 ...

La+out(, event(, comment(, (tring(


16/56


De-ault ;alueLiteral S+ntaData T+pe

@.@E.=!=#Gum*er

@!?'nteger

-al(etrue / -al(e4oolean

6mpt+ )Hero length String

5'1m a String7 or

I' am a String1String

JavaFX primitive %ata t+pe(


17/56


There are t$o general categorie( o- %ata t+pe( in JavaFX:

Primitive)al(o no$n a( *a(ic %ata t+pe( K*Cectt+pe(

Another %ata t+pe i( (e0uence)al(o no$n a( an arra+.An+ t+pe ma+ *e a((igne% to a varia*le )att%i!uteor va%

JavaFX Data T+pe(


18/56

2008 JavaOneSMConference | java.sun.com/javaone | 18http://java.sn.com/!eveloper/technical"rticles/scripting/javafx/ria#1/

Free*a(e 4ro$(er JFX u(er inter-ace


19/56


Free*a(e 4ro$(er JFX architecture


20/56


Tetri(JFX Animation

http://JavaFXpert.com/weblog/200%/0&/reall'-this-tim.html
http://javafxpert.com/weblog/2007/11/spotting-javafx.htmlhttp://javafxpert.com/weblog/2007/11/spotting-javafx.htmlhttp://javafxpert.com/weblog/2008/03/really-this-tim.html


21/56


pacage metronomeFmodel!import avafx.animation.*!

public class ?etronome?odel $ public attribute x29al%Bumber! public attribute anim : 'imeline $ auto@everse% true ey#rames% 6

ey#rame $ time% s values% x29al : 1 5( ey#rame $ time% 1s

values% x29al : ) t+een


22/56


23/56


bottom% #lo+anel $ content% 6

utton $ text% "&tart" enabled% bind not metro?odel.anim.running action% function78%9oid $ metro?odel.anim.start78!

5 5( utton $ text% "ause" enabled% bind not metro?odel.anim.paused and metro?odel.anim.running

action% function78%9oid $ metro?odel.anim.pause78! 5 5(

4in%ing to the (tate o- an animation


24/56


utton $ text% "@esume" enabled% bind metro?odel.anim.paused

action% function78%9oid $ metro?odel.anim.resume78! 5 5( utton $

text% "&top" enabled% bind metro?odel.anim.running action% function78%9oid $ metro?odel.anim.stop78! 5

5 = 5 55

9ontrolling, an% *in%ing to an animation (tate

h /


25/56



26/56


import avafx.animation.*!import avafx.gui.*!import ava.lang.&ystem!

var shape1 : ircle $centerI% 1Jcenter;% 120radius% 1

5!

var shape2 : @ectangle $x% ,y% K0

+idth% )height% 1

5!


27/56


var shape) : 'ext $ font%

#ont $

si3e% J4style% #ont&tyle.LDC

5 x% 20 y% 10 content% "Mava#I"

5!var shape, : 'ext $ font%

#ont $si3e% J4style% #ont&tyle.LDC

5 x% 20 y% 10 content% "@ocsN"5!

!


28/56


var color : olor.@C!var geom%&hape : shape1!

var t : 'imeline $ repeatount% 'imeline.


29/56


ey#rame $ time% 4s values% 6

geom : shape) t+een


30/56


#rame $ closeAction%

function78 $

&ystem.exit78! 5 title% "Mava#I &cript ?orphing"! visible% true content% anvas $

preferred&i3e% 6)O( 20= bacground% olor.WH


31/56

A l t % 4i %i t F ti


32/56

2008 JavaOneSMConference | java.sun.com/javaone | 32http://JavaFXpert.com/weblog/200%/0&/creating-comp-1.html

Applet(, an% 4in%ing to Function(

9la((e( JavaFX applet( 9ircle leveraging Java
http://javafxpert.com/weblog/2008/03/creating-comp-1.htmlhttp://javafxpert.com/weblog/2008/03/creating-comp-1.html


33/56


class ircle?odel $ attribute diameter%


34/56


'ext $ font% font2,old x% 2

y% 0 fill% olor.@C content% bind "Ciameter% $c?odel.diameter5" 5( 'ext $ font% font2,old

x% 2, y% 0 fill% olor.@C content% bind "Area% $P).2f c?odel.getArea785" 5 =

5 bottom% &lider $ minimum% maximum% , value% bind c?odel.diameter +ith inverse

5...

4in%ing )uni an% *i%irectional, -unction Sli%er

BT


35/56


Qhtml Qbody Qcenter

Qapplet +idth:,O height:0 Qparam name:"nlpFhrefR value:"ind'o#unctionApplet.nlp" Qparam name:"ApplicationlassR value:"ind'o#unctionApplet" Q/applet

Q/center Q/body

Q/html

BT


36/56

2008 JavaOneSMConference | java.sun.com/javaone | 36http://JavaFXpert.com/weblog/200%/0&/creating-comp-1.html

WinnerWheelJFX

WinnerWheelJFX Nooming in
http://javafxpert.com/weblog/2008/03/creating-comp-1.htmlhttp://javafxpert.com/weblog/2008/03/creating-comp-1.html


37/56


WinnerWheelJFX Nooming in

http://JavaFXpert.com/weblog/200%/02/whos-(oomin-who.html

9u(tomGo%e (cale tran(late rotate
http://javafxpert.com/weblog/2008/02/whos-zoomin-who.htmlhttp://javafxpert.com/weblog/2008/02/whos-zoomin-who.html


38/56


public class WinnerWheelM#I extends ustomBode $public function create78%Bode $

...

returnGroup $

transform% bind 6 &cale.scale7if 73oomed8 ) else 1(

if 73oomed8 ) else 18( 'ranslate.translate7( if 73oomed8 -.J * c; else 8

= content% 6 @ectangle $ ... 5( ...

Group $ transform% bind 6 @otate.rotate7if 7running8 7a * rand8 P )4

else chosen


39/56


8(ing Trigger(

http://JavaFXpert.com/weblog/200%/02/trigger-happ'-.html

Trigger( (e0uence trigger(
http://javafxpert.com/weblog/2008/02/compiled-javafx.htmlhttp://javafxpert.com/weblog/2008/02/compiled-javafx.htmlhttp://javafxpert.com/weblog/2008/02/trigger-happy-.html


40/56


class ?odel $ attribute entries%&tring6= : 6"@ed"( "Green"( "lue"( ";ello+"( "urple"=

on replace old9alue6idxA..idx= : ne+lement$&ystem.out.println7"replaced $old9alue5 at $idxA5

+ith $entries6idxA=5"8! 5!

attribute selected


41/56

Se0uence( -or epre((ion


42/56


import ava.lang.&ystem

class ompiled&e>uencexample $

attribute ordinals%&tring6= :6R3eroS( RoneS( Rt+oS( RthreeS( RfourS( RfiveS( RsixS=!

function print&omeLrdinals78%9oid $ for 7lmnt in ordinals +here lmnt.length78 )8 $ &ystem.out.println7Rlmnt $5S8!

5 5

function get&omeLrdinals78%&tring6= $ var elements :

for 7lmnt in ordinals +here lmnt.length78 )8 lmnt!

return elements! 5

Se0uence(, -orepre((ion

Se0uence( *loc epre((ion(


43/56


JavaFX Script i( an epre((ion language, $ith *locepre((ion(:

A *loc epre((ion con(i(t( o- epre((ion( (urroun%e% *+ curl+ *race(an% (eparate% *+ (emicolon(

The value o- a *loc i( it( la(t epre((ion

get&omeLrdinals78can *e (impli-ie% *+ removing the vara((ignment an% return(tatement:

function get&omeLrdinals78%&tring6= $ for 7lmnt in ordinals +here lmnt.length78 )8

lmnt.length!5

Se0uence(, *loc epre((ion(

'-/el(e epre((ion


44/56


import ava.lang.&ystem

class ompiledompileduired 5

5

'-/el(e epre((ion

4i%irectional *in% (e0uence manipulation: in(ert


45/56


... 'ext#ield $ value% text mdl.entered'ext +ith inverse

columns% 1 5( utton $ text% "


46/56


Se0uence manipulation: replace, %elete

... utton $ text% "@eplace"

enabled% bind mdl.entered'ext.trim78 Q "" action% function78%9oid $ mdl.entries6mdl.selected


47/56


Tetri(JFX Animation

http://JavaFXpert.com/weblog/200%/0&/reall'-this-tim.html

Wor% Search PuHHle 4uil%er
http://javafxpert.com/weblog/2007/11/spotting-javafx.htmlhttp://javafxpert.com/weblog/2007/11/spotting-javafx.htmlhttp://javafxpert.com/weblog/2008/03/really-this-tim.html


48/56


Wor% Search PuHHle 4uil%er


9reating 9u(tomGo%e, mou(e event(


49/56


9reating 9u(tomGo%e, mou(e event(

public class 'humbBail#ilm&trip extends ustomBode $...Group $

content% 6


50/56


et ea ( >. a( Ja a So t a e lug

Bo$ to receive the JavaFX SDM


51/56


JavaFXSDM: Bo$ to receive the SDM O

The avaFX SDM Previe$ relea(e $ill *e availa*le inune ?@@A.Plea(e vi(it http://$$$.Cava-.comto preregi(ter-or the SDM Previe$ relea(e.

J
http://www.javafx.com/http://www.javafx.com/


52/56


53/56

For


54/56


&elate% JavaKneS>=@'n(i%e The JavaFX Script Technolog+4a(e% &untime AP'(: Scene raph 3

We*Mit TS!!# Java Technolog+ -or 4lu

ra+ an% T;: Authoring -or Per-ormance Diver(it+

TS>@=#A Loo into Development -or the JavaFX >@# 8(ing JavaFX Script To 4uil% S$ing Application( TS>@#

'ncorporating =?" 4uil% Qour K$n


55/56


&elate% JavaKne 9on-erence La*(, 4KF( an% Panel(:

LA4"E@

JavaFX Technolog+4a(e% Application(: &ich 9lient Application( $ith 9ool 6 PAG"E"? 9a(e Stu%ie( -rom the JavaFX Technolog+ Worl%

4KF@! == The Java


56/56

Documents

JavaFx Tutorials