Raphael Marques

Mestrando em Informática da UFPB

jose.raphael.marques@gmail.com
raphaelmarques.wordpress.com
 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
5
 Uma família de tecnologias
 JavaFX Runtime
 JavaFX Script
 JavaFX Tools

 Para quem?
 Designers
 Desenvolvedores

6
7
8
9
10
JavaScript HTML 5

11
13
14
15
16
17
18
 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
 Tipos de dados básicos (não podem ser null)
 Integer
 Number
 Boolean
 Duration

 String
 Sequence
 Function
22
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
TIPAGEM ESTÁTICA
VS
TIPAGEM DINÂMICA
24
println("raphael marques");
//raphael marques

println('raphael marques');
//raphael marques

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

println('raphael "marques"');
//raphael "marques"
25
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
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
 Integer e Number:  Boolean:
+  and
-  or
*  not
/
 mod

28
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
def PI = 3.1416;
function calcArea(raio: Number): Number{
return PI * raio * raio;
}
var raio = 5;
var area = calcArea(raio);

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

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

33
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
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
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
 JavaFX
 http://javafx.com/

 JavaFX Developer Home

 http://java.sun.com/javafx/

 JavaFX Programing (with Passion!)

 http://www.javapassion.com/javafx/

38
 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
41
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
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
var x = 10;
var y = 20;
var rect1 = Rectangle{
x: bind x;
y: bind y;
};
var rect2 = bind Rectangle{
x: x;
y: y;
};
44
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
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
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
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
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
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
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
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
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
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
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
Stage{
title: "Declarar eh facil!"
width: 250
height: 250
}

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

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

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

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

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

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

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

64
...
content: [
Circle{
...
}
Rectangle{
...
}
]
...
65
...
content: [
Circle{
...
}
Rectangle{
...
opacity: 0.6
}
]
...
66
...
Rectangle{
...
transforms: Rotate{
pivotX: 125 pivotY: 125
angle: 15
}
}
...

67
...
Rectangle{
...
rotate: 15
}
...

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

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

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

72
73
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
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
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
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
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
80