Javafx Gui

  • View
    3.333

  • Download
    3

Embed Size (px)

DESCRIPTION

Introdução a interfaces gráficas usando JavaFX

Text of Javafx Gui

  • 1. JavaFX GUI Fbio Nogueira de LucenaInstituto de Informtica (UFG) Graduao em Engenharia de Software http://engenhariadesoftware.inf.br

2. Passos para GUI Criar um Stage (palco da aplicao) Criar uma Scene (sequncia de Node) com a qual usurios iro interagir Criar o contedo da Scene (Node[]) Criar variveis e classes que representam o modelo (model no MVC) Criar interao (event handlers) 3. Primeiro... Precisamos conhecer os recursos grcos... 4. javafx.scene.control.ButtonButton {text: "Meu primeiro boto!"action: function() {}} Documentao de JavaFX (action um tipo de funo) 5. javafx.scene.control.ButtonButton {text: "Meu primeiro boto!"action: function() { FX.exit(); }} Ao clicar no boto, a aplicao nalizada! 6. CheckBox import javafx.scene.control.CheckBox;CheckBox { text: "Clique para marcar/desmarcar selected: true }Inicialmente a opo 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 padro 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 aplicao grca em JavaFX! 12. javafx.stage.Stageimport javafx.stage.Stage;Stage {}import javafx.stage.Stage;Stage {title: "Ttulo da Aplicao (janela)"width: 350height: 80opacity: .6resizable: false} Contedo vazio (Scene no 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 instncia em verde 14. NetBeans IDE 6.9 Beta 15. Alguns dos possveis ns... 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 justia a convenincia do mais forte. " "(Repblica, Plato)."; 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.REDcontent: "Melhor do MundonAno 2036nNo perca!"font: Font { size: 60 } textOrigin:TextOrigin.TOP}] } } 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. Ok, vamos praticar...