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.
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
Introdução ao 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;
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
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.
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
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
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)
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 ….