JavaFX Tutorial
    Shuji Watanabe
About Me
Shuji Watanabe
Sapporo, Japan
Twitter: shuji_w6e
http://www.deathmarch.jp/
http://trac.deathmarch.jp/sunflower/
ht...
Agenda

Stage / Scene
Event
Bind
Animation
Stage / Scene
Stage

JavaFX



 Applet
Scene


 Scene
Node

Scene

               Node
Ex01_HelloFX.fx
Stage {
    title : "Ex01_HelloFX"
    scene: Scene {
        width: 200, height: 200
        content: [
 ...
Stage {
    title : "Ex01_HelloFX"
    scene: Scene {
       •new
        width: 200, height: 200
        content: [
     ...
Stage {
    title : "Ex01_HelloFX"
    scene: Scene {
        width: 200, height: 200
    •   content: [
            Recta...
Stage {
•   title : "Ex01_HelloFX"
•       []
    scene: Scene {
        width: 200, height: 200
        content: [
      ...
Event
Variables
     var
var msg:String = “Hello World”;




var msg = “Hello World”;


                           def
def HELLO...
Function
function <          >(       ): <        > {}



function showMessage(msg: String):Void {
    println(msg);
}
var...
onMouseXxx

javafx.scene.Node

funtction
Ex02_MousePressed.fx
Stage {
    scene: Scene {
        content: Circle {
            centerX: 50, centerY: 50, radius: 50...
Stage {
    scene: Scene {
        content: Circle {
            centerX: 50, centerY: 50, radius: 50
            fill: Co...
def printFunc = function(e:MouseEvent): Void {
    println("Click!");
}
Stage {
    scene: Scene {
        content: Circle...
function printFunc(e:MouseEvent): Void {
    println("Click!");
}
Stage {
    scene: Scene {
        content: Circle {
   ...
Bind
String.format


var x = 10;
println(“x=   {x}”); // x = 10
println(“x=   {x*2}”); // x = 20
println(“x=   {func(x)}”);
pri...
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: [
                Labe...
Flow
var count = 0;
Stage {
    scene: Scene {
        content: Flow {
            content: [
                Label { text...
Ex03_Bind.fx
var count = 0;  •      count:Integer
Stage {
    scene: Scene {
        content: Flow {
            content: ...
Ex04_InputButton.fx
var textBox: TextBox;
Stage {
    scene: Scene {
        content: Flow {
            content: [
      ...
Ex04_InputButton.fx
var textBox: TextBox;   •                   Object
Stage {
    scene: Scene {
        content: Flow {
...
Ex04_InputButton.fx
var textBox: TextBox;
Stage {
    scene: Scene {
        content: Flow {
            content: [
      ...
Animation
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 < ...
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     ...
Ex05_Timeline.fx
var x = 0.0;
var ball: Circle;
Stage {
    title : "Ex05_Timeline"
    scene: Scene {
        width: 200
...
Ex05_Timeline.fx
Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
           time: 0s
 ...
Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
                •
        KeyFrame {
           time: 0s
...
KeyFrame
Timeline {              •
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
                        •time
   ...
Tween
Timeline {
                        •KeyFrame
    repeatCount: Timeline.INDEFINITE
    keyFrames: [        •x Linier
...
play
Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {

              •
           time:...
OK
 var timeline = Timeline {
     repeatCount: Timeline.INDEFINITE
     keyFrames: [
         KeyFrame {
               •...
at
Timeline {              •KeyFrame
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        at(0s { x=> 0})
       ...
action
Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
           time: 0s
           ...
Next...

if
for
Group
Effect
Thank you!
Upcoming SlideShare
Loading in …5
×

Java Fx Tutorial01

2,062 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,062
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Java Fx Tutorial01

    1. 1. JavaFX Tutorial Shuji Watanabe
    2. 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. 3. Agenda Stage / Scene Event Bind Animation
    4. 4. Stage / Scene
    5. 5. Stage JavaFX Applet
    6. 6. Scene Scene
    7. 7. Node Scene Node
    8. 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. 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. 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. 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. 12. Event
    13. 13. Variables var var msg:String = “Hello World”; var msg = “Hello World”; def def HELLO = “Hello World”;
    14. 14. Function function < >( ): < > {} function showMessage(msg: String):Void { println(msg); } var showMsg = function(msg: String):Void { println(msg); }
    15. 15. onMouseXxx javafx.scene.Node funtction
    16. 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. 17. Stage { scene: Scene { content: Circle { centerX: 50, centerY: 50, radius: 50 fill: Color.RED onMousePressed: function(e) { println("Click!"); } } • onMousePressed } } •
    18. 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. 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. 20. Bind
    21. 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. 22. Bind var x = 10; var x0 = bind x; var x1 = bind x + 2; x = 20; println(“{x},{x0},{x1}”);
    23. 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. 24. Flow var count = 0; Stage { scene: Scene { content: Flow { content: [ Label { text: bind "count: {count}" } Button { text: "Up" action: function() { count++; } } ] } • } }
    25. 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. 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. 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. 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. 29. Animation
    30. 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. 31. Timeline 0s stop > play > stop
    32. 32. KeyFrame Timeline 0s, 10s, 20s... x=10, x=30, x=100...
    33. 33. Tween x KeyFrame 100 Easein Liner 30 Easeout 0 0s 10s 20s 10s 1
    34. 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. 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. 36. Timeline { repeatCount: Timeline.INDEFINITE keyFrames: [ • KeyFrame { time: 0s values: [x => 0] } KeyFrame { time: 10s values: [x => 200 tween Interpolator.LINEAR] } ] }.play();
    37. 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. 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. 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. 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. 41. at Timeline { •KeyFrame repeatCount: Timeline.INDEFINITE keyFrames: [ at(0s { x=> 0}) at(10s { x=> 200 tween Interpolator.LINEAR}) ] }.play();
    42. 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. 43. Next... if for Group Effect
    44. 44. Thank you!

    ×