JavaFX 2.0 With Alternative Languages [Portuguese]

Plataforma JavaFX 2.0,
GroovyFX, ScalaFX e Visage
Stephen Chin
Chefe de metodologias Ageis, GXS
steveonjava@gmail.com
tweet: @steveonjava
Translated by Marcelo Quinta

Conheca o palestrante
Stephen Chin
http://steveonjava.com/
• Java Champion
• Autor
Family Man • Pro JavaFX Platform
• Pro Android Flash
• Fundador de projetos Open
Motorcyclist Source
• JFXtras
• ScalaFX
• WidgetFX
• Visage

A plataforma JavaFX 2.0
Experiencia imersiva Desktop combinando o
melhor do JavaFX e HTML5
> Use seus conhecimentos Java com as
modernas APIs JavaFX
> Integre Java, JavaScript e HTML5 na mesma
aplicacao
> Nova gama de graficos usa as vantagens de
aceleracao de hardware para aplicacoes 2D e
3D
> Use sua IDE favorita:
NetBeans, Eclipse, IntelliJ, etc.

JavaFX agora e Open Source!
Parte do projeto OpenJDK

Controles disponiveis agora
codigo adicional adicionado
incrementalmente

Pagina do projeto:
> http://openjdk.java.net/projects/openjfx/

4

E vai rodar nos Tablets!

> iPad (iOS)
> Linux
(plataforma
popular que
executa algo
semelhante a
Java)
Nenhuma data de release foi anunciada
5

Construindo Aplicacoes JavaFX
> Pode ser executada no navegador ou no Desktop
> Inclui builders para construcoes declarativas
> Linguagens alternativas tambem podem ser utilizadas para
simplificar a criacao da interface de usuario
 GroovyFX
 ScalaFX
 Visage

6

Ola JUG (Versao Java)
public class HelloJUG extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Ola JUG");
Group root = new Group();
Scene scene = new Scene(root, 400, 250, Color.ALICEBLUE);
Text text = new Text();
text.setX(105);
text.setY(120);
text.setFont(new Font(30));
text.setText("Ola JUG");
root.getChildren().add(text);
primaryStage.setScene(scene);
primaryStage.show();
}
}
7

Ola JUG (Versao com o Builder)
public void start(Stage primaryStage) {
primaryStage.setTitle("Ola JUG");
primaryStage.setScene(SceneBuilder.create()
.width(400)
.height(250)
.fill(Color.ALICEBLUE)
.root(
GroupBuilder.create().children(
TextBuilder.create()
.x(105)
.y(120)
.text("Ola JUG")
.font(new Font(30))
.build()
).build()
)
.build());
primaryStage.show();
}
8

Ola JUG (Versao GroovyFX)
GroovyFX.start { primaryStage ->
def sg = new SceneGraphBuilder()
sg.stage(
title: 'Ola JUG',
show: true) {
scene(
fill: aliceblue,
width: 400,
height: 250) {
text(
x: 105,
y: 120,
text: "Ola JUG"
font: "30pt")
}
}
}
9

Ola JUG (Versao JavaFX)
object HelloJUG extends JFXApp {
stage = new Stage {
title = "Ola JUG"
width = 400
height = 250
scene = new Scene {
fill = BLUE
Text {
x = 105
y = 120
text = "Ola JUG"
font = Font(size: 30)
}
}
}
}
10

Ola JUG (Versao Visage)
Stage {
title: "Ola JUG"
width: 400
height: 250
scene: Scene {
fill: BLUE
content: Text {
x: 105
y: 120
text: "Ola JUG"
font: Font {size: 30pt}
}
}
}

11

Mostrando HTML no JavaFX
public class WebViewTest extends Application {
launch(WebViewTest.class, args);
}
@Override public void start(Stage stage) {
WebView webView = new WebView();
webView.getEngine().load("http://google.com");
Scene scene = new Scene(webView);
stage.setScene(scene);
stage.setTitle("Web Test");
stage.show();
}}
12

