Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Introdução ao JavaFX

10 vues

Publié le

Conceitos e exemplos iniciais sobre o JavaFX

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Introdução ao JavaFX

  1. 1. Nécio de Lima Veras necio.veras@ifce.edu.br Introdução ao JavaFX
  2. 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. 3. Porque JavaFX ? Organização de código; Manutenção rápida e descomplicada; Qualidade gráfica; Conceitos de CSS;
  4. 4. UI Components
  5. 5. Shapes
  6. 6. Provê operações lógicas para criar novos “shapes”
  7. 7. Existem 4 formas de preenchimento de um “shape”
  8. 8. Os padrões de “stroke” podem ser configurados
  9. 9. Controls
  10. 10. Controls
  11. 11. Dialogs and alerts
  12. 12. Existem outros, por exemplo, para solicitar alguma informação
  13. 13. Layout panes
  14. 14. A classe ImageView é responsivo para exibir a imagem na tela; Audio and Image
  15. 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. 16. Charts
  17. 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. 18. FXML Linguagem baseada em XML que define a estrutura e o layout das interfaces com usuário JavaFX;
  19. 19. FXML Linguagem baseada em XML que define a estrutura e o layout das interfaces com usuário JavaFX;
  20. 20. SceneBuilder Um editor WYSIWYG https://www.oracle.com/technetwork/java/javase/downloads/sb2download-2177776.html
  21. 21. Visão geral Scene FXML Control View Model Application
  22. 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. 23. Meu primeiro projeto 3. Usando o SceneBuilder crie sua cena (salve o arquivo “.fxml” no pacote layout do seu projeto). 
 
 Exemplo:
  24. 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. 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. 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. 27. E a execução:
  28. 28. Meu primeiro projeto 5. Vamos agora adicionar os controles
 
 Passo 1: Dê nomes aos componentes de interesse
  29. 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. 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. 31. Meu primeiro projeto 6. Agora vamos adicionar os comportamentos que desejamos
 
 Passo 1: Definir os nomes das funções (no FXML)

  32. 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. 33. Meu primeiro projeto Execução:
  34. 34. Agora é sua vez Exercício: programe uma calculadora com essa interface
  35. 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. 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. 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. 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. 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. 40. Visualizando
  41. 41. Visualizando
  42. 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 ….

×