Java Fx Tutorial01

JavaFX Tutorial
Shuji Watanabe

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

Agenda

Stage / Scene
Event
Bind
Animation

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

Stage {
scene: Scene {
•new
content: [
• Rectangle {
{}
}// Rectagle
]
}// Scene
}// Stage

Stage {
scene: Scene {
• content: [
Rectangle {
• < >: < > 50, layoutY: 50
layoutX:
• fill: Color.GREENYELLOW
}// Rectagle
]
}// Scene
}// Stage

Stage {
• title : "Ex01_HelloFX"
• []
scene: Scene {
content: [
Rectangle {
}// Rectagle
]
}// Scene
}// Stage

Variables
var
var msg:String = “Hello World”;

var msg = “Hello World”;

def
def HELLO = “Hello World”;

Function
function < >( ): < > {}

function showMessage(msg: String):Void {
println(msg);
}
var showMsg = function(msg: String):Void {
println(msg);
}

onMouseXxx

javafx.scene.Node

funtction

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

Stage {
scene: Scene {
content: Circle {
fill: Color.RED
onMousePressed: function(e) {
println("Click!");
}
} • onMousePressed
}
}
•

def printFunc = function(e:MouseEvent): Void {
println("Click!");
}
Stage {
scene: Scene {
content: Circle {
fill: Color.RED
onMousePressed: printFunc
}

}
}
•

function printFunc(e:MouseEvent): Void {
println("Click!");
}
Stage {
scene: Scene {
content: Circle {
fill: Color.RED
onMousePressed: printFunc
}

}
}
•

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

Bind

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

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

Flow
var count = 0;
Stage {
scene: Scene {
content: Flow {
content: [
Button {
text: "Up"
}
]
} •
}
}

Ex03_Bind.fx
var count = 0; • count:Integer
Stage {
scene: Scene {
content: Flow {
content: [
Button {
text: "Up"
}

}
]
•
Button
} •
Label text count bind
}

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

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

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

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) ....

Timeline

0s

stop > play > stop

KeyFrame

Timeline

0s, 10s, 20s...
x=10, x=30, x=100...

Tween
x KeyFrame
100
Easein
Liner

30
Easeout
0
0s 10s 20s 10s 1

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
}
}
}

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

Timeline {
keyFrames: [
•
KeyFrame {
time: 0s
values: [x => 0]
}
KeyFrame {
time: 10s
}
]
}.play();

KeyFrame
Timeline { •
keyFrames: [
•time
KeyFrame { • KeyFrame
time: 0s
values: [x => 0]
}
KeyFrame {
time: 10s
}
]
}.play();

Tween
Timeline {
•KeyFrame
keyFrames: [ •x Linier
KeyFrame {
time: 0s
values: [x => 0]
}
KeyFrame {
time: 10s
}
]
}.play();

play
Timeline {
keyFrames: [
KeyFrame {

•
time: 0s
values: [x => 0]
} • orz
KeyFrame {
time: 10s
}
]
}.play();

OK
var timeline = Timeline {
keyFrames: [
KeyFrame {
•
time: 0s play
values: [x => 0]
}
• Timeline
KeyFrame {
time: 10s
}
]
};
timeline.play();

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

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

Java Fx Tutorial01

More Related Content

What's hot

Similar to Java Fx Tutorial01

More from Shuji Watanabe

Recently uploaded

Java Fx Tutorial01