Mini Curso JavaFX/OpenJFX

13.840 visualizações

Publicada em

Um mini-curso apresentado no Just Java 2013 apresentando as maiores características do JavaFX e o respectivo projeto Open Source: OpenJFX

Publicada em: Tecnologia
0 comentários
13 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
13.840
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7.100
Ações
Compartilhamentos
0
Downloads
251
Comentários
0
Gostaram
13
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Mini Curso JavaFX/OpenJFX

  1. 1. OpenJFX/JavaFX Introdução à nova API gráfica do Java
  2. 2. Quem é William
  3. 3. Objetivo do Mini-Curso Apresentar o JavaFX, a nova API gráfica da plataforma Java ● História e conceitos básicos ● Apresentação das principais classes da API ● Ferramentas e projetos Open Source ● Criação de uma aplicação
  4. 4. Conteúdo ● Parte I: Básico e teoria ● Parte II: Conhecendo a API ● Parte III: Criando aplicações
  5. 5. Parte I - Introdução e Teoria
  6. 6. O que é OpenJFX? O JavaFX é uma API nova para criação de aplicações gráficas para a plataforma Java; OpenJFX é o projeto Open Source do JavaFX que ainda está em processo de abertura de código...
  7. 7. História ● F3 - Chris Oliver ● JavaFX Script 1.0 - 2008 ● Oracle compra Sun e anuncia investimentos pesados no JavaFX - 2010 ● JavaFX 2 se torna puro Java - Início 2011 ● Projeto OpenJFX - Fim 2011 ● JavaFX será parte do Java no Java 8 - Futuro ● Java 9 não terá mais Java Swing...
  8. 8. Visão geral ● A API contém recursos para criar interface gráfica com o usuário, animações, conteúdo multímidia, mostrar páginas WEB, conteúdo 3D, estilizar com CSS, usar XML para a interface... ● É possível também executar JavaFX "embebbed", como em um Raspberry PI, por exemplo; ● Com a versão 2 é possível fazer aplicações 3D, mas isso irá se consolidadar na versão 3; ● JavaFX pode ser distribuído como JAR, empacotamento nativo (exe, rpm, etc), applet ou JNLP
  9. 9. Demonstrações Ensemble e outros exemplos do livro Exemplos do livro Pro JavaFX Platform 2
  10. 10. Parte II - Prática
  11. 11. ● JDK 6+, JavaFX e Scene Builder disponíveis em: http://www.oracle.com/technetwork/pt/java/index.html ● Netbeans 7.3 Pré requisitos
  12. 12. Códigos de Exemplo + aprendendo-javafx.blogspot.com docs.oracle.com/javafx
  13. 13. Criando projetos JavaFX no Netbeans File -> New Project
  14. 14. "Olá Mundo" ● Crie o projeto ola-mundo-javafx ● Dentro da classe start, use o seguinte código: Text txt = new Text("Olá Mundo"); StackPane root = new StackPane(); root.getChildren().add(txt); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Hello World!"); primaryStage.setScene(scene); primaryStage.show();
  15. 15. Stage e Scene ● Abstração de teatro: usa os conceitos Palco(Stage) e Cena(Scene) ● A classe principal sempre herda de javafx. application.Application ● Seu código vai no método start(Stage) ● Todos os atores(componentes da Cena) herdam de javafx.scene.Node ● As classes do JavaFX ficam no jar jfxrt.jar
  16. 16. Java Plano X Builders ● Usando Java Plano: Text txt = new Text("Olá Mundo"); txt.setTranslateX(10); txt.setTranslateY(50); txt.setRotate(30); ● Usando Builders Text txt = TextBuilder.create() .text("Hello World") .translateX(10) .translateY(50) .rotate(30).build();
  17. 17. Uma visão geral da API Scene Graph - Elementos hierárquicos do mesmo tipo: Node
  18. 18. A classe Node Todos elementos na tela são um javafx. scene.Node Propriedades importantes do Node: ● Effect: Permitir adicionar um efeito ao node (veremos mais a frente) ● Rotation: Permitir rotacionar o Node ● visible ● layoutX e layoutY: Posicionamento ● on* e
  19. 19. A classe Node: Prática 1. Crie um projeto JavaFX simples e chame de classe-node 2. Adicione um javafx.scene.layout.Pane à Scene e um javafx.scene.text.Text 3. Text é um __________? 4. Mude as propriedades do Text, brinque com as propriedades, explore a API
  20. 20. A classe Node: Prática
  21. 21. Imagens e formas geométricas Temos diversas formas geométricas no pacote javafx.scene.shape. Há diversas formas geométricas que podem ser usadas e todas herdam de javafx.scene. shape.Shape No JavaFX é também muito fácil mostrar imagens através das classes javafx.scene. image.ImageView e javafx.scene.image. Image
  22. 22. Imagens e formas geométricas: Prática Crie um novo projeto JavaFX chamado formas-geometricas Crie diversas figuras geométricas explorando o pacote javafx.scene.shape e adicione imagens javafx.scene.image Exemplos de classes de figuras geométricas: Rectangle, Circle...
  23. 23. Imagens e formas geométricas: Prática
  24. 24. Multimídia As classes para lidar com vídeo e áudio estão no pacote javafx.scene.media e você precisar só conhecer Media, MediaView e MediaPlayer para tocar um vídeo. O áudio é ainda mais fácil, pois você só precisa de duas linhas de código usando a classe AudioClip A classe que representa um nó do vídeo é a MediaView, ou seja, você pode rotacionar, adicionar efeito, mover, entre outros, somente usando essa classe
  25. 25. Multímidia: Prática
  26. 26. Mostrar Páginas WEB JavaFX traz o navegado WebKit e as possibilidades de trabalhar com páginas nessa plataforma são muitas! A API para web, no entanto, é muito simples. Precisamos das classes que estão no pacote javafx.scene.web, principalmente a classe WebView Vamos nos limitar a mostrar uma página simples, pois esse assunto é bastante extenso. Os tópicos vão além de simplesmente mostrar uma página, mas também cobrem manipulação da DOM da página, execução de scripts JavaScript, eventos da páginas, entre muitos outros... Explorem a API após o curso!
  27. 27. Mostrar páginas: Prática WebView webView = WebViewBuilder.create().prefHeight(450).prefWidth(1000).build(); webView.getEngine().load("http://www.redhat.com");
  28. 28. O Canvas O Canvas do JavaFX é bastante semelhante ao Canvas do HTML 5. Basicamente é um nó com uma área para desenharmos dentro. As classes do Canvas estão no pacote javafx.scene.canvas e as principais classes são o próprio Canvas, que é o nó a ser adicionado, e o GraphicsContext, onde você vai poder desenhar e manipular o canvas...
  29. 29. O Canvas: prática 1. Crie um projeto chamado desenhando- canvas 2. Na classe principal, crie um Canvas e adicione ele a um elemento da Scene, assim podemos ver ele na aplicação 3. Pegue o GraphicContext e faça coisas randômicas no canvas, como desenhar retângulos, círculos, etc
  30. 30. O Canvas: prática
  31. 31. Controles de interface No pacote javafx.scene.control há diversos controles de interface para serem usados na criação de GUI: Graphical User Interface. Todo controle de interface herda de javafx. scene.control.Control, mas há uma variedade gigantes de controles: campos de texto, botões, lista, tabelas, entre muitos outros...
  32. 32. Campos de Texto e o Label Campos de texto permitem que o usuário entre com texto para serem lidos por sua aplicação. Há dois principais campos de texto: TextArea, para entrada de textos longos e TextField, para entrada de textos simples. Textos informativos, estáticos, podem ser adicionado à aplicação atráves do Label.
  33. 33. Campos de Texto e o Label: Prática 1. Em uma aplicação JavaFX chamada campos-texto-e-labels, crie um TextField, uma TextArea e Labels para informar do que se trata o campo. 2. Adicione tudo a uma scene organizando os componentes verticalmente. Para isso explore a classe VBox
  34. 34. Campos de Texto e o Label: Prática
  35. 35. Botões Para que o usuário possa exercer uma ação sobre uma aplicação JavaFX, a API disponibiliza vários botões. Alguns permitem um simples clique, como o Button, outros são para escolha de valores boleanos, como o CheckBox e o ToggleButton. RadioButtons permite que se escolha uma opção entre várias. Eles devem pertencer a um grupo chamado ToggleGroup.
  36. 36. Botões: Prática 1. Crie um projeto javafx chamado button-e- checkbox; 2. Crie botões do tipo Button, CheckBox e ToggleButton; 3. Crie um grupo para ComboButton e adiciona alguns à uma HBox 4. Usando uma VBox, adicione todos os componentes anteriores (inclusive a HBox) e em seguido adiciona ela à Scene.
  37. 37. Campos de múltipla escolha Para uma faixa maior de escolhas, costumamos usar controles como o ChoiceBox ou o ComboBox. Eles nos permitem adicionar diversos valores e o usuário escolher somente um dentre vários.
  38. 38. Tratando eventos As ações dos usuários devem ser tratadas no código JavaFX. Isso pode ser feito através de handlers: EventHandler. A classe Event representa o evento O que temos que fazer é chamar um método do controle, o qual queremos tratar os eventos, e informar uma inner class que implementa uma interface específica.Nela, iremos implementar um método que será invocado de acordo com o hadndler que você adicionou, exemplos: no click, quando o usuário passa o cursor em cima, quando há uma ação no componente. As ações estão no nó, ou seja, todos os elementos de uma aplicação JavaFX podem ter as ações do usuário tratadas.
  39. 39. Tratando eventos: Prática 1. Crie um aplicação chamada tratando- eventos 2. Adicione um elemento de interface, um Text, e adicione vários handlers do tipo EventHandler usando os métodos correspondentes: text.setOn* 3. Na implementação do método, escreva algo na tela
  40. 40. Para organizar os elementos na tela, podemos utilizar diversas classes que o JavaFX oferece de acordo com o seu objetivo. Todos os elementos que são utilizados para organizar elementos recebem outros elementos, suas "Children". Adicionamentos os elementos pelo método getChildren(). add. Esse método getChildren retorna a lista de elementos e podemos manipular a mesma que as mudanças refletem na interface. Os organizadores de layout estão no pacote javafx.scene. layout e eles também são um Node. Organizando os elementos
  41. 41. Organizando os elementos VBox e HBox: Alinha os componentes verticalmente e horizontamente; StackPane: Empilha um componente sobre o outro; BorderPane: Divide os elementos em regiões e coloca um componente em cada uma desses regiões FlowPane: Ajeita os componentes de acordo com uma orientação e com o fluxo da aplicação; GridPane: Cria uma grade com os componentes. É possível informar qual a posição do componente na grade. Veja eles em ação nos projetos correspontes do blog aprendendo-javafx.
  42. 42. Componentes de interface complexos ● TabbedPane: Organiza os elementos em abas; ● ListView: Apresenta uma lista de componentes; ● TreeView: Para organizar elementos hierarquicos como árvore; ● TableView: apresenta uma lista em uma tabela;
  43. 43. Efeitos e animações Cada Node pode receber um efeito através do método setEffect. Os diversos efeitos estão no pacote javafx.scene.control. Para mover elementos na tela, temos diversas classes no pacote javafx.animation. A Timeline permite animar elementos e as classes que herdam de Transition permitem que alteremos uma propriedade de acordo com o tempo
  44. 44. Usando FXML É possível criar toda a interface em XML e carregar no nosso código JavaFX e carregar ela usando um XML. Para gerar o XML usamos a ferramenta SceneBuilder. Os elements do XML podem ser injetados em uma classe Java usando anotações. Demonstração e código
  45. 45. Estilo com CSS As aplicações JavaFX podem ter toda sua aparência modificada atráves de arquivos CSS. Ver exemplos do livro Pro JavaFX Platform 2
  46. 46. Parte III: Criando aplicações
  47. 47. MuseuID: mudeid.com Aplicação mundo real
  48. 48. Uma aplicação simples Criação de aplicação usando SceneBuilder

×