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

1. Raphael Marques
Mestrando em Informática da UFPB
jose.raphael.marques@gmail.com
raphaelmarques.wordpress.com

3.  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

4. 4

5. 5

6.  Uma família de tecnologias
 JavaFX Runtime
 JavaFX Script
 JavaFX Tools
 Para quem?
 Designers
 Desenvolvedores
6

7. 7

8. 8

9. 9

10. 10

11. JavaScript HTML 5
11

13. 13

14. 14

15. 15

16. 16

17. 17

18. 18

20.  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

22.  Tipos de dados básicos (não podem ser null)
 Integer
 Number
 Boolean
 Duration
 String
 Sequence
 Function
22

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

24. TIPAGEM ESTÁTICA
VS
TIPAGEM DINÂMICA
24

25. println("raphael marques");
//raphael marques
println('raphael marques');
//raphael marques
println("raphael 'marques'");
//raphael 'marques'
println('raphael "marques"');
//raphael "marques"
25

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

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

28.  Integer e Number:  Boolean:
+  and
-  or
*  not
/
 mod
28

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

30. 30

31. def PI = 3.1416;
function calcArea(raio: Number): Number{
return PI * raio * raio;
}
var raio = 5;
var area = calcArea(raio);
31

32. def PI = 3.1416;
function calcArea(raio: Number) {
return PI * raio * raio;
}
var raio = 5;
var area = calcArea(raio);
32

33. def PI = 3.1416;
function calcArea(raio: Number) {
PI * raio * raio;
}
var raio = 5;
var area = calcArea(raio);
33

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

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

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

38.  JavaFX
 http://javafx.com/
 JavaFX Developer Home
 http://java.sun.com/javafx/
 JavaFX Programing (with Passion!)
 http://www.javapassion.com/javafx/
38

39.  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

40. 40

41. 41

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

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

44. var x = 10;
var y = 20;
var rect1 = Rectangle{
x: bind x;
y: bind y;
};
var rect2 = bind Rectangle{
x: x;
y: y;
};
44

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

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

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

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

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

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

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

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

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

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

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

57. Stage{
title: "Declarar eh facil!"
width: 250
height: 250
}
57

58. Stage{
title: "Declarar eh facil!"
scene: Scene{
width: 250
height: 250
}
}
58

59. Stage{
...
scene: Scene{
...
content: [
Rectangle{
x: 45 y: 45
width: 160 height: 160
arcWidth: 15 arcHeight: 15
fill: Color.GREEN
}
]
}
}
59

60. Stage{
...
scene: Scene{
...
content: [
Rectangle{
x: 45 y: 45
width: 160 height: 160
arcWidth: 15 arcHeight: 15
fill: Color.GREEN
}
]
}
}
60

61. Stage{
...
scene: Scene{
...
content: [
Rectangle{
x: 45 y: 45
width: 160 height: 160
arcWidth: 15 arcHeight: 15
fill: Color.GREEN
}
]
}
}
61

62. Stage{
...
scene: Scene{
...
content: [
Rectangle{
x: 45 y: 45
width: 160 height: 160
arcWidth: 15 arcHeight: 15
fill: Color.GREEN
}
]
}
}
62

63. ...
content: [
Rectangle{
...
}
Circle{
centerX: 125 centerY: 125
radius: 90
fill: Color.WHITE
stroke: Color.RED
}
]
...
63

64. ...
content: [
Rectangle{
...
}
Circle{
centerX: 125 centerY: 125
radius: 90
fill: Color.WHITE
stroke: Color.RED
}
]
...
64

65. ...
content: [
Circle{
...
}
Rectangle{
...
}
]
...
65

66. ...
content: [
Circle{
...
}
Rectangle{
...
opacity: 0.6
}
]
...
66

67. ...
Rectangle{
...
transforms: Rotate{
pivotX: 125 pivotY: 125
angle: 15
}
}
...
67

68. ...
Rectangle{
...
rotate: 15
}
...
68

69. ...
Rectangle{
...
effect: Lighting{
surfaceScale: 5
}
}
...
69

70. ImageView{
image: Image{
url: "{__DIR__}imagem.png"
}
rotate: 15
scaleX: 2
}
70

71. 71

72. ...
Group{
translateX: 15 Group
translateY: 15
content: [
Text{
...
} Translate
Circle{
...
}
]
}
... Text Circle
72

73. 73

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

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

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

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

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

79. 79

80. 80