O documento apresenta os principais conceitos e elementos para construção de interfaces gráficas em JavaFX, incluindo como criar janelas, adicionar botões, caixas de texto e imagens.

1. JavaFX GUI
Fábio Nogueira de Lucena
Instituto de Informática (UFG)
Graduação em Engenharia de Software
http://engenhariadesoftware.inf.br

2. Passos para GUI
• Criar um Stage (palco da aplicação)
• Criar uma Scene (sequência de Node)
com a qual usuários irão interagir
• Criar o conteúdo da Scene (Node[])
• Criar variáveis e classes que representam o
modelo (model no MVC)
• Criar interação (event handlers)

3. Primeiro...
• Precisamos conhecer os recursos gráficos...

4. javafx.scene.control.Button
Button {
text: "Meu primeiro botão!"
action: function() {}
}
Documentação de JavaFX (action é um tipo de função)

5. javafx.scene.control.Button
Button {
text: "Meu primeiro botão!"
action: function() { FX.exit(); }
}
Ao clicar no botão, a aplicação é finalizada!

6. CheckBox
import javafx.scene.control.CheckBox;
CheckBox {
text: "Clique para marcar/desmarcar
selected: true
}
Inicialmente a opção encontra-se marcada!

7. Text
import javafx.scene.control.Label;
import javafx.scene.text.Font;
Label {
text: "Um simples texto!"
font: Font { size: 30 }
}
O valor padrão do tamanho da fonte é alterado!

8. Combinando objetos...
import javafx.scene.control.Label;
import javafx.scene.text.Font;
import javafx.scene.layout.VBox;
VBox {
content: [
Label {
text: "Um simples texto!"
font: Font {size: 30 }
},
Label {
text: "Outro texto (menor)!"
font: Font {size: 20 }
}]
}

9. Combinando objetos...
import javafx.scene.layout.HBox;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
HBox {
content: [
Rectangle {
width: 140, height: 90
fill: Color.YELLOW
},
Circle {
radius: 40
fill: Color.GREEN
}
]
}

10. ImageView
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
var base = "http://engenhariadesoftware.inf.br/publico/";
var arquivo = "logo.png";
var urlRef = bind "{base}{arquivo}";
ImageView {
image: Image {
url: urlRef
}
}

11. javafx.stage.Stage
javafx.stage.Stage {};
Menor aplicação gráfica em JavaFX!

12. javafx.stage.Stage
import javafx.stage.Stage;
Stage {}
import javafx.stage.Stage;
Stage {
title: "Título da Aplicação (janela)"
width: 350
height: 80
opacity: .6
resizable: false
}
Conteúdo é vazio (Scene não foi criada)

13. Uma imagem no palco
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.*;
var jpg = "http://engenhariadesoftware.inf.br/publico/logo.png";
var imagem = ImageView {
image: Image { url: jpg }
}
Stage {
title: "Engenharia de Software"
scene: Scene { content: imagem }
}
Classes em amarelo, vars de instância em verde

14. NetBeans IDE 6.9 Beta

15. Alguns dos possíveis nós...
javafx.scene.text.Text
javafx.scene.image.ImageView
javafx.scene.image.Image
javafx.scene.layout.HBox
javafx.scene.shape.Circle
javafx.scene.shape.Line
javafx.scene.shape.Rectangle
javafx.scene.CustomNode
javafx.scene.Group

16. Texto
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.stage.Stage;
import javafx.scene.text.Font;
Stage {
scene: Scene {
content: Text {
content: "OK"
textOrigin: TextOrigin.TOP
font: Font { size: 36 }
}
}
javafx.scene.text.Text

17. Texto
import javafx.scene.Scene;
import javafx.scene.text.*;
import javafx.stage.Stage;
var msg = "A justiça é a conveniência do mais forte. "
"(República, Platão).";
Stage {
scene: Scene {
content: Text {
content: msg textOrigin: TextOrigin.TOP
font: Font { size: 20 } wrappingWidth: 230
textAlignment: TextAlignment.JUSTIFY
}
}
}
javafx.scene.text.Text

18. Texto
import javafx.scene.paint.Color;
import javafx.scene.*;
import javafx.scene.text.*;
Stage {
scene: Scene {
content: Text {
content: "Vila Nova"
textOrigin: TextOrigin.TOP
font: Font { size: 130 }
fill: Color.RED
stroke: Color.BLACK
strokeWidth: 4
}
}
}
javafx.scene.text.Text

19. Imagem e texto
import javafx.scene.image.*;
import javafx.scene.paint.Color;
import javafx.scene.*;
import javafx.scene.text.*;
var server = "www.vilanova.esp.br";
var vn = "http://{server}/pictures/G1342652008113750.jpg";
Stage {
scene: Scene {
content: [
ImageView { image: Image { url: vn } opacity: 0.3 }
Text { x: 40 y: 140 fill: Color.RED
content: "Melhor do MundonAno 2036nNão perca!"
font: Font { size: 60 } textOrigin:TextOrigin.TOP
}
]
}
}

21. Exibindo o progresso do download...
svn export http://exemplos.googlecode.com/svn/trunk/javafx/g5 g5
package g5;
import javafx.scene.*;
import javafx.scene.image.*;
import javafx.scene.text.Text;
import javafx.stage.Stage;
var srv = "grin.hq.nasa.gov";
var nasa = "http://{srv}/IMAGES/SMALL/GPN-2000-001124.jpg";
var img = Image { url: nasa backgroundLoading: true
placeholder: Image { url: "{__DIR__}aguarde.png" } };
var perc = Text { x: 40 y: 20 content: bind progresso(img.progress) };
function progresso(percentual : Number) : String {
if (percentual >= 99.9) then "" else "{percentual}%"
}
def cena = Scene { content: [ ImageView { image: img }, perc ] };
Stage { width: 640 height: 649 scene : cena }
Exibe ‘background’ enquanto ‘jpg’ é carregada

22. Ok, vamos praticar...