This document provides an overview of JavaFX and its capabilities for creating rich user interfaces. It discusses that JavaFX offers developers an attractive combination of cross-platform support, powerful features, and high performance. JavaFX allows creating interfaces for desktop, browser, and mobile applications using the same codebase and tools.

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