Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
OpenJFX/JavaFX
Introdução à nova API gráfica do Java
Quem é William
Objetivo do Mini-Curso
Apresentar o JavaFX, a nova API gráfica da
plataforma Java
● História e conceitos básicos
● Apresen...
Conteúdo
● Parte I: Básico e teoria
● Parte II: Conhecendo a API
● Parte III: Criando aplicações
Parte I - Introdução e Teoria
O que é OpenJFX?
O JavaFX é uma API nova para criação de
aplicações gráficas para a plataforma Java;
OpenJFX é o projeto O...
História
● F3 - Chris Oliver
● JavaFX Script 1.0 - 2008
● Oracle compra Sun e anuncia investimentos
pesados no JavaFX - 20...
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á...
Demonstrações
Ensemble e outros exemplos do livro
Exemplos do livro Pro JavaFX Platform 2
Parte II - Prática
● JDK 6+, JavaFX e Scene Builder
disponíveis em:
http://www.oracle.com/technetwork/pt/java/index.html
● Netbeans 7.3
Pré r...
Códigos de Exemplo
+ aprendendo-javafx.blogspot.com
docs.oracle.com/javafx
Criando projetos JavaFX
no Netbeans
File -> New Project
"Olá Mundo"
● Crie o projeto ola-mundo-javafx
● Dentro da classe start, use o seguinte
código:
Text txt = new Text("Olá Mu...
Stage e Scene
● Abstração de teatro: usa os conceitos Palco(Stage) e
Cena(Scene)
● A classe principal sempre herda de java...
Java Plano X Builders
● Usando Java Plano:
Text txt = new Text("Olá Mundo");
txt.setTranslateX(10);
txt.setTranslateY(50);...
Uma visão geral da API
Scene Graph - Elementos hierárquicos do
mesmo tipo: Node
A classe Node
Todos elementos na tela são um javafx.
scene.Node
Propriedades importantes do Node:
● Effect: Permitir adici...
A classe Node: Prática
1. Crie um projeto JavaFX simples e chame de
classe-node
2. Adicione um javafx.scene.layout.Pane à
...
A classe Node: Prática
Imagens e formas
geométricas
Temos diversas formas geométricas no pacote
javafx.scene.shape.
Há diversas formas geométrica...
Imagens e formas
geométricas: Prática
Crie um novo projeto JavaFX chamado
formas-geometricas
Crie diversas figuras geométr...
Imagens e formas
geométricas: Prática
Multimídia
As classes para lidar com vídeo e áudio estão
no pacote javafx.scene.media e você precisar
só conhecer Media, M...
Multímidia: Prática
Mostrar Páginas WEB
JavaFX traz o navegado WebKit e as possibilidades de
trabalhar com páginas nessa plataforma são muitas...
Mostrar páginas: Prática
WebView webView = WebViewBuilder.create().prefHeight(450).prefWidth(1000).build();
webView.getEng...
O Canvas
O Canvas do JavaFX é bastante semelhante
ao Canvas do HTML 5.
Basicamente é um nó com uma área para
desenharmos d...
O Canvas: prática
1. Crie um projeto chamado desenhando-
canvas
2. Na classe principal, crie um Canvas e
adicione ele a um...
O Canvas: prática
Controles de interface
No pacote javafx.scene.control há diversos
controles de interface para serem usados na
criação de G...
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á do...
Campos de Texto e o
Label: Prática
1. Em uma aplicação JavaFX chamada
campos-texto-e-labels, crie um TextField,
uma TextAr...
Campos de Texto e o
Label: Prática
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 per...
Botões: Prática
1. Crie um projeto javafx chamado button-e-
checkbox;
2. Crie botões do tipo Button, CheckBox e
ToggleButt...
Campos de múltipla
escolha
Para uma faixa maior de escolhas,
costumamos usar controles como o ChoiceBox
ou o ComboBox.
Ele...
Tratando eventos
As ações dos usuários devem ser tratadas no código
JavaFX. Isso pode ser feito através de handlers:
Event...
Tratando eventos: Prática
1. Crie um aplicação chamada tratando-
eventos
2. Adicione um elemento de interface, um Text,
e ...
Para organizar os elementos na tela, podemos utilizar
diversas classes que o JavaFX oferece de acordo com o
seu objetivo.
...
Organizando os elementos
VBox e HBox: Alinha os componentes verticalmente e
horizontamente;
StackPane: Empilha um componen...
Componentes de interface
complexos
● TabbedPane: Organiza os elementos em
abas;
● ListView: Apresenta uma lista de
compone...
Efeitos e animações
Cada Node pode receber um efeito através do
método setEffect. Os diversos efeitos estão no
pacote java...
Usando FXML
É possível criar toda a interface em XML e
carregar no nosso código JavaFX e carregar
ela usando um XML.
Para ...
Estilo com CSS
As aplicações JavaFX podem ter toda sua
aparência modificada atráves de arquivos CSS.
Ver exemplos do livro...
Parte III: Criando aplicações
MuseuID: mudeid.com
Aplicação mundo real
Uma aplicação simples
Criação de aplicação usando SceneBuilder
Upcoming SlideShare
Loading in …5
×

Mini Curso JavaFX/OpenJFX

14,764 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×