JavaFX tutorial. Stage/Scene, Event, Bind, Animation.

1. JavaFX Tutorial
Shuji Watanabe

2. About Me
Shuji Watanabe
Sapporo, Japan
Twitter: shuji_w6e
http://www.deathmarch.jp/
http://trac.deathmarch.jp/sunflower/
http://d.hatena.ne.jp/shuji_w6e/

3. Agenda
Stage / Scene
Event
Bind
Animation

4. Stage / Scene

5. Stage
JavaFX
Applet

6. Scene
Scene

7. Node
Scene
Node

8. Ex01_HelloFX.fx
Stage {
title : "Ex01_HelloFX"
scene: Scene {
width: 200, height: 200
content: [
Rectangle {
layoutX: 50, layoutY: 50
width: 100, height: 50
fill: Color.GREENYELLOW
}// Rectagle
]
}// Scene
}// Stage

9. Stage {
title : "Ex01_HelloFX"
scene: Scene {
•new
width: 200, height: 200
content: [
• Rectangle {
{}
layoutX: 50, layoutY: 50
width: 100, height: 50
fill: Color.GREENYELLOW
}// Rectagle
]
}// Scene
}// Stage

10. Stage {
title : "Ex01_HelloFX"
scene: Scene {
width: 200, height: 200
• content: [
Rectangle {
• < >: < > 50, layoutY: 50
layoutX:
width: 100, height: 50
• fill: Color.GREENYELLOW
}// Rectagle
]
}// Scene
}// Stage

11. Stage {
• title : "Ex01_HelloFX"
• []
scene: Scene {
width: 200, height: 200
content: [
Rectangle {
layoutX: 50, layoutY: 50
width: 100, height: 50
fill: Color.GREENYELLOW
}// Rectagle
]
}// Scene
}// Stage

12. Event

13. Variables
var
var msg:String = “Hello World”;
var msg = “Hello World”;
def
def HELLO = “Hello World”;

14. Function
function < >( ): < > {}
function showMessage(msg: String):Void {
println(msg);
}
var showMsg = function(msg: String):Void {
println(msg);
}

15. onMouseXxx
javafx.scene.Node
funtction

16. Ex02_MousePressed.fx
Stage {
scene: Scene {
content: Circle {
centerX: 50, centerY: 50, radius: 50
fill: Color.RED
onMousePressed: function(e:MouseEvent): Void {
println("Click!");
}
}
}
}

17. Stage {
scene: Scene {
content: Circle {
centerX: 50, centerY: 50, radius: 50
fill: Color.RED
onMousePressed: function(e) {
println("Click!");
}
} • onMousePressed
}
}
•

18. def printFunc = function(e:MouseEvent): Void {
println("Click!");
}
Stage {
scene: Scene {
content: Circle {
centerX: 50, centerY: 50, radius: 50
fill: Color.RED
onMousePressed: printFunc
}
}
}
•

19. function printFunc(e:MouseEvent): Void {
println("Click!");
}
Stage {
scene: Scene {
content: Circle {
centerX: 50, centerY: 50, radius: 50
fill: Color.RED
onMousePressed: printFunc
}
}
}
•

20. Bind

21. String.format
var x = 10;
println(“x= {x}”); // x = 10
println(“x= {x*2}”); // x = 20
println(“x= {func(x)}”);
println(“x= {%d04 x}”); // 0010

22. Bind
var x = 10;
var x0 = bind x;
var x1 = bind x + 2;
x = 20;
println(“{x},{x0},{x1}”);

23. Ex03_Bind.fx
var count = 0;
Stage {
scene: Scene {
content: Flow {
content: [
Label { text: bind "count: {count}" }
Button {
text: "Up"
action: function() { count++; }
}
]
}
}
}

24. Flow
var count = 0;
Stage {
scene: Scene {
content: Flow {
content: [
Label { text: bind "count: {count}" }
Button {
text: "Up"
action: function() { count++; }
}
]
} •
}
}

