Mini-curso JavaFX Aula1

  • View
    7.403

  • Download
    3

Embed Size (px)

DESCRIPTION

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

Text of Mini-curso JavaFX Aula1

  • 1. Raphael MarquesMestrando em Informtica da UFPB jose.raphael.marques@gmail.com raphaelmarques.wordpress.com

2. JavaFX a melhor forma para criar contedo rico expressivo. Baseado na Plataforma Java, JavaFX oferece uma atraente combinao de onipresena, capacidade, expressividade e performance.3 3. 4 4. 5 5. Uma famlia de tecnologias JavaFX Runtime JavaFX Script JavaFX Tools Para quem? Designers Desenvolvedores6 6. 7 7. 8 8. 9 9. 10 10. JavaScript HTML 5 11 11. 13 12. 14 13. 15 14. 16 15. 17 16. 18 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 Java20 18. Tipos de dados bsicos (no podem ser null) Integer Number Boolean Duration String Sequence Function 22 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. TIPAGEM ESTTICAVS TIPAGEM DINMICA24 21. println("raphael marques"); //raphael marquesprintln('raphael marques'); //raphael marquesprintln("raphael 'marques'"); //raphael 'marques'println('raphael "marques"'); //raphael "marques" 25 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. 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. Integer e Number: Boolean: + and - or * not / mod 28 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.0ms29 26. 30 27. def PI = 3.1416; function calcArea(raio: Number): Number{ return PI * raio * raio; } var raio = 5; var area = calcArea(raio);31 28. def PI = 3.1416; function calcArea(raio: Number) { return PI * raio * raio; } var raio = 5; var area = calcArea(raio); 32 29. def PI = 3.1416; function calcArea(raio: Number) { PI * raio * raio; } var raio = 5; var area = calcArea(raio); 33 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. 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. 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. JavaFX http://javafx.com/ JavaFX Developer Home http://java.sun.com/javafx/ JavaFX Programing (with Passion!) http://www.javapassion.com/javafx/ 38 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. 40 36. 41 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. var a = 1; var b = bind a with inverse;println("{a} {b}"); //1 1a = 2; println("{a} {b}"); //2 2b = 3; println("{a} {b}"); //3 3 43 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. var x = 10; var y = 20; var lado = 100; lado y var rect = Rectangle{ x: bind xlado y: bind y width: bind lado height: bind lado } x45 41. var x = 10; lado/2var y = 20; var lado = 100; ylado var rect = Rectangle{ x: bind x lado/2 y: bind y lado/2 width: bind lado height: bind lado }x 46 42. var x = 10; var y = 20; lado/2 var lado = 50; ylado var rect = Rectangle{ x: bind x lado/2 y: bind y lado/2 width: bind lado height: bind lado } x 47 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. 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. 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. 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. 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. 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. 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. 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. Stage{ title: "Declarar eh facil!" width: 250 height: 250 } 57 52. Stage{ title: "Declarar eh facil!" scene: Scene{ width: 250 height: 250 } } 58 53. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 59 54. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 60 55. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 61 56. Stage{ ... scene: Scene{ ... content: [ Rectangle{ x: 45 y: 45 width: 160 height: 160 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] } } 62 57. ... content: [ Rectangle{ ... } Circle{ centerX: 125 centerY: 125 radius: 90 fill: Color.WHITE stroke: Color.RED } ] ...63 58. ... content: [ Rectangle{ ... } Circle{ centerX: 125 centerY: 125 radius: 90 fill: Color.WHITE stroke: Color.RED } ] ...64 59. ... content: [ Circle{ ... } Rectangle{ ... } ] ...65 60. ... content: [ Circle{ ... } Rectangle{ ... opacity: 0.6 } ] ...66 61. ... Rectangle{ ... transforms: Rotate{ pivotX: 125 pivotY: 125 angle: 15 } } ... 67 62. ... Rectangle{... rotate: 15 } ...68 63. ... Rectangle{ ... effect: Lighting{ surfaceScale: 5 } } ...69 64. ImageView{ image: Image{url: "{__DIR__}imagem.png" } rotate: 15 scaleX: 2 } 70 65. 71 66. ... Group{ translateX: 15 Group translateY: 15 content: [Text{...}TranslateCircle{...} ] } ...Text Circle72 67. 73 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. 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. 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. 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. 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. 79 74. 80