• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javafx Gui
 

Javafx Gui

on

  • 4,978 views

Introdução a interfaces gráficas usando JavaFX

Introdução a interfaces gráficas usando JavaFX

Statistics

Views

Total Views
4,978
Views on SlideShare
4,932
Embed Views
46

Actions

Likes
0
Downloads
91
Comments
0

1 Embed 46

http://www.slideshare.net 46

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />

Javafx Gui Javafx Gui Presentation Transcript

  • 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á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.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)
  • 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
  • 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.layout.HBox javafx.scene.shape.Circle javafx.scene.shape.Line javafx.scene.shape.Rectangle javafx.scene.CustomNode javafx.scene.Group
  • 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
  • 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
  • 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
  • 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 } ] } }
  • 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
  • Ok, vamos praticar...