JavaFX GUI
      Fábio Nogueira de Lucena
   Instituto de Informática (UFG)
Graduação em Engenharia de Software
  http://e...
Passos para GUI
• Criar um Stage (palco da aplicação)
• Criar uma Scene (sequência de Node)
  com a qual usuários irão int...
Primeiro...


• Precisamos conhecer os recursos gráficos...
javafx.scene.control.Button
 Button {
 
 text: "Meu primeiro botão!"
 
 action: function() {}
 }


Documentação de JavaFX ...
javafx.scene.control.Button
 Button {
 
 text: "Meu primeiro botão!"
 
 action: function() { FX.exit(); }
 }

            ...
CheckBox
import javafx.scene.control.CheckBox;

CheckBox {

 text: "Clique para marcar/desmarcar

 selected: true
}

    I...
Text
import javafx.scene.control.Label;
import javafx.scene.text.Font;
Label {

 text: "Um simples texto!"
   font: Font {...
Combinando objetos...

import javafx.scene.control.Label;
import javafx.scene.text.Font;
import javafx.scene.layout.VBox;
...
Combinando objetos...
import   javafx.scene.layout.HBox;
import   javafx.scene.shape.Rectangle;
import   javafx.scene.pain...
ImageView
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

var base = "http://engenhariadesoftware.i...
javafx.stage.Stage
javafx.stage.Stage {};




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


 import javafx.stage.Stage;
 Stage {
     title: "Título da Apl...
Uma imagem no palco
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.*;

var jpg = "http://...
NetBeans IDE 6.9 Beta
Alguns dos possíveis nós...
javafx.scene.text.Text
javafx.scene.image.ImageView
javafx.scene.image.Image
javafx.scene.layo...
Texto
import   javafx.scene.Scene;
import   javafx.scene.text.Text;
import   javafx.scene.text.TextOrigin;
import   javafx...
Texto
import javafx.scene.Scene;
import javafx.scene.text.*;
import javafx.stage.Stage;

var msg = "A justiça é a conveniê...
Texto
import javafx.scene.paint.Color;
import javafx.scene.*;
import javafx.scene.text.*;

Stage {
    scene: Scene {
    ...
Imagem e texto
import   javafx.scene.image.*;
import   javafx.scene.paint.Color;
import   javafx.scene.*;
import   javafx....
Exibindo o progresso do download...
  svn export http://exemplos.googlecode.com/svn/trunk/javafx/g5 g5
package g5;

import...
Ok, vamos praticar...
Javafx Gui
Upcoming SlideShare
Loading in …5
×

Javafx Gui

3,707 views

Published on

Introdução a interfaces gráficas usando JavaFX

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,707
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
98
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide


































  • Javafx Gui

    1. 1. JavaFX GUI Fábio Nogueira de Lucena Instituto de Informática (UFG) Graduação em Engenharia de Software http://engenhariadesoftware.inf.br
    2. 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. 3. Primeiro... • Precisamos conhecer os recursos gráficos...
    4. 4. javafx.scene.control.Button Button { text: "Meu primeiro botão!" action: function() {} } Documentação de JavaFX (action é um tipo de função)
    5. 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. 6. CheckBox import javafx.scene.control.CheckBox; CheckBox { text: "Clique para marcar/desmarcar selected: true } Inicialmente a opção encontra-se marcada!
    7. 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. 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. 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. 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. 11. javafx.stage.Stage javafx.stage.Stage {}; Menor aplicação gráfica em JavaFX!
    12. 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. 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. 14. NetBeans IDE 6.9 Beta
    15. 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. 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. 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. 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. 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 } ] } }
    20. 20. 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
    21. 21. Ok, vamos praticar...

    ×