Download pdf - Mini-curso JavaFX Aula1

Transcript
Page 1: Mini-curso JavaFX Aula1

Raphael Marques

Mestrando em Informática da [email protected]

Page 2: Mini-curso JavaFX Aula1
Page 3: Mini-curso JavaFX Aula1

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

Page 4: Mini-curso JavaFX Aula1

4

Page 5: Mini-curso JavaFX Aula1

5

Page 6: Mini-curso JavaFX Aula1

Uma família de tecnologias

JavaFX Runtime

JavaFX Script

JavaFX Tools

Para quem?

Designers

Desenvolvedores

6

Page 7: Mini-curso JavaFX Aula1

7

Page 8: Mini-curso JavaFX Aula1

8

Page 9: Mini-curso JavaFX Aula1

9

Page 10: Mini-curso JavaFX Aula1

10

Page 11: Mini-curso JavaFX Aula1

11

JavaScript HTML 5

Page 12: Mini-curso JavaFX Aula1
Page 13: Mini-curso JavaFX Aula1

13

Page 14: Mini-curso JavaFX Aula1

14

Page 15: Mini-curso JavaFX Aula1

15

Page 16: Mini-curso JavaFX Aula1

16

Page 17: Mini-curso JavaFX Aula1

17

Page 18: Mini-curso JavaFX Aula1

18

Page 19: Mini-curso JavaFX Aula1
Page 20: Mini-curso JavaFX Aula1

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

Page 21: Mini-curso JavaFX Aula1
Page 22: Mini-curso JavaFX Aula1

Tipos de dados básicos (não podem ser null) Integer

Number

Boolean

Duration

String

Sequence

Function

22

Page 23: Mini-curso JavaFX Aula1

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

Page 24: Mini-curso JavaFX Aula1

TIPAGEM ESTÁTICAVS

TIPAGEM DINÂMICA

24

Page 25: Mini-curso JavaFX Aula1

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

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

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

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

25

Page 26: Mini-curso JavaFX Aula1

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

Page 27: Mini-curso JavaFX Aula1

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

Page 28: Mini-curso JavaFX Aula1

Integer e Number:

+

-

*

/

mod

Boolean:

and

or

not

28

Page 29: Mini-curso JavaFX Aula1

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

Page 30: Mini-curso JavaFX Aula1

30

Page 31: Mini-curso JavaFX Aula1

def PI = 3.1416;

function calcArea(raio: Number): Number{return PI * raio * raio;

}

var raio = 5;var area = calcArea(raio);

31

Page 32: Mini-curso JavaFX Aula1

def PI = 3.1416;

function calcArea(raio: Number) {return PI * raio * raio;

}

var raio = 5;var area = calcArea(raio);

32

Page 33: Mini-curso JavaFX Aula1

def PI = 3.1416;

function calcArea(raio: Number) {PI * raio * raio;

}

var raio = 5;var area = calcArea(raio);

33

Page 34: Mini-curso JavaFX Aula1

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

Page 35: Mini-curso JavaFX Aula1

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

Page 36: Mini-curso JavaFX Aula1

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

Page 37: Mini-curso JavaFX Aula1
Page 38: Mini-curso JavaFX Aula1

JavaFX

http://javafx.com/

JavaFX Developer Home

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

JavaFX Programing (with Passion!)

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

38

Page 39: Mini-curso JavaFX Aula1

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

Page 40: Mini-curso JavaFX Aula1

40

Page 41: Mini-curso JavaFX Aula1

41

Page 42: Mini-curso JavaFX Aula1

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

Page 43: Mini-curso JavaFX Aula1

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

Page 44: Mini-curso JavaFX Aula1

var x = 10;var y = 20;

var rect1 = Rectangle{x: bind x;y: bind y;

};

var rect2 = bind Rectangle{x: x;y: y;

};

44

Page 45: Mini-curso JavaFX Aula1

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

Page 46: Mini-curso JavaFX Aula1

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

Page 47: Mini-curso JavaFX Aula1

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

Page 48: Mini-curso JavaFX Aula1

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

Page 49: Mini-curso JavaFX Aula1

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

Page 50: Mini-curso JavaFX Aula1
Page 51: Mini-curso JavaFX Aula1

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);

}

}

Page 52: Mini-curso JavaFX Aula1

