JavaFX GUIFá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áficos...

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 é finalizada!

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

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áfica em JavaFX!

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

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

NetBeans IDE 6.9 Beta

Alguns dos possíveis nós...

javafx.scene.text.Textjavafx.scene.image.ImageViewjavafx.scene.image.Imagejavafx.scene.layout.HBoxjavafx.scene.shape.Circlejavafx.scene.shape.Linejavafx.scene.shape.Rectanglejavafx.scene.CustomNodejavafx.scene.Group

Textoimport 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

Textoimport 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

Textoimport 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

Imagem e textoimport 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 Mundo\nAno 2036\nNão perca!" font: Font { size: 60 } textOrigin:TextOrigin.TOP } ] }}

Exibindo o progresso do download...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

svn export http://exemplos.googlecode.com/svn/trunk/javafx/g5 g5

Ok, vamos praticar...