Este documento fornece uma introdução ao JavaFX, incluindo: 1) JavaFX é a nova toolkit de interface gráfica para aplicativos Java baseados em desktop, embarcados e móveis. 2) Fornece controles, layouts, gráficos 2D e 3D acelerados, suporte a áudio e vídeo e animações. 3) O SceneBuilder é um editor WYSIWYG para criar interfaces gráficas em JavaFX.

1. Nécio de Lima Veras
necio.veras@ifce.edu.br
Introdução ao JavaFX

2. JavaFX is ….
The new UI toolkit for Java-based client applications running on desktop,
embedded, and mobile devices;
It is part of the JDK 8 and is provided as a pure Java API.
Resources:
Accelerated 2D and 3D graphics
UI controls, layouts, and charts
Audio and video support
Effects and animations
HTML5 support
Bindings, CSS, FXML, and more...

3. Porque JavaFX ?
Organização de código;
Manutenção rápida e descomplicada;
Qualidade gráfica;
Conceitos de CSS;

4. UI
Components

5. Shapes

6. Provê operações lógicas
para criar novos “shapes”

7. Existem 4 formas de
preenchimento de um “shape”

8. Os padrões de “stroke”
podem ser configurados

9. Controls

10. Controls

11. Dialogs and alerts

12. Existem outros, por exemplo,
para solicitar alguma informação

13. Layout panes

14. A classe ImageView é responsivo para exibir a
imagem na tela;
Audio and Image

15. A classe ImageView é responsivo para exibir a
imagem na tela;
A classe MediaView é usada para mostrar um vídeo ou
tocar um áudio. Formatos: MP3; AIFF, WAV, MPEG-4
Audio and Image

16. Charts

17. WebView
É possível embutir
qualquer conteúdo da
Web em sua aplicação;
Permite interagir
diretamente com o
conteúdo HTML e, por
exemplo, injetar
JavaScript ou manipular
o DOM.

18. FXML
Linguagem baseada em XML que define a estrutura e o
layout das interfaces com usuário JavaFX;

19. FXML
Linguagem baseada em XML que define a estrutura e o
layout das interfaces com usuário JavaFX;

20. SceneBuilder
Um editor WYSIWYG
https://www.oracle.com/technetwork/java/javase/downloads/sb2download-2177776.html

21. Visão geral
Scene
FXML
Control
View
Model
Application

22. Meu primeiro projeto
1. Crie um JavaProject na IDE de sua preferência;
2. Sugestão: crie 4 pacotes:
a. modelo
b. controle
c. visao
d. layout

23. Meu primeiro projeto
3. Usando o SceneBuilder crie sua cena (salve o arquivo
“.fxml” no pacote layout do seu projeto).
Exemplo:

24. Meu primeiro projeto
4. Crie a classe OlaMundo no pacote visao
Exemplo:
package visao;
import javafx.application.Application;
public class OlaMundo extends Application {
}

