Palco - PoP-BA

JavaFX
I DO THIS FOR YOU
Nova biblioteca gráfica
do Java
Criar aplicações cliente ricas
de boa performance
e bonitas
Aplicações Cliente Ricas
Animações 2D e 3D
Gráficos
Gradientes de cores
Fácil manipulação de mídea: áudio, vídeo e imagens
PARTIU HELLO WORLD !
public class HelloWorld extends Application {
@Override
public 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 ?
SWING
MAIOR LIBERDADE AO PROGRAMADOR
MAIS COMPONENTES GRÁFICOS
COMPORTAMENTO CONFIGURÁVEL
NÃO TEM PROBLEMAS COM PORTABILIDADE
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 programa
//importando a biblioteca
import javafx.application.Application;
//criando a classe
public 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 classe
public class AprendendoFX extends Application{
@Override
public void start(Stage palco) throws Exception {
}
public static void main (String[] args) {
launch();
}
}
Palco
Palco
Stage (Palco)
Contém todos os Scenes
//importando a biblioteca
import javafx.stage.Stage;
//declaramos o método
public void start(Stage palco) {
...
}
Palco
História
StackPane (História)
Elemento que vai receber todos os objetos que participam da
“história” que deve aparecer em cena.
//importando a biblioteca
import javafx.scene.layout.StackPane;
//criando a história
StackPane historia = new StackPane();
StackPane (História)
//importando a biblioteca
import javafx.scene.layout.StackPane;
//criando a história
StackPane historia = new StackPane();
//adicionando elemento a história
Label Mensagem = new Label();
Mensagem.setText("Estou aprendendo JavaFX!");
historia.getChildren().add(Mensagem);
Palco
Cena
Scene (Cena)
Superfície onde aparecerá nossa história
//importando a biblioteca
import javafx.scene.Scene;
//criando a cena
Scene cena = new Scene(historia, 250, 100);
Stage (Palco)
Colocando a história no palco
palco.setTitle("Aprendendo JavaFX");
palco.setScene(cena);
palco.show();
E o que podemos
utilizar no JavaXF?
Imagem
Image imagem = new Image(IMAGEM_URL);
Animações 2D e 3D
Vídeo
Media media = new Media(VIDEO_URL);
MediaPlayer mediaPlayer = new MediaPlayer(media);
MediaView mediaView = new MediaView(mediaPlayer);
Figuras
geométricas
Música
AudioClip musica = new AudioClip(AUDIO_URL);
Música
AudioClip 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 programando
Com a cena gráfica se formando
E a cena estabelecendo
a hierarquia do node!
Cada node tem um elemento
Mas é possível ter mais de 1
Podemos 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 programando
Com a cena gráfica se formando
E a cena estabelecendo
a hierarquia do node!
Cada node tem um elemento
Mas é possível ter mais de 1
Podemos 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 {
@Override
public 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 programando
Com a cena gráfica se formando
E a cena estabelecendo
a hierarquia do node!
Cada node tem um elemento
Mas é possível ter mais de 1
Podemos 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
CSS
Cascading 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.java
public 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.java
public 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
}
}
JavaFX
Builder
Obrigado!
AVALIAÇÃO
http://bit.ly/javafxvr