Mostrando HTML no JavaFX

13

Chamando Javascript pelo JavaFX
String script = "alert('Aooo Goiania!');”;
eng.executeScript(script);

14

Respondendo a eventos do browser
Eventos suportados:
> Alert/Confirm/Prompt:
 Responda funcoes do Javascript de interacao do usuario
> Resize:
 Web page move-se ou rearranja ao tamanho da janela
> Status
 Web page muda o texto do status
> Visibility
 Esconde ou mostra algum objeto da janela
> Popup
 Cria uma segunda janela

15

Demo de integracao HTML5/JavaFX

16

Features of Groovy
> Linguagem moderna
 Closures
 Transforms AST
 Linguagem fortemente tipada

> Grande integracao com Java
 Muito facil fazer a portabilidade de Java para Groovy

> Sintaxe declarativa com builders GroovyFX
 Familiar aos desenvolvedores Groovy e JavaFX Script

Java vs. GroovyFX DSL
public class HelloStage extends Application { GroovyFX.start { stage ->
def sg = new SceneGraphBuilder(stage)
public void start(Stage stage) {
stage.setTitle("Hello Stage"); sg.stage(title: “Hello Stage”, width: 600, height: 450) {
stage.setWidth(600); scene(fill: groovyblue) {
stage.setHeight(450); rectangle(x: 25, y: 40, width: 100, height: 50, fill:
Scene scene = new Scene(); red)
scene.setFill(Color.LIGHTGREEN); }
21 Linhas
Rectangle rect = new Rectangle();
rect.setX(25); }
} 8 Linhas
rect.setY(40);
430 Caracteres
rect.setWidth(100);
rect.setHeight(50);
180 Caracteres
rect.setFill(Color.RED);
scene.setRoot(new Group(rect));
stage.setScene(scene);
stage.show();
}

launch(HelloStage.class, args);
}
}

19

def hc = { hover -> hover ? 4 : 0 }

sg.stage(title: 'Vanishing Circles', show: true) {
scene(fill: black, width: 800, height: 600) {
50.times {
circle(centerX: rand(800), centerY: rand(600),
radius: 150, stroke: white,
strokeWidth: bind('hover', converter: hc)) {
fill rgb(rand(255), rand(255), rand(255), 0.2)
effect boxBlur(width: 10, height: 10, iterations: 3)
}
}
}
}
20


sg.stage(title: 'Vanishing Circles',Builder para Scene Graphs do
show: true) {
GroovyFX
50.times {
}
}
}
}
21


50.times {
Definicao declarativa do Stage
}
}
}
}
22

Definicao de propriedades
embutdidas
50.times {
}
}
}
}
23


scene(fill: black, width: 800, height: Bind para propriedades
600) {
50.times {
}
}
}
}
24


Criacao de sequencias via loop
50.times {
}
}
}
}
25

Propriedades em Java
public class Person {
private StringProperty firstName;
public void setFirstName(String val) { firstNameProperty().set(val); }
public String getFirstName() { return firstNameProperty().get(); }
public StringProperty firstNameProperty() {
if (firstName == null)
firstName = new SimpleStringProperty(this, "firstName");
return firstName;
}

private StringProperty lastName;
public void setLastName(String value) { lastNameProperty().set(value); }
public String getLastName() { return lastNameProperty().get(); }
public StringProperty lastNameProperty() {
if (lastName == null) // etc.
}
}

26

Propriedades em GroovyFX
@FXBindable String firstName;
@FXBindable String lastName;
}

27

@FXBindable String lastName = “Smith”;
}

Inicializadores opcionais

28

}
Valores get and set
def p = new Person()
def last = p.lastName
p.firstName = “Agent”

29

}

def p = new Person()
def last = p.lastName Acesso a propriedades
p.firstName = “Agent” embutidas para binding

textField(text: bind(p.lastNameProperty()))

30