25. Meu primeiro projeto
Caso ocorra o erro (IDE Eclipse):
Access restriction: The type 'Application' is not API (restriction on required library
‘/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home/jre/lib/ext/
jfxrt.jar')
Faça:
1.Abra o Build Path do projeto
2.Na JRE edite as regras de acesso (Access rules)
3.Adicione a regra:
1.Resolution: Accessible
2.Rule pattern: javafx/**
4. De “ok's" e aplique a regra

26. package visao;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class OlaMundo extends Application {
public static void main(String[] args) throws IOException {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("/layout/sceneOla.fxml"));
primaryStage.setScene(new Scene(loader.load()));
primaryStage.show();
}
}
A classe ficará assim:
Use o seu arquivo fxml

27. E a execução:

28. Meu primeiro projeto
5. Vamos agora adicionar os controles
Passo 1: Dê nomes aos componentes de interesse

29. Meu primeiro projeto
5. Vamos agora adicionar os controles
Passo 2: Crie a classe para ser o controle da visão
package controle;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
public class ControleSceneOla {
@FXML
private TextField nome;
}
Perceba esse
atributo. Ele está
“conectado" com a
interface.

30. Meu primeiro projeto
5. Vamos agora adicionar os controles
Passo 3: Associe o controle com a visão
package visao;
import java.io.IOException;
import controle.ControleSceneOla;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class OlaMundo extends Application {
public static void main(String[] args) throws IOException {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("/layout/sceneOla.fxml"));
loader.setController(new ControleSceneOla());
primaryStage.setScene(new Scene(loader.load()));
primaryStage.show();
}
}

31. Meu primeiro projeto
6. Agora vamos adicionar os comportamentos que
desejamos
Passo 1: Definir os nomes das funções (no FXML)

32. package controle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Alert;
import javafx.scene.control.TextField;
import javafx.scene.control.Alert.AlertType;
public class ControleSceneOla {
@FXML
private TextField nome;
public void dizerOla(ActionEvent event) {
Alert msg = new Alert(AlertType.INFORMATION);
msg.setContentText("Olá, " + nome.getText());
msg.show();
}
}
Meu primeiro projeto
6. Agora vamos adicionar os comportamentos que
desejamos
Passo 2: Codificar essa função na classe de controle

33. Meu primeiro projeto
Execução:

34. Agora é sua vez
Exercício: programe uma calculadora
com essa interface

35. Que tal um segundo projeto
com mais recursos?
Por exemplo com duas cenas alternado-se.
Passos:
1. Aplicação (classe que estende Application) exibe a cena 1 (não
esqueça de associar o controle da cena)
2. Na cena 1, ao clicar no botão para chamar a cena 2, o controle da
cena 1 faz:
a) Cria a nova cena a associa um objeto controle a ela
b) Esconde a cena atual
c) Mostra a cena 2 e espera ela ser fechada (showAndWait)
d) A cena 2, ao ser fechada, permite que a cena 1 seja novamente
exibida.

36. Que tal um segundo projeto
com mais recursos?
Por exemplo com duas cenas alternado-se.
Passos:
1. Aplicação (classe que estende Application) exibe a cena 1 (não esqueça de
associar o controle da cena)
2. Na cena 1, ao clicar no botão para chamar a cena 2, o controle da cena 1
faz:
a) Cria a nova cena a associa um objeto controle a ela
b) Esconde a cena atual
c) Mostra a cena 2 e espera ela ser fechada (showAndWait)
d) A cena 2, ao ser fechada, permite que a cena 1 seja novamente
exibida.
Dica: injete nos controladores a classe que guarda a cena (Stage)

37. Códigos - Application
package visao;
import java.io.IOException;
import controle.ControleJ1;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Janelas extends Application {
public static void main(String[] args) throws IOException {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("/layout/j1.fxml"));
loader.setController(new ControleJ1(primaryStage));
primaryStage.setScene(new Scene(loader.load()));
primaryStage.show();
}
}

38. Códigos - Controle 1
package controle;
import java.io.IOException;
import javafx.event.ActionEvent;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class ControleJ1 {
private Stage stage;
public ControleJ1(Stage st) {
stage = st;
}
public void ativaJ2(ActionEvent event) {
try {
FXMLLoader l = new FXMLLoader(getClass().getResource("/layout/j2.fxml"));
Stage stage = new Stage();
l.setController(new ControleJ2(stage));
Parent root = l.load();
Scene scene = new Scene(root);
stage.setScene(scene);
this.stage.hide();
stage.showAndWait();
this.stage.show();
} catch (IOException e) {
e.printStackTrace();
}
}
}

39. Códigos - Controle 2
package controle;
import javafx.event.ActionEvent;
import javafx.stage.Stage;
public class ControleJ2 {
private Stage stage;
public ControleJ2(Stage s) {
stage = s;
}
public void ativaJ1(ActionEvent event) {
stage.close();
}
}

40. Visualizando

41. Visualizando

42. Agora é sua vez
Exercício: programe uma interface que use duas ou mais
cenas. Use um dos contextos abaixo:
a) Gerenciamento de contatos
b) Gerenciamento de plantas de um jardim
c) Gerenciamento de turmas de alunos
d) Autenticação para entrada em um sistema com uma
tela de login;
e) Use sua imaginação ou necessidade ….