52

Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {

content: Text {content: "Hello World!"x: 10 y: 30font : Font {

size : 24}

}}

}

Page 53: Mini-curso JavaFX Aula1

53

Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {

content: Text {content: "Hello World!"x: 10 y: 30font : Font {

size : 24}

}}

}

Page 54: Mini-curso JavaFX Aula1

54

Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {

content: Text {content: "Hello World!"x: 10 y: 30font : Font {

size : 24}

}}

}

Page 55: Mini-curso JavaFX Aula1

55

Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {

content: Text {content: "Hello World!"x: 10 y: 30font : Font {

size : 24}

}}

}

Page 56: Mini-curso JavaFX Aula1

56

Stage {title: "Hello World em JavaFX"width: 250 height: 80scene: Scene {

content: Text {content: "Hello World!"x: 10 y: 30font : Font {

size : 24}

}}

}

Page 57: Mini-curso JavaFX Aula1

57

Stage{

title: "Declarar eh facil!"

width: 250

height: 250

}

Page 58: Mini-curso JavaFX Aula1

58

Stage{

title: "Declarar eh facil!"

scene: Scene{

width: 250

height: 250

}

}

Page 59: Mini-curso JavaFX Aula1

59

Stage{...scene: Scene{

...content: [

Rectangle{x: 45 y: 45width: 160 height: 160arcWidth: 15 arcHeight: 15fill: Color.GREEN

}]

}}

Page 60: Mini-curso JavaFX Aula1

60

Stage{...scene: Scene{

...content: [

Rectangle{x: 45 y: 45width: 160 height: 160arcWidth: 15 arcHeight: 15fill: Color.GREEN

}]

}}

Page 61: Mini-curso JavaFX Aula1

61

Stage{...scene: Scene{

...content: [

Rectangle{x: 45 y: 45width: 160 height: 160arcWidth: 15 arcHeight: 15fill: Color.GREEN

}]

}}

Page 62: Mini-curso JavaFX Aula1

62

Stage{...scene: Scene{

...content: [

Rectangle{x: 45 y: 45width: 160 height: 160arcWidth: 15 arcHeight: 15fill: Color.GREEN

}]

}}

Page 63: Mini-curso JavaFX Aula1

63

...content: [

Rectangle{...

}Circle{

centerX: 125 centerY: 125radius: 90fill: Color.WHITEstroke: Color.RED

}]...

Page 64: Mini-curso JavaFX Aula1

64

...content: [

Rectangle{...

}Circle{

centerX: 125 centerY: 125radius: 90fill: Color.WHITEstroke: Color.RED

}]...

Page 65: Mini-curso JavaFX Aula1

65

...

content: [

Circle{

...

}

Rectangle{

...

}

]

...

Page 66: Mini-curso JavaFX Aula1

66

...content: [

Circle{...

}Rectangle{

...opacity: 0.6

}]...

Page 67: Mini-curso JavaFX Aula1

67

...

Rectangle{

...

transforms: Rotate{

pivotX: 125 pivotY: 125

angle: 15

}

}

...

Page 68: Mini-curso JavaFX Aula1

68

...

Rectangle{

...

rotate: 15

}

...

Page 69: Mini-curso JavaFX Aula1

69

...

Rectangle{

...

effect: Lighting{

surfaceScale: 5

}

}

...

Page 70: Mini-curso JavaFX Aula1

ImageView{

image: Image{

url: "{__DIR__}imagem.png"

}

rotate: 15

scaleX: 2

}

70

Page 71: Mini-curso JavaFX Aula1

71

Page 72: Mini-curso JavaFX Aula1

...Group{

translateX: 15translateY: 15content: [

Text{...

}Circle{

...}

]}...

72

Group

Translate

CircleText

Page 73: Mini-curso JavaFX Aula1

73

Page 74: Mini-curso JavaFX Aula1

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;

}

}

...

Page 75: Mini-curso JavaFX Aula1

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;

}

}

...

Page 76: Mini-curso JavaFX Aula1

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;

}

}

...

Page 77: Mini-curso JavaFX Aula1

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;

}

}

...

Page 78: Mini-curso JavaFX Aula1

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;

}

}

...

Page 79: Mini-curso JavaFX Aula1

79

Page 80: Mini-curso JavaFX Aula1

80