25. Ex03_Bind.fx
var count = 0; • count:Integer
Stage {
scene: Scene {
content: Flow {
content: [
Label { text: bind "count: {count}" }
Button {
text: "Up"
action: function() { count++; }
}
}
]
•
Button
} •
Label text count bind
}

26. Ex04_InputButton.fx
var textBox: TextBox;
Stage {
scene: Scene {
content: Flow {
content: [
textBox = TextBox {}
Button {
text: "Submit"
disable: bind textBox.rawText.length() == 0
}
]
}
}
}

27. Ex04_InputButton.fx
var textBox: TextBox; • Object
Stage {
scene: Scene {
content: Flow {
content: [
textBox = TextBox {}
Button {
text: "Submit"
• disable: bind textBox.rawText.length() == 0
}
• ]
• }
}
}

28. Ex04_InputButton.fx
var textBox: TextBox;
Stage {
scene: Scene {
content: Flow {
content: [
textBox = TextBox {}
Button {
text: "Submit"
disable: bind textBox.rawText.length() == 0
}
] • bind
}
}
}

29. Animation

30. Duration
ms, s, m, h
var x = 10ms; // 10s, 1m, 2h...
var x2 = x * 200; // 2,000ms = 2s
var x3 = x2 / 2; // 1s
if (x2 < x3) ....

31. Timeline
0s
stop > play > stop

32. KeyFrame
Timeline
0s, 10s, 20s...
x=10, x=30, x=100...

33. Tween
x KeyFrame
100
Easein
Liner
30
Easeout
0
0s 10s 20s 10s 1

34. Ex05_Timeline.fx
var x = 0.0;
var ball: Circle;
Stage {
title : "Ex05_Timeline"
scene: Scene {
width: 200
height: 200
content: ball = Circle {
layoutX: bind x, layoutY: bind 0.005 * x * x
radius: 5, fill: Color.BLUE
}
}
}

35. Ex05_Timeline.fx
Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [
KeyFrame {
time: 0s
values: [x => 0]
}
KeyFrame {
time: 10s
values: [x => 200 tween Interpolator.LINEAR]
}
]
}.play();

36. Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [
•
KeyFrame {
time: 0s
values: [x => 0]
}
KeyFrame {
time: 10s
values: [x => 200 tween Interpolator.LINEAR]
}
]
}.play();

37. KeyFrame
Timeline { •
repeatCount: Timeline.INDEFINITE
keyFrames: [
•time
KeyFrame { • KeyFrame
time: 0s
values: [x => 0]
}
KeyFrame {
time: 10s
values: [x => 200 tween Interpolator.LINEAR]
}
]
}.play();

38. Tween
Timeline {
•KeyFrame
repeatCount: Timeline.INDEFINITE
keyFrames: [ •x Linier
KeyFrame {
time: 0s
values: [x => 0]
}
KeyFrame {
time: 10s
values: [x => 200 tween Interpolator.LINEAR]
}
]
}.play();

39. play
Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [
KeyFrame {
•
time: 0s
values: [x => 0]
} • orz
KeyFrame {
time: 10s
values: [x => 200 tween Interpolator.LINEAR]
}
]
}.play();

40. OK
var timeline = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [
KeyFrame {
•
time: 0s play
values: [x => 0]
}
• Timeline
KeyFrame {
time: 10s
values: [x => 200 tween Interpolator.LINEAR]
}
]
};
timeline.play();

41. at
Timeline { •KeyFrame
repeatCount: Timeline.INDEFINITE
keyFrames: [
at(0s { x=> 0})
at(10s { x=> 200 tween Interpolator.LINEAR})
]
}.play();

42. action
Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [
KeyFrame {
time: 0s
values: [x => 0]
}
KeyFrame {
time: 10s
values: [x => 200 tween Interpolator.LINEAR]
action: function() { println(“end”); }
}
] •
}.play();
•at

43. Next...
if
for
Group
Effect

44. Thank you!