Java Fx Tutorial01

  • 1,756 views
Uploaded on

JavaFX tutorial. …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,756
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
37
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!