View
7.411
Download
3
Category
Preview:
DESCRIPTION
Slides da 1a aula do mini-curso de JavaFX minsitrado na UFPB
Citation preview
Raphael Marques
Mestrando em Informática da UFPBjose.raphael.marques@gmail.comraphaelmarques.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
11
JavaScript HTML 5
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ÁTICAVS
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 y = 3.0;
var z: Integer;
var w = x + y;
var a = false;
var b = x < y;
var x : Integer = 3;
var y : Number = 3.0;
var z: Integer = 0;
var w: Number = x + y;
var a : Boolean = false;
var b : Boolean = x < y;
27
Integer e Number:
+
-
*
/
mod
Boolean:
and
or
not
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.0msprintln(1s / 500ms); //2.0println(1s*2); //2000.0msprintln(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()); //1println(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;
var rect = Rectangle{x: bind xy: bind ywidth: bind ladoheight: bind lado
}
45
y
x
lado
lado
var x = 10;var y = 20;var lado = 100;
var rect = Rectangle{x: bind x – lado/2y: bind y – lado/2width: bind ladoheight: bind lado
}
46
y
x
lado/2
lado
var x = 10;var y = 20;var lado = 50;
var rect = Rectangle{x: bind x – lado/2y: bind y – lado/2width: bind ladoheight: bind lado
}
47
y
x
lado/2
lado
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
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);
}
}
52
Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {
content: Text {content: "Hello World!"x: 10 y: 30font : Font {
size : 24}
}}
}
53
Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {
content: Text {content: "Hello World!"x: 10 y: 30font : Font {
size : 24}
}}
}
54
Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {
content: Text {content: "Hello World!"x: 10 y: 30font : Font {
size : 24}
}}
}
55
Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {
content: Text {content: "Hello World!"x: 10 y: 30font : Font {
size : 24}
}}
}
56
Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {
content: Text {content: "Hello World!"x: 10 y: 30font : Font {
size : 24}
}}
}
57
Stage{
title: "Declarar eh facil!"
width: 250
height: 250
}
58
Stage{
title: "Declarar eh facil!"
scene: Scene{
width: 250
height: 250
}
}
59
Stage{...scene: Scene{
...content: [
Rectangle{x: 45 y: 45width: 160 height: 160arcWidth: 15 arcHeight: 15fill: Color.GREEN
}]
}}
60
Stage{...scene: Scene{
...content: [
Rectangle{x: 45 y: 45width: 160 height: 160arcWidth: 15 arcHeight: 15fill: Color.GREEN
}]
}}
61
Stage{...scene: Scene{
...content: [
Rectangle{x: 45 y: 45width: 160 height: 160arcWidth: 15 arcHeight: 15fill: Color.GREEN
}]
}}
62
Stage{...scene: Scene{
...content: [
Rectangle{x: 45 y: 45width: 160 height: 160arcWidth: 15 arcHeight: 15fill: Color.GREEN
}]
}}
63
...content: [
Rectangle{...
}Circle{
centerX: 125 centerY: 125radius: 90fill: Color.WHITEstroke: Color.RED
}]...
64
...content: [
Rectangle{...
}Circle{
centerX: 125 centerY: 125radius: 90fill: Color.WHITEstroke: Color.RED
}]...
65
...
content: [
Circle{
...
}
Rectangle{
...
}
]
...
66
...content: [
Circle{...
}Rectangle{
...opacity: 0.6
}]...
67
...
Rectangle{
...
transforms: Rotate{
pivotX: 125 pivotY: 125
angle: 15
}
}
...
68
...
Rectangle{
...
rotate: 15
}
...
69
...
Rectangle{
...
effect: Lighting{
surfaceScale: 5
}
}
...
ImageView{
image: Image{
url: "{__DIR__}imagem.png"
}
rotate: 15
scaleX: 2
}
70
71
...Group{
translateX: 15translateY: 15content: [
Text{...
}Circle{
...}
]}...
72
Group
Translate
CircleText
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;
}
}
...
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
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;
}
}
...
79
80
Recommended