Mini-curso JavaFX Aula1

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