Binding em GroovyFX
@FXBindable
class Time {
Integer hours
Integer minutes
Integer seconds

Double hourAngle
Double minuteAngle
Double secondAngle

public Time() {
// bind the angle properties to the clock time
hourAngleProperty().bind((hoursProperty() * 30.0) + (minutesProperty() * 0.5))
minuteAngleProperty().bind(minutesProperty() * 6.0)
secondAngleProperty().bind(secondsProperty() * 6.0)
}
}
31

Animation em GroovyFX
timeline(cycleCount: Timeline.INDEFINITE, autoReverse: true) {
at (1000.ms) {
change(rect1, 'x') to 200 tween ease_both
change rect2.yProperty() to 200 tween linear
}
}.play()

32

at (1000.ms) {
}
}.play()
Sintaxe facil para animacoes:
at (duration) {keyframes}

33

at (1000.ms) {
change(rect1, 'x') to 200
change rect2.yProperty() to 200
}
}.play()

Key frame DSL

34

at (1000.ms) {
}
}.play()

Controle de velocidade opcional

35

Event Listeners em GroovyFX
> Sintaxe para Closure usando controles embutidos
> Argumentos opcionais para eventos

onMouseClicked { e ->
timeline {
at(3.s) { change e.source.radiusProperty() to 0 }
}.play()
}

36

> Argumentos opcionais para eventos

onMouseClicked { MouseEvent e ->
timeline {
}.play()
}
Sintaxe compacta
{body}
37

Parametros opcionais para
> Argumentos opcionais para eventos eventos
{event -> body}

onMouseClicked { MouseEvent e ->
timeline {
}.play()
}

38

TableView em Java
ObservableList<Person> items = ...
TableView<Person> tableView = new TableView<Person>(items);

TableColumn<Person,String> firstNameCol =
new TableColumn<Person,String>("First Name");

firstNameCol.setCellValueFactory(
new Callback<CellDataFeatures<Person, String>,
ObservableValue<String>>() {
public ObservableValue<String> call(CellDataFeatures<Person, String> p)
{
return p.getValue().firstNameProperty();
}
});

tableView.getColumns().add(firstNameCol);
39

TableView em GroovyFX
def dateFormat = new SimpleDateFormat("yyyy-MM-dd");

tableView(items: persons) {
tableColumn(property: "name", text: "Name", prefWidth: 150)
tableColumn(property: "age", text: "Age", prefWidth: 50)
tableColumn(property: "gender", text: "Gender", prefWidth: 150)
tableColumn(property: "dob", text: "Birth", prefWidth: 150,
type: Date,
converter: { from -> return dateFormat.format(from) })
}

40

