Mini-curso JavaFX Aula1

8,736 views

Published on

Slides da 1a aula do mini-curso de JavaFX minsitrado na UFPB

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
8,736
On SlideShare
0
From Embeds
0
Number of Embeds
2,294
Actions
Shares
0
Downloads
452
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Mini-curso JavaFX Aula1

  1. 1. Raphael Marques Mestrando em Informática da UFPB jose.raphael.marques@gmail.com raphaelmarques.wordpress.com
  2. 2.  JavaFX é a melhor forma para criar conteúdo rico expressivo. Baseado na Plataforma Java, JavaFX oferece uma atraente combinação de onipresença, capacidade, expressividade e performance. 3
  3. 3. 4
  4. 4. 5
  5. 5.  Uma família de tecnologias  JavaFX Runtime  JavaFX Script  JavaFX Tools  Para quem?  Designers  Desenvolvedores 6
  6. 6. 7
  7. 7. 8
  8. 8. 9
  9. 9. 10
  10. 10. JavaScript HTML 5 11
  11. 11. 13
  12. 12. 14
  13. 13. 15
  14. 14. 16
  15. 15. 17
  16. 16. 18
  17. 17.  Uma única plataforma RIA para todas as telas  Mercado de amplo alcance  Fluxo de trabalho designer-desenvolvedor  Runtime poderoso  Liberdade do browser  Compatibilidade com tecnologias Java 20
  18. 18.  Tipos de dados básicos (não podem ser null)  Integer  Number  Boolean  Duration  String  Sequence  Function 22
  19. 19. var string1 = "raphael"; var string2 : String = "raphael"; var integer1 = 3; var integer2 : Integer = 3; var number1 = 3.0; var number2 : Number = 3; var number3 = 3 as Number; var number4 = integer1 + number1; 23
  20. 20. TIPAGEM ESTÁTICA VS TIPAGEM DINÂMICA 24
  21. 21. println("raphael marques"); //raphael marques println('raphael marques'); //raphael marques println("raphael 'marques'"); //raphael 'marques' println('raphael "marques"'); //raphael "marques" 25
  22. 22. var s1 = "raphael"; var s2 = "marques"; println("{s1} {s2}"); //raphael marques "o valor de x eh: {x}" "o valor de x eh: {objeto.getX()}" 26
  23. 23. var x = 3; var x : Integer = 3; var y = 3.0; var y : Number = 3.0; var z: Integer; var z: Integer = 0; var w = x + y; var w: Number = x + y; var a = false; var a : Boolean = false; var b = x < y; var b : Boolean = x < y; 27
  24. 24.  Integer e Number:  Boolean: +  and -  or *  not /  mod 28
  25. 25. var t1 : Duration = 1ms; var t2 = 1s; var t3 = 1m; var t4 = 1h; println("{t1} {t2} {t3} {t4}"); //1ms 500ms 60000ms 3600000ms println(1s + 500ms); //1500.0ms println(1s / 500ms); //2.0 println(1s*2); //2000.0ms println(1s/2); //500.0ms 29
  26. 26. 30
  27. 27. def PI = 3.1416; function calcArea(raio: Number): Number{ return PI * raio * raio; } var raio = 5; var area = calcArea(raio); 31
  28. 28. def PI = 3.1416; function calcArea(raio: Number) { return PI * raio * raio; } var raio = 5; var area = calcArea(raio); 32
  29. 29. def PI = 3.1416; function calcArea(raio: Number) { PI * raio * raio; } var raio = 5; var area = calcArea(raio); 33
  30. 30. def PI = 3.1416; var calcArea = function (raio: Number){ PI * raio * raio; }; var calcPerimetro = function(raio: Number){ 2 * PI * raio; }; var calc = calcArea; println(calc(5)); calc = calcPerimetro; println(calc(5)); 34
  31. 31. def PI = 3.1416; var calcArea = function (raio: Number){ PI * raio * raio; }; var calcPerimetro = function(raio: Number){ 2 * PI * raio; }; var calc: function (Number): Number = calcArea; println(calc(5)); calc = calcPerimetro; println(calc(5)); 35
  32. 32. class A{ var x = 0; function getx(){ x; } } var a = A{x:1}; var b = A{x:2}; var f = a.getx; var g = b.getx; println(f()); //1 println(g()); //2 36
  33. 33.  JavaFX  http://javafx.com/  JavaFX Developer Home  http://java.sun.com/javafx/  JavaFX Programing (with Passion!)  http://www.javapassion.com/javafx/ 38
  34. 34.  Windows, Linux, Mac OS X e Solaris x86  JavaFX 1.2 SDK  Netbeans IDE 6.5.1 para JavaFX 1.2  JavaFX 1.2 Production Suite  Plugin para Adobe Illustrator e Adobe Photoshop  Media Factory ▪ JavaFX Graphics Viewer e SVG Converter 39
  35. 35. 40
  36. 36. 41
  37. 37. var x = 1; var y = bind x; var z = bind y * 2; println("{x} {y} {z}"); //1 1 2 x = 2; println("{x} {y} {z}"); //2 2 4 42
  38. 38. var a = 1; var b = bind a with inverse; println("{a} {b}"); //1 1 a = 2; println("{a} {b}"); //2 2 b = 3; println("{a} {b}"); //3 3 43
  39. 39. var x = 10; var y = 20; var rect1 = Rectangle{ x: bind x; y: bind y; }; var rect2 = bind Rectangle{ x: x; y: y; }; 44
  40. 40. var x = 10; var y = 20; var lado = 100; lado y var rect = Rectangle{ x: bind x lado y: bind y width: bind lado height: bind lado } x 45
  41. 41. var x = 10; lado/2 var y = 20; var lado = 100; y lado var rect = Rectangle{ x: bind x – lado/2 y: bind y – lado/2 width: bind lado height: bind lado } x 46
  42. 42. var x = 10; var y = 20; lado/2 var lado = 50; y lado var rect = Rectangle{ x: bind x – lado/2 y: bind y – lado/2 width: bind lado height: bind lado } x 47
  43. 43. def PI = 3.1416; var raio = 5; bound function calcArea(){ PI * raio * raio; } var area = bind calcArea(); println(area); // 78.53999 raio = 10; println(area); // 314.15997 48
  44. 44. var a = 1 on replace old{ println("changing"); println("old: {old}"); println("new: {a}"); }; a = 3; //changing //old: 0 //new: 1 //changing //old: 1 //new: 3 49
  45. 45. public class HelloWorldSwing{ public static void main(String[] args){ JFrame frame = new JFrame("HelloWorld Swing"); JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); } } 51
  46. 46. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 52
  47. 47. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 53
  48. 48. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 54
  49. 49. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 55
  50. 50. Stage { title: "Hello World em JavaFX" width: 250 height: 80 scene: Scene { content: Text { content: "Hello World!" x: 10 y: 30 font : Font { size : 24 } } } } 56
  51. 51. Stage{ title: "Declarar eh facil!" width: 250 height: 250 } 57
  52. 52. Stage{ title: "Declarar eh facil!" scene: Scene{ width: 250 height: 250 } } 58
  53. 53. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 59
  54. 54. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 60
  55. 55. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 61
  56. 56. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 62
  57. 57. ... content: [ Rectangle{ ... } Circle{ centerX: 125 centerY: 125 radius: 90 fill: Color.WHITE stroke: Color.RED } ] ... 63
  58. 58. ... content: [ Rectangle{ ... } Circle{ centerX: 125 centerY: 125 radius: 90 fill: Color.WHITE stroke: Color.RED } ] ... 64
  59. 59. ... content: [ Circle{ ... } Rectangle{ ... } ] ... 65
  60. 60. ... content: [ Circle{ ... } Rectangle{ ... opacity: 0.6 } ] ... 66
  61. 61. ... Rectangle{ ... transforms: Rotate{ pivotX: 125 pivotY: 125 angle: 15 } } ... 67
  62. 62. ... Rectangle{ ... rotate: 15 } ... 68
  63. 63. ... Rectangle{ ... effect: Lighting{ surfaceScale: 5 } } ... 69
  64. 64. ImageView{ image: Image{ url: "{__DIR__}imagem.png" } rotate: 15 scaleX: 2 } 70
  65. 65. 71
  66. 66. ... Group{ translateX: 15 Group translateY: 15 content: [ Text{ ... } Translate Circle{ ... } ] } ... Text Circle 72
  67. 67. 73
  68. 68. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 74
  69. 69. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 75
  70. 70. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 76
  71. 71. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 77
  72. 72. var x: Number; var px: Number; var y: Number; var py: Number; ... Rectangle{ x: bind x y: bind y ... onMousePressed: function(e: MouseEvent){ px = x; py = y; } onMouseDragged: function(e: MouseEvent){ x = px + e.dragX; y = px + e.dragY; } } ... 78
  73. 73. 79
  74. 74. 80

×