Javafx Gui

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

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)

Primeiro...

• Precisamos conhecer os recursos gráﬁcos...

javafx.scene.control.Button
Button {

text: "Meu primeiro botão!"

action: function() {}
}

Documentação de JavaFX (action é um tipo de função)

javafx.scene.control.Button
Button {

text: "Meu primeiro botão!"

action: function() { FX.exit(); }
}

Ao clicar no botão, a aplicação é ﬁnalizada!

CheckBox
import javafx.scene.control.CheckBox;

CheckBox {

text: "Clique para marcar/desmarcar

selected: true
}

Inicialmente a opção encontra-se marcada!

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!

Combinando objetos...

import javafx.scene.control.Label;
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 }
}]
}

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
}
]
}

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
}
}

javafx.stage.Stage
javafx.stage.Stage {};

Menor aplicação gráﬁca em JavaFX!

javafx.stage.Stage
import javafx.stage.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)

Uma imagem no palco
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

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

Texto
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;

Stage {
scene: Scene {
content: Text {
content: "OK"
textOrigin: TextOrigin.TOP
}
}


Texto
import javafx.scene.text.*;

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
}
}
}


Texto
import javafx.scene.*;

Stage {
scene: Scene {
content: Text {
content: "Vila Nova"
textOrigin: TextOrigin.TOP
fill: Color.RED
stroke: Color.BLACK
strokeWidth: 4
}
}
}


Imagem e texto

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
}
]
}
}

Exibindo o progresso do download...
svn export http://exemplos.googlecode.com/svn/trunk/javafx/g5 g5
package g5;

import javafx.scene.text.Text;

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

Javafx Gui

Mais conteúdo relacionado

Semelhante a Javafx Gui (20)

Mais de Fábio Nogueira de Lucena (20)

Último (20)

Javafx Gui