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

Welcome.fxml: Esse arquivo contém a marcação FXML para

a GUI.

Welcome.java: Essa é a classe principal que cria a GUI a

partir do arquivo FXML, e a exibe em uma janela.

WelcomeController.java: 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

Welcome.java
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

Welcome.java
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

Welcome.java
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

Welcome.java
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

Welcome.java
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

Welcome.java
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

Welcome.java
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

Welcome.java
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

Welcome.java
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