Layout em Java
TextField urlField = new TextField(“http://www.google.com”);
HBox.setHgrow(urlField, Priority.ALWAYS);

HBox hbox = new HBox();
hbox.getChildren().add(urlField);

WebView webView = new WebView();
VBox.setVgrow(webView, Priority.ALWAYS);

VBox vbox = new VBox();
vbox.getChildren().addAll(hbox, webView);

41

Layout em GroovyFX

sg.stage(title: "GroovyFX WebView Demo", show: true) {
scene(fill: groovyblue, width: 1024, height: 800) {
vbox {
hbox(padding: 10, spacing: 5) {
textField(“http://www.yahoo.com”, hgrow: "always")
button("Go”)
}
webView(vgrow: "always")
}
}
}

42

Layout em GroovyFX

43

Layout em GroovyFX
gridPane(hgap: 5, vgap: 10, padding: 25) {
columnConstraints(minWidth: 50, halignment: "right")
columnConstraints(prefWidth: 250)
label("Send Us Your Feedback", font: "24pt sanserif",
row: 0, columnSpan: GridPane.REMAINING, halignment: "center",
margin: [0, 0, 10])

label("Name: ", row: 1, column: 0)
textField(promptText: "Your name", row: 1, column: 1, hgrow: 'always')

label("Email:", row: 2, column: 0)
textField(promptText: "Your email", row: 2, column: 1, hgrow: 'always')

label("Message:", row: 3, column: 0, valignment: "baseline")
textArea(row: 3, column: 1, hgrow: "always", vgrow: "always")

button("Send Message", row: 4, column: 1, halignment: "right")
}
44

Layout em GroovyFX

45

GroovyFX Suporta…

46

GroovyFX Suporta…

47

JavaFX Com Scala

48

O Que e Scala
2001 2006
• Scala Comecou • Scala v2.0

2003/2004 2011
• Scala v1.0 • Scala 2.9.0 (ultima)

> Comecou em 2001 by Martin Odersky
> Compila para bytecodes Java
> Linguagem puramente orientada a objetos
> Tambem para programacao declarativa
49

Por que Scala?
> Compartilha muitas funcionalidades do JavaFX Script que fazem a
programacao de interfaces mais facil:
 Checagem estatica de tipos – Encontre seus erros em tempo de
compilacao
 Closures – Misture os comportamentos e passe-os como referencia
 Declarativa – Expresse a interface como ela deve aparecer

> Scala tambem suporta Type Safe DSLs!
 Conversoes implicitas – extensao de classes typesafe
 Overloading de operadores – com regras de precedencia
 DelayedInit / @specialized – funcionalides avancadas da linguagem
50

Java vs. Scala DSL
public class HelloStage extends Application { object HelloJavaFX extends JFXApp {
stage = new Stage {
public void start(Stage stage) { title = "Hello Stage"
stage.setTitle("Hello Stage"); width = 600
stage.setWidth(600); height = 450
stage.setHeight(450); scene = new Scene {
Scene scene = new Scene(); fill = LIGHTGREEN
scene.setFill(Color.LIGHTGREEN); content = Seq(new Rectangle {
21 Linhas
Rectangle rect = new Rectangle();
rect.setX(25); 17 Linhas
x = 25
y = 40
rect.setY(40); width = 100
430 Caracteres
rect.setWidth(100);
rect.setHeight(50);
177 Caracteres
height = 50
fill = RED
rect.setFill(Color.RED); })
scene.setRoot(new Group(rect)); }
stage.setScene(scene); }
stage.show(); }
}

launch(HelloStage.class, args);
}
}

51

object DisappearingCircles extends JFXApp {
stage = new Stage {
title = "Disappearing Circles"
width = 800
height = 600
scene = new Scene {
fill = BLACK
content = for (i <- 0 until 50) yield new Circle {
centerX = random * 800
centerY = random * 600
radius = 150
fill = color(random, random, random, 0.2)
effect = new BoxBlur(10, 10, 3)
}
}
}
}
52

stage = new Stage {
width = 800
height = 600
Classe base para aplicacoes JavaFX
scene = new Scene {
fill = BLACK
radius = 150
}
}
}
}
53

stage = new Stage {
width = 800
height = 600
scene = new Scene { Definicao declarativa do Stage
fill = BLACK
radius = 150
}
}
}
}
54

stage = new Stage {
title = "Disappearing Circles" Definicoes de propriedades
width = 800
height = 600 embutidas
scene = new Scene {
fill = BLACK
radius = 150
}
}
}
}
55

stage = new Stage {
width = 800
height = 600 Criacao de sequencias via
scene = new Scene { Loop
fill = BLACK
radius = 150
}
}
}
}
56

Binding em Scala
Infix Addition/Subtraction/Multiplication/Division:
height <== rect1.height + rect2.height
Aggregate Operators:
width <== max(rect1.width, rect2.width, rect3.width)
Conditional Expressions:
strokeWidth <== when (hover) then 4 otherwise 0
Compound Expressions:
text <== when (rect.hover || circle.hover && !disabled) then
textField.text + " is enabled" otherwise "disabled"

57

Animation em Scala
val timeline = new Timeline {
cycleCount = INDEFINITE
autoReverse = true
keyFrames = for (circle <- circles) yield at (40 s) {
Set(
circle.centerX -> random * stage.width,
circle.centerY -> random * stage.height
)
}
}
timeline.play();

58

