I DO THIS FOR YOU JavaFX - pop-ba.rnp.br · Em JavaFX to programando Com a cena gráfica se...

79
I DO THIS FOR YOU JavaFX

Transcript of I DO THIS FOR YOU JavaFX - pop-ba.rnp.br · Em JavaFX to programando Com a cena gráfica se...

I DO THIS FOR YOUJavaFX

Nova biblioteca gráfica do Java

Criar aplicações cliente ricas

de boa performancee bonitas

Aplicações Cliente Ricas

Animações 2D e 3DGráficosGradientes de coresFácil manipulação de mídea: áudio, vídeo e imagens

PARTIU HELLO WORLD !

public class HelloWorld extends Application {

@Overridepublic void start( Stage palco ) {

Button btn = new Button( );btn.setText(“Botão Hello World”);

StackPane historia = new StackPane( );historia.getChildren( ).add(btn);

Scene cena = new Scene(historia, 300, 250);

palco.setTitle(“HelloWorld”);palco.setScene(cena);palco.show( );

}

public static void main( String[ ] args ) {launch(args);

}

}

Esta é a biblioteca JavaFX

Mas quais eram as antigas?

AWT

Swing

BIBLIOTECAS GRÁFICAS

“AWT e Swing são bibliotecas gráficas oficiais inclusas no Java.”

PORQUE O SWING SUPEROU O AWT ?

SWINGMAIOR LIBERDADE AO PROGRAMADOR

COMPORTAMENTO CONFIGURÁVEL

NÃO TEM PROBLEMAS COM PORTABILIDADE

MAIS COMPONENTES GRÁFICOS

2012

2012

“JavaFX fornece um modelo unificado de desenvolvimento e implementação para a construção de aplicações cliente que integram mídia imersiva, como áudio e vídeo, gráficos, texto rico e serviços web.” [1]

[1] - AGOSTINI, Cristiano; RODRIGUES, Daniel. Construindo aplicações de interface rica com JavaFX. Unoesce Ciência -- ACET, Joaçaba, v. 1, n. 2, p. 135-144, jul./dez. 2010

“A renderização da interface gráfica do JavaFX tem a vantagem de poder ser acelerada utilizando o poder do hardware.”[2]

[2] - ANDERSON, Gail; ANDERSON, Paul. JavaFX Rich Client Programming on the NetBean Platform. Addisson-Wesley, 2015

O Java passando a ter

coisa boa?

corre que é fim do mundo

Qua nada!

e vamos seguindo...

Meu primeiro programaimport javafx.application.Application;//importando a biblioteca

//criando a classepublic class AprendendoFX extends Application{

}

Como está organizado o JavaFX ?

JavaFX é um teatro

Palco

Cena

História

Metáfora da Cena Gráfica do JavaFX

Meu primeiro programa//criando a classepublic class AprendendoFX extends Application{

@Overridepublic void start(Stage palco) throws Exception {

}

public static void main (String[] args) { launch();}

}

Palco

Palco

Contém todos os Scenes

Stage (Palco)

import javafx.stage.Stage;

//importando a biblioteca

//declaramos o métodopublic void start(Stage palco) {

...}

Palco

História

Elemento que vai receber todos os objetos que participam da “história” que deve aparecer em cena.

StackPane (História)

import javafx.scene.layout.StackPane;

//importando a biblioteca

//criando a históriaStackPane historia = new StackPane();

StackPane (História)import javafx.scene.layout.StackPane;//importando a biblioteca

//criando a históriaStackPane historia = new StackPane();

//adicionando elemento a história Label Mensagem = new Label();Mensagem.setText("Estou aprendendo JavaFX!");historia.getChildren().add(Mensagem);

Palco

Cena

Superfície onde aparecerá nossa história

Scene (Cena)

import javafx.scene.Scene;//importando a biblioteca

//criando a cenaScene cena = new Scene(historia, 250, 100);

Colocando a história no palco

Stage (Palco)

palco.setTitle("Aprendendo JavaFX");palco.setScene(cena);palco.show();

E o que podemos utilizar no JavaXF?

ImagemImage imagem = new Image(IMAGEM_URL);

Animações 2D e 3D

VídeoMedia media = new Media(VIDEO_URL);

MediaPlayer mediaPlayer = new MediaPlayer(media);

MediaView mediaView = new MediaView(mediaPlayer);

Figuras geométricas

MúsicaAudioClip musica = new AudioClip(AUDIO_URL);

MúsicaAudioClip musica = new AudioClip(AUDIO_URL);

JavaFX tem a premissa de dar

