Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
JavaFX - Introdução
Draylson Micael de Souza
Everton Silva
1o semestre de 2018
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 1
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Roteiro
1 Visão geral
2 Bibliotecas gráficas para Java
3 Primeira aplicação em JavaFX
4 Estrutura de uma GUI com JavaFX
5 Exercícios
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 2
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Roteiro
1 Visão geral
2 Bibliotecas gráficas para Java
3 Primeira aplicação em JavaFX
4 Estrutura de uma GUI com JavaFX
5 Exercícios
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 3
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
O que é JavaFX?
Nova biblioteca gráfica da plataforma Java
Biblioteca padrão a partir do Java 8
Apoia o desenvolvimento de aplicações com:
Interfaces gráficas
Animações
Desenhos
Efeitos
Gráficos
Dentre outros
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 4
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Roteiro
1 Visão geral
2 Bibliotecas gráficas para Java
3 Primeira aplicação em JavaFX
4 Estrutura de uma GUI com JavaFX
5 Exercícios
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 5
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
AWT (Abstract Window Toolkit)
Biblioteca gráfica original da linguagem de programação Java
Baixo nível de abstração sobre a interface de usuário nativa do
ambiente
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 6
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Swing
Biblioteca gráfica para uso com o Java
Renderiza/desenha por conta própria todos os componentes
Menor desempenho que a AWT
Mais completa e independente do sistema operacional
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 7
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
JavaFX
Biblioteca gráfica para a criação e disponibilização de RIAs
(Rich Internet Applications)
Pode ser executada em vários dispositivos diferentes
Desktop, browser e dispositivos móveis, TVs, video-games,
blu-rays players, dentre outros
Melhorias e funcionalidades adicionais ao Swing
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 8
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Roteiro
1 Visão geral
2 Bibliotecas gráficas para Java
3 Primeira aplicação em JavaFX
4 Estrutura de uma GUI com JavaFX
5 Exercícios
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 9
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Exemplo: Welcome
Desenvolver a seguinte aplicação gráfica.
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 10
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Conteúdo do projeto
[Link]: Esse arquivo contém a marcação FXML para
a GUI.
[Link]: Essa é a classe principal que cria a GUI a
partir do arquivo FXML, e a exibe em uma janela.
[Link]: Essa é a clase em que você define
a rotina de tratamento de evento da GUI que permite que o
aplicativo responda a interações do usuário com a interface
gráfica.
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 11
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
FXML
FXML (FX Markup Language) é um vocabulário XML para
definir e organizar controles GUI do JavaFX
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 12
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
JavaFX Scene Builder
A JavaFX Scene Builder é uma ferramenta autônoma de
layout visual de JavaFX GUI
Pode ser usada com várias IDEs
Oculta os detalhes do FXML permitindo em se concentrar no
que a GUI deve conter
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 13
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
JavaFX Scene Builder
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 14
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
A classe principal
A classe principal da aplicação deve herdar a classe Application
definida na biblioteca do JavaFX
[Link]
7 p u b l i c c l a s s Welcome e x t e n d s A p p l i c a t i o n {
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 15
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
A classe principal
A classe principal da aplicação deve conter um método main que
realiza uma chamada ao método launch() implementado pela
classe Application
[Link]
9 p u b l i c s t a t i c v o i d main ( S t r i n g [ ] a r g s ) {
10 launch ( args ) ;
11 }
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 16
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
A classe principal
A definição da interface gráfica é realizada implementando o
método abstrado start(Stage primaryStage) definido pela
classe Application
[Link]
13 @Override
14 p u b l i c void s t a r t ( Stage stage ) throws
Exception {
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 17
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
A classe principal
Incluímos os elementos gráficos definidos no FXML
[Link]
16 P a r e n t r o o t = FXMLLoader . l o a d ( g e t C l a s s ( )
17 . g e t R e s o u r c e ( "Welcome . f x m l " ) ) ;
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 18
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
A classe principal
Definimos um painel gráfico (cena) inserindo a mensagem como
elemento principal
[Link]
19 Scene s c e n e = new S cene ( r o o t ) ;
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 19
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
A classe principal
Atribuimos o painel (cena) na janela (palco) da aplicação
[Link]
20 stage . setScene ( scene ) ;
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 20
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
A classe principal
Atribuimos um título na janela (palco) da aplicação
[Link]
21 s t a g e . s e t T i t l e ( "Welcome" ) ;
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 21
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
A classe principal
Invocamos a janela (palco) para ser exibida ao usuário
[Link]
22 s t a g e . show ( ) ;
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 22
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
A classe principal
Método start(Stage primaryStage) implementado para a aplicação
[Link]
13 @Override
14 public void s t a r t ( Stage stage ) throws Exception {
15
16 P a r e n t r o o t = FXMLLoader . l o a d ( g e t C l a s s ( )
17 . g e t R e s o u r c e ( " Welcome . f x m l " ) ) ;
18
19 Scene s c e n e = new S c e n e ( r o o t ) ;
20 stage . setScene ( scene ) ;
21 stage . s e t T i t l e ( " Welcome " ) ;
22 stage . show ( ) ;
23
24 }
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 23
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Executando a classe principal
Resultado da execução
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 24
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Roteiro
1 Visão geral
2 Bibliotecas gráficas para Java
3 Primeira aplicação em JavaFX
4 Estrutura de uma GUI com JavaFX
5 Exercícios
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 25
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
O mundo é um palco!
O JavaFX utiliza a analogia de um palco
O palco é a janela ou frame que abrigará a interface gráfica da
apliacação
Equivalência em diferentes dispositivos
O palco pode receber diferentes cenas, mas não pode conter
mais de uma cena ao mesmo tempo
A cena é o conteúdo das janelas
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 26
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Grafos de cena
Os itens que compõe uma cena são estruturados na forma de
um grafo de cena
Exemplos de itens incluem textos, formas geométricas, botões,
campos de formulário, tabelas, dentre outros
Um grafo de cena é um conjunto de estruturas de dados árvore
Os itens são representados como nós de grafo de cena
Paineis de layout são nós que contém outros nós filhos
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 27
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Principais classes do JavaFX
Classe Descrição
Stage Permite definir e manipular um palco.
Scene Permite definir e manipular um cena.
Node Classe base para um nó de grafo de cena. Por
exemplo, Label é subclasses de Node.
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 28
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Roteiro
1 Visão geral
2 Bibliotecas gráficas para Java
3 Primeira aplicação em JavaFX
4 Estrutura de uma GUI com JavaFX
5 Exercícios
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 29
Visão geral Bibliotecas gráficas Primeira aplicação Estrutura de uma GUI Exercícios
Exercício 1 - Aplicativo de colagem
Encontre quatro imagens de marcos famosos usando sites da
web
Crie um aplicativo semelhante ao aplicativo Welcome em que
você organiza os aplicativos em uma colagem
Adicione em cada imagem um texto que identifica cada marco
As imagens e os textos devem ser posicionados na vertical, ou
seja, um embaixo do outro
JavaFX - Introdução Draylson Micael de Souza e Everton Silva 30