Animacoes JavaFX Script-like
Animation em Scala syntax: at (duration) {keyframes}
autoReverse = true
Set(
)
}
}
timeline.play();

59

Animation in Scala
autoReverse = true
Set(
)
}
}
overloading de operadores para
timeline.play();
sintaxe da animacao
60

Animation in Scala
autoReverse = true
Set(
circle.centerX -> random * stage.width tween EASE_BOTH,
circle.centerY -> random * stage.height tween EASE_IN
)
}
}
timeline.play(); Controle de
velocidade opcional
61

Event Listeners em Scala
> Suportado usando sintaxe Closure embutida
> Argumentos opcionais para tratamento de eventos
> 100% tipagem forte

onMouseClicked = {
Timeline(at(3 s){radius->0}).play()
}

62

> 100% tipagem forte

onMouseClicked = {
}
Sintaxe compacta
{body}
63

Evento = parametro opcional
> 100% tipagem forte {(event) => body}

onMouseClicked = { (e: MouseEvent) =>
}

64

Sobre o projeto Visage
> “Visage e uma domain specific language (DSL) projetada para
suportar a funcao de construcao de interfaces.”

> Metas do projeto Visage:
 Compila para JavaFX Java APIs
 Envolve toda a linguagem (Annotations, Maps, etc.)
 Suporta outros Toolkits

> Venha participar do time!
> Para mais informacoes: http://visage-lang.org/
65

E sobre o JavaFX no… Visage
Stage {
title: "Hello Stage"
width: 600
height: 450
scene: Scene {
fill: Color.LIGHTGREEN
content: Rectangle {
x: 25
y: 40
width: 100
height: 50
fill: Color.RED
}
}
}

66

Stage {
width: 600
height: 450
scene: Scene {
content: Rectangle {
x: 25
y: 40
width: 100
height: 50
fill: Color.RED
}
}
}

67

Stage {
width: 600
height: 450
Scene {
Rectangle {
x: 25
y: 40
width: 100
height: 50
fill: Color.RED
}
}
}

68

Visage e um JavaFX Script++
> Parametros padrao
> Nova sintaxe para:
 Angulos – 35deg, 4rad, 1turn
 Cores – #DDCCBB, #AA33AA|CC
 Medidas – 5px, 2pt, 3in, 4sp
> Checagem de null-reference
 var width = rect!.width
> Bindable Maps embutida (Em breve!)
 var fruitMap = ["red" : apple, "yellow" : banana]
 var fruit = bind fruitMap["red"]
69

Visage e JavaFX 2.0 foram feitos um para o outro…
> Binding melhorado
 Retem a avaliacao tardia de variaveis com um poder expressivo
adicional
> Colecoes integradas
 Sequencias e mapas automaticamente convertidos entre JavaFX
Observable Lists/Maps
> Sintaxe de animacoes embutida
 Coloca o JavaFX em um subsistema de animacoes
 Prove uma API mais limpa e consistente

70

Conclusao
> Voce pode escrever aplicacoes JavaFX com Java puro
> JavaFX tambem e utilizavel por linguagens alternativas
> Voce pode ter o suporte melhorado utilizando bibliotecas
DSL
 GroovyFX

 ScalaFX

> Ou uma linguagem de interfaces que roda na JVM
 Visage

Pro JavaFX 2 Platform em breve!

> Primeiro trimestre de 2012
> Todos os exemplos reescritos em Java
> Cobre as novas bibliotecas da versao
2.0
> Incluira ScalaFX, GroovyFX e Visage

72

Stephen Chin
steveonjava@gmail.com
tweet: @steveonjava
73

JavaFX 2.0 With Alternative Languages [Portuguese]

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à JavaFX 2.0 With Alternative Languages [Portuguese]

Similaire à JavaFX 2.0 With Alternative Languages [Portuguese] (20)

Plus de Stephen Chin

Plus de Stephen Chin (20)

Dernier

Dernier (20)

JavaFX 2.0 With Alternative Languages [Portuguese]

Notes de l'éditeur