interface rica para o usuário!

E como rica,Ela entende por

manipulação de mídia e elementos gráficos

Com APIs específicas,para animações,

áudio, vídeo e também construção de gráfico

A renderização de interface, tem a

vantagem de poder ser acelerada por hardware,

por uma GPU.

Metáfora da Cena Gráfica do JavaFX

Em JavaFX to programandoCom a cena gráfica se formandoE a cena estabelecendoa hierarquia do node!Cada node tem um elementoMas é possível ter mais de 1Podemos ter um grupo de nodes todos juntos.Essa é a hierarquia do node!

Oia-oia-oia-oia!Essa é a hierarquia do noode!Oia-oia-oia-oia!Essa é a hierarquia do noode!Oia-oia-oia-oia!Essa é a hierarquia do noode!Podemos ter um grupo de nodes todos juntos.Em JavaFX to programando

Infelizmente na mesma cena não podemos instanciar o node mais de uma vez.Mas isso não é problema, já está tudo no esquema, e o JavaFX sabe o que fez!Os Parent Nodes, são nodes com outros nodes, e estes são filhos aqui por sua vez.Children é nome, dado a estes filhos, que os parent nodes foi lá e obteve.GetChildren() neles

Metáfora da Cena Gráfica do JavaFX

Em JavaFX to programandoCom a cena gráfica se formandoE a cena estabelecendoa hierarquia do node!Cada node tem um elementoMas é possível ter mais de 1Podemos ter um grupo de nodes todos juntos.Essa é a hierarquia do node!

Oia-oia-oia-oia!Essa é a hierarquia do noode!Oia-oia-oia-oia!Essa é a hierarquia do noode!Oia-oia-oia-oia!Essa é a hierarquia do noode!Podemos ter um grupo de nodes todos juntos.Em JavaFX to programando

Primeiro definimos o palco,Depois o objeto personagem

public class HelloWorld extends Application {

@Overridepublic void start( Stage palco ) {

Button btn = new Button( );btn.setText(“Botão Hello World”);

StackPane historia = new StackPane( );historia.getChildren( ).add(btn);

Scene cena = new Scene(historia, 300, 250);

palco.setTitle(“HelloWorld”);palco.setScene(cena);palco.show( );

}

public static void main( String[ ] args ) {launch(args);

}

}

Em JavaFX to programandoCom a cena gráfica se formandoE a cena estabelecendoa hierarquia do node!Cada node tem um elementoMas é possível ter mais de 1Podemos ter um grupo de nodes todos juntos.Essa é a hierarquia do node!

Primeiro definimos o palco,Depois o objeto personagem,Essa é a hierarquia do noode!Primeiro definimos o palco,Depois o objeto personagem,Essa é a hierarquia do noode!Primeiro definimos o palco,Depois o objeto personagem,Essa é a hierarquia do noode!

Podemos ter um grupo de nodes todos juntos.

Em JavaFX to programando!

PODEMOS CRIAR APLICAÇÕES INTEIRAS USANDO SOMENTE O

CSSCascading Style Sheet

É um mecanismo simples para adicionar estilos, como fontes,

cores, espaçamentos...aos documentos web.

scene.getStylesheets().add("https://fonts.googleapis.com/css?family=Tangerine");

Não existe nada que possa usar para separar os elementos gráficos

da parte lógica?

FXML

Permite a construção de interface gráfica

separando o design da parte lógica.

FXMLExemplo.javapublic class FXMLExample extends Application {

@Override public void start(Stage stage) throws Exception {

Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));Scene scene = new Scene(root);stage.setScene(scene);stage.show();

}

public static void main(String[] args) {launch(args);

}

}

FXMLDocument.fxml<?xml version="1.0" encoding="UTF-8"?><?import java.lang.*?><?import java.util.*?><?import javafx.scene.*?><?import javafx.scene.control.*?><?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxmlexample.FXMLDocumentController"> <children> <Button layoutX="90" layoutY="90" text="Click Me" onAction="#handleButtonAction" fx:id="button" /> <Label layoutX="126" layoutY="120" minHeight="16" minWidth="69" fx:id="label" /> </children></AnchorPane>

FXMLDocumentController.javapublic class FXMLDocumentController implements Initializable { @FXML private Label label; @FXML private void handleButtonAction(ActionEvent event) { System.out.println("You clicked me!"); label.setText("Hello World!"); } @Override public void initialize(URL url, ResourceBundle rb) { // TODO } }

JavaFXBuilder

Obrigado!

http://bit.ly/javafxvr

AVALIAÇÃO